Sound visuals 1 - OpenProcessing

mySketch
xxxxxxxxxx
 
let drums;
let amplitude;
let originX;
let originY;
let drawer1;
let maxVel = 3.00;
let peaky;
let lineTrigger = 0;
let lineTriggerPerc = 50;
​
function preload() {
  // preload() runs once
  //drums = loadSound('https://raw.githubusercontent.com/games-and-stuff/assets/main/drumloop.wav');
    drums = loadSound('https://archive.org/download/HardcoreScm2016/Hardcore%20Scm%202016%20-%20Bit%20Storm.mp3');
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(15,0,0);
  originX = random(0,width);
  originY = random(0,height);
  drawer1 = new lineDrawer(originX,originY);
  amplitude = new p5.Amplitude();
​
  //for the verticle/horizontal line trigger, value that represents top nth percent of all values 
  peaky = drums.getPeaks();
  //get abs of values, sort array decending
  for (i=0; i<peaky.length;i++){
    peaky[i] = abs(peaky[i]);
  }
  peaky = peaky.sort(function(a, b){return b-a});
  lineTrigger = peaky[int((peaky.length/100)*lineTriggerPerc)];
}
​
function draw() {
  background(0,1);
  drawer1.move();
  drawer1.display();
}
​
function mousePressed() {
  if (drums.isPlaying()) {
    drums.stop();
  } else {
    drums.loop();
    amplitude.setInput(drums);
  }
}
​
class lineDrawer {
  constructor(x,y){
    this.x = x;
    this.y = y;
    this.velX = random(-maxVel,maxVel);
    this.velY = random(-maxVel,maxVel);
    this.redAmt = 0;
    this.redDir = 1;
    this.targetX = 0;
    this.targetY = 0;
    this.originX = x;
    this.originY = y;
    
    //use starting position and vel to find point on edge of screen that path of drawer will reach
    this.target();
​
    //how much to move the drawer each frame - percentage of original line that velocity moves
    this.percX = abs(this.velX)/abs(this.targetX-this.x);
    this.percY = abs(this.velY)/abs(this.targetY-this.y);
    
  }
  
  move(){
    //old - pre moving origin
    this.x += this.velX;
    this.y += this.velY;
    
    //new - moving origin
    
    
    if (this.x < 0 || this.y < 0 || this.x > width || this.y > height){
      this.x = originX;
      this.y = originY;
      this.velX = random(-maxVel,maxVel);
      this.velY = random(-maxVel,maxVel);
      
      this.target();
      
      this.percX = abs(this.velX)/abs(this.targetX-this.x);
      this.percY = abs(this.velY)/abs(this.targetY-this.y);
    }
  }
  
  display() {
    let level = amplitude.getLevel();
    
    //current target
    noStroke();
    fill(255);
    ellipse(this.targetX,this.targetY,10);
    
    noStroke();
    fill(this.redAmt,50+(200*level),255);
    ellipse(this.x,this.y,(random(20,80)*level)+3,(random(20,30)*level)+3);
​
    this.redAmt += level * this.redDir;
    if (this.redAmt > 255 || this.redAmt < 0){
       this.redDir *= -1;
       }
    
    if (abs(level) > lineTrigger){
       stroke(this.redAmt,50+(200*level),255);
       strokeWeight(random(1,3));
       if(random(0,10) > 5){
       line(this.x,this.y,this.x+random(-300,300),this.y);
       } else {
       line(this.x,this.y,this.x,this.y+random(-300,300));
       }
       }
  }
  
  target(){//works out target X and Y for each line
      let edgeDistX;
      let edgeDistY;
​
      if (this.velX > 0) {
      edgeDistX = width - this.x;
      } else if (this.velX <= 0) {
      edgeDistX = this.x;
      } 
      
      if (this.velY > 0) {
      edgeDistY = height - this.y;
      } else if (this.velY <= 0) {
      edgeDistY = this.y;
      } 
    
      let stepsToEdgeX = edgeDistX/abs(this.velX);
      let stepsToEdgeY = edgeDistY/abs(this.velY);    
    
      if (stepsToEdgeX <= stepsToEdgeY){ 
      this.targetX = (this.velX * stepsToEdgeX) + this.x;
      this.targetY = (this.velY * stepsToEdgeX) + this.y; 
      }
      if (stepsToEdgeY < stepsToEdgeX){ 
      this.targetX = (this.velX * stepsToEdgeY) + this.x;
      this.targetY = (this.velY * stepsToEdgeY) + this.y;     
      }
​
  }
​
}