NOC-Final Project(Cyndi)

Date: Dec.14th

Name: Cyndi

Instructor: Moon


My nature of code final project turned out to be a very different thing from what I expected from the very beginning, but I kinda like it.

I got my inspiration from two pictures that were very popular online. When the same picture is viewed by different people, different effects were triggered. So I really want to make filters that allow people to see different things behind the filters.

One big part of my project is the circle packing part. It is mainly pixel manipulation. First, it read the pixel values from the image I loaded. Then, I write another function to generate certain shapes matching the pixel color and the position of the original image.  I can actually choose the shape of what is filled in the position of the image. One thing worth noticing is that the pixel density should always be set to one. At first, I really wanted to create different scenes of Shanghai, such as raining scene or night scene, so I chose a picture that shows the famous attractions of Shanghai.  I adjusted the color of the picture, one is for the rainy scene and one is for the night scene.

For the night scene, I decided to add stars to the sky. I really wanted to apply the trail effect to the night scene, but since I already had the pixel version of Shanghai night, I didn’t know how to make adjust the transparency of the layer underneath the stars. After talking to Moon, he taught me to create another graphic for the star, so I can adjust the alpha value of the background of the graphic I created. Also, I learned more about the blend mode in p5.js. The effect was just amazing. Everything turned out to be great.

For the rainy scene, firstly I added some random grey particles to make it seem foggy. Next, I used the flocking system to make the raindrops to be parallel with each other. To make it more like a rainy scene, I created puddle function to make small circles when the raindrops fell on the ground. I also used the create slider function in p5 dom library to add filters on the canvas. I used two sliders in total, one for controlling the size of the ellipse and another is the transparency.

The biggest problem I met in the process is actually the speed of my system, especially when the raindrops were falling down, the speed was just super slow. I tried to put all my code into open framework to make it smoother, but my codes are sort of complicated and I got so many errors. After talking to Moon, he suggested me to splice out the particles when they reach certain values. When I learned the splice thing I thought it was just for making the scene less messy, and until then I knew that splicing out particles contributes a lot to make the system run faster.

When I was designing this project at the very beginning, I want to create the world behind filters, so I wanted everything to be dark at first, and when the filter is on, different scenes will be revealed only at the place where the filter is. After talking to Moon and Jiwon, I tried the mask function in p5.js and also the color erase method to imitate the feeling of the filter, but both of them didn’t turn out to look good, so I had to give up. After splicing particles out, I found out the effect was surprisingly good because all the pixels are shining and moving, and it was better with the filters on!

I was going to do a third scene of the city, then Moon suggested to try something else, maybe something with the really high comparison. So I downloaded a cartoon face from google and used blobs to make the contrasts.

To keep the system running at a fast speed, I actually have to do the splicing thing on almost every image I loaded. It worked well on some of the pictures, but for other pictures, I cannot recognize what the original picture is when it is “translated” into pixels.

For further exploration, I really wanted to do the mask thing. Instead of just color filters, I wanted to apply more to it. Also, I want the pixel manipulating thing can be applied to almost every picture, so I may have to adjust my code in the circle packing part.


I went through a lot of struggles during the process of making this process. Although this is not I wanted at the beginning, I still very like the visual I created. For the next step, I really want to make a real filter which can reveal and hide scenes from people’s eyes. Last but not least, I just want to thank Moon and other fellows for all the help they provided! They have been really kind and useful to me. I really learned a lot from Nature of Code!

My code:


NOC_Final_Homage to Artists

Through this semester, I’ve been thinking  a lot about the difference between digital art and fine art pieces. And with the development of AI, computer nowadays were able to create art that it might be hard for people to tell which one is created be human beings and which ones are not? And as I presented earlier in my midterm idea that I am trying to explore the boundary between digital art and fine art. I made in my final and I am really happy about this in general.


As for this final, I started with the inspiration from Lee Ufan’s work. I really enjoy his minimalist brush strokes.

And I started with trying flocking, which resulted in like these:

(For more practices screenshots, Please refer to the Google Drive)

