Week 5&6: Simulation Experiments

For this project I played with a number of different experiments.  First I followed this sample code to practice building a symbol flocking system.  Figure 1 shows the resulting flocking system.  The code for this example can be found here.

I decided to build on this flocking system by adding an interactive element to the screen.  Using ml5.js poseNet I added a flee behavior from the users nose.  As the user moved the camera would detect where their nose was and the particles would have a strong force repelling them from their nose (Figure 2).  This example can be viewed here and the code can be viewed here

At this point, I decided to shift gears a bit.  I was noticing various posts on the r/creativecoding subReddit of examples using complex attractors.  I was particularly drawn to this example where the particles almost look like they are moving through a complex attractor flow field.  I wanted to set out to make this example in hopes to build on it for a future project.  I recognized that this may be a longer term project so I simply began by building a simple flow field example following this sample code. I began to play around with the equations that made the vectors behind the flow field to get different effects.  Figure 3 shows a test where I manipulated the flow field randomly but started the particles at the top and bottom of the screen to get a nice growing effect.

Figure 4 shows the same example but I adjusted the flow field equation to make more predictable visual.  The code for this example can be found here and the example can be viewed here.

From here it was clear that I needed to understand the behaviors of the complex attractor that I wanted to use in order to understand how to implement that equation into a flow field.  Thus, I took this example from the creative coding subReddit and added sliders to manipulate the constants.  Figure 5 shows the example of how you can interact with this example.  The code can be found here and the example can be found here. All of these steps were certainly beginning steps for a larger project where I build with these complex attractors and create an interactive simulation. 

Week 4: Systems and Inheritance

This week I experimented with particle systems and inheritance to develop a rain cloud system.  First I practiced making one particle system with particle lifespans (Figure 1).

I then added multiple particle system instances inside a particle system class (Figure 2).

Figure 2

This example can be found here and the code can be found here. I then began to make the rain/cloud sketch.  I started by making a generic particle class.  I then made a raindrop class that extended the particle and changed its appearance and motion to look more like rain (Figure 3).

Figure 3

Again, I created a cloud particle class that extended the generic particle class.  I then made two systems, one for rain and one for the cloud.  In the main draw loop, 10 systems of each type are made and display on the screen to make a rainy weather landscape. This example can be found here and the code can be found hereFigure 4 shows the final result. 

Week 3: Oscillations & Rotation

This week I experimented with making spirals, manipulating them with concepts from Fourier transforms, and using oscillations.  I began with a simple sketch where I used polar coordinates to build a spiral (Figure 1). 

Figure 1

I then manipulated the radius of the spiral using concepts from this 3blue1brown video.  Figures 2&3 show patterns that I developed using these concepts.  You can view these examples here and find the code here.

Figure 2

Figure 3

At this point I changed gears and began to focus on oscillations.  I saw this post on the creative coding subReddit and was inspired to combine this idea with oscillating symbol that appears on the apple watch when you use the breathe application.  I began by creating a simple oscillating circle that grows and shrinks (Figure 4).

Figure 4

I then added an angular acceleration to this object (Figure 5).

Figure 5

From here I created a class for each square and added many squares to the canvas.  Each square had a unique acceleration and amplitude (Figure 6).

Finally I added a gradient to the canvas using this code as a reference. The final result reminds me of a star in the night sky (Figure 7).  You can view this example here and find the code here

Week 2: Vectors & Forces

This week I experimented with createVector() and applying forces to objects in p5.js.  I began by making a simple bouncing ball with an acceleration down to simulate gravity (Figure 1). 

Figure 1

Then I converted the acceleration to a gravity force and used an applyForce() function to apply gravity.  With this setup, I could add additional forces to the ball like a wind force with the click of my mouse (Figure 2).  The code for this example can be found here.

Figure 2

From here I created many instances of balls falling and incorporated mass into the acceleration equation.  This created a nice rain effect (Figure 3).

Figure 3

For my final sketch I used these concepts to create a repelling field.  As the mouse moves through a field of particles, they experience a repelling force away from the mouse.  The code for this example can be found here.  Some examples of this sketch are shown in Figure4&5

Figure 4

Figure 5

Week 1: Random Walk & Perlin Noise

A note on my workflow:

Since I was in ICM last semester I decided to challenge myself with creating a new workflow and try to step away from the p5.js web editor.  While I was not able to get node.js live-server working (I plan to in the coming weeks) I was able to start a local server and use my text editor to develop my code.  Through this process I made a folder system that worked well with this workflow.  I have a template p5.js folder with all the necessary files (index.html, sketch.js, etc) that I will keep as a template to copy throughout the semester.  Then I created another folder with a copy of all of those files and named it runningCode.  This is the directory that I used to start my local server.  Since I wanted to keep different parts of my homework code as reference, I switched out the sketch.js file in the runningCode folder.  This way I could work on a simple random walk example and then experiment with Perlin noise and could have these examples in two separate sketch.js files.  I enjoyed developing this process and I anticipate modifying it more throughout the semester. 

My process:

This week I developed my code in stages. I began by building a generic random walk example as shown in Figure 1.

Figure 1: Random Walker

In this example, every time I load the page it begins the random walk in a random spot.  The code constrains the random walk from beginning too close to the edges of the sketch.  Each time the page is loaded the step amount and dot size is randomly generated as well.  The code for this example can be found here

Then I recreated a random walk in another sketch but limited the movement to the left and right (Figure 2).

Figure 2: One Dot Random Walk

Using the Perlin noise method I smoothed out this movement (Figure 3).

Figure 3: One Dot Perlin Noise

I enjoyed this motion and thought that I could get an interesting effect with many of these slider type circles on the screen.  Thus, I added an array of walkers that appeared on the screen as I clicked on the canvas (Figure 4).

Figure 4: Array of Perlin Noise Dots

As you can see, the alpha of each circle is also changing using the random walk method.  From here I began to experiment with this concept but added color and changed the circles to long rectangles (Figure 5).

 As the canvas became more populated with walkers, I enjoyed the generative pattern it was creating.  Thus I continued to experiment with this sketch to see what other patterns I could make.  Eventually I adjusted the x and y Perlin Noise movement of the walkers and came up with the pattern shown in Figure 6.

Figure 6a: Horizontal Color Modification

Figure 6b: Vertical Color Modification

Figure 7 is a black and white version of the previous images which I tend to like more.

Figure 7a: Vertical Grayscale Modification

Figure 7b: Horizontal Grayscale Modification

Figure 8 shows the final result.

Figure 8a: Final Result (faster alpha random walk modification)

Figure 8b: Final Result (slower alpha random walk modification)


Overall, I am happy with the pattern that results from this iterative process.  Since I spent some time setting up my work flow, I did not get into too much detail with this project however I see potential for more iterations of this idea.  In the future I may want to add music or notes to amplify this pattern.  It also may be interesting to create a series of these moving x patterns for a larger display.