Project Description and Goals
This is a final project for a KTH course DH2323 Computer Graphics and Interaction at 2018 spring. The focus on the
project is doing a flag simulation, including basic cloth model, wind blowing,
and tearing effects. Some human interaction should also be allowed to the
program. The cloth model should be physical model and thus basically animated
automatically. The to-to list will be as following:
ü Cloth
n Build a physic-based cloth model in 2D
graphics.
n Transfer the physic-based cloth model into
3D graphics.
n Adding texture to the cloth model.
ü Wind
n Apply wind and show blowing effects.
n Human controllable wind, including
direction and strength.
n Add randomness to the wind.
n Blow the flag away if the wind is too
strong.
ü Tearing and breaking
n Add cloth tearing effects.
n Add cloth breaking (making holes) effects.
ü Drag the flag along the pole by mouse
Theories
In this part, the
physic model of cloth will be described.
The cloth is
simulated by a String-Particles model, without texture, the cloth is actually
more like a web.
 |
| low resolution web |
 |
| high resolution web |
Implementation
ü Programming
environment
For implementing
the project, I choose to use Processing, a Java based open source IDE and
language for CG programming. I choose it since there the functions and classes
it provided are easy to use and can satisfy my requirements, while I don’t have
to program all the camera and 3D space by myself. Also, there are a library
called Toxilib which provides a bunch of useful physic objects, including Springs, Particles, and Forces.
ü Model setup and texturing
 |
| flag without physics |
The body of the
flag can be set up by setting particle grids and connecting them with springs. Texture
is needed for a realistic look, otherwise it will just be a web. Texturing is
done by UV mapping. That is, for each pixel having (u,v) coordinate on the
texture image, we map it to (x,y,z) on the actual model.
ü Wind
 |
| flag with wind |
The wind is formed by two parts: the breeze(random
noise) and the major wind. The physic model of the wind is simply applying a 3D
force vector to each particle. For the major wind, it is a fixed global
variable which can be modify by user input, including the direction and
strength.
On the other hand,
the breeze is done by applying a small force that is different between each
particle. It can be generated by Perlin Noise. I do not simply use random since
that for each nearby particle, the force should not differ drastically. Perlin
noise provide a smoother randomness through the noise space, which make it more
suitable for realistic simulation. Perlin noise can also be used to generate
realistic terrains.
Once the forces
are added to the particles, the interaction between springs and particles will
generate a realistic look.
Also, beside of
winds, I also added gravity to make it more realistic, which is a constant 3D
vector force.
There is also a
blowing away threshold for the strength of the wind. Once the wind is too
strong, I disconnected the two points from the pole and the flag will fly away.
 |
| tearing without texture |
ü Tearing and breaking
The effect is
basically done by deleting the spring between particles. For breaking, there
will be a center of the hole, I just “cut off”(delete) the spring around the
particle. For tearing, there will be a trial, all springs on the trial should
be deleted. Doing so is fairly simple when there is no texture. As shown in the
right figure.
 |
| broken texture when tearing |
However, when applying texture, simply doing UV mapping
for the whole flag fails. Which can be seen in the left figure. So, there is a
trick to do the texturing so it will not textured the disconnected part of the
flag. It is just checking whether the two particles are connected before
drawing the shape to be textured. If they are disconnected, end the current
shape and start a new shape.
 |
| sharp edges when tearing |
But
another problems came out that the edges are not smooth. I fixed this by
evaluating the connectivity of spring more carefully and draw the shape for
rendering more precisely.
 |
| Cutting holes on the flag |
Final results and documentations
The demo and
explanation of the project can be found on Youtube (same as the video at the top):
The project zip
file contains 3 main folders, cloth, cloth3D, and flag. They correspond to three Processing sketches. flag contains the final product, coming
along with two exported executable program, one for Windows 64 bits and another
for Linux 64 bits. Source code can be downloaded from:
The Key used to interact with the program:
UP: blow the wind into the screen
DOWN: blow the wind out of the screen
LEFT: blow the wind to the left
RIGHT: blow the wind to the right
ENTER: blow the wind upward
SHIFT: blow the wind downward
ALT: tear the flag apart
CTRL: create random holes on the flag
Drag the flag up and down by mouse
Possible future works
ü Lighting and Shadowing
ü Fabric silk after tearing
References
l Processing:
l Toxilibs:
l 3D cloth with Toxilibs:
