Category: ICM

This week we were asked to start cleaning up our code and using functions in the main loop. I started working with the very limited game I made for week 2 “evil peeps”. While I eventually got the functions down I spent most of my time this week trying to get the Evil Peeps themselves to work as an object. I had the X location and Y location as well as the entire drawing and timing function as parts of a “peeps” object but I could never seem to get it to work. (I unfortunately can’t find the screenshot I took of this). Ultimately I settled on just organizing my code using functions as well as adding some “if” stamtents and other improvements to make it feel like more of a game. My goal for this project going forward is to get these peeps moving around on the screen once they are placed and to finally implement fail conditions.

https://11bsouth.com/EvilPeep0.3/

This week we were asked to start working with rule-based animation, motion, and interaction. I partnered with Aaron Montoya-Moraga and worked on a series of concentric musical circles based partially on the advanced rollover button example that was made available to us (http://bit.ly/1NM53NR). We began by basically replicating the advanced rollover buttons but altered the shapes and drew them using a for loop:

for (var k = 0; k < 5; k++) { fill(colors[k]); ellipse(width / 2, height / 2, diameters[k], diameters[k]); This gave us a greyscale and silent version of what our final project would look like.

Each circle is always fading to black, however when the mouse hovers over any individual circle it is changed to white allowing the circle to slowly fade black as the mouse is moved between other circles. 

Eventually we were able to add in fading colors using arrays. We haven’t covered arrays in class yet but with some trial and error we got the circles to change color and opacity based on mouse position using the same kind of looped fading mechanism. 

Lastly we included sound. Aaron and I struggled with this for a while but eventually Arron was able to get some help from ITP resident Jason Segal and now the sound can fade in and out along with the color changes. Some adjustments to the starting position and fade were made to accommodate the sound functions. 

The final results (link to project)

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.