Skip to content

Commit 4ae1859

Browse files
jvntftherewasaguy
jvntf
authored and
therewasaguy
committed
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
1 parent 06022c9 commit 4ae1859

File tree

16 files changed

+2530
-1031
lines changed

16 files changed

+2530
-1031
lines changed

‎Gruntfile.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,8 @@ module.exports = function(grunt) {
7979
'env': 'src/env',
8080
'delay': 'src/delay',
8181
'effect': 'src/effect',
82+
'spatializer': 'src/spatializer',
83+
'listener3d': 'src/listener3d',
8284
'filter': 'src/filter',
8385
'reverb': 'src/reverb',
8486
'eq': 'src/eq',

‎examples/spatial_listening/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
3+
4+
<script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script>
5+
6+
<script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script>
7+
8+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
9+
10+
</head>

‎examples/spatial_listening/sketch.js

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
// ====================
2+
// DEMO: P5.listener3d: use mouseX and mouseY to control panners X and Y
3+
// panners positionZ moves from -10000 to 10000
4+
// ====================
5+
6+
7+
var soundFile;
8+
var listener3d;
9+
var zPos, ZDir;
10+
var description, position;
11+
12+
function preload() {
13+
soundFormats('mp3', 'ogg');
14+
soundFile = loadSound('../files/beat');
15+
}
16+
17+
function setup() {
18+
createCanvas(500, 500);
19+
soundFile.volume = .6;
20+
21+
22+
//disconnect sound file and send it to output via listener3d
23+
24+
listener3d = new p5.Listener3D();
25+
listener3d.spatializer.setPosition(10000000,0,300);
26+
27+
soundFile.loop();
28+
// soundFile.disconnect();
29+
// soundFile.connect(listener3d);
30+
zPos = 0;
31+
zDir = 0.5;
32+
33+
description = createDiv('listener3d: Control the the panners '+
34+
'positionX and positionY with the mouse '+
35+
'positionZ pans from -100 to 100')
36+
position = 'positionX: 0'+'positionY: 0' + 'positionZ: 0';
37+
p2 = createDiv(position);
38+
39+
description.position(550,0).size(400,50);
40+
p2.position(550,50);
41+
42+
}
43+
44+
function draw() {
45+
background(0);
46+
updateDescription();
47+
48+
//Pan the sound in the Z direction
49+
if (zPos > 50 || zPos < -50) {
50+
zDir = -zDir;
51+
}
52+
zPos += zDir;
53+
54+
55+
//Position the sound in 3 dimensions
56+
// listener3d.position( max(min(25*(mouseX-width/2),6500),-6500),
57+
// max(min(25*(mouseY-width/2),6500),-6500),
58+
// max(min(200*zPos,10000),-10000));
59+
//
60+
// listener3d.position(100*mouseX,1000*mouseY, 100*(mouseX+mouseY));
61+
ellipse(width/2, height/2, 20, 20);
62+
fill(255,0,0);
63+
ellipse(mouseX, mouseY, 20,20)
64+
65+
}
66+
67+
function updateDescription(){
68+
// position = 'positionX: '+ listener3d.positionX() +
69+
// '<br>positionY: '+ listener3d.positionY() +
70+
// '<br>positionZ: '+listener3d.positionZ();
71+
p2.html(position);
72+
}
73+
74+
75+
76+
77+
function mouseClicked() {
78+
console.log(listener3d.positionX());
79+
}

‎examples/spatial_panning/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
3+
4+
<script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script>
5+
6+
<script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script>
7+
8+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
9+
10+
</head>

‎examples/spatial_panning/sketch.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
// ====================
2+
// DEMO: P5.Panner3D: use mouseX and mouseY to control panners X and Y
3+
// panners positionZ moves from -10000 to 10000
4+
// ====================
5+
6+
7+
var soundFile;
8+
var panner3d;
9+
var zPos, ZDir;
10+
var description, position;
11+
12+
function preload() {
13+
soundFormats('mp3', 'ogg');
14+
soundFile = loadSound('../files/beat');
15+
}
16+
17+
function setup() {
18+
createCanvas(500, 500);
19+
soundFile.volume = .6;
20+
21+
//disconnect sound file and send it to output via Panner3D
22+
soundFile.disconnect();
23+
panner3d = new p5.Panner3D();
24+
soundFile.connect(panner3d);
25+
soundFile.loop();
26+
zPos = 0;
27+
zDir = 0.5;
28+
29+
description = createDiv('Panner3D: Control the the panners '+
30+
'positionX and positionY with the mouse '+
31+
'positionZ pans from -100 to 100')
32+
position = 'positionX: 0'+'positionY: 0' + 'positionZ: 0';
33+
p2 = createDiv(position);
34+
35+
description.position(550,0).size(400,50);
36+
p2.position(550,50);
37+
38+
}
39+
40+
function draw() {
41+
background(0);
42+
updateDescription();
43+
44+
//Pan the sound in the Z direction
45+
if (zPos > 50 || zPos < -50) {
46+
zDir = -zDir;
47+
}
48+
zPos += zDir;
49+
50+
//Position the sound in 3 dimensions
51+
panner3d.position( max(min(25*(mouseX-width/2),6500),-6500),
52+
max(min(25*(mouseY-width/2),6500),-6500),
53+
max(min(200*zPos,10000),-10000));
54+
ellipse(width/2, height/2, 20, 20);
55+
fill(255,0,0);
56+
ellipse(mouseX, mouseY, 20,20)
57+
58+
}
59+
60+
function updateDescription(){
61+
position = 'positionX: '+ panner3d.positionX() +
62+
'<br>positionY: '+ panner3d.positionY() +
63+
'<br>positionZ: '+panner3d.positionZ();
64+
p2.html(position);
65+
}

‎examples/spatial_panning_listener/boid.js

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
2+
// The Nature of Code
3+
// Daniel Shiffman
4+
// http://natureofcode.com
5+
// adapted for 3D
6+
// Boid class
7+
// Methods for Separation, Cohesion, Alignment added
8+
function Boid(x,y,z) {
9+
this.acceleration = createVector(0,0,0);
10+
this.velocity = createVector(random(-1,1),random(-1,1),random(-1,1));
11+
this.position = createVector(x,y,z);
12+
this.r = 25.0;
13+
this.maxspeed = 3; // Maximum speed
14+
this.maxforce = 0.05; // Maximum steering force
15+
this.maxattract = 0.13;
16+
17+
}
18+
19+
Boid.prototype.run = function(boids) {
20+
this.flock(boids);
21+
this.update();
22+
this.borders();
23+
this.render(boids);
24+
}
25+
26+
Boid.prototype.applyForce = function(force) {
27+
// We could add mass here if we want A = F / M
28+
this.acceleration.add(force);
29+
}
30+
31+
// We accumulate a new acceleration each time based on three rules
32+
Boid.prototype.flock = function(boids) {
33+
var sep = this.separate(boids); // Separation
34+
var ali = this.align(boids); // Alignment
35+
var coh = this.cohesion(boids); // Cohesion
36+
// Arbitrarily weight these forces
37+
sep.mult(flock_sep);
38+
ali.mult(flock_ali);
39+
coh.mult(flock_coh);
40+
// Add the force vectors to acceleration
41+
this.applyForce(sep);
42+
this.applyForce(ali);
43+
this.applyForce(coh);
44+
}
45+
46+
// Method to update location
47+
Boid.prototype.update = function() {
48+
// Update velocity
49+
this.velocity.add(this.acceleration);
50+
// Limit speed
51+
this.velocity.limit(this.maxspeed);
52+
this.position.add(this.velocity);
53+
// Reset accelertion to 0 each cycle
54+
this.acceleration.mult(0);
55+
}
56+
57+
// A method that calculates and applies a steering force towards a target
58+
// STEER = DESIRED MINUS VELOCITY
59+
Boid.prototype.seek = function(target) {
60+
var desired = p5.Vector.sub(target,this.position); // A vector pointing from the location to the target
61+
// Normalize desired and scale to maximum speed
62+
desired.normalize();
63+
desired.mult(this.maxspeed);
64+
// Steering = Desired minus Velocity
65+
var steer = p5.Vector.sub(desired,this.velocity);
66+
steer.limit(this.maxforce); // Limit to maximum steering force
67+
return steer;
68+
}
69+
70+
Boid.prototype.seekPrio = function(target,force) {
71+
var desired = p5.Vector.sub(target,this.position); // A vector pointing from the location to the target
72+
// Normalize desired and scale to maximum speed
73+
var dist = desired.mag();
74+
desired.normalize();
75+
desired.mult(force*dist);
76+
// Steering = Desired minus Velocity
77+
var steer = p5.Vector.sub(desired,this.velocity);
78+
steer.limit(this.maxattract); // Limit to maximum steering force
79+
return steer;
80+
}
81+
82+
Boid.prototype.render = function(boids) {
83+
84+
push();
85+
specularMaterial(150,150,200);
86+
translate(this.position.x,this.position.y,this.position.z);
87+
rotateX(acos(this.velocity.y/this.velocity.mag()));
88+
rotateZ(atan2(-this.velocity.x,this.velocity.z));
89+
cone(this.r/2, this.r);
90+
pop();
91+
}
92+
93+
// Wraparound
94+
Boid.prototype.borders = function() {
95+
if (this.position.x < -this.r-width/2) this.position.x = width/2 +this.r;
96+
if (this.position.y < -this.r-height/2) this.position.y = height/2+this.r;
97+
if (this.position.x > width/2 +this.r) this.position.x = -width/2-this.r;
98+
if (this.position.y > height/2+this.r) this.position.y = -height/2-this.r;
99+
if (this.position.z > this.r) this.position.z = -this.r -800;
100+
if (this.position.z < -800-this.r) this.position.z = this.r +0
101+
}
102+
103+
// Separation
104+
// Method checks for nearby boids and steers away
105+
Boid.prototype.separate = function(boids) {
106+
var desiredseparation = 25.0;
107+
var steer = createVector(0,0,0);
108+
var count = 0;
109+
// For every boid in the system, check if it's too close
110+
for (var i = 0; i < boids.length; i++) {
111+
var d = p5.Vector.dist(this.position,boids[i].position);
112+
// If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
113+
if ((d > 0) && (d < desiredseparation)) {
114+
// Calculate vector pointing away from neighbor
115+
var diff = p5.Vector.sub(this.position,boids[i].position);
116+
diff.normalize();
117+
diff.div(d); // Weight by distance
118+
steer.add(diff);
119+
count++; // Keep track of how many
120+
}
121+
}
122+
// Average -- divide by how many
123+
if (count > 0) {
124+
steer.div(count);
125+
}
126+
// As long as the vector is greater than 0
127+
if (steer.mag() > 0) {
128+
// Implement Reynolds: Steering = Desired - Velocity
129+
steer.normalize();
130+
steer.mult(this.maxspeed);
131+
steer.sub(this.velocity);
132+
steer.limit(this.maxforce);
133+
}
134+
return steer;
135+
}
136+
137+
// Alignment
138+
// For every nearby boid in the system, calculate the average velocity
139+
Boid.prototype.align = function(boids) {
140+
var neighbordist = 50;
141+
var sum = createVector(0,0,0);
142+
var count = 0;
143+
for (var i = 0; i < boids.length; i++) {
144+
var d = p5.Vector.dist(this.position,boids[i].position);
145+
if ((d > 0) && (d < neighbordist)) {
146+
sum.add(boids[i].velocity);
147+
count++;
148+
}
149+
}
150+
if (count > 0) {
151+
sum.div(count);
152+
sum.normalize();
153+
sum.mult(this.maxspeed);
154+
var steer = p5.Vector.sub(sum,this.velocity);
155+
steer.limit(this.maxforce);
156+
return steer;
157+
} else {
158+
return createVector(0,0,0);
159+
}
160+
}
161+
162+
// Cohesion
163+
// For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
164+
Boid.prototype.cohesion = function(boids) {
165+
var neighbordist = 50;
166+
var sum = createVector(0,0,0); // Start with empty vector to accumulate all locations
167+
var count = 0;
168+
for (var i = 0; i < boids.length; i++) {
169+
var d = p5.Vector.dist(this.position,boids[i].position);
170+
if ((d > 0) && (d < neighbordist)) {
171+
sum.add(boids[i].position); // Add location
172+
count++;
173+
}
174+
}
175+
if (count > 0) {
176+
sum.div(count);
177+
return this.seek(sum); // Steer towards the location
178+
} else {
179+
return createVector(0,0,0);
180+
}
181+
}

‎examples/spatial_panning_listener/flock.js

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// The Nature of Code
2+
// Daniel Shiffman
3+
// http://natureofcode.com
4+
// adapted for 3D rendering.
5+
// Flock object
6+
// Does very little, simply manages the array of all the boids
7+
function Flock() {
8+
// An array for all the boids
9+
this.boids = []; // Initialize the array
10+
}
11+
12+
Flock.prototype.run = function() {
13+
for (var i = 0; i < this.boids.length; i++) {
14+
this.boids[i].run(this.boids); // Passing the entire list of boids to each boid individually
15+
}
16+
}
17+
18+
Flock.prototype.addBoid = function(b) {
19+
this.boids.push(b);
20+
}

‎examples/spatial_panning_listener/index.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<head>
2+
<script language="javascript" type="text/javascript" src="../../lib/p5.js"></script>
3+
4+
<script language="javascript" type="text/javascript" src="../../lib/addons/p5.dom.js"></script>
5+
6+
<script language="javascript" type="text/javascript" src="../../lib/p5.sound.js"></script>
7+
8+
<script language="javascript" type="text/javascript" src=" https://cdn.jsdelivr.net/quicksettings/latest/quicksettings.min.js"></script>
9+
10+
11+
<script language="javascript" type="text/javascript" src="flock.js"></script>
12+
13+
<script language="javascript" type="text/javascript" src="boid.js"></script>
14+
15+
<script language="javascript" type="text/javascript" src="sketch.js"></script>
16+
17+
</head>

0 commit comments

Comments
 (0)