function coalball(px, py, offset, dr, a, hue) {

  (this.px = px),

    (this.py = py),

    (this.offset = offset),

    (this.dr = dr),

    (this.a = a),

    (this.hue = hue);

}

​

// initialize the array of coalballs

let coalballs = [];

// initialize the max amount of circles

let max = 50;

// initialize the variable for changing color

let hue = 100;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(40);

}

​

function draw() {

  background(0);

  // write the instruction at the right bottom

  instructions();

  // create the new arrays of coalballs

  createNewCoalballs(coalballs);

  // draw the arrays of coalballs

  drawCoalballs(coalballs);

}

​

function drawCoalball(coalball) {

  push();

  translate(coalball.px, coalball.py);

  colorMode(HSB,100);

  stroke(coalball.hue,60,100, coalball.a);

  noFill();

  // draw the noise loop

  beginShape();

  for (let a = 0; a < TWO_PI + 0.1; a += 0.15) {

    let r = random(150, 150 - coalball.dr);

    let x = r * cos(a);

    let y = r * sin(a);

    vertex(x, y);

  }

  endShape();

  pop();

}

​

function drawCoalballs(coalballs) {

  // when the length hasn't reached the max amount, everyone has to be drawn

  if (coalballs.length < max) {

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

      drawCoalball(coalballs[i]);

    }

  } else {

    for (let i = 0; i < max; i++) {

      drawCoalball(coalballs[i]);

    }

  }

}

​

function createNewCoalballs(coalballs) {

  // push the new coalball at the first position of array

  coalballs.unshift(new coalball(mouseX, mouseY, 0.1, 20, 100,hue));

​

  if (coalballs.length < max) {

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

      coalballs[i].a = 255 - (i * 255) / max;

      //coalballs[i].hue = hue;

    }

  } else {

    for (let i = 0; i < max; i++) {

      coalballs[i].a = 255 - (i * 255) / max;

      //coalballs[i].hue = hue;

    }

  }

}

​

function instructions(){

  push();

  textSize(10);

  fill(255);

  text('press [ or ] to change the color hue', width-200, height-50);

  pop();

}

​

// use keyboard to control the value of hue for stroke

function keyTyped() {

  if (key === '[') {

    if(hue>=0){

      hue -= 5;

    }

  } else if (key === ']') {

    if(hue<=100){

      hue += 5;

    }

  }

  console.log(hue);

}