xxxxxxxxxx
80
//set up empty variables and arrays
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);
}