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 9 Exercise



In collaboration with Pedro Sodre 


Create a full-screen experience manipulating image(s) and / or video(s) that tells a story (interpret that as you wish). At a minimum it should have a beginning, a middle, and an end.

  • How might you use color to evoke a specific feeling or a series of changing emotions as the experience progresses?
  • If there is interaction (mouse, keyboard, movement, etc.), how might the type and manner of interaction(s) contribute to the intended experience of the piece?



For this assignment, Pedro and I discussed our ideas first and we decided that we wanted to create a sketch that was interactive and was referencing our previous projects. Pedro had actually created a really interesting immersive piece involving shapes and I had also worked with gradients before, so we decided to combine those two elements. In terms of the narrative, or the beginning, middle, and end, we decided to make the sketch loop but also have some instructions for the user that would guide them through the experience. We talked about creating a sort of meditative, immersive experience using simple tools that we have previously covered in class.



Pedro’s Sketch: Version 1  ︎︎︎

Code
Preview



Pedro started off working on the sketch where he created the interaction with the shapes evolving as the mouse is being moved- we opted to use 3D shapes for this particular assignment. He also did an amazing job at creating a narrative and guiding the user through the experience as well. 



My Sketch: Version 2  ︎︎︎

Code 
Preview





After Pedro had created the interaction with the shapes, I intended to incorporate some color into the sketch which I did by linking the movement of the mouse to the background color. I also worked on the typography of the instructions and worked on adding a gradient that would act as a secondary graphic behind the shapes. I did have a difficult time executing the last part because it involved using a radial gradient or a blur filter which were both hard to work with, so in the end I ended up using a svg image file that I generated through Illustrator and used to manipulate with the movement of the mouse.  I definitely had to try a lot of methods for this part and struggled during the process. I think that for future renditions, I would love to figure out how to use a p5 function for this part especially because there was some difficulty in positioning, ordering, and also altering the hue and tint of this shape as well. 

















︎︎︎ BACK TO ITP BLOG



Last Updated:  April 9, 2023
kristinayou00@gmail.com