NOC – Week 1: p5 basics (Wentao)

For this assignment, I mostly focused on the function of mouse position and mouse pressed function.

When moving the mouse around the canvas, you can change the background color according to the position of the mouse.

When you click the mouse, a white ellipse will appear at the position of the mouse and will move around with the moving of the mouse.

When you press the mouse, the size, color, and transparency of the ellipse will change randomly. And when you stop pressing the mouse, the color will change back to white again.


let a, b;

function setup() {
  createCanvas(400, 400);

function draw() {
  background (mouseX*255/width,mouseY*255/height, 0, 12)
  if (mouseIsPressed){
    a = random(10, 60);
    fill(random(0,255), random(150,255))
  else {
  ellipse(mouseX, mouseY, a, b);

Nature of Code: Week 1 assignment–Moon(Candy)

Documented by: Candy Bi

Project name: Drawing Board

Professor: Moon

Date: 2/19/2019

final(video version)

For this assignment, I started without an idea of what I want to do, rather I choose to experiment to see what I could get.

I start with a red background with some moving rectangles. I make the background transparent so that the three reactangles could leave trails.

I then draw a white ellipse that would move according to mouse:


For some improvments I use the “mouseIsPressed” to create the effect that only when user clicked there would be the white circle:


I suddenly came up with the idea to make th white circle a bouncing ball that would bounce whenever it touches the three rectangles. It turned out a failure.

I then shift to the idea of playing around with lines and this is what I got:


For better visual effect, I made the other side of the lines ramdom in a certain range ( inside the big rectangle the three black moving rectangles formed). It somehow gives the feeling of modern arts:


Recitation 9, Apr 21, Sean(2018)

In this recitation, Luna and I made a rabbit using the basic shapes offered by Tinkercad. It is saved as a STL file and we turned it into a physical model by 3D-printing.


However, limited by the gravity and its structure, we are required to use some supporting parts when printing, and thus it looks like this.

I choose 3D printing because it can make things that are tridimensional more easily than other ways, given that we created a model not so suitable for laser cutting.

During my midterm projects and Stupid Pet Trick, I mainly used paper printing and handcrafts. However, the digital fabrication makes it possible for me to create more complicated physical parts more easily.

According to the reading, the invention of digital fabrication makes it possible to turn data into things and turn things into data. This ability triggers revolution in many industries, and most importantly, it shifted the way people thinks and acts in society. Therefore, when I am designing and creating my own project, I am also influenced by this revolution. The design is made up of separated parts that are changeable, and every thing can be fixed easily if I am not satisfied with it. The file is always accurate and is easy to duplicate — I can create as many counterparts as I want. There is still a long way to go, but through my work I feel the infinite possibility of this technology — that’s why it can trigger a revolution.

In the future I believe creating things will be even easier. For example, there will be more materials that we can chose, so we can design more things. Also, the process will be faster and the accuracy will also be improved. On the other hand the designing process will surely get improved — but it will certainly still be based on mathematics calculation, because that’s where the accuracy and the beauty of those curves come from.

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.