let audio;

let fft;

let smoothing = 0.8;

let binCount = 1024;

let particles;

​

// rgb - based on https://editor.p5js.org/BarneyCodes/sketches/XUer03ShM

let fragSrc_rgb = `precision mediump float;

varying vec2 vTexCoord;

uniform float _noise;

uniform sampler2D tex0;

​

void main() {

  vec2 uv = vTexCoord;

  vec3 col;

  vec4 _col = texture2D(tex0, uv);

  col = _col.rgb;

​

  float noise = _noise;//0.1;

  // glitch rgb components

​

  vec2 offset = vec2(noise, noise);

  col.r = texture2D(tex0, uv+offset).r;

  col.g = texture2D(tex0, uv+offset).g;

  col.b = texture2D(tex0, uv+offset).b;

​

  // col.r = step(col.r, 0.5);

​

  gl_FragColor = vec4(col, 1.0);

}`;

​

let fragSrc_pixelate = `

precision mediump float;

​

varying vec2 vTexCoord;

uniform sampler2D tex0;

uniform float tileSize;

void main() {

​

  vec2 uv = vTexCoord;

​

  // uv step for tiling 

  float tiles = tileSize;//800.;

  uv = uv * tiles;

  uv = floor(uv);

  uv = uv / tiles;

​

  vec4 tex = texture2D(tex0, uv);

  gl_FragColor = tex;

}`;

let fs, fs2;

​

function preload() {

  soundFormats("mp3", "ogg");

  audio = createAudio("lofi.mp3");

}

function setup() {

  createCanvas(800, 800);

  particles = [];

  fs = createFilterShader(fragSrc_rgb);

  fs2 = createFilterShader(fragSrc_pixelate);

​

  fft = new p5.FFT(smoothing, binCount);

  fft.setInput(audio);

​

  for (let i = 0; i < binCount; i++) {

    let x = map(i, 0, binCount, 0,width * 2);

    let y = random(0, height);

    let pos = createVector(x, y);

​

    particles.push(new Particle(pos));

  }

  audio.loop();

  // audio.play();

  noStroke();

  saveGif("lofi.gif", 10);

}

​

let fc = 0;

function draw() {

  background(color(20,20,20,10));

  let spectrum = fft.analyze(binCount);

  for (let i = 0; i < binCount; i++) {

    let thisLevel = map(spectrum[i], 0, 255, 0, 1);

    particles[i].update(thisLevel);

    particles[i].draw();

    particles[i].pos.x = map(i,0,binCount,0,width*2);

  }

  let ts;

  if (fc < 100) {

    ts = map(fc, 0, 100, 200.0, 800.0);

  } else if (fc < 200) {

    ts = map(fc, 100, 200, 800.0, 200.0);

  } else {

    fc = 0;

  }

  fc++;

  fs.setUniform("_noise", 0.01);

  fs2.setUniform("tileSize", 300.0);//ts); //100.0);

  filter(fs);

  filter(fs2);

​

}

​

class Particle {

  constructor(pos) {

    this.pos = pos;

    this.scale = random(0, 1);

    this.speed = createVector(0, random(0, 10));

    this.color = [random(0, 255), random(0, 255), random(0, 255)];

  }

​

  update(someLevel) {

    this.pos.y += this.speed.y / (someLevel * 2);

    if (this.pos.y > height) this.pos.y = 0;

    this.diameter = map(someLevel, 0, 1, 0, 100) * this.scale * theyExpand;

  }

  draw() {

    fill(this.color);

    ellipse(this.pos.x, this.pos.y, this.diameter, this.diameter);

  }

}

let theyExpand = 1;

​

​