different scenes with different animation won't play in p5 - p5.js

Question

for school we need to make a sequence of animations in p5.
I wrote the code below, but it doesn't show any of my animations.
please help me...
let currentScene = 0;
let prevTime = 0;
let interval1 = 5000;
let interval2 = 8500;
let interval3 = 10000;
let interval4 = 11500;
let interval5 = 13000;
let interval6 = 15500;
let interval7 = 18000;
let interval8 = 20500;
let interval9 = 25000;
function setup() {
createCanvas(400, 400);
prevTime = millis();
}
function draw() {
if (millis() > prevTime + interval1) {
currentScene = 1;
}
if (millis() > prevTime + interval2) {
currentScene = 2;
}
if (millis() > prevTime + interval3) {
currentScene = 3;
}
if (millis() > prevTime + interval4) {
currentScene = 4;
}
if (millis() > prevTime + interval5) {
currentScene = 5;
}
if (millis() > prevTime + interval6) {
currentScene = 6;
}
if (millis() > prevTime + interval7) {
currentScene = 7;
}
if (millis() > prevTime + interval8) {
currentScene = 8;
}
if (millis() > prevTime + interval9) {
currentScene = 0;
prevTime = millis();
}
switch (currentScene) {
case 0:
Scene1();
break;
case 1:
Scene2();
break;
case 2:
Scene3();
break;
case 3:
Scene4();
break;
case 4:
Scene5();
break;
case 5:
Scene6();
break;
case 6:
Scene7();
break;
case 7:
Scene8();
break;
case 8:
Scene9();
break;
}
}
const Scene1 = () => {
const amount = 35;
let color = ["white", "black"];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(random(color));
strokeWeight(2);
frameRate(5);
fill("black");
textStyle(BOLD);
textSize(140);
textAlign(CENTER);
text("WAKE", 200, 130);
textSize(300);
text("UP", 200, 380);
const grid = width / amount;
for (let a = 0; a < amount; a++) {
for (let b = 0; b < amount; b++) {
kruis(a * grid, b * grid, grid);
}
}
}
const kruis = (x, y, h) => {
push();
translate(x, y, h);
fill("white");
textSize(random(10, 15));
text("Z", 5, 10);
pop();
};
};
const Scene2 = () => {
let t = 0;
const increment = 0.8;
maxEllipse = 100;
angle = 0;
scaleValue = 400;
snelheid = 10;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0, 20);
const r = 255 * noise(t + 10);
const g = 255 * noise(t + 15);
const b = 255 * noise(t + 20);
for (let i = 0; i < maxEllipse; i++) {
push();
const y = sin(angle + i) * scaleValue;
const space = width / maxEllipse;
const x = (i + 0.5) * space;
stroke(r, g, b);
line(x, y, 400, 0);
pop();
}
angle += snelheid;
t += increment;
}
};
const Scene3 = () => {
let t = 0;
const increment = 0.8;
maxEllipse = 100;
angle = 0;
scaleValue = 400;
snelheid = 10;
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0, 20);
const r = 255 * noise(t + 10);
const g = 255 * noise(t + 15);
const b = 255 * noise(t + 20);
for (let i = 0; i < maxEllipse; i++) {
push();
const y = sin(angle + i) * scaleValue;
const space = width / maxEllipse;
const x = (i + 0.5) * space;
stroke(r, g, b);
line(x, y, 400, 400);
pop();
}
angle += snelheid;
t += increment;
}
};
Not all animations are in it yet (it should be 9 in total), but the scenes I've already placed in it don't do anything.
I've also tried to remove the draw and setup function in the scenes, in the first scene this works, but afterwards it only shows a static image.

Answer 1

This is a good start, make other scenes like this.
let currentScene = 0;
let prevTime = 0;
let interval1 = 5000;
let interval2 = 8500;
let interval3 = 10000;
let interval4 = 11500;
let interval5 = 13000;
let interval6 = 15500;
let interval7 = 18000;
let interval8 = 20500;
let interval9 = 25000;
function setup() {
createCanvas(400, 400);
prevTime = millis();
}
function draw() {
if (millis() > prevTime + interval1) {
currentScene = 1;
}
if (millis() > prevTime + interval2) {
currentScene = 2;
}
if (millis() > prevTime + interval3) {
currentScene = 3;
}
if (millis() > prevTime + interval4) {
currentScene = 4;
}
if (millis() > prevTime + interval5) {
currentScene = 5;
}
if (millis() > prevTime + interval6) {
currentScene = 6;
}
if (millis() > prevTime + interval7) {
currentScene = 7;
}
if (millis() > prevTime + interval8) {
currentScene = 8;
}
if (millis() > prevTime + interval9) {
currentScene = 0;
prevTime = millis();
}
switch (currentScene) {
case 0:
Scene1();
break;
case 1:
Scene2();
break;
case 2:
Scene3();
break;
case 3:
Scene4();
break;
case 4:
Scene5();
break;
case 5:
Scene6();
break;
case 6:
Scene7();
break;
case 7:
Scene8();
break;
case 8:
Scene9();
break;
}
}
function Scene1()
{
const amount = 35;
var color = ["white", "black"];
var kruis = (x, y, h) =>
{
push();
translate(x, y, h);
fill("white");
textSize(random(10, 15));
text("Z", 5, 10);
pop();
}
background(random(color));
strokeWeight(2);
frameRate(5);
fill("black");
textStyle(BOLD);
textSize(140);
textAlign(CENTER);
text("WAKE", 200, 130);
textSize(300);
text("UP", 200, 380);
const grid = width / amount;
for (let a = 0; a < amount; a++) {
for (let b = 0; b < amount; b++) {
kruis(a * grid, b * grid, grid);
}
}
}
function Scene2()
{
let t = 0;
const increment = 0.8;
maxEllipse = 100;
angle = 0;
scaleValue = 400;
snelheid = 10;
background(0, 20);
const r = 255 * noise(t + 10);
const g = 255 * noise(t + 15);
const b = 255 * noise(t + 20);
for (let i = 0; i < maxEllipse; i++)
{
push();
const y = sin(angle + i) * scaleValue;
const space = width / maxEllipse;
const x = (i + 0.5) * space;
stroke(r, g, b);
line(x, y, 400, 0);
pop();
}
angle += snelheid;
t += increment;
}
function Scene3()
{
let t = 0;
const increment = 0.8;
maxEllipse = 100;
angle = 0;
scaleValue = 400;
snelheid = 10;
background(0, 20);
const r = 255 * noise(t + 10);
const g = 255 * noise(t + 15);
const b = 255 * noise(t + 20);
for (let i = 0; i < maxEllipse; i++) {
push();
const y = sin(angle + i) * scaleValue;
const space = width / maxEllipse;
const x = (i + 0.5) * space;
stroke(r, g, b);
line(x, y, 400, 400);
pop();
}
angle += snelheid;
t += increment;
}