sketch03

// creating variables for the x and y location of the circle, initializing them at 50 pixels
var x = 50,
  y = 50;
// creating variable for the speed of each direction
var speedX = 2,
  speedY = 3;

function setup() {
  createCanvas(800, 600);
}

function draw() {
  // drawing the background each frame to get an animation effect
  background(150);
  // drawing an ellipse at the current x and y location
  ellipse(x, y, 50);
  // moving the circle along the x and y axis according to their respective speeds
  x = x + speedX;
  y = y + speedY;

  // if the circle is at the right border then change its horizontal direction
  if (x > width) {
    speedX = -speedX;
  }
  // if the circle is at the left border then change its horizontal direction
  if (x < 0) {
    speedX = -speedX;
  }
  // if the circle is at the bottom then change its vertical direction
  if (y > height) {
    speedY = -speedY;
  }
  // if the circle is at the left border then change its vertical direction
  if (y < 0) {
    speedY = -speedY;
  }

  // idea: comment out background
  // idea: make the size of the circle random
}