let x, y;

let z, f;

​

​

// rates of change for position of ball

let xspeed, yspeed;

let zspeed, fspeed;

​

function setup() {

  createCanvas(400, 400);

​

  // initialize position and width of ball

  x = width / 2;

  y = height / 2;

  z = width/4;

  f = height / 4;

​

​

  // initialize rates of change for position and width of ball

  xspeed = 1.7;

  yspeed = 1.3;

  zspeed = -.6;

  fspeed = 1.8;

}

​

function draw() {

​

  background(220);

​

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

    // Turn around in the x-dimension

    xspeed *= -1

  }

​

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

    // Turn around in the y-dimension

    yspeed *= -1;

  }

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

    // Turn around in the x-dimension

    zspeed *= -1

  }

​

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

    // Turn around in the y-dimension

    fspeed *= -1;

  }

​

​

  // MOVE THE ELLIPSE

  x = x + xspeed; // x++ --> x--

  y = y + yspeed;

  z = z + zspeed; // x++ --> x--

  f = f + fspeed;

​

  // DRAW THE ELLIPSE

  ellipse(x, y, 20, 20);

  ellipse(z, f, 20, 20);

}