//

// See simpler version:

// https://editor.p5js.org/jonfroehlich/sketches/QgAB3MkWU

//

// By Jon Froehlich

// http://makeabilitylab.io

// 

// See:

//  - https://medium.com/comsystoreply/introduction-to-p5-js-9a7da09f20aa

//  - https://learning.oreilly.com/library/view/make-getting-started/9781457186769/ch08.html#motion

​

​

let position;

let maxSpeed = 15;

let minDiameter = 15;

let maxDiameter = 50;

let hue = 0;

​

function setup() {

  createCanvas(400, 400);

  position = createVector(width / 2, height / 2);

​

  // https://p5js.org/reference/#/p5/colorMode

  colorMode(HSB); // hue is 0-360, sat is 0-100, brightness is 0-100, alpha is 0-1

  background(204);

  noStroke();

}

​

function draw() {

  // we don't call background here, so our previous paintbrush marks stay

​

  hue = frameCount % 360;

  fill(hue, 90, 80, random(0.1, 1));

​

  position.x += random(-maxSpeed, maxSpeed);

  position.y += random(-maxSpeed, maxSpeed);

  let diameter = random(minDiameter, maxDiameter);

  ellipse(position.x, position.y, diameter);

​

  // check for offscreen

  let radius = diameter / 2;

  if (position.x - radius < 0) {

    position.x = radius;

  } else if (position.x + radius > width) {

    position.x = width - radius;

  }

​

  if (position.y - radius < 0) {

    position.y = radius;

  } else if (position.y + radius > height) {

    position.y = height - radius;

  }

​

}

​

function mousePressed() {

  position.x = mouseX;

  position.y = mouseY;

}