Update IEMEnergyVisualizer.js, osc.js, index.html, sketch.properties, StarryTrailShader_p5osc.js

StarryTrailShader_p5osc.js

+var windowSizeOffset = 4; // sometimes full-screen canvas is still slightly bigger than browser's window - so here the canvas can be reduced by a number of pixels - I just don't like to have the scroll bars around the animation window..
+var pixdens = 1; // causes error in shader if different than 1
+let scalePreview = 1;
+
+// If you get an error about max uniforms then you can decrease these 2 values :(
+const MAX_PARTICLE_COUNT = 70;
+const MAX_TRAIL_COUNT = 70;
+
+var colorScheme = ["#E69F66", "#DF843A", "#D8690F", "#B1560D", "#8A430A"];
+var shaded = true;
+var theShader;
+var shaderTexture;
+var trail = [];
+var particles = [];
+
+function preload() {
+  theShader = new p5.Shader(this.renderer, vertShader, fragShader);
+}
+
+function setup() {
+  setupOsc(12001, 3334);
+  createCanvas(windowWidth-windowSizeOffset, windowHeight-windowSizeOffset, WEBGL);
+  pixelDensity(pixdens);
+  
+  let canvas = document.getElementById('defaultCanvas0');
+  canvas.style.width = round(width * scalePreview) + "px";
+  canvas.style.height = round(height * scalePreview) + "px";
+  
+  canvas.oncontextmenu = () => false;  // Removes right-click menu.
+  noCursor();
+  
+  shaderTexture = createGraphics(width, height, WEBGL);
+  shaderTexture.noStroke();
+}
+
+function draw() {
+  background(0);
+  noStroke();
+  
+  drawDots();
+  console.log(frameRate());
+  
+  let removeCount = 1;
+  for (let i = 0; i < removeCount; i++) {
+    if (trail.length == 0) {
+      break;
+    }
+  }
+  
+  translate(-width / 2, -height / 2);
+  
+  // Move and kill particles.
+  for (let i = particles.length - 1; i > -1; i--) {
+    particles[i].move();
+    if (particles[i].vel.mag() < 0.1) {
+      particles.splice(i, 1);
+    }
+  }
+  
+  if (shaded) {
+    // Display shader.
+    shaderTexture.shader(theShader);
+    
+    let data = serializeSketch();
+
+    theShader.setUniform("resolution", [width, height]);
+    theShader.setUniform("trailCount", trail.length);
+    theShader.setUniform("trail", data.trails);
+    theShader.setUniform("particleCount", particles.length);
+    theShader.setUniform("particles", data.particles);
+    theShader.setUniform("colors", data.colors);
+
+    shaderTexture.rect(0, 0, width, height);
+    texture(shaderTexture);
+    
+    rect(0, 0, width, height);
+  } else {
+    // Display points.
+    stroke(255, 200, 0);
+    for (let i = 0; i < particles.length; i++) {
+      point(particles[i].pos.x, particles[i].pos.y);
+    }
+    
+    stroke(0, 255, 255);
+    for (let i = 0; i < trail.length; i++) {
+      point(trail[i][0], trail[i][1]);
+    }
+  }
+}
+
+function mousePressed() {
+  if (mouseButton == RIGHT) {
+    shaded = !shaded;
+  }
+}
+
+function serializeSketch() {
+  data = {"trails": [], "particles": [], "colors": []};
+  
+  for (let i = 0; i < trail.length; i++) {
+    data.trails.push(
+      map(trail[i][0], 0, width, 0.0, 1.0),
+      map(trail[i][1], 0, height, 1.0, 0.0));
+  }
+  
+  for (let i = 0; i < particles.length; i++) {
+    data.particles.push(
+      map(particles[i].pos.x, 0, width, 0.0, 1.0), 
+      map(particles[i].pos.y, 0, height, 1.0, 0.0),
+      particles[i].mass * particles[i].vel.mag() / 100)
+
+    let itsColor = colorScheme[particles[i].colorIndex];
+    data.colors.push(red(itsColor), green(itsColor), blue(itsColor));
+  }
+  
+  return data;
+}
+
+function Particle(x, y, vx, vy) {
+  this.pos = new p5.Vector(x, y);
+  this.vel = new p5.Vector(vx, vy);
+  this.vel.mult(25); //this.vel.mult(random(10));
+  this.vel.rotate(radians(random(-180, 180)));
+  this.mass = vx*vy*20000; //random(10, 80);
+  //this.mass = 60;
+  this.airDrag = 0.90; //random(0.62, 0.98); // 0.72, 0.88 // 0.82, 0.98
+  this.colorIndex = int(random(colorScheme.length));
+  
+  this.move = function() {
+    this.vel.mult(this.airDrag);
+    this.pos.add(this.vel);
+  }
+}
+
+let vertShader = `
+  precision highp float;
+
+  attribute vec3 aPosition;
+
+  void main() {
+    vec4 positionVec4 = vec4(aPosition, 1.0);
+    positionVec4.xy = positionVec4.xy * 2.0 - 1.0;
+    gl_Position = positionVec4;
+  }
+`;
+
+let fragShader = `
+  precision highp float;
+  
+  uniform vec2 resolution;
+  uniform int trailCount;
+  uniform vec2 trail[${MAX_TRAIL_COUNT}];
+  uniform int particleCount;
+  uniform vec3 particles[${MAX_PARTICLE_COUNT}];
+  uniform vec3 colors[${MAX_PARTICLE_COUNT}];
+
+  void main() {
+      vec2 st = gl_FragCoord.xy / resolution.xy;  // Warning! This is causing non-uniform scaling.
+
+      float r = 0.0;
+      float g = 0.0;
+      float b = 0.0;
+
+      for (int i = 0; i < ${MAX_TRAIL_COUNT}; i++) {
+        if (i < trailCount) {
+          vec2 trailPos = trail[i];
+          float value = float(i) / distance(st, trailPos.xy) * 0.0000015; // 0.00000015;  // Multiplier may need to be adjusted if max trail count is tweaked.
+          g += value * 0.5;
+          b += value;
+        }
+      }
+
+      float mult = 0.00005;
+      
+      for (int i = 0; i < ${MAX_PARTICLE_COUNT}; i++) {
+        if (i < particleCount) {
+          vec3 particle = particles[i];
+          vec2 pos = particle.xy;
+          float mass = particle.z;
+          vec3 color = colors[i];
+
+          r += color.r / distance(st, pos) * mult * mass;
+          g += color.g / distance(st, pos) * mult * mass;
+          b += color.b / distance(st, pos) * mult * mass;
+        }
+      }
+
+      gl_FragColor = vec4(r, g, b, 1.0);
+  }
+`;

