Evil Peeps Game Sketch | ICM #2

This week our goal was to create a sketch involving these three criteria:

  • One element controlled by the mouse.
  • One element that changes over time, independently of the mouse.
  • One element that is different every time you run the sketch.

I decided to make a game like program with this.

Screen Shot 2015-09-11 at 2.32.54 PM

I started by reproducing what we had done in class by creating a “drawing” type program using my ominous figure as the brush. I took the shape of this character from my previous sketch and replaced all of the X,Y coordinates with locations relative to the mouse.

Screen Shot 2015-09-11 at 2.42.52 PM

What eventually gave me the idea for a sort-of game was adjusting the frame rate. This allowed me to change the rate at which the ominous figures were placed on the screen and I used the mills() function to vary the frame rate over time. As the program continued to run the rate at which the ominous figure appeared increased.

Screen Shot 2015-09-11 at 4.58.41 PM

Finally, I felt that in order to make it a game I had to provide instructions and a score. I did this by drawing a rectangle at the top of the screen and placing some text over it. The score was also a function of time – the idea is that the faster the “evil peeps” appear on the screen and the longer the program has run, the more difficult it would be to place them without overlapping the figures. I also added in some more variables so that the color of the evil peeps changed somewhat randomly as the game progressed. I thought this would make the final screen look more like a crowd of individual evil peeps rather than the same thing over and over again. Right now the game works on the honor system because  if you overlap the characters there’s nothing that alerts you or causes a game over type event. I had a really good time making this and I think I have a sense for what kinds of programming tools I’d need to really make fully functioning game.

First Circuits | PComp #2

This week I did my first work with circuits by reviewing our class work and the labs available on the PComp website.


I started with a simple circuit powered off of the Arduino containing a 220 ohm resistor, an LED, some little wires, and a button that came with my Arduino starter kit.


The next challenge was to add a couple more LED, first in series and then in parallel to get a sense for how voltage and current change when more components are added.

image2 image1

As expected when the three LEDs were arranged in series behind the resistor, none of them lit up when power was connected because the voltage that each was receiving was divided amongst the three and failed to reach the level necessary. When I rearranged them into parallel each of them lit up because the voltage was now high enough since the current is what is divided when the components are arranged in parallel.

Next I soldered and attached a Potentiometer to vary the brightness of the LEDs.


This worked surprisingly well and I had way too much fun dimming a single LED on and off.

Lastly I set out to develop a switch myself to use with this board. I decided I’d like to make a switch that reacts to wind and the process turned out to be fairly simple. I attached a couple of wires to the board ahead of my resistor and LED (roughly where the button had been) and put some aluminum foil on the ends of each of them. When the two leaves of aluminum foil touch it completes the circuit and turns on the LED. I mounted this contraption above my A/C and was eventually able to get the switch to activate the circuit as the air blows and to turn off when it doesn’t.



First Code | ICM #1

This assignment asked us to draw something using 2D shapes in P5.js. I initially started trying to draw a stick figure but got bogged down trying to rotate portions of the drawing. I had some advice from an experienced programmer but ultimately I confused myself and decided to start over. Here’s the unfinished stick man:

Screen Shot 2015-09-08 at 10.09.18 PM

I think my problem here was math with regard to object placement of circles and rotation especially on a coordinate system that is kind of new to me.

For my next attempt I thought I’d go for a rectangular apartment building…

Screen Shot 2015-09-08 at 10.34.00 PM

I started out by drawing a bunch of rectangles, this was one of those times when you remember that Copy+Paste is amazing.

Screen Shot 2015-09-08 at 10.45.03 PM


I added some doors using more rectangles, a line, and a couple of circles. I also started trying to get the computer to help me with the math by writing the (X,Y) locations as equations that I didn’t want to solve in my head.

Screen Shot 2015-09-08 at 10.55.27 PM


I started colorizing and commenting here. I’m glad P5 will just accept “blue” as a color because trying to brew colors in RGB while colorblind is very frustrating (next time I’ll use a color picker). Comments became important once I tried to add some differentiation to the windows and I’ve heard that its a good habit to get into when coding.

Screen Shot 2015-09-08 at 11.19.24 PM

I felt good about rectangles, putting in the colors and things so I returned to human forms and made a menacing figure up in the corner of the building gazing out at the viewer using some arcs and ellipses. I resized the canvas to make it even on both sides and realized I was having an issue with some shapes being one pixel off or so. Ultimately I’m happy with how it turned out – I felt like I was getting the hang of shapes and I started thinking about possible “next steps” that I may be able to go for once I get comfortable with variables and animations etc.

Response to Crawford, Victor, and class discussion | PComp #1

I’m not sure how exactly I would have defined interaction prior to our first class and its related assignments, but I’m fairly certain that at this point coming up with a definition is more difficult. I like the Crawford definition, requiring two actors and a cyclical listening/thinking/speaking process, but as Crawford admits (and demonstrates) that framework can be rather squishy. The idea that the “refrigerator door game” can be disqualified as an interaction for being “beneath the intellectual dignity of almost everybody” is funny but also distracting for me. I couldn’t help but think about how disappointed I’d be to open a fridge with a burnt out light bulb, and whether that is a reflection of my intellect. But Victor’s rant made me feel a little better. He noted the feedback a glass of water provides to it’s drinker via weight, and few pursuits are more intellectual than deciding whether a glass is half empty or half full. Though I’m still unclear on whether this glass or the process of using it is a tool, interaction or both. At this point I’m leaning towards interaction as a spectrum that is much more fluid than Crawford’s system of zero, low and high. As for an original  definition I’d say: Interaction is a relationship formed in pursuit of a goal. So to me Crawford’s refrigerator light and Victor’s glass of water are both good examples of successful interaction despite their simplicity. 


Crawford, The Art of Interactive Design, chapters 1 and 2

Victor’s rant (http://bit.ly/1emwTOV)