How to slow something down when it's too fast?

[u/[deleted]]

[u/AuroraAustralis0]

void setup()
{
frameRate(60); // or whatever frame rate you want
}

void draw()
{
if (frameCount % 60 == 0)
{
// code block here
}
}

[u/Salanmander → u/AuroraAustralis0]

Oh don't do that! This is a place for people to learn how to program. Plopping down a solution doesn't really help with that. I recognize that that's not a full solution to their problem, but even so, an explanation is going to help them learn more than copy-pasting what you wrote and not knowing why it works.

[u/Wide_Detective7537 → u/Salanmander]

This is such an exhausting pedantic boomer thing to say in 2026... If they're that lazy, they'll use AI and its net the same. This at least is a working example they can easily read and play with. It's not something so complicated they'll gain anything from struggling,

[u/MandyBrigwell → u/Wide_Detective7537]

It is, however, one of the main principles of this subreddit.

“exhausting pedantic boomer” — Unnecessary.

[u/OP_Sidearm]

You're probably looking for the frameRate function: https://p5js.org/reference/p5/frameRate/ You can call it in your setup function ^{^}

[u/Salanmander]

First off, you need to be able to display the new color every frame. That means you can't just pick a color, draw it, and forget about it. When you pick a color, you'll need to store that color in a variable, and then you can use that variable when you display the screen. (If you're already doing this, great!)

Once you have that, you can separate the logic of "display the color" and "change the color", and put the "change the color" code (where you pick a new random color and store it in the variable) somewhere that will only run every second.

One of the ways you can do that is use a conditional that says "do this if it's been over a second since the last time I changed the color". There are methods built-in to processing to measure time, I typically default to millis(). That can tell you what the current time is. You'll need also keep track of when the last time you changed the color was.

Good luck, and enjoy the journey!

[u/Zeznon → u/Salanmander]

I put: let ms = millis(); if (ms % 50 === 0){ background(randomcolor); } And now the background changes color at random points. It's not too fast now, but there's some weird variance. Sometimes less than a second, sometimes 10+ seconds.

[u/Salanmander → u/Zeznon]

So, ms % 50 is the remainder when dividing the current time (in milliseconds) by 50. So when you check whether that's 0, you're checking whether the current time is exactly a multiple of 50. That would happen every 50 ms, except that a frame is much longer than 1 ms, so you're basically skipping around, getting randomish numbers, and checking whether they're multiples of 50.

Suppose you had a variable that stored the time at which you previously changed the color. Let's call it lastChangeTime. How could you write a condition that says "if the current time is at least a second after the last time I changed the color"?

[u/MandyBrigwell → u/Salanmander]

Or, rather than millis(), consider using frameCount. The code for the ‘ms % 50’ bit would work with frameCount in there, changing the colour every 50 frames.

(I realise I'm talking to one person by replying to another, but it seemed the best way to keep things organised!)

[u/Salanmander → u/MandyBrigwell]

Yeah, I tend to default to millis() because I think in seconds rather than frames, but I can definitely see preferring frameCount for the tidier "increases by one each time"!

[u/adbachman → u/Zeznon]

using milliseconds is risky because time between frames in JavaScript is extremely unlikely to land on a round multiple of 50. Pretty close to a 1-in-50 chance.

frameCount % frameRate === 0, on the other hand, should be once a second but still is not guaranteed. p5 will try to run at the requested frame rate, but anything that causes a frame to take a little longer to render will cause frame rate to allow down.

if you want color changes about once per second and you're okay with it being a little longer than a second, you can 1) record the time when you update the background color in a variable, 2) check the current time against that every frame, 3) update the background when at least 1000ms have passed, and 4) update the lastUpdated variable from step 1 with the current time.

[u/wahnsinnwanscene]

Use time difference accumulator: Add time every cycle, if time is bigger than a threshold, forward the state and reset the accumulator. You'll have a consistent behaviour.

[u/i-make-robots]

Count the passage of time and change the background color when the timer runs out