For the past week, Terrick and I have been working on the following:
- Designing the user interface for The Starting Line
- Testing the Velostat
- Sending data with code via Arduino
- Getting initial serial data using buttons
- Translating that data into code in p5.js that keeps track of each player’s score, pulls up each question after both players have answered, and returns and prints a value to reveal the final score.
Designing the UI
With the design above, Terrick and I tried a design experiment by working in Google Slides remotely. It became more of a co-design exercise. We chose simple imagery in black, white, gray, and red. Since the mat that the user will stand on is the main focus, we kept the graphics flat and solid. The resting state of the game will combine the logo, a line that briefly describes what the user will be participating in, and visual directions:
The following 9 slides as a question and display each player’s racing track. Once we have the data, we’ll draw a thin, white rectangle over the dark red one that gets longer each time a player answers “YES” to show progress.
The final slide displays our resolve message and leaves a blank space for p5. js to draw the final score.
Testing the Velostat
Our material came and we played around with it to see if we couldn’t return some values to serial. We decided to turn an analog sensor into a pseudo digital one, by determining whether someone was on or off of the mat. We’d place two separate sensors under the “YES” and “NO” on the mat, returning two separate pieces of data for each player.
It wasn’t until a resident suggested we place two metal coils of stripped wire under and on top of the Velostat, that we began to get consistent readings.
Sending Data with Arduino Code
We are solely using Arduino to collect values from the outside world and send that data to p5. We have a simple circuit set up (currently with buttons) that let p5 know if the player is answering “YES” or “NO” and lets the moderator advance to the next question once both players have answered. The Velostat is making a dramatic return shortly so that should be interesting…
Testing Serial with Buttons
Once we were able to parse consistent data, we felt the need to take a huge step back and simply get the game to work with push buttons. Once we had that all figured out, we’d re-introduce the Velostat, especially since it’s not as black and white as a pushbutton.
We’re primarily using the Arduino as a means to send data, but plan to give that data meaning in p5.js. We originally wrote the entire gaming code in Arduino, but took Mathura’s advice to delegate more of the work to the computer.
Giving the Data Meaning
We are using p5 to visualizing the game, advancing from one question to the next, and giving the player a final value. We also learned how to pseudo debounce in p5 where we are only printing one value each time a button is pressed, to filter out all the data noise.
We’re currently working on returning and displaying the final percentage in live type over the png, since each resolve frame will be different for each game.
We chose to design the game outside of p5 for more control as designers, as well as more options. We’re using windowHeight and windowWidth to make sure it fits whatever monitor the game is on.
We. Are. So. Close. Hahah, I kid.