Week 6: Objects and Arrays

NOTE: My preview does not contain music or moving hands. I am still learning how to embed my p5.js sketches that include downloaded files.

Link to the full version of my sketch: https://editor.p5js.org/nickgran321/sketches/oyYtKpG58
Link to the code on Github: https://github.com/nickgran321/Nick-Grant/blob/master/Computation%20Media%20Week%206:%20Objects%20and%20Arrays

For my sixth week in Introduction to Computational Media, I created an evil eye guide. Growing up in a Russian and Armenian household, evil eyes are very important in my culture. While most people are familiar with the dark blue talisman, each color represents a unique form of protection.

To begin my project, I researched the history of evil eyes. An evil eye is a glare from a person with negative intent. Many cultures believe that receiving an evil eye will cause misfortune, but charms may be used to combat the curse.

An example of evil eye charms

I found a guide that explains what each color represents, which may be found here:

http://www.greekmatistore.com/index.asp?mid=66&mid2=163&mid3=62

I sketched an example of what I would like my sketch to look like before beginning. I normally do not sketch my designs beforehand, but I found this step to be very helpful.

My blueprints

According to my drawing, I desired a basic grid system with an evil eye charm in each rectangle. I have 16 eyes with text on top. I pictured the user having to remove large evil eye charms in order to reach the guide underneath. In doing so, my sketch loosely incorporated a game component. I thought about creating a slider to increase the size of my cursor, but I decided that this was unnecessary. I added folk music to my sketch, which I believe conveyed a very special tone.

My for loops

I began with drawing vertical and horizontal lines through the use of while loops. The outer white circles and the pupils of each eye were created with for loops within for loops for the x and y coordinates and the radii of the ellipses.

My if statements

The next step was the most time-consuming. In draw, I created if statements for each charm. I created a variable for the distance with the parameters (mouseX, mouseY, x_position, y_position). When the distance was less than the radius inside the circle that the cursor hovered over, the color was filled temporarily to match the meaning of the protection. I copied and pasted the code for each charm, but afterwards I decided to challenge myself by creating a class for all of the charms. I logically conceptualized my grid of protective charms, which I will explain later in my post. By creating objects for all of the charms, I cut down my code considerably.

The object on top

I created an array that initially appears on top of my guide each time my sketch is run. My variable movingEye is referencing an empty array. Additionally, I created the class eyeball. My class consists of this.x, this.y, and this.r. The class attribute contains checks whether or not the cursor clicking the large eye object is returning a true or false value. If the value is true, three items are removed from the array through the use of my splice in my function mousePressed.

The move and show attributes of my class are defined. The eyes move between the values -5 and 5. In show, I created a strokeWeight of 3 and the pupils and inner white parts of the eye. In draw, I created an if statement that connects my contain function and the class attributes for show and move. In setup, my for loop consists of data for my class eyeball.

I noticed that the objects from movingEye stay in the background, which I found to be a very cool effect. I created a rectangle for my guide, but allowed the eyes from the array to remain in my sketch in the top and bottom. I manually added text underneath each eye in my guide and changed the font. In retrospect, however, I could have created a text function.

A broken sketch

Then… my sketch crashed. Looking back, I noticed that I forgot the parentheses for a lot of my pushes and pops. Some of my curly brackets did not connect correctly. I forgot a lot of semicolons. I completely had to rewrite my code. In my new one, I became much more organized with my labeling.

Stationary hands

For the third part of my sketch, I created moving hands that were in between my guide and initial giant moving eyes that the user eliminates. I started off with stationary hands, but I found them to be too boring. I created the moving hands in a separate sketch, which I also did for the giant eyes that cover my sketch and my protective eyes class. I find that crafting separate sketches and then blending them together is a much easier process than having to temporarily remove code with two forward slashes.

The moving hands

For the moving hands, I created an array handRotation that consisted of the values 0.05 and -0.05. I preloaded an image of a traditional hamsa, which is palm-shaped amulet. In draw, I created a for loop for the moving hands and defined their rotations and scales. My function displaytheHand defines the width of the rotations of the moving hands. I found that experimenting with the hand array was easier than the array movingEye because I did not have to create a class.

The moving hands

Throughout the project, I experimented a lot with different methods to improve my project. For example, at one point I created two circles that move throughout my sketch. I created variables for the eyes and their speeds. When the eye was smaller or greater than the width, the speed changed as a result of my if statements and their speeds were reversed. Without the background, their trails were continuously drawn. While I’m happy I was able to create these effects, I noticed that my sketch became challenging to look at with all of the flashing colors. One of the questions I have is how I may slow down the frame rate for the eyes in my guide without slowing down the frame rate for my moving hands.

My protective eyes

Lastly, I desired to break out a lot of code that I had in draw. In order to do so, I created objects for my protective eye charms. This step was very challenging because I needed to create a for loop within a for loop that called my array of colors and class attributes. Furthermore, creating my protective eyes was a challenge because the radii that detect the placement of the mouse are invisible in my sketch. After a lot of patience, and office hours with residents, I understood how to implement my sketch. I created a class Protection, which consists of parameters for the x-coordinate, y-coordinate, radius, and color. My class attributes are display and update. Update contains an if statement, which changes the color of the protective eyes when the mouse hovers over their radius. Update is called in my for loop in the function draw.

The grid of my protective eyes
Conceptualizing the grid system

The most difficult part of my code is line 61. I created four rows, each with a column. I had to physically draw the grid system. Overall I am very happy with my project. I drew a concept that I successfully implemented. I enjoy creating objects with data points because they allow for greater flexibility. I believe I have become more comfortable in creating classes, functions, and for loops within for loops. In the future, I would like to change my cursor to a hamsa and I will like to add a feature in which each time a protective eye is clicked, the color remains permanently changed.