Hi there ! I’m trying to recode the game found in 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
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
Keeping track of time will be a different question that we can get to next.
Saber
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
Nice work. Let me know what you figure out as far as timing. Would love to see the final version as well.
Hey there!
You can use let time = getDate().getTime() which will get the current time when the function is launched. This could definitely work!
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 :
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
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?
if(clicked && !prompt){
fail();
}
In general, rather than tracking clicks, you can track state with a simple “state machine.” Finite-state machine - Wikipedia 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):
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.
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
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
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.
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.
is the problem with the p5js account showing a email still not resolved?
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.