My project idea is to simulate a planetary system and the slingshot effect of space probes by using forces in p5. I am inspired by the interesting trajectories of successfully launched space probes such as Voyager and I am interested in learning and implementing the physics behind.
I simulated the planetary system with simplified and idealized models, not considering friction on the planets. The physics concepts that I use are gravitational attraction, circular motion, centripetal force, Roche Limit, escape velocity and the third cosmic velocity. The sketches below are related formulas and computations. Continue reading “NOC: Midterm Project – Jingyi Zhu”
In this midterm project, I implemented a polygon class and its collision detection. With this project, we can create polygon objects and interact with them in p5.js easily. The main motivation is that most objects in nature are usually polygons instead of simple ellipses or rectangles. Therefore, I think having a polygon API for p5.js will be beneficial for the following development of the final project. Due to the time limit, only convex polygons are supported in this project.
Project Description:
To create convex polygons, we have to first choose the vertices of the polygon. Press keyboard “A” will put a point on the mouse position to show that it is select as one of the possible vertices. Press keyboard “S” will undo the last selection. After finish selecting vertices, press keyboard “E” will automatically select the convex hull of the points to form a polygon. Note that the internal points will be ignored.
After creating several polygons, the polygons will attract each other according to the attractionMagnitude, which can be modified through the control panel to change how strong they attract each other. When they collide, they will push against each other according to the collisionCoefficient, which can be modified through the control panel to change how elastic they are when collision. The velocityLimit in the control panel to avoid an unreasonable velocity. Also, we can change the color of the next polygon by selecting the color in the control panel.
Debug Mode:
When the debug mode is on, the decomposition of the polygons will be shown by the lines between vertices and the gravity center. Also, the mass of the polygon will be shown beside the gravity center, and the mass will be proportional to the size of the polygon.
Another feature of the debug mode is that when two polygons collide, the outline of both polygons will be set to red, and therefore the collision detection can be clearly seen.
First, we will find the bottom-most (if equal then the leftmost) point, since it will certainly be one of the vertices. Then we parse the other points in the counter-clockwise order according to the bottom-most point. This sort can be done by checking the sign of the cross products of the vector pairs (OA and OB where O is the bottom-most point). Finally, we want to pick the convex hull vertices counter-clockwise. In this procedure, only left turns can be made. Therefore, when finding a right turn, the point will not be considered as a participant of the convex hull. Again, the left turns and right turns can be determined by the sign of cross products.
When two convex polygons don’t collide, there always exists a separating line between them, and the line perpendicular to the separating line is called the separating axis. Also, there always exists a separating line that is parallel to one of the side of the polygons.
Therefore, we can go through all the possible separating axis (all the normal vectors of the sides) to find whether two polygons collide. For each possible separating axis, we use the dot product to project all the nodes of two polygons to the separating axis. After projection, if two polygons don’t collide according to this separating axis, the set of projected nodes of polygon A (a set of value according to A) will not intersect with the set of polygon B. Finally, if it turns out that no separating axis can separate the two polygons, then they are considered as collide.
All the codes can be found in the github link above.
Further Improvements:
The weakest point of this project is that it hasn’t been applied to form an artistic or a story-telling form. Therefore, in my final project, I will focus more on improving the feeling of the audience using the techniques.
The reactions of the collision seem to be weird because the rotation during collision hasn’t been introduced. Therefore, it can be useful to study the physics of rotation when two polygons collide. Also, concave polygons can be supported using other algorithms.
Floral Clock🌸 is a clock that indicates people time by showing them the species of flowers that open exactly at that time based on Linnaeus’s flower clock.
INSPIRATION
I got my inspiration by watching a stop motion video of flower blooming, and after found some oscillation programming project online and taking the oscillation workshop, I started to think about is there any pattern or rules about flower blooming?
So I searched online and found a very interesting paper called Flower clocks, time memory and time forgetting by Wolfgang Engelmann, Institut für Botanik and Universität Tübingen. In the article, they mentioned that:
“We have observed an interesting high frequency rhythm in petal movement in Forsythia. The oscillation occurs when the flower blooms and petal bends in the middle with a damped oscillatory frequency of about 90 minutes.”
They also mentioned Linné(also known as Linnaeus) and showed the flower clock image.(Image 4)
And then I found Linnaeus’s original flower clock (Image 5) and some derivative clock.(Image 6)
Image 4Image 5
Image 6
PROCESS
1⃣ Step ONE
To begin with, I listed a table of flower that I am going to recreate.
And then I used sin and noise to recreate the flower using p5.js.
Flower
p5 Flower
1
Carnation
2
Afternoon Squill
3
Scarlet Pimpernel
4
Four O’Clock
5
Dandelion
6
White Sea Lily
7
Evening Primrose
8
Proliferous Pink
9
Gentian
10
Ice-Plant
11
Star of Bethlehem Flower
12
Common Marigold
2⃣ Step TWO
Then I put all the flower on the clock and here’s the Final Demo:
It is so much easier to change the parameter of the flower using debug mode! (And I found that after I finished my project🙃). However, it is very nice to develop the color pattern for the flower. The debug properties include the petal number, size, color, sinValue, rotate degree, flower blossom speed, background color (to see if they fit each other) and background transparency.
For the clock, I added a debug mode to check the edge of the hand of the clock. Because the background for the flower has transparency, but if I want to apply the same background to the clock hand, it will leave trails. So I put an ellipse under the clock hand.(I tried create graphic function but it didn’t work) Other debug properties include flower blossom speed, background colors, background transparency, clock hands length and thickness.
POTENTIANLS
After the presentation, I got many helpful feedback and I’d like to further develop my project:
1. Instead of having a static background, it can also change according to the time. (My thought is maybe have a bigger size semi-transparent flower that opens at that time in the background?)
Similar to this, when it comes to the integral time, the flower can have some differences.(like blossom?)
2. As a clock, you can mark the number (using flower?) to indicate time.
3. Add the flower open-close animation(use scale and rotate?)
4. Try to add (a little) noise value even using the sin mode.
5. The color pattern can be more unified.
6. The hour, minute and second hands can also have some diversity.
CONCLUSION
Overall, I think this project has so many places to improve and I would like to utilize it step by step. The research process was so much fun and I am excited to see something that is really happen in nature translate to programming. I’m looking forward to the second half semester.
My inspiration comes from the video “Oscillate” by Daniel Sierra and at first, I planned to make something that simulates the sea wave using the oscillation concept. My sketch for the original idea is to make a wave, which is made up of small balls, that would move left/right, up/down according to the movement of the mouse. And the small balls would bounce back and flow in the opposite direction if they touch the left/right edges of the screen.
Process:
By following professor Moon’s instruction, I first built an ordinary wave and tried to make a wave exactly the same that is made up of little balls. I had difficulties in the process and made a wave where only one ball appeared. With the help of professor Moon, I learned that I put the x position of the balls wrongly in a function under class Ball(). Instead, the x position should be declared as b.x in the for loop that calls the display function of the balls under function draw(). And the y position of the balls, which is exactly the y position of the previously created wave, can be defined as a value and then transferred to the function written under class Ball() that works to change the y position of the little balls to be exactly the same as that of the ordinary wave.
Then I tried to create the wave effect through first trying to apply a force to the balls. The force comes from the vector that is formed by the previous position and current position of the wave. I developed a way to get the force from doing substitution between this.pos and other.pos but it later turned out to be a false way to achieve this force and also the effect I got is a wave that would move faster and with greater amplitude as time proceeds, which is not an ideal effect. So after getting help, I added gravity to the balls, which make them fall down naturally and create a bounce() function under class Ball() that would make them bounce back once they touch the original wave. This would create something similar to the movement of the sea wave. And I learned that the way to get the previous and current position of the original wave is to assign the sinValue to an array that stores it in the for loop which calls the display() function of the balls. And this should be put in the very end so that it gets the previous sinValue. In between the sentence that declares the sinValue and stores the previous sinValue, the needed force can be calculated by doing substitution between current sinValue and the previous sinValue(which is the array).
In this way, the force can be applied to the bounce() function to make the balls interact with the wave. Also, this force should only be applied if it is smaller than zero, or the balls would not fall down naturally with only gravity controlling them. By adjusting and experimenting with the masses, the value of velocity and force, I got the first version of the ball wave:
Then I added another two other groups of wave-based balls with some different values in order to improve the visual effect and I found it more visually amusing to make the balls bounce in a larger range that creates an effect which looks like raindrops falling down and bounced back by strings. So I adjusted some values again to create the final version. I also added mouse interaction to it by receiving and applying the speed of mouse movement to the y position of the balls that would basically change the amplitude.
In the debug mode, I show the velocity of the balls using three different colors in order to show the groups. The frequency, amplitude and the magnitude of the force bouncing back the balls can also be changed with the debug mode. I failed to show the original waves in the debug mode so I made two videos, one with the original waves and one without them of my project.
(the speed of these two videos are adjusted to be faster because of the size limit of uploaded files)
Improvements:
Add appropriate music to the graphics that could cooperate well with the dynamic movement of the balls realtime.
Create more effective mouse interactions to interact with the balls to achieve flexibility.
Explore more with the value to make it look much more natural, comfortable and amusing.
It’s an interactive map made by thousands of particles, lining up into the shape of China. The interactive part is when user click the certain area of the map, the particles will vanish and reshape into the outline of the province of that area. And by clicking the back button on the page, the original China’s map will show, and user can choose a place again and see the shape of that place.
This map is meant to be educational and recreational, and whether the user comes from China or not might get a better knowledge of the geography of this country, and a better insight into its provinces, including how many there are, respectively how large they are.
Project Sample:
When hover, the province color changes.When clicked, transformation begins.The province shows.
Making Process:
Difficulties:
How to localize each particles on the canvas to make them shape into the form of a map, i.e, how to calculate their coordinations.
Transformation from one map to another.
Techniques:
1.To solve the coordinations problem, I used pixel of the image. First, I chose a picture of the map and pixelized it:
And then I loaded the pixel of the picture on p5, and I was able to get the color of each pixel. Then the algorithm is simple: where it gets a black, it puts a new particle on. And by adjusting the frequency of getting pixel, I am able to adjust the density of the particles:
2.Also, the map needs to know where the user mouse has hovered and clicked, which means I need to know the specific coordinates of the provinces. And to do that, I did some image editing work to make the map more visible and easier to calculate the coordinates. Then I used a simple formula and implemented in python and had it do the calculation work for me. Finally, I stored the data into an array and utilize them.
3.For the transformation of two maps, a force is given when the mouse click happened on one province. More specifically, two forces is given and they are perpendicular to each other, which will creates a rotating effects.
Things to Improve:
The transformation of the maps hasn’t reach my expectation. The main problem is that I didn’t work out a better way of particles showing up. What I expected is that they can come out from all sides, flying, rotating, and then get into its own position. However, I didn’t find a way to have each particles to find its destination (its coordination) after moving.But now I have some clues that I can use its destination coordination as the source of the force, and there will be attraction. When the particles arrive, the velocity will be set into 0.
The whole project is a little bit dull and incomplete without any introduction text. I am thinking about adding names of each maps, i.e., adding names of each provinces on the screen to have my users better know about this province, or even its cultures and features. And those texts, can also be formed by particles, and have same effects as the images.
Reflection
My skills of using pixels is improved after the project, and now I know how to use them to analyze the image. And I think this is a very useful skill. Cause I am taking machine learning this semester, so now I now taking advantage of pixels might create very intelligent projects.
Also, my utilization of class and objects is much improved, and I am more familiar of the function execution in p5.
Project Name:
