setTimeout - the image not fixed on the screen (P5.js)

Asked

Viewed 141 times

0

Programming in javascript/P5.js

I’m trying to use the setTimeout function, but the image, when triggered, is flashing on the screen, not fixed. The idea is that the ellipse appears after a certain time, and remains. At first I thought it was some bug in my code, so I cleaned everything until just setTimeout function and still shows the same behavior. Would that be a P5.js problem or what?

function setup() {
createCanvas(windowWidth, windowHeight);    
}

function draw(){

background(25);

function ball(){
stroke(255);
noFill();
ellipse(200, 200, 50, 50);
}

setTimeout(ball, 2000);

}

thank you.

javascript settimeout

2 answers

1


I could try like this:

function setup() {
createCanvas(windowWidth, windowHeight);
}

var reload = false;

function draw() {

background(25);

function ball() {
    stroke(255);
    noFill();
    ellipse(200, 200, 50, 50);
    reload = true;
}

if (!reload) {
    setTimeout(ball, 2000);
}

}

  • It’s still unstable. It’s because of Draw Function, which passes the background over every cycle. If I put the background in the Function setup and Ellipse after that, it fixes. But the problem is that it is a game, other forms move on the screen and after a while this circle appears. Then the background has to be in the same draw. thanks

0

From what Heathcliff said, I found this solution: the setTimeout trigger the true, and within a condition if == true, draw the Ellipse

var ball = false;

function setup() {
createCanvas(windowWidth, windowHeight);
}

function draw() {
background(25);

setTimeout(delay, 3000);

function delay(){
ball = true;
}

if (ball)
{
fill(255);
ellipse(200, 200, 50, 50);
}
}

thank you!

Browser other questions tagged javascript settimeout

You are not signed in. Login or sign up in order to post.