RECENT WORK ︎︎︎

ITP BLOG ︎︎︎

ABOUT ︎︎︎

crandall.lily@gmail.com

@dullhouze




COSMIC CATCH & DODGE - PROCESS


A completely touchless game




PROPOSAL

For my ICM midterm, I created this game. I plan to expand on it for the final, by adding different levels of difficulty and enahancing the visual components a little. Currently, the green square is controlled by the keyboard arrows.

For the pcomp final, I want to create a physical joystick that controls the direction of the green square without touch. To achieve this, I plan to use distance sensors that the player waves their hands over:
  

Materials I’ll need:
  • 4 distance sensors
  • materials to make the 4 “button” controls (most likely wood, using the laser cutter to create the shapes).

What I need to do:
  • Learn how to use distance sensors
  • Finalize the game display code and different levels
  • Write Arduino IDE code to read the sensor information and send that to p5 to control the green square’s position on the screen.
  • Determine if the entire game will be contactless (start button, restart button, selecting a level?)



NOV 16

Figuring out distance sensors & sending that data to p5



In testing out the distance sensors with my project idea, I learned two things:
  1. There is a minimum height that they’ll read the distance. Meaning, if my hand is resting directly on the sensor, it will still read it as being ~50 mm away. That doesn’t change my idea for how I would use them, but something to keep in mind for fabrication and instructions for users.
  2. Four distance sensors is a lot, and I think I could make this work with 2: one for the up/down movement, and one for left/right. I am not yet sure how that would work fabrication wise, but I think it makes sense to set one up at a 90 degree angle like this:

         

 

NOV 22

Connecting 2 sensors to the same board

Using two sensors on the same board poses the problem of address; you need to change the address of one so the data can be read separately. I found example code in the Pololu library to achieve this. This is how it works:


I tested it out with a few different visuals. 

        
Overall, I’m happy with how far I’ve gotten on the project. Next, I am going to plan out the components of the game itself and slowly transfer the code from the original game sketch into a new p5 sketch that reads serial data.




NOV 23



Today I started adding in the code from the original game sketch. I got rid of as much of the serial port stuff as I could - the sketch was getting pretty cluttered and I had barely entered any of the actual game code in yet. I added a start button that was activated by moving the square over it. I’m struggling with a few things:

  1. The square is glitchy and jittery. I wonder if this has something to do with the distance between the two sensors I’m using. Because I’m at home for the long weekend, I don’t have a second breadboard to connect the second distance sensor to, and I think they’re overlapping.
  2. I want the square to stop once it hits any of the sides. 
  3. I can’t get the game to continue after the square moves away from the start button. I think I’ll need to include a state change variable or something.
 

NOV 28


So the jittering is not because of the distance between the two sensors. Today I added another breadboard and connected longer wires so the sensors were far enough apart, and the square was still bouncing around. I think it has something to do with the incoming data on the Arduino side. I also “mounted” one of the sensors on my pcomp kit box to prototype the two movements. It worked, but man it was annoying to move it that way. I love it.

The new setup with longer wires and one sensor perpendicular to the otherThe new setup with longer wires and one sensor perpendicular to the other

Bird’s eye view


In action


NOV 29 - DEC 5


Huge improvements in the last week:

1. I combined the game code with the code from the sketch above and got it to work no start screen or anything, the game begins as soon as the sketch is run.


2. I added a start screen. but I couldn’t get it to work properly. Also, the square movement was really jittery. 



3. I got it to work properly. The game begins when the user hovers over a square in the mdidle of the screen. This is what what code looks like:



Screen recording of the game at this point


4. Instead of printing every value that comes through the distance sensor, I added code in the Arduino IDE that takes the average of every 4 values. This made the green square move more smoothly on the screen. 


5. I moved from the p5 web editor to Visual Studio Code. It was a bit weird at first, but it’s great to be able to see the game in full screen, and organize my code a l


6. I originally wanted to have one of the sensors mounted perpendicularly to the table, but in testing it I found it difficult to move the square left and right on the screen. There’s not a wide range of motion able to be captured by the sensor, so I decided to keep them both flat on the table.


7.  I redid the wires to clean it up a bit. When I did this though, I mixed up the ground & power wires to the second sensor, the sensor got really hot, and I burned my finger : (


8. I changed the start page a bit, as well as added a smiley face / frowny face that appears when the player wins or loses. I also added a restart function so it automatically returns to the start screen when the game is over. 


restart function

This is what it looks like as of now:



Ok so I went to record my screen and ran into a bug that’s been annoying me - if I don’t run the game for a few minutes, it stops receiving Arduino data, and I have to reupload the data and hope that fixes it. Here, it doesn’t. It’s not clear why this happens. Sometimes it doesn’t work again until I restart Arduino, or even my laptop. The other thing that happens here is that the game over function doesn’t work properly - it shows a smiley & frowny face.



It works in this video - I think it has something to do with the counter for the purple & red circles. Right now they’re being counted by a variable that increases when one is deleted, but I think I have to change that. This week, I want to create an enclosure for the wires. 






DEC 5-10


I added a few new features this week:

1. When the player hits a circle, it “explodes” and you hear a sound.
- For some reason, the sound doesn’t always work - specifically with hitting the circles you want to hit. The red ones seem to work fine

2. I added a progress bar to show how many lives you have left. I’m not 100% satisfied with it, but I was having trouble figuring out an alternative that made sense visually.

3. I changed the purple color to blue. While I liked how the purple looked more, it was a little difficult to tell the purple and red apart. I might change this back later. 

4. I added a gif on the main page. I’m trying to show users that they need to move their hands up and down over the sensors (and not left/right). If I had more time & fabrication skills, I would make “tunnels” for people to put their hands into, but I don’t think that’s realistic at this point. I think this is the kind of build I’m going to make:


Here’s what it looks like at this point. It’s running a little slow. I’m still running into the issue where I keep having to re-upload the Arudino code and it’s really annoying.





DEC 11 & 12


Fabrication!!!! This was my first time using the laser cutter and it went okay. I’m pretty happy with the outcome! I laser cut some pieces of wood and glued them together to make the boxes. 




Painting

I drilled holes in the tray and ran the wires underneath.





For the annoying data upload problem, I took out all of the console.log calls in the code, and I think it helped a little. Some things I want to do before the show:

1. Name it!!! And have the name on the start page and maybe on the actual physical console itself.

2. Add a start up sound when the game begins, when you win, and when you lose

3. Maybe change the progress bar.

CIRCUIT DIAGRAM




Running list of people who have beat the game:

- Dror
- Zoe
- Alfonsette