NOC – [Final Project] Butterfly Garden , Shirley

This probably my last project in IMA besides capstone. So when I was writing my project proposal, I was thinking about what do I want to do most through this project.

Throughout the whole semester, flocking system is my favorite, and it is naturally to think about fish. So this became my starting point, which I did for my last assignment. I did a group of triangular flocking fish and used sine waves to simulate the wings of the fish. I was not satisfied with the overall visual at that moment. However, when I was debugging the wings with the body of the fish hidden from the screen, I was fascinated by the movement of the triangular wings. So I simply deleted the body and left the wings.


These are the butterflies in the first iteration, flocking in 2D. They look nice, but not intriguing enough.

My next challenge was to convert the 2D objects into 3D, based on the feedback I received during the presentation. In fact, the flocking algorithm was not that hard to implement into 3D. But I got stuck in figuring out the orientation.

In 2D, we can simply get the rotation angle by applying atan2 to the velocity, however this formula cannot work in 3D. My first attempt was to use the ofNode class to store the velocity and use its built-in methods. I thought this should be easy as I saw a getRoll() and getPitch() in the documentation. HOWEVER! THERE IS NO GETYAW()!!! which means I still need to manually calculate the rotation. Thankfully I got some help from a friend who is good at computer graphics. Here is how we solved this problem.


For the color, I mapped it to the number of neighbors of each butterfly. Wy when it has few neighbors, it will be pink; and when it has many neighbors it will has a more blue-ish color.

In terms of the user interaction, I was trying to apply an attraction to the butterflies that are close to the cursor. But that is also very different from what we normally do in 2D. And unfortunately I did not have enough time to finish this part. But what did is to let user apply some attraction and repulsion to the butterflies from the center by pressing different keys.

If I have time in the future, my next step is to put the whole sketch in VR to create an immersive experience. In the meantime I’m looking for libraries that connect openframeworks to VR devices. And I might just redo the same algorithm in Unity.

NOC – Week 11 Flocking, Shirley

For this assignment, I made a flocking fish by combining the flocking algorithm and sine wave. In this program, each fish behaves as a flocking agent and is consist of two triangles for the body, one for the tail and four for the wings. The movement of the tail and the wings is control by the velocity of the fish so when it moves faster, its tail and wings moves faster as well.

The flocking part is essentially the same as we did in class. Below is the code for drawing the fish.

NOC – Week 9 Spring, Shirley


For this assignment, I wanted to combine want we learned about spring this week and sine waves. So instead of drawing a line between two points directly, I used translation and rotation to draw a sine wave in-between. The amplitude of the wave depends on the k value of the spring; and the frequency is adjusted by the length each time when the user drags it.

When I was coding this program, I ran into a lot of issues with pointers and object initialization in c++, as I was trying to pass the balls to the constructor of my spring class. But I think it was a good practice of coding and helped me to learn more about openFrameworks. The code is attached below.


NOC – Midterm The Aurora, Shirley

Here is my Aurora. It turns out better than I expected and I am really surprised with what sine wave and noise can do. In my final version, I managed in making it 3D. So the users can change the angle and the position of the camera, and see the aurora from the perspective they like.



In general, I added many layers of sine and noise to make my particles move naturally back and forth. First I made a wavy line in 2D using sine and noise by changing the y position of each particle. Then applied a similar formula to height, width, color and z position in 3D.


At the beginning, I was trying to draw the gradient effect by drawing millions of dots and manipulate the color manually using some math. But as I talked with Prof. Moon, I realized I need to find some other way that let GPU handle the gradient color, otherwise it may slow down the performance significantly. Thankfully I was writing the program with openFramworks, and in openGL the shader can render a gradient line by default if the two vertices of that line have different color value. So for my debug mode, I just have the two vertices showed on the screen.

Next Step

I am thinking of make a web version of this program with three.js. However I’m not sure if the OpenGL gradient trick will still work or not. I am also planning to add multiple layers of the line strips.

Week5 – Rolling Ball + Photogrammetry

For the photogrammetry I tried several other objects, but they all seem to be hard to recognize by the photo scan software. It might because of the lighting conditions indoor also the objects I chose  did not have enough details. Finally I found a phone on the wall and it works.


I also modified the mesh a little bit in blender, and reduced the polygon count as well.

photo-phone photo-phone2

This is how it looks in my rolling ball unity scene.


NOC – Week5 Bubbles, Shirley

It is much harder than I thought to create these blobby bubbles. Basically each bubble has 20 particles next to each other and connected with a line. Each particle will give its neighbors attraction and repulsion to the rest. And in this way they can balance as a circle. I tried to modify the numbers for thousands of times and finally I got this.