Loop an animation that uses p5 draw function

January 14, 2023

I was wondering, how can I loop functions in JavaScript?

For example, I have that code here:

function setup() {
  createCanvas(500, 400);
  frameRate (50)
}

function draw() {
  background(220);
  fill (250,250, 250);
  ellipse (frameCount, 200, 50);
  ellipse (frameCount, 220, 50);
  ellipse (frameCount + 180, 215, 50);
  ellipse (frameCount + 180, 230, 50);

  fill (250,0, 0);
  rect (frameCount, 140, 210, 70, 0, 100, 100, 100);

  fill(250, 250, 250)
  ellipse ( 470 - frameCount, 80, 50) 

  fill(250, 250, 250)
  ellipse ( 290 - frameCount, 80, 50)

  fill (0, 0, 0);
  rect ( 280 - frameCount,10, 200, 70, 100, 0, 100, 100);

  fill(250, 250, 250)
  ellipse ( 290 - frameCount, 90, 50) 

  fill(250, 250, 250)
  ellipse ( 450 - frameCount, 90, 50)


  fill (0, 0, 0)
  circle (210, 565 - frameCount, 50)

  fill (220, 220, 220)
  circle (210, 563 - frameCount, 15)

  fill (0, 0, 0)
  circle (270, 565 - frameCount, 50)

  fill (220, 220, 220)
  circle (270, 563 - frameCount, 15)

  fill (0, 0, 0)
  circle (200, 671 - frameCount, 50)

  fill (220, 220, 220)
  circle (200, 671 - frameCount, 15)

  fill (0, 0, 0)
  circle (280, 670 - frameCount, 50)

  fill (220, 220, 220)
  circle (280, 671 - frameCount, 15)

  fill (0, 0, 250)
  rect (200, 550 - frameCount, 80, 130, 100, 100, 0, 0);

  fill (0, 0, 0)
  circle (700,700, frameCount)
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>

I want, when all cars disappear, to restart the animation.

I tried with while loops, but I am a newbie so it didn’t work.

codes I’ve tried:

function setup() {
  createCanvas(500, 400);
  frameRate (50)
}

function draw() {
  background(220);
   fill (250,250, 250);
  ellipse (frameCount, 200, 50);
  ellipse (frameCount, 2...
}

i = 0

while (i = 0) {
    setup();
    draw();
}

>Solution :

Define at which frame you want to restart. For instance, you could decide that one whole cycle should consist of 800 frames.

Then replace all frameCount with a variable (like i) and initialise that variable in the draw function as frameCount % 800:

function setup() {
    createCanvas(500, 400);
    frameRate (50)
}

function draw() {
    let i = frameCount % 800; // Adjust 800 to your desired value
    background(220);
    fill (250,250, 250);
    ellipse (i, 200, 50);
    ellipse (i, 220, 50);
    ellipse (i + 180, 215, 50);
    ellipse (i + 180, 230, 50);

    fill (250,0, 0);
    rect (i, 140, 210, 70, 0, 100, 100, 100);

    fill(250, 250, 250)
    ellipse ( 470 - i, 80, 50) 

    fill(250, 250, 250)
    ellipse ( 290 - i, 80, 50)

    fill (0, 0, 0);
    rect ( 280 - i,10, 200, 70, 100, 0, 100, 100);

    fill(250, 250, 250)
    ellipse ( 290 - i, 90, 50) 

    fill(250, 250, 250)
    ellipse ( 450 - i, 90, 50)

    fill (0, 0, 0)
    circle (210, 565 - i, 50)

    fill (220, 220, 220)
    circle (210, 563 - i, 15)

    fill (0, 0, 0)
    circle (270, 565 - i, 50)

    fill (220, 220, 220)
    circle (270, 563 - i, 15)

    fill (0, 0, 0)
    circle (200, 671 - i, 50)

    fill (220, 220, 220)
    circle (200, 671 - i, 15)

    fill (0, 0, 0)
    circle (280, 670 - i, 50)

    fill (220, 220, 220)
    circle (280, 671 - i, 15)

    fill (0, 0, 250)
    rect (200, 550 - i, 80, 130, 100, 100, 0, 0);

    fill (0, 0, 0)
    //circle (700,700, i)
}

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/addons/p5.sound.min.js"></script>

NB: I commented-out the last statement in draw that is responsible for a growing black disc. Not sure if you wanted to keep that.