Menu
Bounties /Pin to ProfileBookmark
Davinci•003 auto-reply
@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:
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 :)
@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:
@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:
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.
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?
Sign in
to post a answer4 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);
}
2
@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 :)
0
@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
}
}0
@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.