30 Days of Processing,

Motion Graphics, Creative Coding
Fall 2017
Major Studio I
Parsons School of Design

A collection of animations or illustrations made with Processing. The Parsons Major Studio I requires us to fabricate 5 projects in 5 days. While completing this project, I want to extend the context to make 30 daily projects in total. The theme of these applets are largely about nature and physics, inspired by Daniel Shiffman's The Nature of Code.

Concept: System
A system is a regularly interacting or interdependent group of items forming a unified whole. Every system is delineated by its spatial and temporal boundaries, surrounded and influenced by its environment, described by its structure and purpose and expressed in its functioning.

Day 1: Planetary System
For day 1 of the project, I decided to explore the most well-known, yet abstract system to us, the solar system. Our solar system consists of one sun and eight or nine planets (still under debate within the physics/astronomy filed). To simplify the problem, we keep the sun stationary and apply gravitational force to each planet according to its mass. The resulting system is planets rotating along quasi-circular trajectories with the sun at the center.


Day 2: Fireworks
The vibrant and ephemeral fireworks can also be seen as a particle system. Particle generated through explosion, illuminating the sky and die out gradually as time passes. One optimization I made is to let particle spawn a random distance from the origin, so that it simulate the reality even more.


Day 3: Splash
Day 3 of the system exploration starts with the following images, the splash of liquid or particles. How does the particle system behave when encounter an obstruction in the path. Depending on the geometry of the object, the dispersion of particle will behave differently.

To simplify the problem, we place a simple geometry of triangle at the center of the canvas. When particles drop from the top, depending on where they land, whey will be repelled to various directions and will gain momentum from the point of contact. The splash of particles will only happen when the area of contact is perpendicular to the incident velocity.

Day 4: Terrain
Mountain terrain can be simulated with a technique called the triangular strips. Picture the whole canvas as a 2D grid, with all vertices connected by edges. By raising the z-index of the vertices, we get a fluctuating display of the terrain. To make the terrain more continuous, we utilize the Perlin Noise generator to produce random numbers in a more continuous manner. See example below:


Day 5: Galaxy
For practice purpose, I forced myself to use code to generate all the elements on the canvas, though images would be a much easier choice. When we look up at the sky at night, with long exposure, we can find that the stars are rotating in the sky (because the earth is self-rotating when it orbits around the sun). Bigger and more distant stars will seem stationary and at times, there are shooting stars breaking in the dome.
The result is a beautiful cover for this 30 Days of Processing project.


Wikipedia Solar System
Size of Objects Compared to Earth
Object's’ Sistance from Sun
Anime.js by Julian Garnier
Triangular Stripe
Terrain and Perlin Noise Tutorial by Daniel Shiffman
Github Universe 2017

Github Source Code
MIT License

Find me on