# Audio and interaction

## Lecture slides

https://slides.com/otso_havanto/programming-for-visual-artists-8/embed

## Visualizing audio

### FFT analysis example

```
let fft, cx, cy;
function preload() {
song = loadSound('sowhat.mp3');
}
function setup() {
createCanvas(windowWidth, windowHeight);
noFill();
song.loop();
fft = new p5.FFT();
fft.setInput(song);
cx = width / 2;
cy = height / 2;
}
function draw() {
background(200);
fft.analyze();
let bass_r = map(fft.getEnergy('bass'), 0, 255, 100, 300);
let mid_r = map(fft.getEnergy('mid'), 0, 255, 100, 300);
let treble_r = map(fft.getEnergy('highMid'), 0, 255, 10, 300);
ellipse(cx, cy, bass_r);
ellipse(cx, cy, mid_r);
ellipse(cx, cy, treble_r);
}
```

## Saving frames, using keyboard and mouse as input

## Assignment

Option 1:

Use FFT analysis for an audio reactive composition. You can use assignments 3 or 5 as a starting point and use audio input for animating the compositions.

Option 2:

Create a spectrogram using p5js. The example in the lecture slides shows a method of calculating the spectre of audio in real time. For this assignment, analyse a short duration of audio and display time on x-axis, frequency on y-axis and amplitude as color. You can use the example in the lecture slides as a starting point.