different scenes with different animation won't play in p5

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.

Whenenver you do `thing1`, `thing2`, `thing3`, try an array so you don't have to type all of your code `n` times. Probably, you want to remove the `function` keyword for each p5 func in a scene. Check out [Trying to allow the user to step through a for loop for an algorithm using JS and P5 via a button press](https://stackoverflow.com/questions/71927805/trying-to-allow-the-user-to-step-through-a-for-loop-for-an-algorithm-using-js-an/71958644#71958644) and [Transitioning from one scene to the next with p5.js](https://stackoverflow.com/questions/58477636/71959307#71959307) — ggorlen, Nov 11 '22 at 16:33
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, Nov 12 '22 at 14:00

score 0 · Answer 1 · answered Nov 11 '22 at 14:21

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;
}

why do the animations look different than when i play them separately in p5. could it have something to do with the fading background? — Victor VDC, Nov 11 '22 at 14:52
Well there is not much of a resetting of the fill, stroke, strokeWeight etc. so for example if there is no fill assigned in the Scene1, it will continue displaying the color assigned in the previous Scene. I have nothing changed besides the structure of code, to make it run. — Kroepniek, Nov 11 '22 at 15:01

different scenes with different animation won't play in p5

1 Answers1