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.
This week I developed my code in stages. I began by building a generic random walk example as shown in Figure 1.
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).
Using the Perlin noise method I smoothed out this movement (Figure 3).
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).
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 7 is a black and white version of the previous images which I tend to like more.
Figure 8 shows the final result.
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.