OVERVIEW
I was taking my makeup off with a cotton ball and found the strands of cotton to be the inspiration for the compute graphic. I went over the magazines as well but nothing in particular resonated, so I browsed more examples of computer graphics. This is when I came across Perlin noise which was a technique invented by Ken Perlin while working on his film: Tron. I was also very inspired by textures and blur, and how they add such personality. Ideally I was supposed to create a similar graphic.
sourced at https://genekogan.com/code/p5js-perlin-noise/
CODE HIGHLIGHT
The major part with the code was adjusting variables, I had a similar experience with drawing eyelashes for my self-portrait.
This is the main for loop that takes the noise field and the loop reads the noise field at the current position, converts that value to an angle, then uses cos and sin to turn the angle into a step of fixed length. It draws that segment, moves to its end, and repeats.
for (i = 0; i < 20; i++) {
n3 = noise(oldX * resolution, oldY * resolution) + 0.045;
angle = map(n3, 0.3, 0.7, 0, PI * 4);
newX = cos(angle) * len + oldX;
newY = sin(angle) * len + oldY;
line(oldX, oldY, newX, newY);
oldX = newX;
oldY = newY;
}
EMBEDDED SKETCH
HOW THIS WAS MADE
I divided this in 3 main sections with defining the canvas first, and then the variables which I will need to vary, and then the seed grid and reading the noise field. I also used different resources for the main algorithm like https://www.youtube.com/watch?v=Qf4dIN99e2w
by coding train and a walk through by Steve’s Masterclass. I read about the noise() function on GeekforGeeks and the p5j. website. The looping logic was learnt through youtube.
Initially, 2 nested loops help to walk a path of starting positions, and then saving the grid positions. A third nested loop works by reading the noise field at current position, turning that value into an angle, converting the angle into a step of length len via cos and sin, drawing the segment, and moving to the end of it and repeat. This loop runs for 20 times which gives it a wriggling tail, and the paths curve because the noise value is re-read at every step.
Reflection and Ideas for future work
I do still find the main idea of perlin noise to be complicated. However, I am very intrigued by how many intersections this sits at right now like how it is a noise field which means it includes bunch of vectors, but at the same time they are directed in terms of direction. I think I would like to take it as close as possible to the image I have shared and maybe an animated version.