Hypercinema



Physical Computing



Computational Media


    Computational Media

    Week 02





    Assignments


    • I further developed the self-portrait I previously worked on by making three changes. The first change is the background color, the second is adding eyes and making their size and shape change according to the mouse position, and the last change is the hair color, which changes based on the mouseX position.​



    This is the portrait I created in week 01, which served as the starting point for further development.








    1. Changing Background Color






    To create a random color for the background, I set random values for R, G, B in `background()`.

    First, I declared global variables `r`, `g`, and `b`. In the `setup()` function, I assigned each of these variables a random value between 0 and 255. 

    Then, in the `draw()` function, I used these variables in `background(r, g, b)`. 

    As a result, every time I press the run button, the background color changes randomly.



    🤔 Hmmm... I want to make it change automatically...

    So, I thought that if I put lines 6-8 inside the `draw()` function instead of the `setup()` function, the color would change automatically with each frame.





    As expected, after moving the random lines for `r`, `g`, `b` from the `setup()` function to the `draw()` function, the background color changed randomly with each frame. 

    Initially, I set the random range to 0-255, but the rapid change of a wide color spectrum caused eye strain. 

    So, I adjusted the random range to 200-255, creating a brighter and narrower range of colors that change randomly. 


    + Bit like an EDM party...🪩






    2. Adding Eyes & Changing Their Size






    I created eyes using ellipses, which weren't originally part of the drawing. 

    I wanted to make the eyes change in width and height based on the mouse's position. So, I fixed the center coordinates of the eyes at a suitable location and set the width to `mouseX` divided by 8 and the height to `mouseY` divided by 8.

    The reason for dividing by 8 was to prevent the eyes from becoming excessively large as `mouseX` and `mouseY` values increase. 

    The result was as expected.



    + It seems like the drawing is getting weirder...






    3. Changing The Hair Color





    This time, I wanted to change the color instead of the size using the mouse. 

    I set the color to change according to the `mouseX` value, transitioning from white to black in 100-pixel intervals. For example, when `mouseX` is close to 0, the color is white, and as it approaches the canvas width of 600, it changes to black. I divided the 0-600 range into 6 steps, with the fill color increasing by 40 within the grayscale range from 40 to 240.

    mouseX
    1-100 -> fill(240)
    101-200 -> fill(200)
    201-300 -> fill(160)
    301-400 -> fill(120)
    401-500 -> fill(80)
    501-600 -> fill(40)


    ** I used ‘if()’ and ‘else’ for this








    Final Result ... 🥳 🎉


    Link to this sketch
    -> https://editor.p5js.org/Amelia_Yang/sketches/_6-L21iIm