Understanding p5 and Serial Communication
This lab was different from our other ones, in that we weren't working solely in Arduino any more. No, instead of working within the Arduino IDE we had to learn to send serial signals using p5, and coordinate input and output signals using these programs. The intro labs were fairly simple, just setting up analog inputs and testing them within the Arduino IDE. This was to see if the signals were actually being sent, and thankfully was an easy process that didn't take too much time. Next, we were given instructions to download p5, a javascript library system that can display complex geometry on a laptop screen. As a part of this task, we received a template that showed us how to use the serial controls to send information between the Arduino and javascript. This mostly consisted of different functions within the javascript code that allowed the information to be sent. Happily for us, the template was well commented, so we understood exactly what each command did and how it related to both programs. The assignment we were given was to send analog signals to change the color of a background and the size of a shape using the breadboarded output controls. I had some trouble getting the wiring correct and sending the signal, but after lab I got all criteria to meet and had a functioning program serially controlled.
Game Development
The next step was to use our knowledge to develop a game using serial and analog controls. I had a bunch of different ideas bouncing around in my head that I thought I could make work. Unfortunately many of these were too big for me to tackle, so I had to constantly scale back my ambitions and get with what I could realistically achieve. Some of these ideas included a Mario-like platformer where pressure controls the height of the jump, and a puzzle game where you have to change the color and size of a shape to fit it into the grid somewhere. I believe this last one is actually quite possible, and I want to develop that idea further.
However, the game I ended up developing went through multiple revisions and changes of scope. I knew that I wanted the game to be a color-matching one, as this was something I knew how to do with p5 and serial controls. To start, I made a random color generator in a javascript function that created a new color background each time the game was loaded. I actually had a lot of difficulty with this; instead of changing the color at the beginning of the game it would constantly change, like a strobe. There were other issues in canvas size and the lack of coloring on the controllable shape that I needed to work out in the code as well. You can see some of these issues in the videos below, which demonstrate the capabilities of the circuit and analog controls.
After these issues were sorted out, I jury-rigged some code from the lab into an analog color changer for the ellipse that was controlled by the mouse. Using what I knew, I mapped both analog inputs from the breadboard to rgb values in both the ellipse and the background. This meant that a turn of the dial would change the color of the background, and a change in pressure on the sensor would change the color of the ellipse. I now had two separate analog controls for two colored objects on my screen. I now had to make a function that checked the difference between the RGB values. My goal was to make a trigger in this function, so that when the colors were sufficiently similar, a signal would be send to the Arduino to set off an LED, telling the user that they completed their task.
This proved to be harder that I initially thought. For starters, my serial.write command didn't seem to actually be sending anything to my arduino, so I spent a good amount of time testing it until it finally began to work. Secondly, it was difficult to playtest the margin needed in the difference between color values, because I didn't want the game to be either too easy or too hard. If the tolerances were tight, users would get frustrated by their lack of feedback from the LED. If too loose, the game would be easy and no sense of accomplishment would be earned. Eventually I settled on a value that worked well for the game, which you can see demonstrated below, along with the code used in each program.
JavaScript/Serial Code: https://gist.github.com/bebe3079/154a02d20a0a762e4ccfa2451ebfae46
Going Forward
By the end of this assignment, I felt like I had both constrained myself and barely scratched the surface of what could be done with the p5 program. I constrained myself in that I constantly scaled back my plans for this project to stick with functions and commands that I knew. After troubleshooting and working with a simple program, I am now more confident that I could create a game more similar to my ambitions. With more analog controls I could make my actual game more complex, with the user having direct control over multiple RGB values in each object. I could also work on matching the shapes to pieces on the canvas, akin to the puzzle game mentioned. With more input there could be more user control, adding both challenge and fun to the experience.