var timerValue = 20;
var startButton;
circleX = 0;
let p;
function setup() {
createCanvas(800, 450);
textAlign(CENTER);
setInterval(timeIt, 1000);
}
function draw() {
background(0);
if (timerValue > 10 && timerValue <= 20) {
for (var y = 0; y <= height; y = y + 40) {
fill(255, 0, 0); // red fill
circle(circleX + 800, y, 50);
fill(0, 255, 255); // green fill
circle(circleX + 850, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX + 900, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX + 950, y, 50);
fill(255, 0, 0); // red fill
circle(circleX + 600, y, 50);
fill(0, 255, 255); // green fill
circle(circleX + 650, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX + 700, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX + 750, y, 50);
fill(255, 0, 0); // red fill
circle(circleX + 400, y, 50);
fill(0, 255, 255); // green fill
circle(circleX + 450, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX + 500, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX + 550, y, 50);
fill(255, 0, 0); // red fill
circle(circleX + 200, y, 50);
fill(0, 255, 255); // green fill
circle(circleX + 250, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX + 300, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX + 350, y, 50);
fill(255, 0, 0); // red fill
circle(circleX, y, 50);
fill(0, 255, 255); // green fill
circle(circleX + 50, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX + 100, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX + 150, y, 50);
fill(255, 0, 0); // red fill
circle(circleX - 200, y, 50);
fill(0, 255, 255); // green fill
circle(circleX - 150, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX - 100, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX - 50, y, 50);
fill(255, 0, 0); // red fill
circle(circleX - 400, y, 50);
fill(0, 255, 255); // green fill
circle(circleX - 350, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX - 300, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX - 250, y, 50);
fill(255, 0, 0); // red fill
circle(circleX - 600, y, 50);
fill(0, 255, 255); // green fill
circle(circleX - 550, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX - 500, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX - 450, y, 50);
fill(255, 0, 0); // red fill
circle(circleX - 800, y, 50);
fill(0, 255, 255); // green fill
circle(circleX - 750, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX - 700, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX - 650, y, 50);
fill(255, 0, 0); // red fill
circle(circleX - 1000, y, 50);
fill(0, 255, 255); // green fill
circle(circleX - 950, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX - 900, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX - 850, y, 50);
fill(255, 0, 0); // red fill
circle(circleX - 1200, y, 50);
fill(0, 255, 255); // green fill
circle(circleX - 1150, y, 50);
fill(0, 0, 255); // blue fill
circle(circleX - 1100, y, 50);
fill(255, 0, 255); // purple fill
circle(circleX - 1050, y, 50);
}
}
circleX = circleX + 1.5;
for (x = 0; x <= width; x = x + 40) {
if (timerValue > 5 && timerValue <= 10) {
for (var y = 0; y <= height; y = y + 40) {
fill(255, 0, 0); // red fill
ellipse(x, y, 40, 40);
fill(0, 255, 255); // green fill
ellipse(x, y, 30, 30);
fill(0, 0, 255); // blue fill
ellipse(x, y, 20, 20);
fill(255, 0, 255); // purple fill
ellipse(x, y, 10, 10);
}
for (var y = 0; y <= height; y = y + 40) {
fill(255, 0, 0); // red fill
ellipse(x + 20, y, 40, 40);
fill(0, 255, 255); // green fill
ellipse(x + 20, y, 30, 30);
fill(0, 0, 255); // blue fill
ellipse(x + 20, y, 20, 20);
fill(255, 0, 255); // purple fill
ellipse(x + 20, y, 10, 10);
}
for (var y = 0; y <= height; y = y + 60) {
fill(255, 0, 0); // red fill
ellipse(x + 20, y, 40, 40);
fill(0, 255, 255); // green fill
ellipse(x + 20, y, 30, 30);
fill(0, 0, 255); // blue fill
ellipse(x + 20, y, 20, 20);
fill(255, 0, 255); // purple fill
ellipse(x + 20, y, 10, 10);
}
}
}
if (timerValue >= 20) {
text("0:" + timerValue, width / 2, height / 2);
}
if (timerValue < 10) {
text("0:0" + timerValue, width / 2, height / 2);
}
if (timerValue <= 5) {
for (var x = 0; x <= width; x += 40) {
for (var y = 0; y <= height; y += 40) {
fill(random(255), 0, random(255));
ellipse(x, y, 25, 25);
}
}
}
if (timerValue == 0) {
set((timerValue = 20));
}
}
function timeIt() {
if (timerValue > 0) {
timerValue--;
}
}