const maxCircleSize = 15;

const minCircleSize = 5;

let circleSize = 5;

​

// trail variables

const trails = [];

const trailLength = 20;

​

class trailObject {

  constructor(position, size){

    this.position = position;

    this.size = size;

  }

}

​

// call this to update the trail

function updateTrail(){

  if(trails.length == trailLength){ // should remove one

    trails.shift(); 

  }  

  // create trail object to insert

  let trailObj = new trailObject(createVector(mouseX, mouseY), circleSize);

  trails.push(trailObj);

}

​

// draws trail; call BEFORE update trail to ensure current circle not drawn again

function drawTrail(){

  for(let i = 0; i < trails.length; i++){

    let trailObj = trails[i];

    // draw 

    circle(trailObj.position.x, trailObj.position.y, trailObj.size);

  }

}

​

// p5.js events (setup, draw)

function setup() {

  createCanvas(400, 400);

}

​

function draw() {

  background(222, 222, 222); // background drawn every frame!

  // update circleSize

  circleSize++;

  if(circleSize > maxCircleSize){

    circleSize = minCircleSize;

  }

  // draw stuff

  drawTrail();

  circle(mouseX, mouseY, circleSize);

  // update stuff (the restraint to not comment "Update Trail")

  updateTrail();

}