Project Documentation
link to the code:https://editor.p5js.org/xp2022/sketches/MIm8APntZ
Introduction
This is an interactive project with physical interface which consists of a tree(on the screen), a tissue box and a fuzzy bird. With a wire in the hand, user can draw a tissue out of a box or touch the bird. If the user takes away a tissue, some leaves on the tree will turn yellow and gradually disappear as they fall off the tree. If the user touches the bird, a bird will fly through the screen and give out some birdsong. When all the leaves disappear, the tree will die and there are no birds anymore. Instead, there will be another interface.
Inspiration and Theme
We choose environmental protection as our topic and we want to offer users an interactive experience through our project so that they may understand how their lifestyles or even tiny living habits can influence our environment.
We focus on the overuse of tissues. We find that this phenomena is quite common in our daily life but is seldom noticed by the public. Therefore, we hope that people can be aware of this phenomena and then live in a more sustainable way through interacting with the virtual tree in real life.
Working Process (Part 1 and Part 2)
The working process of our project will be demonstrated in two parts–the visual part and the interaction part. The visual part will focus on how the graphics of the tree is drawn and the interaction part will introduce the code about the interaction with the tree and the birds.
1 Visual Part
In the visual part, our project has experienced three stages–the concept map, the first version and the final version. We use green circles to represent leaves and we draw the trunk through “vertex()” , “beginShape()” and “endShape()”. With a “for()” loop which controls the angle, the position of each leaf is determined by “cos()” and “sin()”. In our first version, the leaves appear randomly within the ellipse and they overlap each other. And in our second version, we find some ways to generate leaves without overlapping , which can present better visual effects.
The Concept Map
Version 1
Object
Leaf is written into an object (class). In this class, the coordinates of the leaf is put in as parameters using “constructor()” and some values of variables are also initialed in the constructor. There are three functions in this class–“show()” “disappear()” and “intersect()”. “Show()” is used to display the green leaves. “intersect()” is used to make sure that the leaves are not overlapping each other, which I will further explain in the”object communication” part. As for the “disappear()”, the function is used to display yellow leaves and then let them disappear by changing the transparency as they fall. Similarly, the bird is also written into an object. And in the function”update()”, we use “sin()” to make the bird fly up and down.
Array of Objects
We create two arrays to store the “leaves” and “birds”. By using arrays, we can draw a number of objects and program their behaviors in just a few lines of code. We also use “while()” loop to constrain the length of the array. And we use”push()” to fill the array with objects. In our first version of the tree, we use”splice()” to remove the leaves immediately. However, we adopt another way to make the leaves turn yellow and then fall off, which I will explain in the “Interaction Part”.
Object Communication
To make sure that the leaves won’t overlap , we use object communication. The “intersect()” function is used to compare the distance between centers of circles and the sum of their radians. If the distance is less than the sum, it means two leaves intersect with each other. As a result, the function will return true, which means the leaf can’t be “pushed” into the array.
In the “setup()” part, we use a while() loop to constantly generating new leaves. Within the loop, each time a new leaf is generated, it will run through the whole arrays to check if it overlaps any previous leaves. Only when it doesn’t overlap any of the leaves, it can be put into the array. At first, we use two arrays and we use the first array to store the generating leaves and the second one to store the leaves being selected. However, the program cannot run smoothly so we simplify it. Instead of using an array to store all the new leaves, we only need one variable to temporarily store each new leaf, and then the “intersect()” function will check the new leaf and the variable is updated.
2 Interaction Part
Set the life of yellow leaves
Once the leaves turn yellow, they will disappear in 2 seconds. In other words, we set their lifetime as 2 seconds. We use “millis()” as a timer. When key is pressed, a variable called startLife will record the time when the leaves turn yellow. Then, in the “disappear()” function, the remaining life of the leaves is the current time (millis() ) minus “startLife”. We want the transparency of the leaves gradually reduce with the time. Therefore, we use “map()”to set the the value of remaining life as 2 seconds and then map it to the range of transparency.
Fall off and disappear
We divide the array of leaves into two parts–the first part consists of green leaves and the second part is made up of yellow leaves. Leaves in these two parts have different “behaviors”, which means they need different functions. And that’s why we divide the array into two parts. In addition, the length of each part will change as the user clicks the mouse or presses the key.
To be more specific, we create a variable called numCut. Leaves in the first part of the array are from “leaves[0]” to “leaves[numCut-1]”. These leaves will turn yellow and then disappear. The second part consists of the left leaves, which is from “leaves[numCut]” to “leaves[130]”. Therefore, the initial value of numCut should be 0. Then, if the key is pressed, which means some leaves will turn yellow and disappear, the value of numCut will increase. As a result, the length of the first part of the array increases.
sound
Each time the mouse is pressed, a bird will appear on the screen and give out some birdsong. We upload the sound file in “preload()” function. And then every time the mouse is pressed, the birdsong will be played.
physical interface
As presented in the code, our project is still based on mouse and keyboard interaction. But we use Makey Makey to connect physical objects to the computer keyboard. The circuit is disconnected by default and when it is connected, the “key” or “mouse” of the computer will be pressed.
The positive pole of the circuit is connected with the computer and the negative side is the wire in the user’s hand. Therefore, when the user touches the tissue or the bird, he or she is actually closing the circuit. The wet tissue is conductive so the circuit will be connected as long as the user touches the tissue.
Collaboration
Coding
The visuals of bird and stem–Sibyl
The class of bird–Sophie
The interface of “kill a tree”–Erin
The leaves without overlapping–Erin and Sophie
The falling and disappearance of leaves–Erin and Sophie
Other
The instruction poster–Sophie
The circuit–Erin, Sibyl and Sophie
Reflection
Our working process didn’t go as we have planned completely and some parts of our project is beyond the plan. When we made the plan, the leaves appear randomly and they overlap each other. The leaves will disappear without changing its color. We didn’t let the leaves fall from the tree. And we planned that if the user touched the leaf, those leaves will come back.
We think it will look like a tree more if the circles don’t overlap each other though this is a little bit challenging. We watch some video tutorials online to learn about object communication. The example given in the video is different from our situation because we need to use object communication in “class” and these circle must appear in a certain pattern instead of appearing randomly. Finally we write our own code and use it in our own project.
Through user testing, we received feedback that users can better understand their harm to the tree if they see the leaves falling off. So we keep the y position of yellow leaves changing in the “disappear()”function.
During the user testing, we also found that they hardly noticed the tissues. Therefore, we put the tissues in a box and paste a mini-poster with instruction on the box so that users can easily notice it. However, even though they are aware of the tissues, they still cannot understand the connection between the disappearance of leaves and their behaviors of taking the tissue. To solve the problem, we write” Take a tissue –even though it may kill a tree?” in the poster. Similarly, considering that our users don’t know they need to hold the wire, we also add some instructions.
In addition, lots of our users suggest that we replace the leaf with other stuffs because they don’t understand the meaning of the leaf. So we gave up the idea of bringing the leaves back by touching a leaf. Instead, we use a fuzzy bird. Each time the user pat the bird, a bird will appear on the screen.
To make our project more educative, we create some rules. When all the leaves fall off the tree, the tree and birds will disappear. An image will be presented to remind user of their non-environmental friendly behaviors.
We can still improve a lot on our project. We can improve the algorithm of the intersect() function because we find our program very slow when we increase the number of objects. In addition, we can add different kinds of interaction to the tree. We can also improve the physical interface and find a way to make the wire in the user’s hand invisible.
Leave a Reply