Sounds, Good

This week I dive into the wide world of sound in p5.js. Sound can be input into p5.js via recording, .mp3, .wav, etc.; or via a microphone. In this case I’m using the later and more specifically the microphone embedder in my webcam. P5 sound is a vast topic and has almost as many functions () as does the regular p5 library. At this point I’ve only really looked into using a few: p5.SoundFile, p5.Amplitude, p5.AdioIn, and p5.FFT.  I’ve been just using these basics to start to understand how p5 processes sound, most notably many of these functions() return an array of data which can be accessed and used as data points. 

Project 2 focuses on using graphical elements to represent or visualize the sound from either a recording or p5.AudioIn().

let fft;
let mic;
let spectrum;

let x_pos;
let y_pos;
let a_size = 40;
let rect_alpha = 255;

var snapshots = [];
var counter = 0;
var total = 49;

function setup() {
  createCanvas(400, 400);

  fft = new p5.FFT();
  mic = new p5.AudioIn();
  mic.start();
  fft.setInput(mic);

}

function draw() {
  background(220);

  spectrum = fft.analyze();

  // let col = map(s/4,0,spectrum.length,0,360);
  fill(spectrum);
  // fill(col);
  for (y_pos = 0; y_pos <= height; y_pos += a_size * 1.5) {
    for (x_pos = 0; x_pos <= width; x_pos += a_size * 1.5) {
      rect(x_pos, y_pos, a_size, a_size);
    }
  }
  // console.log(col);
  // console.log(spectrum);
}
// }

The above code is what I have been able to produce thus far for this project. The Idea is to use fft.analyze() to get an array of amplitude values and use them to change the color of a matrix of squares. As of now I am able to pass in the same vale to each square, my goal is to make each square a different color based on the different indices in the fft.analyze() array.  I believe my next step is to first map the values the array holds which range from 0-255 to 0-360 so it matches with the HSB color space. Then I need to find a way to assign each square a different value from the array.

The working p5 sketch can be found here:

https://editor.p5js.org/phil-in-a-can/sketches/xQhpObKQS

Questions, comments, or tips always welcome in the comments section of this post.