// 

// Jon E. Froehlich

// https://jonfroehlich.github.io/

//

let xCircle = 0;

let yCircle = 0;

​

function setup() {

  createCanvas(800, 600);

  background(20);

  // Switch color mode to HSB rather than RGB

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

  colorMode(HSB, 360, 100, 100, 1);

  noStroke();

  xCircle = width / 2;

  yCircle = height / 2;

}

​

function draw() {

  // Do *not* erase the background on ever draw pass

  // background(220);

  // Map the x-location of the circle to a color

  let hue = map(xCircle, 0, width, 0, 360);

  // Set the paintbrush color

  fill(hue, 70, 100, 0.2);

  // Move the circle points

  let xPrev = xCircle;

  let yPrev = yCircle;

  let maxRandHalf = 50;

  xCircle += random(-maxRandHalf, maxRandHalf);

  yCircle += random(-maxRandHalf, maxRandHalf);

  // If the circle points are off the screen, move them to the center

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

    xCircle = width / 2;

  }

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

    yCircle = height / 2;

  }

  // Set the diameter of the circle based on travel distance

  let diam = dist(xCircle, yCircle, xPrev, yPrev);

  // Draw the circle

  circle(xCircle, yCircle, diam);

}