Frame count delay in showing button

p5.js Coding Questions
1

Hello,
I would like to make a button appear after a delay using frame count. When I put the button in the setup, it appears at the bottom of the screen and only moves to correct place later.

let phrase = ['Time' ,'is' , 'glitchy'];
let i;
let link;
let start; 

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  //frameRate(10);
  i = 0;
  link = createA('http://127.0.0.1:5501/SlidingScreens/','');
  start = createButton('Start').parent(link); 
}

function draw() {
  if (frameCount < 500){
    background(random(30), 10);
    viralTime();
  }

  if (frameCount >= 500){
    timeisGlitchy();
    start.position(width*.25, height*.75);
  }
}
2

Hi @fleshcircuit,

Please supply us with the code for the viralTime() and timeisGlitchy() functions, as well as any other functions that you have defined for your sketch. This will enable us to perform some testing.

EDIT 1 (July 8, 2021):

Placing this statement in the setup() function, along with some other adjustments of the code, might resolve the issue with the placement of the button, but if we could have the full code, we can test it with more certainty:

  start.position(width*.25, height*.75);

EDIT 2 (July 8, 2021):

… or perhaps you could try this:

  if (frameCount == 500){
    timeisGlitchy();
    start = createButton('Start').parent(link); 
    start.position(width*.25, height*.75);
  }

EDIT 3 (July 8, 2021):

With the two functions supplied as empty placeholders, this seems to work:

let phrase = ['Time' ,'is' , 'glitchy'];
let i;
let link;
let start; 

function setup() {
  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);
  //frameRate(10);
  i = 0;
  link = createA('http://127.0.0.1:5501/SlidingScreens/','');
  
}

function draw() {
  if (frameCount < 500){
    background(random(30), 10);
    viralTime();
  } else if (frameCount == 500){
    timeisGlitchy();
    start = createButton('Start').parent(link); 
    start.position(width*.25, height*.75);
  } else {
    timeisGlitchy();
  }
}

function timeisGlitchy() {
}

function viralTime() {
}
3

The final option you sent works well. Thank you!

1 Like