Loves me or Not – ICM Week6

generated flowers using p5.js

ASSIGNMENT

Design a sketch in an object-oriented fashion. Follow these steps and see how far you get (even just doing the first couple steps is ok!)

  1. Make one single object with just variables.
  2. Put one or more functions in the object.
  3. Try manually making two objects.
  4. Duplicate the object using an array and make as many as you like! If you are already working with classes/objects and arrays:
  5. Re-organize / break-down your classes into the “smallest functional units” possible.
  6. Try different ways to have your objects “communicate” with each other in some way.

Presentation

generated flowers using p5.js generated flowers using p5.js

I created a game that digitalize the game: “he loves me, he loves me not”. When you hover over, you eliminate the petal one by one. The number of petals are randomized. The text will show if he/she loves you or not everytime you eliminate a petal. There are two songs included in the game. When you press the “love men” button, “Tear drys on their own” will play while you are “plucking” the flower. When you press the “love women” button, “Ain’t no sunshine” will play in the background.

Play the game here. Link here. 

Problems (Solved)

P5 stays loading while preloading Images

When I have the for loop to load 6 petals, it shows up the screenshot as below. I searched online and they say maybe the images are too big for p5 to load. However, the file size of each image is less 200kB. Therefore, when I comment the for loop and try to use hard code to build the array for petalImgs. It works. But still, I am not sure why. 

loading images showing nothing on p5

Petal Rotating Individually

In my previous projects, I had problems rotating items individually. Then I searched on Google and found an amazing sketch where I learned to make individual object rotate, I would have to use push() and pop() and translate() inside of the for loop.

screenshot of code for loop of generating rotation with push and pop function

Finding the position of individual petal

At first, I created a class of the flowers with both coreImgs(the center part of the flower) and petalImgs (the petal parts). Although I used the displayPetals() and used the method mentioning above, I still couldn’t find the exact location of the petal individually. My goal is to use the distance between mouse position and the center of the petal to “pluck” the petal. 

code for conditional statements on p5.js

I went to Aidan, the resident for help. He showed me that there is a way to calculate the position of a circle using cos() and sin(). We then created an array to store the petals created and an object to store the petal with its x and y position. Later, when I were to measure the distance between the x and y position within the petal array, I used the distance() function. 

for loop to create an array of objects

The array helps a lot since at first, there is a discrepancy between the cursor’s position and the center of the petal. Then I realized I compared the distance between the center of the petal and the mouse position with the size of the petal where I should have made it half of the size. After changing that, the mouse position is more accurate.

I used to struggle under mousePressed() function and you can see from the screenshot below that I made a mistake of calling this.x and this.y outside of the class. This is due to I have no idea how to find the position of the petal individually earlier.

Forgot to call the function in draw()

When I was writing the distance() function, I could not see any updates even when I try to print any parameters. Then I realized that I forgot to call the function in draw(). It seems to me it is easily overlooked by me and I will be more aware whenever I write code.

Sound Problem

Inside the mousePressed function, I originally had , when the button is clicked, the song will play while another song will stop. However, when I click the button twice, the song will play twice stacking on top of each other.

So I was thinking I could use the mousePressed function to calculate the number of mouse pressed and use the remainder to divide it up so that the song could be played and stopped within two clicks. Since I have two buttons, I used two parameters countforLoveWomen and countforLoveMen to keep track of it. Below shows the embedded conditional statements within the if statement to play the sound for people who are interested in women.

Conclusion

I am so glad for the midterm project. Cuz I understood everything and successfully debugged some problems that I could not conquer before. I am so happy this is working perfectly. This definitely is a practice that helps to improve my skills in creative coding.

Published by Yiting Liu

NYU ITP '21

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
<span>%d</span> bloggers like this: