Light Puzzle – PComp Midterm

Carrie and I began by brainstorming. We came up with 10 ideas a piece in 10 minutes.

A lot of our concepts involved a robot arm, so we got a pan tilt mount and made a simple controller with one regular servo and another continuous servo:


int cServoPin = 10;
int topServoPin = 9;
int forwardButton = 3;
int backButton = 2;
Servo cServo;
Servo topServo;

void setup() {
pinMode(backButton, OUTPUT);
pinMode(forwardButton, OUTPUT);

void loop() {
int potRead = analogRead(A0);
}else if(digitalRead(forwardButton)){

void servoForward(Servo continuousServo) {

void servoBackward(Servo continuousServo) {

void servoStop(Servo continuousServo) {

But after bailing on the robot concept, we decided on a puzzle game based on one from resident evil. Carrie took on the basics of the code for her serial lab, so I picked it up and made a few improvements. First, I updated the arduino code to keep track of button states, reading them in at the start of the loop. This allowed me to simplify her functions that were called on button press. Additionally, I lowered the amount of “talking” the arduino did, only sending data when a state changed.

getting the circuit and code up and running
quick test with nearby classmates. they had a hard time seeing the color of the “lights” on the web page.

I also started work on the physical interface and enclosure. I bought some smally clicky buttons on amazon. I soldered them and started mocking up panels with cardboard.

Before making further improvements on the code, I first wireframed the updates – adding a countdown timer, a “lose” screen, and a “reward” in the form of students’ ICM homework assignments.

On the p5 side, I went about implementing p5 Scene Manager to allow us to show students’ icm projects as the “reward” for completing the puzzle. It took a bit of research and conceptualization before I felt comfortable committing to the library. But I got it up and running relatively easily. When I went to integrate other peoples sketches, it had problems. Relative distances seemed out of whack, and one of the sketches had a really bad refresh rate. I stuck with simple ones for the moment, and planned my next two tasks: displaying who made each sketch, and randomly selecting the reward sketches.

To get the randomly selected sketches, I defined a function randomRewardSketch() in the main javascript file that contains all of my global variables. I pushed each sketch to the scene manager, then created a global array of the sketches, referenced by their function name…

var mgr;
var rewardSketches;

function setup()

createCanvas(windowWidth, windowHeight);
mgr = new SceneManager();
mgr.addScene ( klee );
mgr.addScene ( suckysucksuck );

rewardSketches = [klee,suckysucksuck];
function randomRewardSketch(){

Now to show the author of the sketch or any additional info, I would unhide a dom element, see which sketch was running, and display the appropriate info. I had to wrestle a bit with the proper way of doing this, but using the DOM library’s set attribute function and html function, I was able to override a link element, stored as a global variable, with the appropriate info.

Now fabrication! Carry and I tried hooking up the last prototype panel but it had waay too many wires to fit in our box; I’d need to solder and clean things up to get it properly working in an enclosure.

So I cut the panel out of acrylic. It was going great until I made a hole for the usb in the complete wrong place! But it did allow me to try out various etches, and we found settings we liked.

For the leds, I soldered a 220ohm resistor the positive end of each. Once placed in the panel, I wrapped the grounds together and attached them to a single wire. This was shoddy, and broke two led leads in the process, but it worked!

For the switches, Carrie changed the code to use the internal pullups, cutting down on the overall complexity. Then I wrapped the grounds together, soldered, added heat shrink to be safe, and attached them to the led ground, making one shared ground wire.

Everything worked! We just had to add the reset button.

On the code side, I made a few more additional improvements. I added the countdown timer, with the screen flashing red at increasing speed as it ran out, and implemented the “loading prize” screen. We added in our hard reset button and it was done!

Looking forward, there are some clear improvements to be made.
1: user testing! There’s definitely more we could discover by putting this version – with a “finished” enclosure and more polished code – in front of people. It seems like the “reward” side of things might not be so obvious.
2. A better reset. Currently, the reset function is kind of faked. The way it works – it requires the game to be “over” and for 0,0,0,0 to be received by the p5 app. That makes it work on hard reset of the arduino, but a software implementation would be better. It would have required a more complicated protocol that we didn’t have the time to implement.

Here’s the final code

One thought on “Light Puzzle – PComp Midterm

Leave a Reply