NOC – Week 10: Tree Generator, Sherry

We learnt to code autonomous agents that can follow the flow field this week. For this week’s assignment I created a tree generator which can draw a tree including the crown, the trunk and the root.

Each frame two agents are generated, one in green and one in brown. I give them different initial velocities and positions so they can grow as the crown and trunk separately.

To improve system performance and keep the sketch tidy, vehicles will stop moving and be deleted when the length of vehicles array exceeds 500 or they grow out of the sketch.


After recitation, I experimented on different parameters (amp, freq, maximum, framecount, etc.) to create digital fabrics of different textures. It was just amazing to see the accumulation of all the delicate threads in a self-directing manner.


(Figure 1 is created with random width and height, moderate frequency and low alpha value. It takes some time to get such effect)

Screen Shot 2017-04-25 at 10.52.34 AM Screen Shot 2017-04-25 at 10.47.15 AM

(Figure 2 & 3 add mouseX value to amplitude, move mouse regularly between left and right side)

Screen Shot 2017-04-25 at 12.15.44 PM Screen Shot 2017-04-25 at 10.43.18 AM

(Figure 4 & 5 increase maxDesiredVelocity and steering force)Screen Shot 2017-04-25 at 10.39.33 AM Screen Shot 2017-04-25 at 10.37.25 AM

(Figure 6 & 7 change the starting position and frequency level)

Source code: Link


I am still working on the source code to create something new.


Inspiring video by Casey Reas:

NoC – W11 Flowfield, Jingyi Sun

Download files here: LINK

For this week’s assignment I played with drawing with a flow field, and instead of having the flow field be attracted to the mouse, I wanted it to repel the mouse, like this:

Although this looks the same as the attraction to mouse grid, the lines are pointing out (FIRST IMG) from the center of each rect instead of in (SECOND IMG))





However, once the dots left the canvas, they were not able to come back onto the canvas because of the checkEdges function, so I wrote a reverse goToCenter function instead.g

Playing with numbers led me to this: I really like this movement now, but I didn’t like it so much at the time I made it so I didn’t save the code, and now I can’t seem to be able to replicate this 🙁

a b

I also realized that I could create lines/boundaries with the dots depending on where your mouse is, and how long you keep your mouse at a certain place. (see code below)

c And also like this:



NOC – Week 10 – Seaweed with flow – Elaine

Check out the Demo here:

Click on the screen to generate a seaweed. It will stop growing after a certain time period.

The source code is here:

For future improvement, I want to have the shape the seaweed under better control…

NOC_Zeyao_Week10_flow field

For this week’s assignment, I made two different sketches about flow filed. The first one is to imitate what Moon did on Friday’s class, I made a similar class about generative art. Basically I changed the number of different values and made it look cooler. Here’s the demo of this art piece:


The second project that I made is to create a lot of “mouse” and let mouses with the real mouse track. I replaced the frequency, and amplified value with mouse vector.

Here’s the demo:


Screen Shot 2017-04-24 at 9.58.22 PM Screen Shot 2017-04-24 at 9.58.29 PM


NOC-Lab 10-Thread-Xiaohan Yang


Date: April 21, 2017

Documented on: April 24, 2017

Documented by: Xiaohan Yang

Instructor: Moon Junghyun

Aim: We were asked to develop a sketch that experiments with Autonomous Agents.

During this recitation, we learned about flow field. I was greatly inspired by the movements of those “vehicles” and I tried to use the sample sketch to simulate threads. To begin with, I only changed the color of each “vehicle” and played with numbers. Here is what I got.Screen Shot 2017-04-23 at 7.46.09 PMScreen Shot 2017-04-23 at 7.47.33 PMScreen Shot 2017-04-23 at 11.14.45 PM

Thread1 Since I am not satisfied with this effect, I will adjust those numbers in the future.

Furthermore, I changed the “” function from set-up to draw. Surprisingly, I got this shining “threads”.Screen Shot 2017-04-23 at 7.55.01 PM Thread_bling

Although this effect was very cool, it was actually caused by an error. I still did not figure out why the color of threads is limited to white, grey and black, instead of its previous color. In order to find out the error, I need to firstly understand HSB mode.

Afterwards, I decided to reorganise this sketch and turn it to be a System by using what we learned about particle system. Here is the restructured code.