# Frame count delay in showing button

**URL:** <https://discourse.processing.org/t/frame-count-delay-in-showing-button/31116>\
**Category:** Coding Questions\
**Created:** [July 8, 2021, 9:51pm UTC](https://discourse.processing.org/t/frame-count-delay-in-showing-button/31116 "2021-07-08T21:51:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fleshcircuit](https://avatars.discourse-cdn.com/v4/letter/f/b3f665/32.png) [@fleshcircuit](https://discourse.processing.org/u/fleshcircuit)\
**Post date:** [July 8, 2021, 9:51pm UTC](https://discourse.processing.org/t/frame-count-delay-in-showing-button/31116/1 "2021-07-08T21:51:25Z")

</div>

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.

```auto
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);
  }
}

```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [July 8, 2021, 10:17pm UTC](https://discourse.processing.org/t/frame-count-delay-in-showing-button/31116/2 "2021-07-08T22:17:43Z")

</div>

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:

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

```

_EDIT 2 (July 8, 2021):_

… or perhaps you could try this:

```auto
  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:

```auto
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() {
}

```

---

<div class="post-metadata">

**Author:** ![fleshcircuit](https://avatars.discourse-cdn.com/v4/letter/f/b3f665/32.png) [@fleshcircuit](https://discourse.processing.org/u/fleshcircuit)\
**Post date:** [July 9, 2021, 7:04am UTC](https://discourse.processing.org/t/frame-count-delay-in-showing-button/31116/3 "2021-07-09T07:04:00Z")

</div>

> [@javagar](#):
>
> ```auto
> 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();
> 
> ```

The final option you sent works well. Thank you!