# Create mulitple ''pages'' in p5.js

**URL:** <https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471>\
**Category:** Coding Questions\
**Created:** [May 21, 2019, 7:40pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471 "2019-05-21T19:40:24Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![maxah999](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@maxah999](https://discourse.processing.org/u/maxah999)\
**Post date:** [May 21, 2019, 7:40pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/1 "2019-05-21T19:40:25Z")

</div>

Hi there ! I’m trying to recode the game found in [https://www.humanbenchmark.com/tests/reactiontime](https://www.humanbenchmark.com/tests/reactiontime) for a project. I tried multiple things but i’m a slow learner when it comes to code, and i’m trying to create it one slow step at a time.

My first big problem is to go to a next page once i click on the screen, i don’t understand how i can make it work.

Thank you for your kind help

---

<div class="post-metadata">

**Author:** ![saberkhan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/saberkhan/32/1541_2.png) [@saberkhan](https://discourse.processing.org/u/saberkhan)\
**Post date:** [May 21, 2019, 8:12pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/2 "2019-05-21T20:12:25Z")

</div>

Hey there,  
Cool website. I enjoying measuring my reaction time. I am working on a similar concept with my students. I recommend having a variable that acts as a counter that you increment up based on a user action. Based on the value of the variable you can different things happen via If Statements. Here is a basic example - [https://editor.p5js.org/saberkhan/sketches/\_HF0A7HuH](https://editor.p5js.org/saberkhan/sketches/_HF0A7HuH)

Keeping track of time will be a different question that we can get to next.  
Saber

---

<div class="post-metadata">

**Author:** ![maxah999](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@maxah999](https://discourse.processing.org/u/maxah999)\
**Post date:** [May 22, 2019, 12:02am UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/3 "2019-05-22T00:02:18Z")

</div>

Thank you for your help ! You’re a lifesaver. I now have the design of my pages all set up for the next step for me to find as you said, the time variables.

I’ll do my best to find what to do next to make this thing alive in the meanwhile, but i’ll probably struggle again !..

here is how it looks so far : [https://editor.p5js.org/maxaha/sketches/sMSC5SDvS](https://editor.p5js.org/maxaha/sketches/sMSC5SDvS)

---

<div class="post-metadata">

**Author:** ![saberkhan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/saberkhan/32/1541_2.png) [@saberkhan](https://discourse.processing.org/u/saberkhan)\
**Post date:** [May 22, 2019, 12:14pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/4 "2019-05-22T12:14:34Z")

</div>

Nice work. Let me know what you figure out as far as timing. Would love to see the final version as well.

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [May 22, 2019, 11:35pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/5 "2019-05-22T23:35:48Z")

</div>

Hey there!  
You can use `let time = getDate().getTime()` which will get the current time when the function is launched. This could definitely work!

---

<div class="post-metadata">

**Author:** ![maxah999](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@maxah999](https://discourse.processing.org/u/maxah999)\
**Post date:** [May 23, 2019, 10:03pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/6 "2019-05-23T22:03:10Z")

</div>

Hey, it’s me again. Thank you for your suggestion ! I’ll remember it if i eventually get there.

Right now my next ‘‘learning step’’ was to set a timer so eventually it goes to the click screen.

I eventually managed to do it and now i’m trying to let it go to a fail screen if pressed early but after a long period of time scratching my head i couldn’t figure how without breaking the code or it just overlapping with the current draw…

The challenge for me is greater than i expected but i think i see the hurdles better now.

What i will have to learn to do in order :

- A working fail screen, that when you click it loops back to the attempt
- Associate a random timer with the click function when the click screen appears
- Find a way to make the interval of time (the score) appears on the result screen
- Find a way to calculate the average of all the attempts and make it appear on the final result screen

Because i’m a beginner and i’m pretty damn mediocre at learning code i’ll give myself the course of a few weeks to learn this.

Here is how i tried to code it so far : [https://editor.p5js.org/maxaha/sketches/ZouPWv2hD](https://editor.p5js.org/maxaha/sketches/ZouPWv2hD)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 25, 2019, 4:24pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/7 "2019-05-25T16:24:56Z")

</div>

> [@maxah999](#):
>
> let it go to a fail screen if pressed early

To translate this thought into code, be more specific with what you mean by “early.” Is early when a you are in a prompt-to-click state, like marked with a “prompt” boolean flag?

```auto
if(clicked && !prompt){
  fail();
}

```

In general, rather than tracking clicks, you can track state with a simple “state machine.” [Finite-state machine - Wikipedia](https://en.wikipedia.org/wiki/Finite-state_machine) In your case it uses a single number to answer the question “what state am I in?” and rules to move from one state to another. For example, here are some states:

> 0 = home screen  
> 1 = running  
> 2 = prompt to click  
> 3 = fail  
> 4 = success  
> 5 = all done

And here are some potential rules:

> home + click = running  
> running + click = fail  
> prompt + click = success  
> fail + click = running  
> success + click = running  
> (fail or success) + click + measures\>5 = done

Writing that as code (this is an incomplete sketch to give you the idea):

```auto
var HOME=0;
var RUN=1;
var PROMPT=2;
var FAIL=3;
var SUCCESS=4;
var DONE=5;

// ...
// if the user clicked, check the current state and change the state
if(state==HOME && click) state=RUN;
if(state==RUN && click) state=FAIL;
if(state==PROMPT && click) state=SUCCESS;
// ...etc.
// ...and of course, the computer needs to change state sometimes:
if(state==RUN && elapsed>randomtime) state=PROMPT;

// ...

if(state==HOME){
  // draw the home screen
}
if(state==RUN){
  // draw the fail screen
}
if(state==FAIL){
  // draw the fail screen
}
// ...etc.

```

---

<div class="post-metadata">

**Author:** ![maxah999](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@maxah999](https://discourse.processing.org/u/maxah999)\
**Post date:** [May 27, 2019, 6:18am UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/8 "2019-05-27T06:18:32Z")

</div>

Thanks for this very informative post ! I kinda felt stuck while trying looping back with the count system as it overlapped with the countdown, they probably would have worked with a better code though.

I will definitely try a version with the learning of those states, they should be very useful and they look clean to use if i learned how they work. I’ll give it a better shot when i have more free time to learn how states works, right now it tells me the states needs to be defined…

Drawing logic of the code with states : [https://editor.p5js.org/maxaha/sketches/695pizG7a](https://editor.p5js.org/maxaha/sketches/695pizG7a)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 27, 2019, 4:40pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/9 "2019-05-27T16:40:31Z")

</div>

Very close.

You want to put the state variables in the sketch header – then put the drawing logic in draw – like this:

[https://editor.p5js.org/jeremydouglass/sketches/ZTz09jmhH](https://editor.p5js.org/jeremydouglass/sketches/ZTz09jmhH)

Now, separate from that draw code, you need to add tests for clicks that change the state variable. Then you have two things – a state machine that changes the state variable every time you click, and a draw loop that draws whatever state it happens to be.

---

<div class="post-metadata">

**Author:** ![maxah999](https://avatars.discourse-cdn.com/v4/letter/m/6bbea6/32.png) [@maxah999](https://discourse.processing.org/u/maxah999)\
**Post date:** [May 30, 2019, 3:17am UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/10 "2019-05-30T03:17:59Z")

</div>

I’m trying pretty hard to find the information, it is very confusing for me i gotta admit… I tried to change state with the fonction mousepressed but it would just skip states and go to the last one. I don’t really understand the concept of the loop either so i’ll have to dig into it. I’m still confused about how i can resolve it but i’ll try to learn more about the basics of states coding when i have time ! Thanks everyone for the informations, i still probably have a long way to go but i’ll finish it eventually even if it takes multiple weeks.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [May 30, 2019, 3:25am UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/11 "2019-05-30T03:25:32Z")

</div>

is the problem with the p5js account showing a email still not resolved?

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [May 30, 2019, 4:22pm UTC](https://discourse.processing.org/t/create-mulitple-pages-in-p5-js/11471/12 "2019-05-30T16:22:27Z")

</div>

Good catch – updated. Looks like it happen(ed) automatically when creating an account via e.g. Google oauth, but I was able to then go into account settings and change it. Not sure if it still happens for new accounts created in that way.