NOC – Final by Bruce

Full presentation (Videos included): noc-final.pptx


Live Demo:

Oh well, an interactive tree.

Based on my previous midterm work, the ripple field now drives all the particles tied to the tree by a weak spring that breaks. No more shiny ripples, but just flying leaves.

The tree itself is also affected by the “wind”, with each joint taking the wind force calculation and a simple vector plus.

I thought I was going to make the tree an object, but I ended up doing something like joint_id.


Limited by the performance of canvas drawing (like over 50% of the CPU was used to draw the leaves), I can port the app to OpenFrameworks for better performance.

[Nature of Code] Final Project Documentation – Constellation

CONSTELLATION is a creative coding artwork/tool which generates users’ personalized, unique constellations.

Through the analysis of a user’s identity with Chinese Taoism Bagua Symbol and the implementation of nature algorithm into the programming, the project enables a user to see his/her own constellation that represents his/her identity. At the same time, the constellation itself is a living object that changes over time with the user.

It is also my exploration of using programming language and algorithm to represent the beauty of nature.

Continue reading

NOC Week 12

I really love this little project since it combines what we learned and what we are learning. Instead of using colors, I use black and white to make the gradient feelings.

Others are just trying to review what I learned in class.

NOC Week11

Basically, this small homework just wants to enforce my flocking techniques. Thanks to Shiffman,  I learnt so much about flocking.

However, most of the project is similar to Shiffman’s video. And I learnt a lot from colorMode, fr.html.

NOC Week 09

Inspired by Shiffman’s coding challenge-terrain, I want to explore more possibilities of that.

First, instead of making the terrains flowing by themselves, I want to use the up-down arrow to control it. So that the user experience can be much better.

Second, I slightly play with the mesh and would love to use particles to simulate similar terrain effects.

[NOC] Final Project Concept(Quinn)

Title: Terrain

Description:  A simulation of 4 different terrains.


Inspired by Chinese paintings and terrain I made for my homework oscillation, I originally wanted to make a terrain with a Chinese painting style. After exploration, I developed four different kinds of terrain.

How to do it: 

  1. use particles instead of mesh
  2. use openFrameworks
  3. use sin, cos, noise, random


Daniel Shiffman Terrain



[NOC]Final Project(Quinn)




The simulation of 4 scenes showing different kinds of terrain: mountains with clouds drifting, the moon on the ocean, an unrealistic dessert and a plain with Christmas tree.


Inspired by Chinese paintings and terrain I made for my homework oscillation, I originally wanted to make a terrain with a Chinese painting style. After exploration, I developed four different kinds of terrain.

Brief Intro:

When users press different keys, the scenes will be changing. All of the scenes are made of particles and by adjust the position of the particles, different scenes are presented. The user can use mouse to move camera and change perspectives. The first scene is mountains with drifting clouds. The second one is a climbing moon on the ocean. The third one is a man wearing scarf, an unrealistic sun and desert. The fourth one is a Christmas tree with light and snow.



What I Did:

  1. Mountains & Clouds

Different from the terrain I created before, I use particles to simulate the wave of terrain. The point of the project is to adjust the position of particles so that it can have a certain shape of movements. For Mountains, I use sin, cos and noise values to make it has both the regular movements like sin but also has some irregular movements like noise. Especially, when I create Clouds, I use random to make the particles blinks.

What inspires me is what Prof. Moon does for his project. He intentionally enlarges the height differences between the top and the bottom and make the mountains climbs highly in a really short horizontal distance. What I did is to make the particles whose Y axis is above 0 move lower while the others move higher.

  1. Ocean & Moon

The interesting part of this scene is the moonlight. I simply measure the distance between particles to the center line and makes the particles randomly changes color (achieved by drawing another group of particles).


  1. Desert & Sun & Figure

The trick I use here is random. Not only random Y value of particles, but also X, Z values. Also, taking prof. Moon’s advice, I created a ridiculously huge sun and a ridiculously small guy.   The whole scene is trying to convey an unrealistic feeling.


  1. Christmas Tree & Light & Snow

