Making a Controller for My P5 Game

(note all the code for these projects can be viewed on my Github here though I will make specific references to scripts down below).

One of my P5 projects that I am the happiest with is an interactive poetry/anti-game game that involves corralling a ball with the cursor to reveal a narrative. I decided I wanted to replace the mouse and cursor with a joystick, and that I wanted to use node, express, and a websocket to interface between P5 and the arduino.

I started out by adapting the SerialInOut example code for arduino to work for a joystick since the example uses a potentiometer and a joystick is just two potentiometers and a switch. Making those changes I wrote this code for outputting the joystick readings to serial. I had some trouble setting wiring the joystick initially but Aiden helped me out. Also I read on a now forgotten stack exchange that INPUT_PULLUP is necessary for setting the pinmode on digital ins that are going over serial, but I didn’t understand why that is the case.

Before trying to figure out how to integrate the serial readings into my game/poem script I connected it to a very quick example here which you can see in the first gif above. I’d used node and websockets before but I didn’t really remember them very well so it took me a pretty long time to get off the ground. I made use of some code that I had from Mark Hellar from when I was at Grey Area, which is why I ended up using express.

Once I figured out the example worked I went about redoing my P5 project to take the serial input. It didn’t take very long, I just replaced the mouseX and mousePressed variables with the respective inputs from the joystick. I intentionally made it so that you couldn’t see the player’s “cursor”, I wanted discovering the relationship between what the player was doing and the motion of the ball to be didactic and not immediately clear (so that you have to play around with the joystick before you figure out what is going on).