I wanted to create an easy game to see how I can use all functions, arrays, and OOP we learned during the class. The first thing that came to my mind was the game “Breakout” (1976) by Steve Wozniak.
Since Valentine’s day is coming, I decided to connect my game with it, and breaking hearts was the most logical thing for me. So my game is the little arrow is destroying hearts on the pink circles. Cute and relevant!
Process
My plan looked like this: create circles as a class > make them randomly move > add a player with an arrow as a class > detect collisions between circles and an arrow > add score > work with the design of the game.
Let me explain in detail every step I had with problems which have arisen and solutions I’ve found.
Classes and OOP
I have 3 classes in total: “Object” which is hearts player breaks, “Player,” and “Bullets” which is an arrow (the first idea was to use bullets, and I called all variables based on that). I used “getter” and “setter” functions to be able to use and manipulate class variables outside of the class.
Random movement
Circled I created in the Object class should move randomly, and making them do so was the first problem I faced making this game. When I’ve just changed the X and Y coordinates, they all moved in the same direction, even though they were allocated randomly on the canvas. The next thing I used was the direction variable, but I couldn’t find a way to randomly change its value between 1 and -1. To make this movement possible, I modified this code. I included variables such as speed, direction, position for both X and Y coordinates, and angle with the offset of the object. Using angle and its sine with cosine functions allowed me to do a random movement.
Collisions and Score
The next problem I had was making bullets “collide” with the objects aka circles. To do it I used an ArrayList of Object class objects (read about them here and here), so I used it for a loop every time I wanted to use a function with an array list.
for (int i=0; i<objects.size(); i++) {
objects.get(i).RunProgram();
}
Then, after the program detects collision (with if statement), it removes the object which collided and adds 1 point to the score variable.
for (int i=0; i<objects.size(); i++) {
Object o = objects.get(i);
if (dist(b.getBulletX(), b.getBulletY(), o.getObjectPosX(), o.getObjectPosY()) <= b.getBulletRadius() + o.getObjectRadius()) {
objects.remove(i);
score++;
}
}
Design
As I said before, I decided to make this game in Valentine’s day theme, so I just added an image of the heart to the circles I had before and painted them different shades of pink. I also added a score in the upper left corner to make the interface look more friendly.
I was sitting near the library when I looked out the window and saw palm trees. I associate them with this place, with summer, with happiness. I remembered how we decided to count them with my friend when we first arrived, and that there are exactly 36 palms. I liked the geometrical arrangement of palms, so I decided to use them as inspiration for my artwork.
Process:
I stylized the palms into swirling lines of varying heights using the random function and the for loop to arrange these strokes into a circle. To make them dynamic, I used the rotate function. In order to understand how they work, I watched this video-tutorial.
I divided the screen into identical rectangles, I used two for loops, placed the spinning palms and their trunks in the form of circles there.
It was necessary to do something with the background, and I wanted to add an interactive part. I watched this video to understand how it works. I decided to make a pattern using arc functions, which, if reduced, resembles a tile on the ground, and if increased, it looks like benches located under palm trees. The way the size changes seemed very symbolic to me, and that’s why I called this work “Life under the palm trees”.
This week I finished my first assignment of this class – making a self-portrait using Processing. During the class, we played with shapes and even tried to draw the simplest version of the face using geometrical figures such as circles, rectangles, and ellipses. For this assignment, I’ve decided to take it to the next level and attempted to make a cartoon version of myself.
I started by researching the proportions of a human’s face so the drawing would look like me.
Then, I made few sketches of the portrait and decided on the color scheme. [I won’t put them here because they are messy]
The final version is here. I added blush to my cheeks, and the color changes to more intense when the mouse points to it. Also, the hairstyle and eye shape resemble me. For the background, I asked my friends to choose the color they associate with me, and they chose this shade of purple.
Most of the time I used beginShape() and endShape() to draw any shape I needed and to be able to color it with fill(). bezierVertex() and bezier() helped to draw curves with appropriate parameters. I used strokeWeight() to change the width of some lines and emphasize my eyes.
Even though I hard-coded numbers, I did it based on my faceCenter X and Y coordinates. In future work, I will avoid hard-coding. This assignment has shown me how useful https://processing.org/ site is and that there are many interesting things available in processing. Now I’m inspired to know how to use them!
