var dy; // variable to change the y position of our shapes

var w = 20;

var h = 20;

var x0 = 0;

var y0 = 200;

var speed = 1;

var toggle = 0;

var dir = 1;

​

function setup() {

  createCanvas(500, 500);

  dx = 0; // initialize the delta x to 0

  dy = 0; // initialize the delta y to 0

}

​

function draw() {

  background(0);

​

  // Draw circle

  var x = dx - w + x0;

  var y = dy - h + y0;

  ellipse(x, y, w, h);

​

  // dx += speed;

  // Select direction

  if (toggle == 0) {

    dx += speed;

  } else if (toggle == 1) {

    dy += speed;

  } else {

    dx += speed;

    dy += speed;

  }

​

​

  // Choose a random starting position when shape reaches edge of canvas

  if (x > width + w || y > height + h || x < -w || y < -h) {

​

    var select = random(0, 10);

    var start = random(0, 10);

​

    if (select < 5) {

      toggle = 0;

      y0 = random(h, height);

      if (start < 5) {

        dx = 0;

        dir = 1;

      } else if (start > 5) {

        dx = width;

        dir = -1;

      } else {

        dx = width / 2;

      }

    } else if (select > 5) {

      toggle = 1;

      x0 = random(w, width);

      if (start < 5) {

        dy = 0;

        dir = 1;

      } else if (start > 5) {

        dy = height;

        dir = -1;

      } else {

        dy = height / 2;

      }

    } else toggle = 2;

​

    speed = dir * random(1, 3);

  }

​

  // console.log(x + ", " + y);

}