For this weeks assignment, I decided to try to recreate one of nature’s most awe-inspiring phenomena thats probably on everyone’s bucket list – the Aurora , or the Northern Lights!
Concept
I’ve been manifesting to go see this celestial marvel since forever and trying to work on this assignment has added to that. For the assignment, I used Object Oriented Programming and arrays at the very core of it, supported by a few functions. Since this wasn’t my first time using OOP and arrays, I was more curious to explore generative art and looked up for inspiration online. The most common ones I came across were using the Perlin noise. I found it a little tricky to follow this initially, using just the p5.js reference available but after looking at a lot of artworks, the essence was clear – this helps with creating harmonic and natural motion which was perfect for the northern lights.
This program has two classes – the aurora class and the star class. The Star class is a very basic one that just draws stars randomly on the canvas and a function to display. The aurora class has an update and a display function however, trying out the noise had a lot of experimentation involved. I made multiple tweaks, iterations and changes in constants till I was satisfied. While I’m not fully satisfied with how this looks (only because it doesn’t do justice to the real one), here’s my final sketch
Clicking on it adds more Auroras
The parts of the Code I like
I’ve used arrays in almost all places right from storing the northern lights color palette, to the positioning and Y – offset values for each point on the aurora. A particular part of code that I like includes both the update() and display() of the aurora class. It is the part of the artwork that makes it generative with the noise() and adds the required randomness and smoothness to each wave and creates it by calculating each x & y coordinate and joining it together using the beginShape(), endShape() function.
update() {
this.yOffsets = [];
for (let x = 0; x < width; x++) {
//noise value based on x position, frame count, and yOffset
let noiseVal = noise(x * 0.002, frameCount * 0.005, this.yOffset * 0.01);
//add the y offset position for the particular point in the offsets array
let yoffset = map(noiseVal, 0, 1, -height * 0.124, height * 0.5);
this.yOffsets.push(yoffset);
}
}
display() {
stroke(this.col.r, this.col.g, this.col.b);
strokeWeight(3);
beginShape();
for (let x = 0; x < width; x++) {
//get x and y coordinates to join points and form the aurora
let baseY = this.yOffset;
let y = baseY + this.yOffsets[x];
vertex(x, y);
}
endShape();
}
}
More than all of this, the one line that I think is magical is this one.
function draw() {
//trailing effect
background(20, 24, 82,20);
The fourth parameter in the background function adds the fading and trailing effect in the art that makes the northern lights seem flow-y and smooth.
Reflections and future improvements
While I loved the assignment and didn’t find object oriented program as challenging, I did struggle with the concept of Perlin noise as well as how to start approaching the code once an idea is decided. Even small differences from 0.01 to 0.02 in parameters were making massive differences in the art which I could only figure out by trial and error. I want to try exploring this concept a little more to well understand how to approach these minute details and make this sketch more realistic.
References
https://p5js.org/reference/#/p5/noise, https://techty.hatenablog.com/entry/2019/05/27/151415, https://genekogan.com/code/p5js-perlin-noise/