Concept:
As I was looking for inspiration for my third assignment, I came across a YouTube page named Barney Codes in particular his video on Parlin Noise. He did a simple function where particles move across the canvas to create shapes. However, for this assignment, I wanted to use arrays and classes to do a similar version of what he was doing. It was so hard to decode the logic behind his project and turn it into a class format. A lot of trial and error took form, and I ended up doing multiple p5js codes to get what I wanted. Also, his project reminded me of Starry Nights by Vincent Van Gogh, one of my favorite paintings. As a result, for this assignment, I wanted to play with Barney’s code but also add a sense of darkness and beauty to it.
Highlight on Code:
I started with some videos about functions, arrays, classes, and Perlin noise. As I was searching and looking I came across a simple function on the Parlin noise graph that I found online. I manipulated the code a little so that I see the different results. I also played with the colors and aesthetics of the image. It was interesting and I realized that every number you add, and every sign makes the image different. However, I did not use this for the final project I wanted. You can see below the code.
let x = 0;
let rectWidth = 1;
function setup() {
createCanvas(500, 400);
background(0);
}
function draw() {
noise1D();
}
function noise1D() {
while (x < width/rectWidth) {
// Add randomness to x and freq for shaky movement
let xOffset = random(-1, 2);
let freqOffset = random(0.1, 0.09);
let n = noise((x + xOffset) * (0.001 + freqOffset));
n = map(n*4, 0, random(10), width/3, 0);
stroke(random(150,220),random(150,220),random(150,220));
rect((x - xOffset) * rectWidth, height = n, rectWidth/6,n);
x++;
}
}
Then I decided to look at the exercise of the bouncing ball in class. I knew it had a different logic from what I had in mind, but I wanted to start slow. First, instead of a circle, I drew a particle. I gave x and y random values from 0 to 500, my canvas dimensions. Then I started changing the numbers within the code to see what each represents. Then I added color to the project and used the sin and cos because I was hoping they would give some curve to the image, but they did not. I also did not want to use this as my final project for the assignment because I wanted to use Perlin noise. However, doing this gave me a sense of what can be done to get the image I want. I know that a point is like a pixel so it’s technically zero-dimensional, so I wondered what the variables represent in this code and what are they doing to the point. I added the explanation within the code below, I hope it’s correct.
I stopped for a little to see what colors I wanted my generative art to have. The numbers I chose were a range of what I wanted the most dominant colors to be and whatnot. I found RGB color code tables helpful in this because I picked the colors from there. Then I tried to figure the logic out and write the code.
Reflection:
It was an assignment of exploration. I realized that I love using randoms in my codes because they add to the piece something unexpected. It was a challenge for me to figure out how to create the class, but I did it. One thing that I did not figure out is how to keep the particles within the boundaries of the canvas while the mouse is pressed because they tend to leave. However, I can say it was a choice. There are a lot of possibilities in p5js that I still want to discover in the upcoming assignments. One important thing that I always tell myself is that when you read hard codes or watch hard examples it is okay that you do not understand them because with time you will, so be patient.
A link of me exploring the concept: https://youtu.be/BQlmNmS3-Os
Resources:
https://editor.p5js.org/shn202/sketches/w04RNd0li
https://www.youtube.com/watch?v=sZBfLgfsvSk
https://www.rapidtables.com/web/color/RGB_Color.html
https://happycoding.io/tutorials/p5js/creating-classes