​

function setup() {

  createCanvas(windowWidth,windowHeight);

  // colorMode default is RGBA all values 0-255

  colorMode(HSB) // hsba ranges 360,100,100,1.0

  for(let i =0; i<1; i++){

    boxes[i] = new Box(random(width),random(height),random(10,250),random(360),random(50,100),random(50,100));

    //console.log(boxes[i].r)

  }

}

​

​

​

​

​

function draw() {

  background(255);

  for(let i =0; i<boxes.length; i++){

    boxes[i].show()

    boxes[i].move()

    // if(mouseIsPressed){

    //   boxes[i].move()

    // }  

  }

}

​

​

​

​

​

​

​

​

function mousePressed(){

  boxes.push(new Box(mouseX,mouseY,random(10,250),random(360),random(50,100),random(50,100)));

}

​

function keyPressed(){

  //boxes.splice(boxes.length-1,1)

  let target = round(random(boxes.length-1))

  boxes.splice(target,1)

}

​

​

class Box{

  constructor (x,y,s,r,g,b){

    this.x = x

    this.y = y

    this.s = s

    this.r = int(r)

    this.g = int(g)

    this.b = int(b)

    this.a = .5;

  }

  show(){

    rectMode(CENTER);

    noStroke()

    fill (this.r, this.g,this.b,this.a);

    rect(this.x,this.y,this.s,this.s)

  }

  move(){

    this.x = this.x + random(-.91,.91);

    this.y = this.y + random(-.95,.95);

  }

}