Week 2: ‘Rhythm and Chaos’: An Attempt at Generative Art

The idea:

For our second assignment we were tasked to create a generative art piece using loops in p5js. For me, art has always been a creative expression which is not strictly restricted to visual perception. One of my favorite art forms (and the one I spend the most time indulging in) happens to be music. So I wanted to incorporate music into this assignment from the get go. This is what I ended up creating after long hours of working this weekend. A simple click and it comes to life!

The process:

I started by looking up the Coding Train‘s videos (of course!) for incorporating music into my p5js file. I found about the preLoad() function which helped me upload and play one of my favorite tracks, ‘La Cuidad’ by Odezsa right inside the browser.

Next I knew I wanted to create something that would respond to the music. After a bit of searching Dan Shiffman from the Coding Train came to the rescue again. I spent an entire day learning about Fourier Transforms and the built in FFT object from this video and the reference page on p5js’s site:

This taught me how to display waves based on amplitude, frequency of the music. To make it more visually appealing I used for loops and played around with trigonometric functions (sine and cosine) to transform the straight line of waves into a circle. This gave me a half circle and I had to repeat the for loop with a negative value of sine to get a full circle. I’m sure there must be a more efficient way to do this, but this is how far my brain cells could go. I also used map() function with help from the reference page (and a lot of trial and error) to keep the waves within the bounds of the canvas. You’ll notice most of the values are hard-coded so this of course is an area I could improve on.

When I listen to music, it almost transports me to a different realm; I feel lost and immersed but in a good way. With a day to go till the deadline, I wanted to incorporate some of that feeling into this piece. And what better than getting lost in a star field in space?! As a form of habit I searched up ‘Star Field Coding Train’ on YouTube (God bless Dan Shiffman). I watched this video but it was full of advanced functions and most it flew past my ears. I do, however, know how to create classes (I did that for my first assignment too). So, I created a class for the stars and since I am familiar with vectors, velocity, and acceleration from high-school Physics, I read into the reference pages in p5js and figured out how to make stars fly towards the screen from the resting circumference of the circle. Here’s a code snippet of the class:

class Star {
  constructor() {
    //a fixed scalar multiple for uniform visual effect
    this.start = p5.Vector.random2D().mult(150);
    //vector for initial velocity
    this.velocity = createVector(0, 0);
    this.acceleration = this.start.copy().mult(random(0.001, 0.00001));
  }

  move(check) {
    this.velocity.add(this.acceleration);
    this.start.add(this.velocity);
    if (check) {
      // adding more speed if the .getEnergy method returns higher frequencies, by just adding more of the same method
  this.start.add(this.velocity).add(this.velocity).add(this.velocity);
      // this.start.add(this.velocity);
      // this.start.add(this.velocity);
    }
  }
  //stars i.e. ellipses of random sizes
  display() {
    noStroke();
    fill(255, 255, 255);
    ellipseMode(CENTER);
    ellipse(this.start.x, this.start.y, random(2, 5));
    // console.log(this.start.x, this.start.y);
    // line(this.start.x,this.start.y,(this.start.x + 1),(this.start.y + 1));
  }
}

Another part of the code which I like is using the .getEnergy() method of the FFT object to increase the velocity of the stars depending on the frequency of the track. I created a boolean statement to return True or False if the music crossed a certain frequency. If True, I increased the velocity by repeating the velocity method.

//FFT methods
let waves = fft.waveform();
fft.analyze();
//star speed responding to beats
let bounce = fft.getEnergy(20, 200);

let p = new Star();
stars.push(p);

  for (i = 0; i < stars.length; i += 1) {
    stars[i].move(bounce > 230);
    stars[i].display();
  }

Things to improve on:

The star field Dan Shiffman demonstrated was more beautiful, and stars had a trailing and fading effect to them. I think I can spend more time trying to learn all those functions for future projects. Also, a lot of the conditions in the for loops are hard coded, which I will try to improve on for future projects.

Outro:

For finishing touches, I randomized the R,G,B values of the stroke color and the stroke weight to create a vibrant sense of chaos. I think when the piece comes to life, this will give the audience a sense of rhythm within chaos, which music brings to my life every single day.