Hypercinema



Physical Computing



Computational Media


    Computational Media

    Week 01




    What we will learn at ICM
    : Make computer expressive

    Understanding the material of code
    -> allows us to do creative coding


    What is programming?
    -> Setting instructions to make something happen!



    Function = Do this

    point(x,y)

    circle(x,y,d)

    line(x1,y2,x2,y2)

    background(r,g,b,a(alpha))

    -> single number(0-255) means r=g=b(monochrome)

    -> 0 = black, 255 = white


    () 
    if nothing in it > just an order. no additional conditions are necessary


    setup() 
    -> Runs once at the beginning of the project

    -> In all future processes, commands that do not require any changes


    //
    -> use this to inactivate the selected line
    -> use this to write simple memo about codes

    ** command + / 
    : selected lines will be activated/inactivated



    In Class Activity



    -> creating canvas
    -> creating circle - ellipse()




    -> understanding the colors - (r,g,b,a)



    -> creating canvas with mouse
    -> moving ellipse with mouse





    Assignments


    • Write a blog post about how computation applies to your interests. This could be a subject you've studied, a job you've worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (You can review and contribute to the ICM Inspiration Wiki page).




    Computation plays a big role in my interests, especially when it comes to analyzing and visualizing data. I enjoy turning everyday data into meaningful visual stories. My love for design comes from how it can show hidden connections in data that aren’t always obvious. Using computational tools, I aim to improve how we communicate through clear and engaging visuals.

    Computation helps me tell stories with data, uncover hidden connections, and make information easier to understand. I’m excited to create new ways of sharing information by blending design, data, and technology.

    I once worked on a project where I tracked the movements of ballerina and ballerino in 3-second intervals, visualizing the paths of their arms and legs. At the time, I had to manually break down every movement frame by frame and draw the lines myself, which was a tedious process. I’m sure I missed some subtle movements in the process. If I get the chance to learn new computing technologies at ITP, I’d like to track movements more accurately and, beyond that, transform them into dynamic, spatial visualizations rather than just static, flat graphics.






    • Document the process of creating your sketch. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?




    After completing an assignment to replicate an image, I thought about recreating my portrait just like my actual photo. So, I laid my ID photo in a square frame and reconstructed the photo into 2D graphics using only basic shapes. 

    I used 'Figma' for this process because it's the program I'm most familiar with, and Figma allows me to quickly and easily check important numerical information needed for coding, such as size, distance, coordinates, and colors.


    Before creating shapes in p5.js, I organized which shapes to layer from bottom to top. 

    I learned that in coding, you must input the code for the shape that will be at the bottom first.



    I used the color picking tool(spoid) in Figma to extract colors from the photo for all the shapes and strokes. After confirming the R, G, B values of the colors, I applied them to the corresponding shapes and strokes.


    I started by creating the body and hair first. From there, I encountered several difficulties. 

    I needed to make half-circles and quarter-circles but didn't know how.

    -> I understood how to set the center coordinates.
    -> I also understood how to set the width and height of the arc.
    -> However, I didn't know what the last two figures meant.
    ** When I asked GPT, it told me that they represent the start and end points of the arc.
    ** I learned that when using an arc, the 3 o'clock position is '0', and the 9 o'clock position is 'PI'.
    ** So, when creating the bottom left hair, I placed 'HALF_PI' at the starting point and 'PI' at the endpoint.

    -> I spent quite a bit of time understanding the principle behind these last two figures.


    I used the same method for the hair on the opposite side. 
    Once I understood the principle, I was able to create it quickly.

    ** Since the starting point is at the 3 o'clock position, I entered '0'.
    ** The endpoint is at the 6 o'clock position, so I entered 'HALF_PI', which is half of 'PI'.

    -> Now, I feel like I have a good grasp of the principle of arcs.

    + By applying 'noFill()' and 'stroke()', I can create an arc that is only made of lines.


    Next, I used an ellipse to create the face and ears. 
    The neck was made with a rectangle, and I rounded it off by overlaying an ellipse at the bottom. 

    From there, difficulties arose again when I wanted to create the bangs.
    -> Initially, I tried using 'curve()', but it was too difficult for me to handle.
    -> I asked GPT if there was an easier code to create curves, and it recommended using 'bezier'.
    -> I tried 'bezier()', and although it was still challenging, it seemed easier than 'curve'.

    ** bezier(starting point, control point 1, control point 2, and endpoint)
    ** I entered the starting and endpoints first and adjusted the control points one by one.
    -> Finding the exact coordinates for the control points is still difficult since they are not visible, but I have fully understood the principle of bezier.

    + For the bangs, I didn't use 'fill()' but set a thick 'strokeWeight()' on bezier.


    Finally, I used ellipses to make earrings and buttons. 

    For the neckline of the clothes, I used arc, but this time I made it with 'stroke()' instead of 'fill()'. 

    I used 'triangle()' for the nose
    -> the order of the three points: (bottom left, middle top, right bottom)

    For the lips, I used three arcs and a line.