started panner3d class

spatial panning class draft implemented as extention of p5.Effect formatted p5.Spatializer error from createSpatalPanner() panner3D and listener3D are constructors that inherit from spatializer removed panner3D from panner added statements for prototypal inheritance add broken spatializer + listener example fixed problem with creating listener
alextepes · Aug 15, 2017 · 4ae1859 · 4ae1859
1 parent 06022c9
commit 4ae1859
Show file tree

Hide file tree

Showing 16 changed files with 2,530 additions and 1,031 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -79,6 +79,8 @@ module.exports = function(grunt) {
             'env': 'src/env',
             'delay': 'src/delay',
             'effect': 'src/effect',
+            'spatializer': 'src/spatializer',
+            'listener3d': 'src/listener3d',
             'filter': 'src/filter',
             'reverb': 'src/reverb',
             'eq': 'src/eq',

diff --git a/examples/spatial_listening/index.html b/examples/spatial_listening/index.html
@@ -0,0 +1,10 @@
+<head>
+  <script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
+
+  <script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script> 
+
+  <script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script> 
+
+  <script language="javascript" type="text/javascript" src="sketch.js"></script> 
+
+</head>
diff --git a/examples/spatial_listening/sketch.js b/examples/spatial_listening/sketch.js
@@ -0,0 +1,79 @@
+// ====================
+// DEMO: P5.listener3d: use mouseX and mouseY to control panners X and Y
+// panners positionZ moves from -10000 to 10000
+// ====================
+
+
+var soundFile;
+var listener3d;
+var zPos, ZDir;
+var description, position;
+
+function preload() {
+  soundFormats('mp3', 'ogg');
+  soundFile = loadSound('../files/beat');
+}
+
+function setup() {
+  createCanvas(500, 500); 
+  soundFile.volume = .6;
+
+
+  //disconnect sound file and send it to output via listener3d
+
+  listener3d = new p5.Listener3D();
+  listener3d.spatializer.setPosition(10000000,0,300);
+
+  soundFile.loop();
+  // soundFile.disconnect();
+  // soundFile.connect(listener3d);
+  zPos = 0;
+  zDir = 0.5;
+
+  description = createDiv('listener3d: Control the the panners '+
+                  'positionX and positionY with the mouse '+
+                  'positionZ pans from -100 to 100')
+  position = 'positionX: 0'+'positionY: 0' + 'positionZ: 0';
+  p2 = createDiv(position);
+
+  description.position(550,0).size(400,50);
+  p2.position(550,50);
+
+}
+
+function draw() {
+  background(0);
+  updateDescription();
+
+  //Pan the sound in the Z direction
+  if (zPos > 50 || zPos < -50) {
+    zDir = -zDir;
+  }
+  zPos += zDir;
+
+
+  //Position the sound in 3 dimensions
+  // listener3d.position( max(min(25*(mouseX-width/2),6500),-6500), 
+  //                   max(min(25*(mouseY-width/2),6500),-6500), 
+  //                   max(min(200*zPos,10000),-10000));
+  //                   
+  // listener3d.position(100*mouseX,1000*mouseY, 100*(mouseX+mouseY));
+  ellipse(width/2, height/2, 20, 20);
+  fill(255,0,0);
+  ellipse(mouseX, mouseY, 20,20)
+
+}
+
+function updateDescription(){
+  // position = 'positionX: '+ listener3d.positionX() +
+  //               '<br>positionY: '+ listener3d.positionY() +
+  //               '<br>positionZ: '+listener3d.positionZ();
+p2.html(position);
+}
+
+
+
+
+function mouseClicked() {
+  console.log(listener3d.positionX());
+}
diff --git a/examples/spatial_panning/index.html b/examples/spatial_panning/index.html
@@ -0,0 +1,10 @@
+<head>
+  <script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
+
+  <script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script> 
+
+  <script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script> 
+
+  <script language="javascript" type="text/javascript" src="sketch.js"></script> 
+
+</head>
diff --git a/examples/spatial_panning/sketch.js b/examples/spatial_panning/sketch.js
@@ -0,0 +1,65 @@
+// ====================
+// DEMO: P5.Panner3D: use mouseX and mouseY to control panners X and Y
+// panners positionZ moves from -10000 to 10000
+// ====================
+
+
+var soundFile;
+var panner3d;
+var zPos, ZDir;
+var description, position;
+
+function preload() {
+  soundFormats('mp3', 'ogg');
+  soundFile = loadSound('../files/beat');
+}
+
+function setup() {
+  createCanvas(500, 500); 
+  soundFile.volume = .6;
+
+  //disconnect sound file and send it to output via Panner3D
+  soundFile.disconnect();
+  panner3d = new p5.Panner3D();
+  soundFile.connect(panner3d);
+  soundFile.loop();
+  zPos = 0;
+  zDir = 0.5;
+
+  description = createDiv('Panner3D: Control the the panners '+
+                  'positionX and positionY with the mouse '+
+                  'positionZ pans from -100 to 100')
+  position = 'positionX: 0'+'positionY: 0' + 'positionZ: 0';
+  p2 = createDiv(position);
+
+  description.position(550,0).size(400,50);
+  p2.position(550,50);
+
+}
+
+function draw() {
+  background(0);
+  updateDescription();
+
+  //Pan the sound in the Z direction
+  if (zPos > 50 || zPos < -50) {
+    zDir = -zDir;
+  }
+  zPos += zDir;
+
+  //Position the sound in 3 dimensions
+  panner3d.position( max(min(25*(mouseX-width/2),6500),-6500), 
+                    max(min(25*(mouseY-width/2),6500),-6500), 
+                    max(min(200*zPos,10000),-10000));
+  ellipse(width/2, height/2, 20, 20);
+  fill(255,0,0);
+  ellipse(mouseX, mouseY, 20,20)
+
+}
+
+function updateDescription(){
+  position = 'positionX: '+ panner3d.positionX() +
+                '<br>positionY: '+ panner3d.positionY() +
+                '<br>positionZ: '+panner3d.positionZ();
+p2.html(position);
+}
diff --git a/examples/spatial_panning_listener/boid.js b/examples/spatial_panning_listener/boid.js
@@ -0,0 +1,181 @@
+
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+// adapted for 3D
+// Boid class
+// Methods for Separation, Cohesion, Alignment added
+function Boid(x,y,z) {
+  this.acceleration = createVector(0,0,0);
+  this.velocity = createVector(random(-1,1),random(-1,1),random(-1,1));
+  this.position = createVector(x,y,z);
+  this.r = 25.0;
+  this.maxspeed = 3;    // Maximum speed
+  this.maxforce = 0.05; // Maximum steering force
+  this.maxattract = 0.13;
+
+}
+
+Boid.prototype.run = function(boids) {
+  this.flock(boids);
+  this.update();
+  this.borders();
+  this.render(boids);
+}
+
+Boid.prototype.applyForce = function(force) {
+  // We could add mass here if we want A = F / M
+  this.acceleration.add(force);
+}
+
+// We accumulate a new acceleration each time based on three rules
+Boid.prototype.flock = function(boids) {
+  var sep = this.separate(boids);   // Separation
+  var ali = this.align(boids);      // Alignment
+  var coh = this.cohesion(boids);   // Cohesion
+  // Arbitrarily weight these forces
+  sep.mult(flock_sep);
+  ali.mult(flock_ali);
+  coh.mult(flock_coh);
+  // Add the force vectors to acceleration
+  this.applyForce(sep);
+  this.applyForce(ali);
+  this.applyForce(coh);
+}
+
+// Method to update location
+Boid.prototype.update = function() {
+  // Update velocity
+  this.velocity.add(this.acceleration);
+  // Limit speed
+  this.velocity.limit(this.maxspeed);
+  this.position.add(this.velocity);
+  // Reset accelertion to 0 each cycle
+  this.acceleration.mult(0);
+}
+
+// A method that calculates and applies a steering force towards a target
+// STEER = DESIRED MINUS VELOCITY
+Boid.prototype.seek = function(target) {
+  var desired = p5.Vector.sub(target,this.position);  // A vector pointing from the location to the target
+  // Normalize desired and scale to maximum speed
+  desired.normalize();
+  desired.mult(this.maxspeed);
+  // Steering = Desired minus Velocity
+  var steer = p5.Vector.sub(desired,this.velocity);
+  steer.limit(this.maxforce);  // Limit to maximum steering force
+  return steer;
+}
+
+Boid.prototype.seekPrio = function(target,force) {
+  var desired = p5.Vector.sub(target,this.position);  // A vector pointing from the location to the target
+  // Normalize desired and scale to maximum speed
+  var dist = desired.mag();
+  desired.normalize();
+  desired.mult(force*dist);
+  // Steering = Desired minus Velocity
+  var steer = p5.Vector.sub(desired,this.velocity);
+  steer.limit(this.maxattract);  // Limit to maximum steering force
+  return steer;
+}
+
+Boid.prototype.render = function(boids) {
+
+  push();
+  specularMaterial(150,150,200);
+  translate(this.position.x,this.position.y,this.position.z);
+  rotateX(acos(this.velocity.y/this.velocity.mag()));
+  rotateZ(atan2(-this.velocity.x,this.velocity.z));
+  cone(this.r/2, this.r);
+  pop();
+}
+
+// Wraparound
+Boid.prototype.borders = function() {
+  if (this.position.x < -this.r-width/2)  this.position.x = width/2 +this.r;
+  if (this.position.y < -this.r-height/2)  this.position.y = height/2+this.r;
+  if (this.position.x > width/2 +this.r) this.position.x = -width/2-this.r;
+  if (this.position.y > height/2+this.r) this.position.y = -height/2-this.r;
+  if (this.position.z > this.r) this.position.z = -this.r -800;
+  if (this.position.z < -800-this.r) this.position.z = this.r +0
+}
+
+// Separation
+// Method checks for nearby boids and steers away
+Boid.prototype.separate = function(boids) {
+  var desiredseparation = 25.0;
+  var steer = createVector(0,0,0);
+  var count = 0;
+  // For every boid in the system, check if it's too close
+  for (var i = 0; i < boids.length; i++) {
+    var d = p5.Vector.dist(this.position,boids[i].position);
+    // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
+    if ((d > 0) && (d < desiredseparation)) {
+      // Calculate vector pointing away from neighbor
+      var diff = p5.Vector.sub(this.position,boids[i].position);
+      diff.normalize();
+      diff.div(d);        // Weight by distance
+      steer.add(diff);
+      count++;            // Keep track of how many
+    }
+  }
+  // Average -- divide by how many
+  if (count > 0) {
+    steer.div(count);
+  }
+  // As long as the vector is greater than 0
+  if (steer.mag() > 0) {
+    // Implement Reynolds: Steering = Desired - Velocity
+    steer.normalize();
+    steer.mult(this.maxspeed);
+    steer.sub(this.velocity);
+    steer.limit(this.maxforce);
+  }
+  return steer;
+}
+
+// Alignment
+// For every nearby boid in the system, calculate the average velocity
+Boid.prototype.align = function(boids) {
+  var neighbordist = 50;
+  var sum = createVector(0,0,0);
+  var count = 0;
+  for (var i = 0; i < boids.length; i++) {
+    var d = p5.Vector.dist(this.position,boids[i].position);
+    if ((d > 0) && (d < neighbordist)) {
+      sum.add(boids[i].velocity);
+      count++;
+    }
+  }
+  if (count > 0) {
+    sum.div(count);
+    sum.normalize();
+    sum.mult(this.maxspeed);
+    var steer = p5.Vector.sub(sum,this.velocity);
+    steer.limit(this.maxforce);
+    return steer;
+  } else {
+    return createVector(0,0,0);
+  }
+}
+
+// Cohesion
+// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
+Boid.prototype.cohesion = function(boids) {
+  var neighbordist = 50;
+  var sum = createVector(0,0,0);   // Start with empty vector to accumulate all locations
+  var count = 0;
+  for (var i = 0; i < boids.length; i++) {
+    var d = p5.Vector.dist(this.position,boids[i].position);
+    if ((d > 0) && (d < neighbordist)) {
+      sum.add(boids[i].position); // Add location
+      count++;
+    }
+  }
+  if (count > 0) {
+    sum.div(count);
+    return this.seek(sum);  // Steer towards the location
+  } else {
+    return createVector(0,0,0);
+  }
+}
diff --git a/examples/spatial_panning_listener/flock.js b/examples/spatial_panning_listener/flock.js
@@ -0,0 +1,20 @@
+// The Nature of Code
+// Daniel Shiffman
+// http://natureofcode.com
+// adapted for 3D rendering.
+// Flock object
+// Does very little, simply manages the array of all the boids
+function Flock() {
+  // An array for all the boids
+  this.boids = []; // Initialize the array
+}
+
+Flock.prototype.run = function() {
+  for (var i = 0; i < this.boids.length; i++) {
+    this.boids[i].run(this.boids);  // Passing the entire list of boids to each boid individually
+  }
+}
+
+Flock.prototype.addBoid = function(b) {
+  this.boids.push(b);
+}
diff --git a/examples/spatial_panning_listener/index.html b/examples/spatial_panning_listener/index.html
@@ -0,0 +1,17 @@
+<head>
+	<script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>	
+
+	<script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script> 
+
+	<script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script> 	
+
+  	<script language="javascript" type="text/javascript" src=" https://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js"></script> 
+
+
+  	<script language="javascript" type="text/javascript" src="flock.js"></script> 
+
+	<script language="javascript" type="text/javascript" src="boid.js"></script> 
+
+  	<script language="javascript" type="text/javascript" src="sketch.js"></script> 
+
+</head>