fractalkitty looking for math? fractalkitty.com

sound

puddle of stars

#random#trig#classes#sound#interactive#animation#sky#music

starsplayBoolsArrayspectrumwavesfftsoundProcessdots


let stars;
let playBool = false;
let sArray = [];
let spectrum;
let waves;
let fft;
let t = 0;
let n = 100;
function preload() {
  userStartAudio();
  stars = loadSound("/assets/draft.m4a");
}
function setup() {
  sArray = [];
  createCanvas(windowWidth, windowHeight);
  stars.amp(0.4);
  fft = new p5.FFT();
  spectrum = fft.analyze();
  for (let i = 0; i < spectrum.length; i++) {
    sArray.push(new dots(i));
  }
  background(0, 0, 20);
}

function draw() {
  translate(width / 2, height / 2);
  if (playBool) {
    t += 0.001;
    if (!stars.isPlaying()) {
      stars.play();
    }
  } else {
    stars.pause();
  }
  background(0, 0, 9, 20);
  soundProcess();
  if (!playBool) {
    push();
    fill(10, 200, 220);
    triangle(
      -width / 2 + 20,
      height / 2 - 30,
      -width / 2 + 20,
      height / 2 - 50,
      -width / 2 + 40,
      height / 2 - 40
    );
    pop();
  }
}

function soundProcess() {
  spectrum = fft.analyze();
  waves = fft.waveform();
  for (let i = 0; i < spectrum.length; i += 1) {
    sArray[i].display(spectrum[i] / 10, waves[i]);
  }
}

class dots {
  constructor(i) {
    this.i = i;
    let c =
      (min(width, height) - (min(width, height) / spectrum.length) * i) * 0.5;
    this.L = random(-c, c);
    this.theta = random(-PI, PI);
    this.x = this.L * sin(this.theta);
    this.y = this.L * cos(this.theta);
    this.t = 1;
    this.dt = random(0.00002);
  }
  display(dt, w) {
    this.t += (10 * sin(this.dt + (abs(w / 100) + abs(dt / 10000)))) / 10;
    this.theta = TWO_PI * sin(this.t);
    this.x = this.L * sin(this.theta);
    this.y = this.L * cos(this.theta);
    fill(
      125 * sin((PI * cos(this.t)) / 4),
      355 * abs(sin(t / 2 + this.t)),
      355 * abs(sin(t / 2 + this.t)),
      50
    );

    if (this.i % 10 === 0) {
      push();
      fill(100, 200, 250, 1);
      circle(
        this.x * cos(this.t) + this.L * sin(this.t - this.L) * cos(t * this.dt),
        this.y * sin(this.t + t / 2) +
          this.L * cos(this.t + this.L) +
          this.L * this.t * tan(t * this.dt),
        this.x + this.L * sin(this.L / 100 + this.t)
      );
      pop();
    }
    circle(
      this.x * cos(this.t),
      this.y * sin(this.t + t / 2),
      1 + 10 * abs(sin(w + dt / 100))
    );
    let f = width / 2;
    noStroke();
  }
}
function mousePressed() {
  playBool = !playBool;
}
function keyPressed() {
  stars.stop();
  setup();
  draw();
}