The problem that I had with this one, is that I couldn’t control the directions well enough and also the trails leaves on the canvas are a little bit dirty for some reason. I discussed with Ariel about this, and she suggested that it should be because of the background color. And then I took my project to Jiwon, wondering what’s the optional way of achieving this. And she said there’s just no need to use flocking in the first.


NOC-Final Concept Presentation(Cyndi)

Name: Filter

Elevator pitch: The world behind filters


Different things can be seen with/without filters


  • A neat and simple scene at the beginning
  • Different filters added to the canvas
  • More hidden scenes appears
  • Moving scenes/Interaction with the filter


  • daily life-changing perspective
  • prejudice
  • behind filter/without filters


  • Pixel manipulation
  • filter function in p5.js
  • slider to control the filter



NOC: Assignment Flocking, Ariel

This week, we learnt flocking in class. I spent some time figuring out what to do, then I just come up random idea about adding rock into it and then the flocking system will avoid these rocks. Also, after the flocking hitting the rock, the rock will become smaller and smaller. ( which looks like fish eating fish food… Once the flocking hit the rock, the triangles will be turn around and the group will be separated.

Previously, I played with creating boundary for the flocking so that it will move in a certain circle that I can take advantage of the lines to mimic pencil drawing of flowers. Since the separate function will diverse the points especially at the curves and the collision will gather which strengthen the line, it’s fun to use this flocking to create some patterns.

NOC-Week 12: Trapping Birds

This week, we learned how to make a flocking system, which contains three main movements: separation, alignment, and cohesion. In the weekly assignment, I wrote a simple sketch that has a flocking system (as birds) in it, other than the three main movements, I added a function called ‘avoid()” to ask every bird run away from certain objects. Then I made a new Class called Obstacle. Whenever I click the mouse, a new set of obstacles in the shape of a circle around the mouse would appear. The birds have to avoid the obstacles. Therefore, the birds that happen to be inside the circle are trapped in it. The radius of the obstacles that form the circle changes through time with sin value, and therefore birds can escape and be caught again and again.


NOC week 12 Flocking homework(Ronan)

For this week’s assignment, I created a “galaxy” based in flocking.

Since we have already learned pretty complex flocking behavior in class, I was thinking of improving the techniques or the code. Instead, I wanted to spend some time on the visulization. Then I rememered the NIME poster that I created.

Therefore, I was thinking of turning the flocking example we did in class into sky full of stars.

I added another function called “drawLines()” in the Boid object, and when the distance between two stars is smaller than neighborDistance but larger than 0, then draw a line between then.

I choose a blueish color for the line, 238 for the stars and 21 for the background sky. Besides, I made the size of the star a random number between 1 to 7 and added opacity to the colors, because stars have different sizes and lights.

This is the code from github:

NOC_Week13_Flocking_Weiyu Wang

This week, we learned about flocking. Speaking of flocking, my first impression is a flocking of birds. So this week, I am making a slingshot game. A stone will be used to hit the tree with a slingshot. And when the stone hit the tree, those birds will get scared and fly away in the form of flocking.

Here is the code:

NOC-Week 12: Flockings(Cyndi)

For this week’s assignment, I am trying to imitate the effect of raindrops. Every time the raindrop is falling, a puddle will appear and then disappear when it increases to a certain size. I applied the cohesion and align functions to the raindrops so the raindrops can actually go to different directions. Also to control the raindrops and the puddle, I applied the reset function to make them generate again and again when they reach desired values.

One difficulty I met is that I really want to make a trial of the raindrops, and when I applied the alpha value to the background, there were trails everywhere, including the puddle. I tried to create a pGraphic but it also didn’t work. I am still trying to figure it out. Another one is that at the latter part of this, the size of the puddle just keep increasing and it was a bit ugly for them to overlap each other. I am still trying to make it prettier.

Last but not least, I added many random circles in the background to make it a little bit more “foggy”. I will continue working on it in my final project.

My code:

NOC – Week 12: Moving Lights – Stephanie

This week I expanded the class sample code of flocking. I mainly focused on the visual of the flocking, where I created a light effect for user to control the position of the light flares:
1. I changed the shape of the flocks, and the initial position of them;
2. I used HSB color and changed alpha value to make the visual better.

This is a screenshot of a sample run, and the complete code: