Design a site like this with
Get started

ICM · Week 3

Prompt of This Week’s Assignment

  • work with rule-based animation, motion, and interaction
  • tie ideas together with an interface control element
  • try making a rollover, button, or slider from scratch

Working on the Worksheet Questions and Assignment

I worked with my partner Rebecca on both the worksheet questions and assignment this week and found it quite helpful to talk out our ideas and understanding while coding. We took the approach of working simultaneously, with Rebecca sharing her screen while completing the worksheet questions and me sharing my screen while working on the creative assignment.

Through the worksheet questions, I was able to become more familiar with conditionals and mouse responsive animation. One small issue Rebecca and I was trying to figure out but didn’t manage to was the controlling of how fast the column turns red or white after reacting to the hover of the mouse (worksheet question 2). Our code is working, but the red and white color change flickers super fast if the mouse is constantly hovering over the column. We tried to add in “delay” or adjusting the “frame rate” of the interaction both doesn’t seem to affect the speed of the color change.

Our Result for Worksheet Question 2

Other than this issue, we were able to complete the tasks of the other worksheet questions fairly smoothly, except the challenge of figuring out how to make the bouncing ball change color without using the map() function for the last question.

Working on our creative assignment, Rebecca and I decided on incorporating the slider as our main interface control element. We thought that it would be interesting for the slider to control the change between day and night, and thus created a cityscape with the slider controlling the background color change.

We ended up making the city scape slowly reveal as the slider gets moved from left to right, and incorporated the frameCount function which we practiced using in one of the worksheet questions to make the clouds and buildings animated and flicker in various speeds. By doing so, we hope to create a hustling and busy city feel through the motion of the city scape.

Result of Our Assignment

Link to Our Week 3 Assignment

Hustling City

Leave a Reply

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

You are commenting using your 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