For this week’s assignment, I drew inspiration from the Impressionist art movement, specifically the post-impressionist Van Gogh and his famous Starry Night oil painting. I wanted to recreate the swirling pattern in the form of generative art.
Here is the sketch:
This code generates its visual effect by simulating a dynamic movement of particles using object-oriented programming. Each particle’s position and movement are controlled by vectors that are affected by Perlin noise, creating smooth and organic trajectories. The particles transition in color as they move, smoothly blending between two predefined colors based on their angle of movement. The result is a gradual build-up of a visual pattern that also transitions harmoniously between colors.
There were two interesting things I learned with this code. The first was controlling the noise scale. By dividing the coordinates by a constant value (in this case, 100), I managed to influence the scale of the noise. Smaller divisors resulted in finer-grained noise, while larger divisors resulted in smoother noise. In other words, the divisor determines how quickly the noise changes as the particle moves across the canvas. By using a larger divisor I was able to create a more gradual variation.
update() {
//Calculating the angle based on Perlin noise
this.angle = noise(this.position.x/100 , this.position.y/100) * TWO_PI;
// Move the particle's position based on its angle and speed
this.position.x = this.position.x + cos(this.angle) * this.speed;
this.position.y = this.position.y + sin(this.angle) * this.speed;
}
The second lesson regarded the transition of colors and the lerpColor() function. I began by defining two colors, ‘color1’ and ‘color2’. The ‘angleIndex’ is a result of mapping the particle’s angle to a value between 0 and 1. lerpColor() then assigns a color between the colors 1 and 2 based on the colorIndex, resulting in a gradient-like color change for each particle. Finally, it sets the stroke color to the blended color and draws a point at the particle’s position, creating a visually appealing color transition effect as the particles move. I wanted to focus more on the aesthetic appeal with this assignment, and the lerColor() assisted me a lot with that.
display() {
strokeWeight(random(0.5, 1.5));
// Define the two colors for the transition
let color1 = color('#274df5');
let color2 = color('#fafcfb');
// map the color based on the angle for smooth transitions between colors
let angleIndex = map(this.angle, 0, TWO_PI, 0, 1);
// Interpolating between the two colors based on angleFactor
let blend = lerpColor(color1, color2, angleIndex);
stroke(blend);
point(this.position.x, this.position.y);
}
As I was browsing on Pinterest for color and pattern inspiration, I came across Cameron Beccario’s near real-time visualization of global weather conditions. I found his project very interesting, interactive and somewhat connected to our last week’s reading (Casey Reas’ talk, especially the part about data visualization). Beccario’s choice of visuals and aesthetics also appeared similar to what I was going for with my sketch, thus I thought I would share:
https://earth.nullschool.net/#current/wind/surface/level/orthographic=-25.43,16.43,387
