Brief intro:
This open object explores the theme of “If people were plants”, trying to find the different ways in which plants and people deal with physical and mental trauma. There is no right or wrong point of view, but we hope to make the viewers think and take themselves more seriously as human beings!
For sketch one:
Concept：the Venus flytrap can feed on ants and flies. Their appearance is quite similar to human eyes. Based on this, I decide to use flies as a metaphor for the various negative comments about oneself that people perceive through our eyes. For most of us (humans), these comments are like weapons that can cause emotional pain and sadness. However, for the flytrap, such unpleasant things are their food and nourishment. In a way, the Venus flytrap encourages people to transform these negative comments into nutrients fir their own growth.
Process:
Because I want to give the effect of flytrap opening and closing. I first try to use two ellipse and ellipseMode() to do that. However, using different mode can only draw the ellipse based on its center or its upper left corner.
It is fine to use this, and set the ellipse’s height as a variable, but it doesn’t help me realize what it feels like to flip over.
So, I use this, scale, to fix all the problems.
IMPORTANT: to use this please draw all the shapes you need based on (0,0)
One problem I meet here:
If you look carefully here, I want to set the eyeball like a ball in the flytrap. However, because of the front and back occlusion, I could never get this ball to render as normal visually.
For example, if the circle is on top of the top leaf, the leaf won’t be able to cover the circle after it’s flipped down. even if I use an if statement to make the circle similar to being drawn above or below at different moments, the articulation in between won’t be able to be done properly. So I ended up choosing to have the eyes as a pattern on the blades and flipping as the blades flipped down. Also, to have a front and back effect, I had the pattern appear when yScale was greater than zero, and the back appear when yScale was less than zero.
Next part, to get it eyelashes.
I link 5 balls together by spring force and put the two ends on two fixed points so that other points have the effect of hanging down. I do this instead of drawing them using arc because I also I want the fluttering of their eyelashes to reflect the ferocity with which they hunt for food. Exaggerating flytrap and the different ways humans handle “fly”.😤
And to fulfill the fluttering effect, I the fixed ends’ position is given by using yScale instead of put a fixed Value within the scale() function. According to the two screen shoots following we can see how I change the fixed point to the point using yScale.
Besides Gravity, I also add some force to bend them in different directions, or the center one will always stay straight forward😅.
Because a leaf has seven eyelashes attached to it. And that time I haven’t thought about put all balls in one array, I just want to put them indifferent arrays, so I tried to create array within an array.
(Actually this shows two ways to create the array within the array. one to create it outside the for loop if you know exactly how many array you need. One is to create it in the loop to make it more flexible.)
To Refine the Visual Aspect:
As my sketch puts here, at first, I want to color in some irregular and organic pattern instead of a regular ellipse. However, it could be hard to create very complex texture and brush strokes in p5 for me. So, I decide to simply this by using noise. The line’s one side is position at the ellipse’s outline.
To Adjust Its Behavior:
Yes, to let the flytrap eat the fly also cause some difficult for me.
I have this idea to let eat something because during the meeting, Prof. Moon told me that I can large its scale to show the details I show inside.
To avoid such kind of issue the screen record has, I set a bunch of if conditions to let it do the actions step by step even though my mouse is still in the region that can trigger the first behavior.
I also tried other colors, but I still prefer my first version.
I gain the inspiration through my talk with Rachel🥰.
Concept:
Human behavior is complex. In certain situations, the mind and body may not align perfectly, leading to scenarios where one’s actions, influenced by the mind, can result in physical harm to oneself. Some physical actions can also inflict harm on the mind, underscoring the deep connection between bodily movements and psychological well-being. This highlights the intricate relationship between mental states and physical actions, emphasizing the importance of harmony between the two for overall well-being. For plants, both their mind and body are dedicating to growing and surviving.
I’ve imbued this code with my sincere hope: that our bodies and minds can stand on the same front, rather than enduring mutual torment. So, in this sketch, the body (or branches) is trying to protect the heart (which represents the mind). I also give the branches a shape like wings and make them together look like an organ heart.
Process：
First challenging comes when I want to make the branches look like wings.
After a long time consideration, I decide to have 4 balls in each side, and let three balls be linked to each other to form a steady triangle. And then I use curveVertex() to draw the arc based on the three points to let my wings curve a little.
After the structure is settled down, I begin to develop its feathers. At first, I want to make it just like what I’ve done to week6.
However, things now are a little different. In the week6, the upper parts of the wings are fixed at some points so that they won’t fall down forever due to the gravity. However, here I want the upper part to be removable. If I also link it with the down part by spring force, it will definitely fall on the ground without having a shape of wings.
Then how to fix this? I’ve taken a simple, brutal approach to this- I create another new array of points and fixed them to the points I’ve already had for the upper part😋 and then link them to the downside part of wings, just without showing them on canvas. In that case, there is still gravity and spring force for the wings, making the movement of the wings more vivid. (The invisible points are like the unsung heroes working behind the scenes, deserving of our applause. 👏👏👏)
I first use ellipses to connect the upper part and down part. But I find it is not satisfying because of two reasons. First it is because the arrangement of elements in the foreground and background needs to be adjusted. Second is it because it is not like a plant. Thus, I abandon this idea and connect them just using the line.
Unfortunately, I find myself still need to adjust the elements in the foreground and background😇
For the fire part:
I want the fire to be shrink on the top. So, I create an attractor to on the top to let the flame run towards it. However, I cannot use pos.x to be the vector’s x, because then it will just run straight up. To get flame’s origin x, I first assign the value to this.x, and then give this.x’s value to this.pos.x, and all the update are done to this.pos.x instead of this.x. In this case, this.x keeps the original value😮.
To be lazy here:
Also, at first I start the radius by 40 and adjust its shrinking speed till I satisfied with the whole shape. But then I find the flame could be too small, and I need to larger its radius. But then I have to adjust the shrinking speed again. To solve this problem (just because I am too lazy and I do not want to adjust again and again), I associate the decaying speed with the radius value. Then I only need to modify the radius to “scale” (it was like scale, to keep the width and height’s ratios at the same value) them up or down.
Little interaction here:
Concept:
Vine Plants are among the toughest plants in the world. Because of their high flexibility, they can be used to weave baskets and chairs. Here I want to make a comparison between vine plants and human’s spine. If the wind comes, vine plants just bend their stems; when the wind ceases, they straighten up again.
However, for humans, perhaps for their dignity or in pursuit of greater achievements, they always keep their spines straight. This sketch hopes to convey that sometimes people should allow themselves to relax, to let go of their pride for a moment. But this isn’t about falling down permanently; it’s like when the strong winds pass, they will stand tall again.
Process:
I believe what’s most noteworthy is how I distributed these points and incorporated my pattern among them.
I first create two arrays of balls, fix their end to specific points.
And then after them became stable (do not move anymore), I tried to get their exact position through cosole,log(). Why I want to have their position? Because to maintain its shape (wide at the top and narrow at the bottom), I also create spring force among two arrays with different spring length.
Lazy again:
I use console.log to reduce my typing work. Also “done” means all of the points are updated for one time, this allows me to find where to start to “copy”.
Problems😵💫
I do not know how to remove the black stroke here when I draw curvevertex. I just suddenly find that if I draw another curveVertex after it, this stroke will only appear on the latest drawn curveVertex. So I just draw another after it and move it out of the canvas😵.
To insert the image:
New function here:
atan2 from the example code:
here we just view(0,0) as one vector (p1), and mouse as another vector(p2). For me atan2 might also be helpful when I want to calculate the tangent to a circle somewhere.
Reflection:
- be patient when I am coding😇
- Even though I have concept in my mind, how to make them clearly conveyed through my sketch?
- More interactions and behaviors could be explored to better convey my idea, do not be limited to the mouse and the keyboard.
- I find myself pretty like spring forces, but the way I incorporate with it is very limited, please try to explore more ways I can play with it.
- I’ve noticed that, compared to my classmates, my ability to use particles for visualization is quite weak. I seldom use them, and even plan not to do so now, but for me, those works coded with particles possess a sophisticated artistic beauty🤩. I seems to create a graphic more often😢. I’m not sure if this is a bad thing.
Drafts I have:
Reference:
about the spring force: NOC example code: https://editor.p5js.org/MOQN/sketches/wLLui8Q9R
about the avoid overlapping when dragging the ball: my Week6 mini project liquid kitten and my CCLAb project A
about the fire, I first asked Calrie because that her fire is so realistic: https://editor.p5js.org/Claire-y3/sketches/BFEQv3QcF and for the fire’s color, I use the color in the example code I used to find when in CCLab: https://editor.p5js.org/aferriss/sketches/SyTRx_bof
Why I set a fire in the heart: inspiration from: http://xhslink.com/e0VuwE