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.