/    Sign up×
Bounties /Pin to ProfileBookmark

How to wait in the draw loop of p5.js

I was making a simple moving square in p5js, but it was going very fast. Is there a way to make it slow down without decreasing the framerate?

to post a answer
DebuggingFront-endJavaScript

4 Replies

Davinci•003 auto-reply
// Wait in the draw loop of p5.js
function draw() {
// Wait for a certain amount of time
setTimeout(function() {
// Do something after the wait
}, 1000);
}

Was this helpful?

Copy linkTweet thisAlerts:
@steimeFeb 16.2023 — In p5.js, the draw() function runs continuously in a loop, executing your code repeatedly. To add a wait or delay between iterations of the loop, you can use the frameRate() function to set the number of frames per second that the loop should run at.

Here's an example that shows how to use the frameRate() function to wait for a certain amount of time before drawing the next frame:


function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);

// Wait for 60 frames before drawing the next frame
frameRate(1);

// Draw a circle at the center of the canvas
ellipse(width/2, height/2, 50, 50);
}



In this example, the frameRate() function is called with a value of 1, which means that the loop will run at a rate of 1 frame per second. This causes the program to wait for 60 frames (i.e., 60 seconds) before drawing the next frame.

You can adjust the value passed to frameRate() to control the amount of time to wait between frames. Keep in mind that setting the frame rate to a low value can cause your program to become unresponsive, so be careful not to set it too low.

I hope this solves your problem :)
@pyrite102authorthis works okay, but I was hoping I could solve this issue without decreasing the frame rate.Feb 16.2023
@steimelet startTime; // Declare a variable to store the start time function setup() { createCanvas(400, 400); startTime = millis(); // Record the start time } function draw() { background(220); // Display a circle for the first 2 seconds if (millis() - startTime = 2000 && millis() - startTime = 4000) { ellipse(200, 200, 50, 50); startTime = millis(); // Record the new start time } } You mean like this?Feb 16.2023
Copy linkTweet thisAlerts:
@OnlineDevelopersFeb 19.2023 — Yes, you can use the frameRate() function in p5.js to control the speed of the animation without changing the actual frame rate. However, if you want to add a delay between the movements of the square, you can use the millis() function to wait for a certain amount of time in the draw() loop.

Here's an example code that shows how you can use millis() to add a delay between the movements of the square:

let x = 0;
let speed = 5;
let delay = 1000; // 1 second delay

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
square(x, 100, 50);

if (millis() > delay) { // wait for 1 second before moving the square
x += speed;
delay = millis() + 1000; // set delay to current time + 1 second
}
}
Copy linkTweet thisAlerts:
@dbltoeFeb 21.2023 — Yes, there are several ways to make a moving object in p5.js slow down without decreasing the frame rate. One way is to use the frameRate() function to reduce the speed of the animation without affecting the frame rate. However, this may also slow down other aspects of your sketch that depend on the frame rate, such as the responsiveness of user input or other animations.

Another way is to adjust the velocity of the moving square, which will affect its speed without affecting the frame rate. You can do this by multiplying the velocity by a value less than 1, which will cause the square to gradually slow down over time. For example, you can use a variable to control the velocity of the square and update it each frame:

let x = 0;
let y = 0;
let velocity = 5;

function setup() {
createCanvas(400, 400);
}

function draw() {
background(220);
rect(x, y, 50, 50);

// Update the position of the square
x += velocity;
y += velocity;

// Slow down the square over time
velocity *= 0.99;

// If the square stops moving, reset the velocity
if (velocity < 0.1) {
velocity = 5;
}
}


In this example, the velocity of the square is initially set to 5, and then it is gradually multiplied by 0.99 each frame, causing the square to slow down over time. When the velocity becomes very small, the code resets it to 5 to start the process over again.
×

Success!

Help @pyrite102 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...