let audio;

let fft;

let smoothing = 0.8;

let binCount = 1024;

​

let qw, ew;

​

const serviceUuid = "19b10010-e8f2-537e-4f6c-d104768a1214";

let myCharacteristic;

let myValue = 0;

let myBLE;

​

function preload() {

  soundFormats("mp3", "ogg");

  audio = createAudio("lofi.mp3");

}

function setup() {

  createCanvas(800, 800, WEBGL);

  qw = width / 4;

  ew = width / 16;

​

  fs = createFilterShader(fragSrc_rgb);

  fs2 = createFilterShader(fragSrc_pixelate);

​

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

  fft.setInput(audio);

​

  audio.loop();

  // audio.play();

​

  // noStroke();

  // saveGif("lofi.gif", 10);

​

  y = -width / 2;

​

  myBLE = new p5ble();

  // Create a 'Connect' button

  const connectButton = createButton("Connect");

  connectButton.mousePressed(connectToBle);

}

​

let fc = 0;

let r = 0;

let y;

function draw() {

  orbitControl();

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

  stroke(220);

  line(-width / 2, y, width / 2, y);

  line(y, -height / 2, y, height / 2);

  y += random(0.5, 3.0);

  if (y > height / 2) y = -height / 2;

​

  let spectrum = fft.analyze(binCount);

  let sum = 0;

  spectrum.map((e) => (sum += e));

  let avg = sum / spectrum.length;

​

  fill(color(220));

  stroke(20);

​

  let ds = int(map(avg, 0, 255, 4, 64));

  push();

  rotate(-r, [1, 0, 1]);

  sphere(qw / 2, ds, ds);

  pop();

  noStroke();

​

  push();

  rotate(r, [1, 1, 1]);

​

  let sc = map(avg, 0, 255, 1.0, 3.0);

  torus(qw * sc, ew);

  r += PI / 64;

  pop();

  // 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 n = map(avg, 0, 255, 0.01, 0.5);

  fs.setUniform("_noise", n); //0.01);

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

  filter(fs);

  filter(fs2);

}

​

function connectToBle() {

  // Connect to a device by passing the service UUID

  myBLE.connect(serviceUuid, gotCharacteristics);

}

​

// A function that will be called once got characteristics

function gotCharacteristics(error, characteristics) {

  if (error) console.log("error: ", error);

  console.log("characteristics: ", characteristics);

  myCharacteristic = characteristics[0];

  // Read the value of the first characteristic

  myBLE.read(myCharacteristic, gotValue);

}

​

// A function that will be called once got values

function gotValue(error, value) {

  if (error) console.log("error: ", error);

  console.log("value: ", value);

  myValue = value;

  // After getting a value, call p5ble.read() again to get the value again

  myBLE.read(myCharacteristic, gotValue);

}

​

// 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;

​