As the Christmas song goes on, the Christmas Tree is lit up and snow falls down. The key of this scene is still changing Y value. So I measure the distance between the particles and the center, and lift up them.

What I Learnt:

  1. openFrameworks is really fast compared to p5 so when I have tons of particles and tons of calculations, openFrameworks definitely is a better choice.
  2. Use easycam to move camera.
  3. Compose several 3d basic shapes can have a complex 3d model like a human figure.


I want to develop it into a tool. So user can create their own pocket universe by adjust the values of X,Y,Z. Probably, I will finish further development this winter vacation.



NOC – Final Concept – taste

In my final project, I would like to do make an immersive journey for the user to discover tastes of food in a visualized way. The journey is like a game where the user can control the direction of a ball, which crashes into particle-packing images of food. Particles will have different colors, shapes, and movement, visualizing the taste of food. BGM will also be added to match the particular feeling of a food.

I got inspired by one scene in the Pixar’s movie Ratatouille, where the background effect visualizes the rat’s feeling when tasting foods. I would probably use 3D WebGL. Movements like flow fields, flocking, collision, and oscillation will be included.



Final Project: The Silent Universe, NOC, Kevin

This is the documentation for the final project for the course Nature of Code taught by Professor Moon.

For my mid-term, I made a particle system simulator that was able to calculate the movement of a set of particles. It is built upon the real gravity formula, which in tern, is rather simple (like most other fundamental formulas): G = g * (m1 * m2) / d ^ 2. Several interesting patterns were found during experimental with different settings of gravity and environmental parameters, including the “tide” which is closely related to the actual tides as a result of the gravity of the moon, and the dancing stripes that twist and turn under the influence of surrounding centre of mass.

Now for the final, I intended to make something more “cosmic”, or, in simpler terms, more astronomical phenomenon. The original list included solar wind, galaxies, supernovas and gravitational lens. Unfortunately, I was not able to finish them all and in fact only managed to finish the first one. Senior year has been much more intense that I expected.

Basic Idea
The basic idea is simple, that the solar wind consists of numerous particles with electric charges. These particles are thus under the influence of the electromagnetic field of the Earth. The principle formula for electromagnetic forces is: F = kE * (c1 * c2) / d ^ 2.

What I got
Refer to this link:

Code and all other things
Please allow for some time while I clean my code and upload them.

NOC – Final Project – taste

Project Name: taste – a visualization of the taste of foods

Brief Description:

My final project aims at visualizing the taste of the food using the color and movement of particles. The movements include collisions, flow fields, flocking systems,  oscillations, etc. There are four foods in the project: strawberry, cola, sushi and cotton candy. The food appears in the form of particles. There is a red ball representing the taste bud, which goes spirally around the mouse. When the red ball crashes into the food, the particles that form the food fall apart and generate movements.


The inspiration for this project comes from a scene in Ratatouille. When the little rat is tasting foods, there are particles in different colors, shapes, and movements around him that visualize its feelings when it tastes the food.

In my project, I choose four foods that have distinct features and tastes, and I decided to use different kinds of methods to form movements instead of merely focusing on one or two. The reason is that I would like to try covering what we’ve learned this semester.

During my concept presentation, I was not sure whether I should use 3D WebGL to create taste visualization or not. Since I was very much impressed by the movement created by flow fields like what I’ve done in one of my weekly assignment, I really wanted to move this into 3D:

Therefore I made a 3D flow field. I met some problems in the angle on the z-direction, and I managed to solve it. My final Perlin noise 3D flow field looks like this:

However, rather than Perlin noise flow field, I wanted more regular movements controlled by angle changes. Then I found that it’s too hard to control a 3D flow field, and I decided to make my project 2D.


1. the Start Page:

