Seasons of Life – ICM – Week 3

screenshot of the program - seasons of life

Assignment

  • Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we’ll look at how this compare to interface elements we’ll get for free from the browser.
    • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
  • OR
  • Make an algorithmic drawing. (One example is 10 PRINT, see also: my version of 10PRINT example). Make your interface element control the appearance or behavior of the algorithmic design.
  • When working in teams, both partners must contribute. I recommend pair programming, just like we have done in class. Sit next to each other at one keyboard and take turns coding while looking over each other’s shoulder.

Inspiration

Elena and I wanted to combine both arithmetic art and buttons in our project. We also wanted to expand our knowledge in p5.js. Therefore, I watched tons of videos of arrays, class, objects, and sliders for sounds. It was so fun collaborating together to create a project that we are both proud of!

Presentation

Code here

Process

We planned to create four seasons where with a press of a button, you will go from winter to spring, spring to summer, summer to fall. Each season would have the specific color for the background and specific elements that will float around on top of the background. After us visualizing the steps on paper, we create a class that forms a template to create circles. The goal was to make sure the circles move within the canvas size and then wiggle tiny bit. This is to create the gentle sense of objects moving in each season. In general, the class only has two functions: move() and display().

drafts drawn on paper about general idea for a program

Then, we started working on buttons. I did the math of where the position of the center of each circles would be on paper and then set the x and y coordinates on p5.js. We then used the mousePressed function and incorporate the dist() function to make sure the command will be initiated when the mouse is pressed within the circles.

screenshot taken from p5.js

Later, we moved onto creating each items that are common in the seasons. We preloaded elements such as snowflakes for winter, flowers for spring, waves for summer, leaves for fall. In the setup function, we created the items for each season to make sure the iterations are 40 times. This calls the class in setup and make sure there are 40 new items.

screenshot taken from p5.js

When we are working on the buttons, we struggled for a long time to figure out how to make sure the background is connected with the corresponding items when the mouse is pressed. With the color of the buttons and backgrounds determined, we played around with the idea of creating individual functions for each season. Therefore, in the class, we converted the display function into four tiny display functions for each season. In this way, it is better for us to put these functions in the corresponding functions in “createNewWinter()”, “createNewSpring()”,”createNewSummer()”,”createNewSpring()” respectively.

screenshot taken from p5.js

In order to put the elements with the background, we adapted the boolean method Jason used in his week2 assignment. We made sure the by default each season is “false”. So when mouse is clicked onto the each corresponding button, the boolean will change into “true”. Therefore, we can put conditional statements in draw and put corresponding background color and elements under as below. This systematic way of writing code makes everything seem so organized and easy to debug when things go wrong.

screenshot taken from p5.js

We then wanted to up our game since we are so inspired by Danqi’s cat farting game. We loaded the font: Merriweather-Black.ttf. We then wanted to load music for each season so that it will create a more immersive/interactive experience for the users. However, we run into issues where songs get distorted when we called in draw function. Therefore, we only loaded one song that starts when you run the program. We watched a lot of Shiffman’s videos online and found out about Slider, and played around with the panning and rate-changing of the music. We then incorporated it in our program to add more fun.

screenshot taken from p5.js

Obstacles

Songs distorted when called in draw

We watched some videos and most of the songs were loaded in setup rather than draw. However, we wanted each song for each season to play after the click of a mouse. Yet, when we put the play() function in the  “createNewWinter()”, “createNewSpring()”,”createNewSummer()”,”createNewSpring()” respectively and then call them, the songs are distorted. We are wondering if songs can only sounds called in setup?

Debugging for a long time

We debugged for a long time to figure out how to create elements using two for loops. We watched Shiffman’s videos on creating objects and I am still a bit confused

How to make it not overlap

We watched some videos to avoid overlapping of the objects. However, we were debugging on our previous code and it made the situation worse since we were solving multiple problems. Therefore, we sort of put aside the no-overlapping for this assignment. However, we would love to learn how to make it not overlap with our elements.

pink flowers on top of green background
You can see the flowers overlap with each other here.

How to make loading image and calling the element more efficient

I thought of using array to load the image and I also tried. However, the problem is when we wanted to display each season individually, there is something wrong. We would have to identify the position of each season and put it in class. But we thought there has to be a more efficient way to do so since we have several functions that are the same with a bit of twist in each season.

screenshot taken from p5.js

Loaded images seemed distorted

The original images of the elements in each season are proportioned. However, when we loaded them in the program, they seem disproportioned. Especially the snowflakes, the height of the snowflake is supposed to be equal to the its width. Yet, they are disproportionate. We are not so sure why since each element seems distorted.

distorted snowflakes on a blue background

Improvements for future

We would love to make our code more efficient. I personally realized how easy it is to create functions and make our code look super organized and easy to understand and to debug.

Conclusion

We are quite happy about how it turns out. We spent more than 8 hours on Sunday and some other time before Sunday for this assignment. It involved a lot of debugging and adding more elements. We felt we stepped out our comfort zone and learned tons of new information and what we can do in p5.js. Elena was such a great partner to work with. We learned together and we grew together! This experience was super amazing!

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: