ICM Media Week 3: Sound

I'm so new to working with sound but I had a lot of fun this week. I went through the p5.js reference guide and went through some of the sound functions and did a lot of playing with various ways to visualize sound. I was really interested in trying the 3D features in p5.js, and in my research I stumbled on this coding train video talking about Perlin Noise. I thought the effect was really cool and seemed like a fun project to try to visualize sound in some way using the noise() function in p5.js. So this is what I came up with.

What Worked

Creating the triangle strip grid came together pretty easily, the difficult part really came in tweaking the variables to get results I was happy with, as well as to make sure I knew what was happening in the sketch. After I got the initial animation working, I had to figure out how I wanted to sound to influence the motion of the grid. I also was able to map the color to the offset vertices in the z-axis, which is modulated by the volume of the audio.

This is the first working prototype before the noise() function was added to add some randomness into the z-axis modulation. I did run into an issue though. See code below:

let w = 600;
let h = 800;
let cols,rows;
let scl = 30;

let landscape = []

function setup() {
  createCanvas(600, 600,WEBGL);
  frameRate(5)
  
  cols = w/scl;
  rows = h/scl;
}

function draw() {
  background(0);
  stroke(255)
  noFill();
  rotateX(PI/3);
  translate(-width/2-85,-300)
  
  
  for (let y = 0; y < cols; y++){
      beginShape(TRIANGLE_STRIP)
    for ( let x = 0; x < rows; x++){
     vertex(x*scl,y*scl,random(-5,5));
      vertex(x*scl,(y+1)*scl,random(-5,5));
     
    }
endShape()
  }

}

What Didn't Work

My grid is broken apart into their respective triangle strips and I'm not sure how to join them. This was not an issue in the coding train videos and I'm wondering if it has something to do with the beginShape() function in p5.js - ot maybe something is up with my for loop. But overall I was happy with the results, although it's not what I originally intended to make.

What I Learned

This week was great and I learned a lot about sound in general. I was a bit timid to jump into 3D in p5.js but I'm glad I got my toes wet. I spent pretty much all my time trying to create various shapes with audio tracks this week, so next week I'd like to try to make my own sounds. It would be interesting to try to manipulate and audio track by having the computer listen to it and respond in some way.