Featured Posts

ICM | Week 8 | Music Videos' Color Palettes

November 12, 2017

This week's assignment is brought to you by gazillion of artists / visualizers who made posters from the colors used in various movies (e.g. this guy). I wanted to do the same, taking the averages of colors in a frame and put them in a row. 


To get the average, I recursively add the R, G, B values into separate variables, and later count the average by dividing the totals by video.height * video.width.


for (let cx = 0; cx < video.width; cx ++) {
    for (let cy = 0; cy < video.height; cy ++) {

      if (cy > blackBar && cy < video.height - blackBar) {
        let offset = int(((cy * video.width) + cx) * 4);
        let redc = video.pixels[offset];
        let greenc = video.pixels[offset + 1];
        let bluec = video.pixels[offset + 2];

        redTotal += redc;
        greenTotal += greenc;
        blueTotal += bluec;

        fill(redc, greenc, bluec);



let redAvg = int(redTotal / (video.width * video.height));
 let greenAvg = int(greenTotal / (video.width * video.height));
 let blueAvg = int(blueTotal / (video.width * video.height));



Then, using a timer function, I draw this color as a bar.


  if (millis() - lastTimeCheck > stampSpeed) {
    console.log(redAvg + "," + greenAvg + "," + blueAvg);
    fill(redAvg, greenAvg, blueAvg);
    translate(width/2, height/2);
    arc( 0,0, 200, 200, radians(angle), radians(angle+5));
    //rect(drawIndex * lineWeight, 0, lineWeight, height);
    lastTimeCheck = millis();


See You Again - Wiz Khalifa ft. Charlie Puth. Somber.


Despacito - Luis Fonsi ft. Daddy Yankee. Nice beach colors.



I also made a pie-chart version of this, but I don't think it's as useful as the bar graph because pie chart doesn't indicate temporal information.



I wanted the program to be able to load video from a URL but I could not figure it out :/

So I just downloaded some music videos, crop them until they became <5MB, and upload them to the web editor.


//Source code of the sketch can be found here.



Share on Facebook
Share on Twitter
Please reload

Related Posts
Please reload

Generative Music | Latent Space Sequencer

December 13, 2018

Please reload

Recent Posts
Please reload

Search By Tags

Hafiyyandi | Creative Technologist

New York, New York | hafiyyandi@gmail.com