GTFO2020

gtfo2020.markdown

GTFO2020

p5.js audio visualization dedicated to the worst recorded year yet. cheers.

A Pen by Adam Kuhn on CodePen.

License.

index.html

<h1>Click Anywhere to Play/Pause</h1>

script.js

let toilet, fft;
var jump = 0;
var toggle = 0;
var circle;
var numpoints = 16;
var currentPos = [];
var newPos = [];
var finalPos = [];
var newSpectrum = [];
var spheres = [];
var spectrumTotal = [];
var spectrumToggle = [];
var spectrumFinal = [];
var timelines = [];

function preload() {
 letterg = loadModel('https://assets.codepen.io/383755/g_1.obj', true);
  lettero = loadModel('https://assets.codepen.io/383755/o_1.obj', true);
  letterf = loadModel('https://assets.codepen.io/383755/f.obj', true);
  lettert = loadModel('https://assets.codepen.io/383755/t.obj', true);
  two = loadModel('https://assets.codepen.io/383755/2.obj', true);
  zero = loadModel('https://assets.codepen.io/383755/0.obj', true);
  toilet = loadModel('https://assets.codepen.io/383755/Toilet.obj', true);
   sound = loadSound('https://assets.codepen.io/383755/thisyear.mp3');
  
  // audio: This Year via The Mountain Goats
  
}

function setup() {
  flushit = createCanvas(windowWidth, windowHeight, WEBGL);
  img = loadImage("https://assets.codepen.io/383755/BotellaText_1.jpg");
  amplitude = new p5.Amplitude();
  flushit.mouseClicked(function() {
    if (sound.isPlaying() ){
      sound.stop();
    } else {
      sound.play();
      
    }
  });
  fft = new p5.FFT(0.95, 16);
}


function draw() {
  angleMode(DEGREES);
  directionalLight(155, 55, 255, 100, 0.25, 1000);
  background(255,255,255,0);
  noStroke();
  smooth();
  translate(0,75,0);
  rotateX(180);
  var left = mouseX/8 + (frameCount * 0.1);
  var spin = mouseX/6;
  var top = 20 - Math.max((mouseY/-40), -80);
  let spectrum = fft.analyze();
  specularMaterial("#fff");
  push();
  scale(0.4);
  translate(0,375,0);
  rotateY(spin/2 - 20);
  model(letterg);
  pop();
  push();
  scale(0.5);
  translate(-50,150,0);
  rotateZ(10);
  rotateY(spin/-2 + 20);
  model(lettert);
  pop();
  push();
  scale(0.5);
  translate(50,-10,0);
  rotateZ(-10);
  rotateY(spin/2 - 20);
  model(letterf);
  pop();
  push();
  scale(0.3);
  translate(-25,-250,0);
  rotateY(spin/-2 + 20);
  model(lettero);
  pop();
  

  for (let i = 0; i < spectrum.length; i++) {
    let amp = spectrum[i];
    let y = map(amp, 0, 256, height, 0) * 5;
    if ((i < 5) && (i > 0) && (spectrum[i] > 50)){
        
        spectrumTotal[i] = (spectrum[i] * (spectrum[i]/150)) - 100;
        push();
       
        rotateX(20 - top);
        rotateY(0 - left);
        translate(0, Math.max( spectrumTotal[i], -20), -160);
        rotateX(frameCount * 10 * (i/4));
        rotateY(frameCount * 10 * (i/4));
        scale(0.2);
        if ((i % 2) == 0){
          model(zero);
        }else{
          model(two);
        }
        pop();
    }
    if ((i < 9) && (i > 4) && (spectrum[i] > 50)){
        spectrumTotal[i] = (spectrum[i] * (spectrum[i]/100)) - 100;
        push();
       
        rotateX(20 - top);
        rotateY(90 - left);
        translate(0, Math.max(-20, spectrumTotal[i]), -160);
        rotateX(frameCount * 10 * (i/4));
        rotateY(frameCount * 10 * (i/4));
        scale(0.2);
        if ((i % 2) == 0){
          model(zero);
        }else{
          model(two);
        }
        pop();
    }
    if ((i < 11) && (i > 6) && (spectrum[i] > 50)){
        spectrumTotal[i] = (spectrum[i] * (spectrum[i]/100) - 50);
        push();
       
        rotateX(20 - top);
        rotateY(180 - left);
        translate(0, Math.max(-20, spectrumTotal[i]), -160);
        rotateX(frameCount * 10 * (i/4));
        rotateY(frameCount * 10 * (i/4));
        scale(0.2);
        if ((i % 2) == 0){
          model(zero);
        }else{
          model(two);
        }
        pop();
    }
    if ((i < 8) && (i > 3) && (spectrum[i] > 50)){
        spectrumTotal[i] = (spectrum[i] * (spectrum[i]/100) - 50);
        push();
       
        rotateX(20 - top);
        rotateY(270 - left);
        translate(0, Math.max(-20, spectrumTotal[i]), -160);
        rotateX(frameCount * 10 * (i/4));
        rotateY(frameCount * 10 * (i/4));
        scale(0.2);
        if ((i % 2) == 0){
          model(zero);
        }else{
          model(two);
        }
        pop();
    }

    
    
  }


  push();
  rotateX(20 - top);
  rotateY(0 - left);
  translate(0, 0, -200);
  rotateY(-45);
  model(toilet);
  pop();
  push();
  rotateX(20 - top);
  rotateY(90 - left);
  translate(0, 0, -200);
  rotateY(-45);
  model(toilet);
  pop();
  push();
  rotateX(20 - top);
  rotateY(180 - left);
  translate(0, 0, -200);
  rotateY(-45);
  model(toilet);
  pop();
  push();
  rotateX(20 - top);
  rotateY(270 - left);
  translate(0, 0, -200);
  rotateY(-45);
  model(toilet);
  pop();
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>

style.scss

body{
  background:url('https://media.giphy.com/media/3ov9k1173PdfJWRsoE/source.gif') 50% 50% / cover no-repeat;
  height:100vh;
  h1{
    position:absolute;
    font-size:15px;
    width:100%;
    text-align:center;
    bottom:10px;
    z-index:999;
    color:#fff;
  }
}