• Black Vimeo Icon

©2020 BY JENNY LIN

Interactive Music Video

Updated: Jan 21, 2019

For this week I wanted to combine the captured webcam video with the FFT (Fast Fourier Transform) function, so I created a webcam video displayed according to the rhythm and the frequency of the song "Stronger" by Kelly Clarkson.


This screen recording doesn't include sound.


The size of the hearts is according to the bass of the song, and the color switch of the hearts is according to the treble of the song. The hearts consist in the video captured by the web camera. The color combination of the hearts could also be changed by altering with the slider. In addition, you could play and pause the music whenever you like.



Eventually I also added a big heart in the background which size is corresponding with the high mid frequency of the song.


Want to feel stronger? Try it yourself here! SOUND ON!


Click to check out the code and modify it yourself!



Codes

let video, stronger, fft, sliderCol, toggle;

let vScale = 21;


function preload() {

stronger = loadSound('kelly-clarkson-stronger-what-doesnt-kill-you.mp3');

}


function setup() {

createCanvas(640, 480);

toggle = createButton('Pause');

toggle.style('display', 'block');

toggle.style('margin-right', 'auto');

toggle.style('margin-left', 'auto');

toggle.mousePressed(musicToggle);

colorChange = createP('Change Color ');

sliderCol = createSlider(0, 255, 128);

sliderCol.parent(colorChange);

pixelDensity(1);


video = createCapture(VIDEO);

video.size(width / vScale, height / vScale);

video.hide();


fft = new p5.FFT();

stronger.amp(0.8);

stronger.play();

}


function draw() {

background(26, 26, 26);

video.loadPixels();

loadPixels();

fft.analyze();

let strongerHighMid = fft.getEnergy("treble");

let strongerBass = fft.getEnergy("bass");

let heartSize = map(strongerBass, 0, 255, 0, 26)

console.log(strongerHighMid);


for (let x = 0; x < video.width; x++) {

for (let y = 0; y < video.height; y++) {

let i = (video.width - x - 1 + (y * video.width)) * 4;

let r = video.pixels[i + 0];

let g = video.pixels[i + 1];

let b = video.pixels[i + 2];


let bright = (r + g + b) / 3;


let threshold = 90;


if (strongerHighMid < threshold) {

noStroke();

fill(r + sliderCol.value(), g, b, random(100, 200));

textSize(heartSize);

text('❤', x * vScale, y * vScale);

} else {

fill(r, g + 75, b + sliderCol.value(), random(100, 200));

textSize(heartSize);

text('❤', x * vScale, y * vScale);

}

}

}

}


function musicToggle() {

if (!stronger.isPlaying()) {

stronger.play();

toggle.html('Pause');

} else {

stronger.pause();

toggle.html('Play');

}

}


#ITP #ICM #computationalMedia #video #sound #stronger #KellyClarkson #hearts #FFT #frequency #amplitude