Hypercinema



Physical Computing



Computational Media


    Computational Media

    Week 03





    Assignments


    • DO: Two roads diverged in a yellow wood, And sorry I could not travel both... Life is full of difficult choices, use conditional statements to control the flow of your programs. Create a sketch that asks people to make difficult choices that have surprising consequences.
      • Which choices are easier, harder? Which choices are false choices?
      • What internal or external factors influence the choice? How do others’ choices affect your choices?
      • What choices surprise you with unexpected outcomes?
      • Can you combine choices to create hard-to-predict results? (Hint: Use && and ||)






    Difficult Choice : Tree or Apple?


    ->

    Before starting, I thought about what hard choices I can make, and I made it a story about choosing between apples and trees. In order to eat the apple, you have to cut down the tree, and in order to save the tree, you have to give up eating the apple. I planned out how I would sketch out the story in a note drawing.

    -> 

    I moved my sketches from notes to Figma to graphicize them. 



    -> Before Click

    -> After Click





    Coding Process


    1. Drawing Fixed Elements
    ->

    I started by sketching a fixed element that would be drawn the same before and after the mouse click. The tree trunk, the basket on the right, and the floor are fixed elements. 


    2. Background Color & Guide Text
    ->

    I started sketching a background color and guide text that changes on mouse clicks. 

    Before the mouse click, the background should be a daytime background and the text “Click to cut down a tree” should be visible. After the mouse click, the background changes to a night background and the text changes to “Got apple, but the tree is dead”.

    I used if() and else() to make these elements change based on whether the mouse is clicked or not.

    + ‘mouseIsPressed’ is also used.




    3. Tree & Apples


    ->

    I started sketching trees and apples that change when the mouse is clicked. Before the mouse click, the tree is alive and the tree has three apples. After the mouse click, the tree is cut down, leaving only the trunk, and the harvested apples goes into the basket on the right.

    I used if() and else() to make these elements change based on whether the mouse is clicked or not.

    + ‘mouseIsPressed’ is also used.





    4. Mouse Following Axe


    ->

    Before the mouse click, the axe should follow the mouse, and after the mouse click, the axe should be impaled on the cut wooden post.

    I used if() and else() to make these elements change based on whether the mouse is clicked or not.

    + ‘mouseIsPressed’ is also used.

    After applying `mouseX` and `mouseY` to the sketch coordinates to make the axe follow the mouse without clicking, I adjusted the position by adding or subtracting values to each `mouseX` and `mouseY` coordinate to fix the axe in a more suitable location.








    Result 🥳 🎉

    Try Here -> https://editor.p5js.org/Amelia_Yang/full/ccCZFqJq7
    See Code -> https://editor.p5js.org/Amelia_Yang/sketches/ccCZFqJq7



    Tree or Apple?

    You have to choose.

    Cut down the tree to eat the apple or,
    give up the apple to save the tree.

    So, tree or apple?