index.html

+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
+  <script src="http://127.0.0.1:8081/socket.io/socket.io.js"></script>
+  
+  <script src="libraries/p5.min.js"></script>
+  
+  <script language="javascript" type="text/javascript" src="IEMEnergyVisualizer.js"></script>
+  <script language="javascript" type="text/javascript" src="osc.js"></script>
+  <script language="javascript" type="text/javascript" src="StarryTrailShader_p5osc.js"></script>
+  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
+
+  <style>
+    body {
+      padding: 0;
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+</body>
+</html>

osc.js

+function receiveOsc(address, value) {
+  if (address == '/EnergyVisualizer/RMS') {
+    for (let i = 0; i < 426; i++) {
+      rms[i] = value[i];
+    }
+  }
+}
+
+function sendOsc(address, value) {
+  socket.emit('message', [address].concat(value));
+}
+
+function setupOsc(oscPortIn, oscPortOut) {
+  var socket = io.connect('http://127.0.0.1:8081', { port: 8081, rememberTransport: false });
+  socket.on('connect', function() {
+    socket.emit('config', { 
+      server: { port: oscPortIn,  host: '127.0.0.1'},
+      client: { port: oscPortOut, host: '127.0.0.1'}
+    });
+  });
+  socket.on('message', function(msg) {
+    if (msg[0] == '#bundle') {
+      for (var i=2; i<msg.length; i++) {
+        receiveOsc(msg[i][0], msg[i].splice(1));
+      }
+    } else {
+      receiveOsc(msg[0], msg.splice(1));
+    }
+  });
+}

sketch.properties

+mode=p5.js
+mode.id=processing.mode.p5js.p5jsMode