Kristina You is a multidisciplinary designer based in New York, NY and a recent graduate from the ITP Program at NYU. Her practice focuses on UI/UX, interaction design, print design, and brand development.


︎︎︎Introduction to Computational Media

Week 3 Exercise




PART I



1.Divide the canvas into 4 columns. Make each column turn red when you hover over it.

code
preview







2.Place a white square on a gray background. Turn the square into a button with a “hover” state:

Part 1: make it yellow when the user is hovering over it (without having clicked it)

Part 2: make it white when inactive (not hovering)

Part 3: make it black when the user is actively holding the mouse button down inside of it. (Source: Code as a Creative Medium)


code
preview








3.Code a slider widget from scratch. It’s okay to ignore the changing color of the slider track, but in general feel free to use color and change the size of everything!


*One thing that I have yet to figure out is how to make the circle cursor stay in the position it is dragged to and how the color can change when dragged.


code
preview









4. 
Part 1: Make a circle bounce back and forth around the canvas.
Part 2 Challenge: Make its fill color bounce back and forth fading from white to black and then back to white again at the same time.
Part 3 Challenge: Make the fill color bouncing back and forth sync up with the ball bouncing back and forth.


code
preview








5. Add a circle object to this sketch that moves right to left and resets itself when it reaches past the edge of the canvas.


code
preview









PART II

For the second part of this week’s assignment, we paired up with a classmate to create a collaborative sketch that includes rule based animation and interaction. I teamed up with Alexsa, who had a sketch from our last assignment, which then I added onto her original code to create another version with the material that we have learned since the last class.


My Sketch

code
preview




Alexsa’s Original Sketch

code
preview









What did you do?

-When I talked to Alexsa last week about what she would do further to her original sketch, she mentioned animating the movement of the two figures in the composition. I started out with using the mouseX and map function to move the positions of the figures as the mouse moves along the X axis. After that I selected other elements that I thought I could highlight and animate such as the raindrops falling, the sun setting and changing color, as well as changing the background to a gradient and highlighting the lightning when the mouse is pressed.


2. What worked?

-I think that many of the rule based interactions I  tried adding on to Alexsa’s sketch turned out to be cohesive, which is what I had originally hoped for. There was a lot of trial and error for each function I added, but overall I am happy with the way it turned out. I think I especially like the way that the click gradient background works with the color of the sun changing.


What didn’t work, and what steps did you take to try to solve the issue?

-Like I mentioned in the last question, there definitely was a lot of trial and error for each element that I added. For example, from tedious details such as rearranging objects to seem rational once they were animated, to the most difficult part for me which was figuring out the mouseIsPressed function in combination with the linear gradient background. Another part that I struggled with a lot that I did not quite resolve to perfection is the mapping of the two figures with the mouseX movement- I really wanted to make the two figures meeting in the middle but could not figure about how the two objects could go in opposite directions with the mouse moving in one direction only. This is something I really want to figure out in the future! Also, I wanted the linear gradient to blend with the original background instead of a harsh change but could not figure it out either.


Did any code-related questions come up for you?


-I think that the functions that I had the most issue with was figuring out mouseIsPressed, map, and mouseX function. A lot of the issues are the same as the ones mentioned in the question above. I think a lot of them involved tedious details that I was leaving out or solutions that I could not think of to resolve them.


















︎ BACK TO ITP BLOG
Last Updated:  April 9, 2023
kristinayou00@gmail.com