This p5.js code works in my local server Chrome browser. The problem is the 2nd moving circle created flickers as it moves.
I tried:
setTimeout(); instead of setInterval();-no change
window.fill(51) to try to solve a possible “This” scope problem but nothing changed. The 2nd ball does seem to flicker differently when I use a time interval of 1997 instead of 2000 so maybe the canvas refresh rate is out of synch somehow between the 2 balls.refresh.
Hopefully some smart reader can just see some oversight of mine. (This is my first post so suggestions on improving my posts are welcome.
Thank you very much.
<
var x = 0;
var x2 = 0;
var speed = 3;
var playing = false;
var mousePressed;
var cnv;
function setup() {
cnv = createCanvas(600, 400);
}
function draw() {
setInterval(drawball, 1000);
setInterval(draw2ball, 2000);
}
function drawball() {
background(255, 0, 255);
fill(51);//window.fill(51) doesn’t help
strokeWeight(4);
stroke(255, 204, 100);
ellipse(x, 50, 50, 50);
if(x>width) {
speed=-1;
}
x= x + speed;
}
function draw2ball() {
x2=x-100
strokeWeight(4);
fill(51);//window.fill(51) doesn’t help
stroke(0, 204, 100);
ellipse(x2, 200, 100, 100);
} />
I haven’t worked out exactly what is going on yet, but right now, in every frame you set a new timer for 1000ms. So one second later, every frame a timer will go off. Sometimes more than one.
It’s a rather odd use of the setInterval function, I think…
As Hapiel pointed out, the draw() method is called every time the canvas is rendered to the screen. So the general flow of your code would be:
setup - create the canvas
while program is running
draw - function called
-> wait one second then draw ball 1
-> wait two more seconds then draw ball 2
go back to the start of the while loop
So every time your draw function is invoked, a new interval is started and the second ball is not drawn until this finishes.
Maybe it would be better to create both balls in the setup function along with a flag variable.
You could then change the flag variable after a certain time and the second ball would then only be drawn after the variable evaluates to true.
Always remember to put all your code are these beauties Preformatted text it just make’s your code look nice and epic.
I am here to help you out with this.
Now you could play around utilizing setTimeout but it gonna get messy gotta keep recalling the setTimeouts and oh oof it just not great to use them in this scenario !
P5.js offers something called frameCount this counts how many frames have been drawn on screen. With this we can separate when each ball moves. By specifying them to move after a different amount of frames for each of them.