For this week’s assignment, I wanted to experiment with two-dimensional arrays. Here is the outcome of my experiment:
I achieved the two-dimensional array structure by using nested loops (a loop within a loop) to arrange the ellipses in an organized manner. The outer loop, controlled by the variable ‘x’, is responsible for iterating through the columns of the grid. It starts with an initial value ‘spacing/2’ and increments by the value of ‘spacing’ in each iteration. This ensures that each column is spaced evenly from the previous one. Inside the outer loop, there’s an inner loop controlled by the variable ‘y’. This inner loop iterates through the rows of the grid, just like the outer loop does for columns. It also starts with an initial value ‘spacing/2’ and increments by ‘spacing’ in each iteration, ensuring that each row is spaced evenly from the previous one.
// creating a 2D array to achieve a board like structure
// iterating through columns. setting the initial x position from spacing/2 and y position from spcing/2 to make all the ellipses on the board appear full.
for (let x = spacing/2; x < width; x += spacing) {
// iterating through rows.
for (let y = spacing/2; y < height; y += spacing) {
// generating a noise value n that depends on the position of the ellipse and changes over time due to t
let n = noise(x,y,t);
// mapping the noise value from the range [0,1] to the radius value in the range [0, 25]
let radius = map(n, 0, 1, 0, 25)
noFill()
// adding additional animation that makes the ellipses with radius <10 to fill
if (radius < 10){
fill(255)
ellipse(x, y, radius)
}
else{
stroke(255)
ellipse(x, y, radius)}
}
}
}
Besides the 2D array, another key element of my sketch was the Perlin noise. Perlin noise, named after its creator Ken Perlin, utilizes an algorithm that generates a sequence of pseudo-random numbers in a way that maintains a natural sense of order. In this sequence, each successive number is closely related in value to the one preceding it. This approach results in a “smooth” transition between these numbers, giving rise to a more organic and less chaotic visual effect compared to pure randomness. In my case, Perlin noise generates variations in the ellipse sizes, making the transitions between the different sizes appear smooth and organic. The Perlin noise value is calculated based on the position of each ellipse on a 2D grid (x and y coordinates) and changes over time due to the ‘t’ parameter.
// generating a noise value n that depends on the position of the ellipse and changes over time due to t
let n = noise(x,y,t);
After looking at the sketch for a while, I realized that it reminded me of microalgae. The visual output of the sketch sort of resembles the view of microalgae under a microscope. It also captures the organic growth pattern due to the Perlin noise, mimicking the natural variation seen in these microorganisms. While my sketch is rather abstract, I believe it conveys the idea of a living system evolving and changing over time, which happened to be a nice accident.
