​

// HOW TO

// press r to record mouse-drawing.

// when you press r, "recording." will be printed

// into the console (below the editor text window)

//

// to stop recording, press r again.

// It will say "recording stopped" inside the console.

//

​

// to play back a recording, press p 

// after your recording has stopped.

//

// to clear the canvas, press SPACE

​

let colorPalette;

let fg;

let recording;

let isRecording;

let isPlayback;

let frameCountRef;

let sizeOfCircle;

​

function setup() {

  createCanvas(windowWidth, windowHeight,WEBGL);

  background(40);

​

  colors = [];

  colors.push(color(255, 190, 11));

  colors.push(color(251, 86, 7));

  colors.push(color(255, 0, 110));

  colors.push(color(131, 56, 236));

  colors.push(color(58, 134, 255));

​

  fg = random(colors);

  fill(fg);

  ellipse(0,0, width / 4, width / 4);

  isRecording = false;

  isPlayback = false;

  recording = [];

}

​

function draw() {

  push();

  translate(-width/2, -height/2);

  if(isPlayback) {

    background(40);

    translate(width/2, height/2);

    rotateY(frameCount*0.01);

    translate(-width/2, -height/2);

    let len = recording.length;

    for(let i=0;i<(frameCount-frameCountRef)%len;i++) {

      let o = recording[i];

      push();

      translate(o.x,o.y,(i-len/2)*0.4);

      fill(o.color);

      ellipse(0,0,o.size);

      pop();

    }

  } else {

  sizeOfCircle = ((pmouseX - mouseX) + (pmouseY - mouseY)) + 20;

  fill(fg);

  noStroke();

  ellipse(mouseX, mouseY, sizeOfCircle, sizeOfCircle);

  }

  push();

}

​

function mousePressed() {

  fg = random(colors);

}

​

function mouseMoved() {

  if (isRecording) {

    recording.push({

      x: mouseX,

      y: mouseY,

      size: sizeOfCircle,

      color: fg

    });

  }

}

​

function keyPressed() {

  if (key == ' ') {

    background(40); 

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

    isRecording = !isRecording;

    console.log(isRecording ? "recording.":"recording stopped.");

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

    isRecording = false;

    isPlayback = true;

    frameCountRef = frameCount;

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

    isPlayback = false;

  }

}