WP2WS02: Generative Visuals with Forces

– Assignment requirement –

This assignment requires us to develop sketches to visualize and imitate a subject/object/concept (in its appearance, sentiment, movement and behaviors, etc.), focusing on Object Oriented Programming, the Forces concept and Vector math functions in p5.js.

 

– My Sketch –

https://editor.p5js.org/tj1059/sketches/a1soaE92o

 

 

– Inspiration –

Several in-class examples from Prof. Moon that inspire me a lot are as follows:

• sin() / cos(): sin() / cos() functions are not only useful for realizing rotating effects, but also work well in changing colors at a regular pace.
• Bounce: By applying physics-related ideas including but not limited to force, mass, velocity and acceleration, we are able to mimic natural motions of objects such as moving, bouncing, etc.
• Attraction: By setting a target and assigning a vector between the target and the objects, a force is applicable to the objects to realize a dynamic process of gradually aiming towards the target. A lot of fancy effects are thus foreseeable through further development of this fundamental logic.

 

– Idea –

Particles → Snow/Sand → Crystal ball/Hourglass → Star as background

In terms of particles, a lot of real-life objects are mimicable through such idea. Sand, snow, water drops, shining stars, etc. I finally decided to mimic the crystal ball, which normally has numerous particles inside while dynamically moving as we swing the ball. The idea of shining stars applying sin() / cos() is also considered to further add to the background.

 

– Development –

• Basics

The framework of the crystal ball is constructed basically through push() and pop() functions, which allow the translations and filling/stroke colors to be set for different parts of the structure. 

• Application of particles

Two systems of particles are applied in this project. One is of great scale to decorate the background with shining “stars”. The shining effect is realized mainly through setting the size of each star as random within a certain range, while at the same time applying the sin() function to keep the changes in the size visually dynamic. In this sense, each star is of different starting sizes, while keeping changing to be bigger and then smaller back and forth, therefore seemingly shining over time. 

Another system is for the purpose of mimicking the falling snow inside the crystal ball. The original idea is to duplicate the slowly falling effect of the snow. However, as such one-time motion is not visually appealing enough, I changed my mind a little bit and instead experimented with a bouncing effect inside the ball. Other than the normal gravity, the seemingly random bouncing is in fact intentionally realized by applying another shift force that controls the left-or-right shifts of each small particle. The distance between the crystal ball center and each particle is calculated to make judgments and prevent small particles from bouncing outside the ball structure. As gravity functions, particles gradually slow down and gather at the bottom inside the crystal ball.

• Reflections

One main problem that I encountered is how to slow down the particles when they gradually gather at the bottom while at the same time keeping them inside the crystal ball rather than falling off. I initially attempted to make such judgment also through the velocity, in a hope of bouncing back whenever touches upon the edge of the ball framework. A broken example, though, is like this: 

With Prof. Moon’s help, instead of manipulating the velocity, what I should do is to re-place the particles whenever they cross the edge and locate them wherever they ought to appear by intuition (code attached below). Though not downright accurate, the idea is quite practical and could be used in other similar situations. Other helpful takeaways include the idea of collision check, potential user interactions, etc.