var totalFrames, fc;

var latestClick;

var i, j;

var x, y;

var clicks = [];

​

​

function setup() {

    //set appearance and animation settings

    createCanvas(windowWidth,windowHeight);

    frameRate(24);

    //starting points for the replay loop

    i = 0;

    j = 0;

    x = width/2;

    y = height/2;

}

​

​

function draw() {

  // set background colour

    background(25);

​

    // on every click, draw a red circle where the cursor is

    if (mouseIsPressed) {

        stroke(255, 0, 0);

        fill(255, 0, 0, 127);

        ellipse(mouseX, mouseY, 50, 50);

    }

​

    // while spacebar is held down...

    if (keyIsDown(32)) {

​

        // find the number of frames in the 'recording' (captured with the 2 functions at the bottom)

        totalFrames = max(clicks);

​

        // set up a new frame count, using modulo to get a recurring loop from 1-totalFrames

        // e.g. i increases by 1 with each draw() loop, until it reaches the the last frame - then resets to 1

        fc = i % totalFrames + 1;

​

      // iterate through the list of click times -

        if (fc === clicks[j]) {

​

            // each time it matches the playback frame count, draw a bigger green circle...

            stroke(0, 255, 0);

            fill(0, 255, 0, 127);

            ellipse(width/2, height/2, 200, 200);

​

            //increase the click loop by 1, reset when it reaches the last value

            j++;

            if (j > clicks.length-1) {

                j = 0;

            }

        }

​

        //increase the frame count by 1, reset when it reaches the last frame recorded

        i++;

        if (i > totalFrames) {

            i = 0;

        }

    }

}

​

​

//when mouse is pressed...

function mousePressed() {

    //save the current frame number

    latestClick = frameCount;

​

    //add the frame number to a list of recorded clicks

    clicks.push(latestClick);

}

​

​

​