Background Visuals by Han Xuemei
A few months ago, I was working on the multimedia content of a play by ARTivate, the youth wing of Drama Box. The director of the play threw me a challenge. She would like to see raining Chinese characters during the finale of the play.
I hesitated for a few days but eventually I took on the challenge. Timeline was tight, and I did not have any past experiences in fluid simulation. However, I was really into the idea, and I believed that it was going to be a awesome learning experience.
I started with a list of key requirements:
1. I need to make characters falling down from top
2. I need to make them look like they are made of liquid
3. I need to simulate splashes when the characters hit the ground
Based on these three requirements, I sketched a simple storyboard.
After reviewing the storyboard, I decided to break a Chinese character into small particles, using them as the basic element for fluid simulation.
I did some research and found out that one of my classmate Fazli once tried to simulate fluid using WebGL, and he described his method here. As suggested in his method, I could easily simulate the falling of many tiny particles (rigid body) using Matter.js. It could give me a pretty decent falling simulation, including a nice bouncing back when particles hit the ground.
Therefore, using an ASCII library, I broke Chinese characters into small particles, and save their position in a two-dimensional array.
To further simulate the collapsing of the characters when falling, I stored the air friction index of the particles in the array. By having different air friction indexes, particles drop in different speed. It is an easy way out to make the characters collapsing when falling.
Here is how the particle simulation looks like.
So we have falling, collapsing and bouncing back solved. The next issue is how to make a group of independent particles behave more like liquid.
Fazli suggested a way to manipulate the appearance of the particles using Gaussian Blur and Threshold Filter. These filters help me to connect independent particles into a complete fluid block. Fazli uses pixi.js for real-time rendering. I can afford an offline rendering, hence I used Adobe After Effects.
One good thing about using AE is that I could also add another filter named turbulent displace. It gave some randomness to the shape of the fluid.
That’s it. Everything is good.
Further reference, please read Fazli’s article about quick fluid simulation.
