createCanvas(800, 800, WEBGL);

  describe("a white sphere with black wireframe lines");

  noStroke();

  frameRate(30);

  // Set the starting position of the shape

  xpos = width / 2;

  ypos = height / 2;

}

​

let noiseScale = 0.02;

let rad = 60; // Width of the shape

let xpos, ypos; // Starting position of shape

​

let xspeed = 5; // Speed of the shape

let yspeed = 5; // Speed of the shape

​

let xdirection = 3; // Left or Right

let ydirection = 1; // Top to Bottom

​

​

​

function draw() {

  background(240, mouseX, 185);

  noStroke();

  let locX = mouseX - width / 2;

  let locY = mouseY - height / 3;

  ambientLight(160, 80, 60);

  pointLight(255, 255, 255, locX, locY, 50);

  specularMaterial(50);

  shininess(25);

  fill(mouseY, mouseX, mouseX * noiseScale);

  sphere(100);

  // Update the position of the shape

  xpos = xpos + xspeed * xdirection;

  ypos = ypos + yspeed * ydirection;

​

  // Test to see if the shape exceeds the boundaries of the screen

  // If it does, reverse its direction by multiplying by -1

  if (xpos > width - rad || xpos < rad) {

    xdirection *= -1;

  }

  if (ypos > height - rad || ypos < rad) {

    ydirection *= -3;

  }

​

  // Draw the shape

  fill('blue');

  ellipse(xpos, ypos, rad, rad);

​

}