Interactive Memories and Dreams

Description:  

In this project I used p5.js to recreate and illustrate my partners experience in a 

interactive way on his self portrait. By adding newly learned techniques in class and 

trying to use them in a way we haven't 

Link to my project : https://editor.p5js.org/StarWu123/sketches/vhBx4bOmw

Original Image:  Rui Yang Chen self portrait

Final Product:

The memory of a experience I received from my partner was a time when he ran really fast and paraglided off of a big mountain. So I wanted to recreate the scene of the mountain and him paragliding. At first I wanted to create a paraglider with a person on it and it would be interactable by following the mouse. A problem I encountered was not knowing how to move the shape of the stick figure along with the paraglider. With the help of my partner I was able to move the figure as a whole by adding the position it as at after mouseX and mouseY.

Then I wanted to create multiple hills that would look like mountains and with different colors.

Next I added some clouds to make the scene look more full. Having then move across the screen at different speeds and come back when they reach the end. At first I was confused on how to have the clouds come back but then I thought of the if  function to bring them back to a point before the canvas started after reaching a point off the canvas so that they would not look like they were teleported on the screen.

I also wanted to try out more interactive methods so I added mouse press and key press functions, as well as changing the color of a mountain when hovering over it.

When trying to use the distance function I encountered some problems with putting it above function setup. Also the circle would not change colors when I kept the fill color of the circle. I wanted to have all the circles change color but when trying to do so by repeating the code all of the circles would have the same color. I could not find a solution to this problem.

Findings/Lessons Learned

• Using mouseX and mouseY to have objects follow the mouse.

• Using the distance function to calculate the distance

• The cleaner your code if the easier it is to fix or add to it

• Using mouse pressed and key pressed functions

• Giving animations to shapes at different speeds

Reflection Prompts

• I have learned having a set of code in the wrong location whether global or local can cause errors for your code. Setting up variables can help me store information and the conditionals can control based of the input it gets.

• My partner described his experience/memory vividly which allowed to get ideas of how to use simple code to draw out the image. Since he described what he did I could think of what functions to use that related to their experience and I understood how to add on to the picture more.

• I think in digital interactions there is a need for more thourough communication unlike in the real world where simple discriptions could be understood. Because in the real world we communicate through our experiences and can act on our own thoughts instead of perfectly putting a set of instructions to use. Perhaps making a device that can scan a persons drawings and turn them into a digital image and using simple buttons could change the scale, color, or theme of it.