I’ve always wanted to create this kind of particle-packing texts, and make them interact with the mouse. I searched for it online, and I found it in one of Dan Shiffman’s coding challenges. I learned that there is a function called “font.textToPoints()” that can get the points forming the text. There are two kinds of motions applying to the text points. One is asking them to arrive their original place in the text, the other is asking them to flee from the ball position once the distance between them is smaller than a certain value. I made the transition from the start page to the game page in this way: once the player clicks the text, the range and force of the motion that asks the text points to flee from the mouse will be very big. Once every point gets out of the screen, the stage will switch to the game stage.

2. “Particlized” Foods

There is another coding challenge of Dan Shiffman’s that teaches how to make circle-packing pictures. I created a circle packing strawberry using that, but circle-packing is not actually what I want. Instead of having big and small particles filling the picture, I would like to have regular placement and particles of the same size. Therefore I learned the function “image.loadPixels()” which reads image into pixels, write my own code that creates particles with an interval on the image and apply the color of the image pixel at that exact position to the particle. At first, a problem is that when there’s no pixel on the image, the color is automatically set to black (0, 0, 0). I solved this problem by saying that only create particles when the color of the pixel is not black.


3. Sensing Different Colors

Since I would like to apply different kinds of movements to different parts of the foods, first I have to differentiate them by detecting the color of them. When I create one set of particles of a certain food, I use a function to detect the particles’ RGB values and decide their “colstate” (color state). Afterwards, I just have particles in different color states execute different motions.

4. Different Movements

In my projects, the particles of all the foods share one same class. I have many functions in this class, and each time I call different ones. One tricky thing inside one set of movements of one food is the transition from one movement to another. Take the strawberry for example. When the red ball and the strawberry collide, first, the movement is the collision between every particle of the strawberry. Afterwards, the particles follow the flow fields instead. My way to detect where to change is to use a boolean to represent whether every particle has experienced the collision. When the collision part is done, that boolean value changes.

There are some brief descriptions of all the movements I have:

Strawberry: Collision + Flow fields. In the flow field part, there are actually five flow fields that have different centers. The angle changes according to the frame count, creating some organic feelings.

Cola: Avoid + Oscillation. Here one tricky thing is that I have to have an additional array of the grey particles that form the bottle of cola. When the red ball crash into the cola, the red particles will perform the oscillation while avoid running into the grey particles. Only in this way, the “coming out of the bottle” effect can be realized. I used “lerpColor()” function here to change the color of the particles naturally. The visual is to imitate this picture:

Sushi: Flocking + Seeking. Some particles of the sushi expand and change into fishes, then perform a flocking movement, seeking the red ball. One tricky thing was to apply the same color of the particle to the fish. Since the fish is an image, I have to use the “tint()” function. I changed the original color to the fish image to white, and apply the particle color to the corresponding fish image.

Cotton Candy: Blobby + Attraction + Flocking. For this one, I wanted to simulate the feeling when the cotton candy melts in the mouth. Therefore, I used the blobby effect we have learned in class.

5. Putting Things Together

After making each part complete, I put the foods together. I want the user to click on the GUI bar to decide which food they would see, therefore one challenge for me was how to erase particles of each food properly. Mainly, I changed their colors to black to create a fading feeling and then splice them.

At first, the red ball in my project is a bouncing ball which the user cannot control. After hearing Moon’s suggestion, I changed it to a ball that is attracted to the mouse and moves in a spiral way. This way, the ball is more organic and consistent with other elements. Also, the user doesn’t have to wait for the ball to crash into the food.

6. the Sound Part

The sound part was a big problem for this project. I did not consider much when I finished making the strawberry movement. I just added a matching song to it, and the song starts and ends with the movement. However, I realized that I have to use songs of the same beat on different foods. I used some online tool to detect the rhythm of that strawberry song and found songs of the same beat.

Brief Reflection:

The final result of this project is somewhat deviated from what I wanted it to be, from a cool 3D effect to a cartoonish 2D one. However, I think I learned a lot from this experience and the effect of each food properly conveys my feeling of tasting them. I’m willing to learn OF a bit to put this into 3D in the future.