Author: Tiger Tian

Date: 03-22-2019

Click here to visit on p5 Web Editor

Since I’ve always wanted to learn to implement collision in p5, I made this with what we just learned about collision. The layout is simple, with a transparent bowl at the lower half of the canvas and a rainbow-colored stripe at the top. If you move your mouse to the rainbow-colored stripe at the top, it expands a little bit so you can pick a color, and the circle below indicates the color you’ve picked.

Then you can start adding goo to the bowl by simply clicking! The goo dropping to the bowl is the core part of this assignment, as it requires some trick to make it collide with the bowl – which is a half-circle in shape. It’s basically the same thing as making two balls collide, the only difference being the relationship between distance and radii – in this case, the radius of the outer circle equals the sum of the inner circle radius and the distance from one center to the other. Collision also happens between any two of the goo balls you create, though it’s not exactly collision, but some kind of sticky effect.

When too many goo balls are added to the bowl, all of them disappear! I added this feature after I realized too many of them resulted greatly in frame rate dropping.

Link to Google Slides

Date: 03-12-2019

Buoyancy

Since we touched upon the concept of buoyancy last class, I wanted to delve a little bit into that, as we didn’t really look into it in class. My intention is to inspire us on how to better implement buoyancy in our codes.

The essential reason why buoyancy exists is that the amount of water pressure differs on different levels in the water. When an object is wholly immersed in fluid, the fluid exerts pressure on both its upper and lower surfaces. Pressure upon the upper surface is downwards, while that upon its lower surface is upwards and bigger than the former, hence the buoyancy being upwards. That’s the basic principle of how buoyancy works.

Essentially, in a certain type of fluid, whether an object floats or not is determined by their density. If the fluid has bigger density, the object floats, and vice versa. If the object has the same density as the fluid, it suspends in the fluid (can stay static at any level in the fluid).

If we would like water in the physical environment we creates in p5, buoyancy is something we have to think about. In my opinion, the simplest and most accurate solution is to add density to objects. With the density and size of an object, we calculate its mass. The buoyancy that water exerts upon it is determined by its size – they have a positive correlation; its mass directly determines how much gravity there is. By adding the two vectors together – gravity and buoyancy, we’ll know whether the object should float or sink.

Date: 03-12-2019

Click here to visit on P5 Web Editor

Personally, I really liked this week’s topic, because it begins to reveal the essence of the course name! What I did after class this week is similar to what we did in class. It has the wind method controlled by mouse X position, and buoyancy based on Y position. I also added a few other features to make it more interesting.

Besides water, I added an oil layer, whose density is smaller than water, so it floats above water. Thus there are three possible states for a particle: floating on oil, floating under oil and on water, and staying at the bottom of water. Which state a particle is in is determined by its density, which is why I added density to each particle. It is a random value, just like the size of each particle. Now that we have both size and density, we can calculate its mass by simply multiplying them (technically, mass = density * volume, and sphere volume = 0.75 * pi * radius cube, so if I were to be accurate, it would be m = ρ * 0.75 * pi * (size / 2) ^ 3. But here I omitted the complicated calculations). Then I added colors to the particles to indicate the density of each of them, using the map() function. The lighter the color, the smaller the density.