​

​

function setup() {

  createCanvas(600, 400);

    colorMode(RGB);

   background(90,90,450,151);

  text('  Press the arrows to stop faces ', 10, 70);

  text('    click the screen to show more faces ', 10, 100);

​

  for (var i = 0; i < 4; i++) {

    bubbles[i] = new Bubble(); 

  }

}

​

function draw() {

  for (var i = 0; i < bubbles.length; i++) {

    bubbles[i].move();

    bubbles[i].display(); 

    variableEllipse(mouseX, mouseY, pmouseX, pmouseY);

}

​

function variableEllipse(x, y, px, py) {

  let speed = abs(x /px) + abs(y - py);

  stroke(0);

  ellipse(x, y,26, speed);

​

  }

}

​

​

​

function Bubble(){

  this.x = random(0, width);

  this.y = random(0, height);

  let r = random(300);

  let g = random(300);

  let b = random(300);

​

​

  this.display = function() {

    if (keyCode === UP_ARROW) 

   stroke(255);

    strokeWeight(1);

   fill(r, g, b, 200);

    ellipse(this.x, this.y, 24, 24);

    ellipse(this.x+10,this.y+10,24,24);

    ellipse(this.x+30,this.y+10,24,124);

    ellipse(this.x+30,this.y-10,24,24);

    ellipse(this.x+20,this.y-10,124,214);

    ellipse(this.x+35,this.y-15,24,74);

    ellipse(this.x+50,this.y+10,64,24);

    ellipse(this.x+10,this.y-50,24,24);

    ellipse(this.x+70,this.y-50,24,24);

    ellipse(this.x+10,this.y-30,24,24);

    ellipse(this.x+70,this.y-30,24,24);

    ellipse(this.x+40,this.y+60,44,44);

     push()  

  fill(r, g, b, 10);

  pop()

  }

  this.move = function() {

    this.x = this.x += 1 ;

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

    if(this.x >= width){

    this.x = 0;

    }

  }

}

​

​

function mouseClicked(){

  bubbles.push(new Bubble());

}

​

function keyPressed(){

  bubbles.splice(Bubble.length-1,1);

}