html,
body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

let b
let eyes = []
let N = 50


function setup() {
  createCanvas(600, 600);
  colorMode(HSB)
  //background("black")
  while (eyes.length < N) {
    // add eyes to the array
    eyes.push(new ball (random(10,50), random(50,200), random(50,200), random(-4,4), random(-4,4)))
  }
}

function draw() {
  background("black");
  // loop through array to display
  for (i = 0; i < eyes.length; i++) {
    eyes[i].display()
    eyes[i].update()
    eyes[i].wallCollide()
  }
  
  if (isKeyPressed) {
    background("black")
  }
}

class ball {
  constructor (size, x, y, speedX, speedY){
    this.size = size
    this.x = x
    this.y = y
    this.speedX = speedX
    this.speedY = speedY
    this.pupilSize = size * random(0.5, 0.75)
    this.hue = random(0,360)
    this.eyeRadius = random(0, this.pupilSize/3)
    this.eyeAngle = random(0,360)
  }
  display(){
    //stroke(this.hue, 100, 100)
    stroke("black")
    fill("white")
    circle(this.x, this.y, this.size)
    fill(this.hue, 100, 100)
    circle(this.x + this.eyeRadius*sin(this.eyeAngle), this.y + this.eyeRadius*cos(this.eyeAngle), this.pupilSize)
    fill("black")
    circle(this.x + this.eyeRadius*sin(this.eyeAngle), this.y + this.eyeRadius*cos(this.eyeAngle), this.size/3)
    fill("white")
    stroke("white")
   circle(this.x + this.eyeRadius*sin(this.eyeAngle), this.y + this.eyeRadius*cos(this.eyeAngle), this.size/10)
  }
  
  update() {
    this.x += this.speedX
    this.y += this.speedY
  }
  
  wallCollide() {
    if (this.x < this.size/2 || this.x > width - this.size/2) {
      this.speedX = -this.speedX
    } else if (this.y < this.size/2 || this.y > height - this.size/2) {
      this.speedY = -this.speedY
    }
  }
}