Category Archives: ICM

Week 12 – Final – Sunset

Inspiration:

My mom sent me a picture last week of a beautiful sunset scene taken from my apartment. Since I live separately from my parents, I haven’t seen my own space in a long time, even though I usually video with my family. And when I received the photo it was raining in New York.
Personally, I always resonate a lot with stream-of-consciousness stuff. I feel that time and space can overlap in the pure world of consciousness. So I tried to do something with this photo. And I add a short and subtle sentence for it.

Code:

The key functions in this assignment are filter and map. I started out using the filter directly with filter(BLUR, ‘value’ px), but it was very slow and even got stuck. I searched and found that I could use the canvas API functions. Functions of p5js are actually high-level libraries of the canvas API so that we can use the Canvas API function directly on the p5js environment. They’re not the p5js functions but p5js still allows us to use it through the variable drawingContext. In this case, it will be drawingContext.filter = ‘blur(‘+str(value)+’px)’. It works especially well in animation.

References:

CanvasRenderingContext2D.filter

Filter

drawingContext

Week 9 – It’s Paprika

For this week’s assignment, I worked with Cesar and he showed me a pretty image from an anime movie “Paprika”, I love the composition and color of the picture. And we decided to work on it separately first based on individual style and aesthetics, and then work together to find a better way to combine our ideas. 

I love the color of the picture so I choose to keep the original color and try to find some possibilities in the pixel. I still start my coding with the basic function that just learned and try to add two variables to change the size and interval of each pixel. As before, I try different numbers and see what the code gives me. The pixel changes with the movement of the mouse, the two pictures below are my favorite moments of the change. I love the outspread vision and the sense of weightlessness.

w9p1 w9p2

here is my code 🙂

After I met with Cesar, his work was full of imagination and I would love to say the possibilities.  He extended the original picture in DALL-E, adding the things he has various and complex emotions about and even separating the character from the original image, making the background with the animation effects by moving the extended picture downward. 

And we worked together trying to combine our codes and to see anything new we can create. In Cesar’s blog, he has made really clear documentation about each change in our final work. You can check here ➡️ Is the inside of my head this messed up?

Here is our final work: It’s Piprika

I have to say the final version is insane, love the flow of the background movement (Cesar is a genius !) The animation-like effect makes the character felling in an endless world. We also add the original movie music as BGM and a quote from the movie as the ending. The whole piece is just like a trailer!

Keywords: Dream Endless

week 6 – Presentation

12 13

       

Code

This week I still pay a lot of effort into figuring out how to use array and class, even though I understood the sketch shown in the class, it’s still not easy for me to skillfully apply it in other scenes. I also needed to practice my code logic so that I could write the scene I wanted without looking at notes.

For this week’s presenting piece, I use nested for loops to posit the small pic evenly and adopt the toggle logic to switch between the color and gray. I love to experience the randomness of the code in every assignment before, and this is the first time I have coded with an initial idea. Whether by design or by accident, computational media has really surprised me.

Sketch Toggle logic

(on & off)

Color world 1 createGraphic function in setup

2 nested loops for the position of each pic

3 contents of each pic:

   3.1 each pic’s background

   3.2 circles ‘position and, then color draw it

   3.3 take care of the sequences of circles

4 call back using the image function

mousePressed

On()

on =! on

Gray world Same as above

Change color

Week5 – Re-organize the code with functions

This week, I just rearranged my self-portrait using the functions. And when I try to re-code the section of the hair depiction using the array, it appears that I have found the answer to the questions I posed in the first week. The array is quite useful for drawing finite quantities of repetitions, but with certain modifications.

code11

It used to be many lines of code, and hard to change values. 

Code of Re-organization

Week4- Loop Statement

This week I tried to use loop statements to create repetitive and interesting patterns beyond my expectation. I super enjoy randomness and unpredictability, those are hard to feel when I was painting or writing manually. And besides, to be more familiar with the loop statement, I also learn to use floor() and noise() which make these repetitive patterns random but relatively orderly. 

candy wrapper

Candy Wrapper

No signal

No Signal