Author:

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.

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.

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.

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.

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:

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…

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

 

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.

 

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.

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.