var x = 20;

var y = 20;

var s = 30;

​

//ball 1

let ellipse1; 

var x1 = 0;

var y1 = 200;

var speed1 = 1;

var speedY1 = 4;

​

//ball 2

let ellipse2; 

var x2 = 0;

var y2 = 360;

var speed2 = 4;

var speedY2 = 4;

​

//ball 3

let ellipse3; 

var x3 = 78;

var y3 = 20;

var speed3 = 3;

var speedY3 = 4;

​

//ball4 

let ellipse4; 

var x4 = 1;

var y4 = 240;

var speed4 = 3; 

var speedY4 = 4; 

​

//ball5

let ellipse5; 

var x5 = 90;

var y5 = 321;

var speed5 = 3;

var speedY5 = 4; 

​

let circleSize = 40;

let counter = 0;

let a = 0.0;

let sca = 0.0;

​

//-----------------------------------------------------//

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

 background(200);

  a = a + 0.04;

  sca = cos(a) * 2;

//original rect 

  noStroke();

  fill(255);

  rect(x, y, s, s);

//if mouse hover over the rect, circle changes

  if ((mouseX > x) && (mouseX < x + s) && (mouseY > y) && (mouseY < y + s)) {      

    noFill();

    stroke(57, 255, 20);

    strokeWeight(5);

    rect(x-5, y-5, s+10, s+10);

    fill(61, 90, 128);

    noStroke();

    ellipse1();

    fill(238, 108, 77);

    noStroke();

    ellipse2();

    fill(224, 251, 252);

    noStroke();

    ellipse3();

    fill(152, 193, 217);

    noStroke();

    ellipse4();

    fill(41, 50, 65);

    noStroke();

    ellipse5(); 

  }

  function ellipse1(){

    ellipse(x1, y1, (circleSize * cos(a) * 2) + 20);

    x1 += speed1;

    y1 += speedY1;

​

    if (x1 > width || x1 < 0) {

        speed1 *= -1;

    }

    // if the ball hits the top or the bottom, change the direction of the ball     

    if (y1 > height || y1 < 0) {

        speedY1 *= -1;

    } 

}

//ball2

function ellipse2() {

    ellipse(x2, y2, (circleSize * cos(a) * 2) + 10);

    x2 += speed2;

    y2 += speedY2;

​

    if (x2 > width || x2 < 0) {

        speed2 *= -1;

    }

    // if the ball hits the top or the bottom, change the direction of the ball     

    if (y2 > height || y2 < 0) {

        speedY2 *= -1;

    }

}

//ball3

function ellipse3(){

    ellipse(x3, y3, 40, 40);

    x3 += speed3;

    y3 += speedY3;

​

    if (x3 > width || x3 < 0) {

        speed3 *= -1;

    }

    // if the ball hits the top or the bottom, change the direction of the ball     

    if (y3 > height || y3 < 0) {

        speedY3 *= -1;

    }

}

//ball4

function ellipse4(){

    ellipse(x4, y4, 40, 40);

    x4 += speed4;

    y4 += speedY4;

​

    if (x4 > width || x4 < 0) {

        speed4 *= -1;

    }

    // if the ball hits the top or the bottom, change the direction of the ball     

    if (y4 > height || y4 < 0) {

        speedY4 *= -1;

    }

}

//ball5

function ellipse5(){

    ellipse(x5, y5, (circleSize * cos(a) * 2) + 60);

    x5 += speed5;

    y5 += speedY5;

​

    if (x5 > width || x5 < 0) {

        speed5 *= -1;

    }

    // if the ball hits the top or the bottom, change the direction of the ball     

    if (y5 > height || y5 < 0) {

        speedY5 *= -1;

    }

}

}

​

​

​