Agitation & Volume

minions can now agitate the master (shaking the phone). The master has
an activation threshold that triggers only when enough of its minions
are agitated.

Global volume for all four types (sliders and is being sent via OSC)
parent ac3652ac
......@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
def project do
[app: :grains,
version: "0.0.94",
version: "0.0.95",
elixir: "~> 1.2",
elixirc_paths: elixirc_paths(Mix.env),
compilers: [:phoenix, :gettext] ++ Mix.compilers,
......
......@@ -16,8 +16,6 @@ defmodule Grains.XyChannel do
end
def handle_in("xy", params, socket) do
Logger.info("xy #{inspect(params)}")
IO.puts inspect(params)
uuid = socket.assigns.user_uuid
x = params["x"]
y = params["y"]
......
import Interface from "interface.js";
let MixerPanel = {
visualsChannel : null,
presence: {},
sliders: {},
init(socket, domId, sliders, presence) {
if (!document.getElementById(domId)) {
console.log("No element found: " + domId);
return;
}
let that = this;
socket.connect();
console.log(presence);
this.presence = presence;
this.sliderChannel = socket.channel("slider:" + domId);
this.sliderChannel.join()
.receive("ok", resp => {
resp.values.forEach( (element) => {
this.setSliderValue(element);
} );
})
.receive("error", reason => console.log("join failed", reason));
let a = new Interface.Panel({
container:document.getElementById(domId)
});
let nrSliders = sliders.length;
sliders.forEach( (s, idx) => {
this.sliders[s] = new Interface.Slider({
bounds: [(1/nrSliders) * idx, .1, 1 / nrSliders, .5],
label: s,
onvaluechange: function() {
console.log(s, this.value);
that.presence.set_volume(s, this.value);
// that.send_value(s, this.value);
}
});
console.log(s);
a.add(this.sliders[s]);
});
a.background = 'black';
console.log("initialized slider");
},
send_value(slider, value) {
let payload = {slider: slider, value: value};
this.sliderChannel.push("slider", payload)
.receive("error", e => console.log(e));
},
};
export default MixerPanel;
......@@ -27,7 +27,11 @@ function Boid(p, x, y, type, hue, saturation, name) {
this.spin = parseInt(this.p.random(30, 100));
if (this.p.random() > 0.5) { this.spin = -this.spin; };
this.saturation = saturation || this.p.random(50, 100);
this.color = hue || this.p.color(this.p.random(359), 100, 100);
this.color = hue || this.p.random(255); // this.p.color(this.p.random(359), 100, 100);
this.activation = 0.5;
this.agitation = 0.5;
this.recovery = 0.05;
this.volume = 1;
};
......@@ -40,8 +44,8 @@ Boid.prototype.set_velocity = function(dx, dy) {
Boid.prototype.set_acceleration = function(z) {
if (Math.abs(z) > 0.5) {
this.radius = 48;
if (Math.abs(z) > this.activation) {
this.agitation = 1;
}
};
......@@ -50,6 +54,7 @@ Boid.prototype.run = function(boids) {
this.flock(boids);
this.update();
this.agitate();
this.borders();
this.render();
};
......@@ -259,11 +264,13 @@ function Master(p, x, y, type) {
Boid.call(this, p, x, y, null);
this.master = true;
this.radius = 48;
this.norm_radius = 48;
this.type = type;
this.maxspeed = 2.5;
this.cohesion_f = 2;
this.separation_f = 1;
this.alignment_f = 2;
this.volume = 1.0;
}
......@@ -278,6 +285,7 @@ Master.prototype.run = function(boids) {
this.flock(list);
this.update();
this.borders();
this.agitate(list);
this.render(list);
this.send_osc();
......@@ -287,7 +295,7 @@ Master.prototype.send_osc = function() {
let v = this.velocity.array();
//let v = this.position.array();
var message = new OSC.Message('/webosc/gyro/' + this.type, v[0], v[1], 0.0 );
var message = new OSC.Message('/webosc/gyro/' + this.type, v[0], v[1], this.agitation, this.volume );
if ((this.p.frameCount % 30.0) == 0) {
if (PresenceSketch.osc.status() === OSC.STATUS.IS_OPEN) {
......@@ -297,31 +305,37 @@ Master.prototype.send_osc = function() {
}
Boid.prototype.adjust_radius = function() {
if (this.radius > this.norm_radius && (this.p.frameCount % 3 == 0)) { this.radius = this.radius - 1; };
}
Master.prototype.adjust_radius = function() {
Master.prototype.set_volume = function(vol) {
this.volume = vol;
}
// sets the fill color for a certain type shape
Boid.prototype.fillColor = function() {
let color;
switch(this.type) {
Boid.prototype.agitate = function(list) {
if (this.agitation >= this.activation) {
this.agitation -= this.recovery;
}
case 'square': color = this.p.color(0, this.saturation, (this.radius* 3));
break;
if (list) {
let len = 0;
let agitation = 0;
_.each(list, function(boid) {
if (boid.range > 0) {
len += 1;
agitation += boid.agitation;
}
}
);
agitation = agitation / len;
if (agitation > this.activation) {
this.agitation = 1;
}
};
case 'circle': color = this.p.color(90, this.saturation, (this.radius * 3));
break;
case 'triangle': color = this.p.color(210, this.saturation, (this.radius * 3));
break;
case 'star': color = this.p.color(270, this.saturation, (this.radius * 3));
break;
}
return color;
this.radius = 2 * this.norm_radius * this.agitation;
}
Boid.prototype.render = function(list) {
let border = 1;
this.p.push();
......@@ -332,18 +346,24 @@ Boid.prototype.render = function(list) {
_.each(list, function(boid) {
var d = p5.Vector.dist(that.position, boid.position);
if ((d > 0) && (d < neighbordist)) {
boid.range = d;
that.p.stroke(255 - d);
let weight = (255 - d) / 50;
border = Math.max(border, weight);
that.p.strokeWeight(weight);
that.p.line(that.position.x, that.position.y,
boid.position.x, boid.position.y);
} else
{
boid.range = 0;
}
});
}
this.p.pop();
this.p.fill(this.color, this.saturation, 80);
this.p.fill(this.color, this.saturation, 30 + (this.volume * 70));
this.p.stroke(200);
this.p.strokeWeight(border);
......@@ -369,7 +389,6 @@ Boid.prototype.render = function(list) {
this.p.text(this.name, 0, 0);
}
this.p.pop();
this.adjust_radius();
}
......@@ -389,8 +408,15 @@ let PresenceSketch = {
types: {0: 'circle', 1: 'square', 2: 'triangle', 3: 'star'},
set_volume(type, vol) {
console.log("set_vol", type, vol);
let master = PresenceSketch.masters[type];
if (master) {
master.set_volume(vol);
}
},
set_velocity(name, dx, dy) {
console.log("set velocity: ", dx, dy);
let boid = PresenceSketch.boids[name];
if (boid) {
boid.set_velocity(dx, dy);
......@@ -406,7 +432,6 @@ let PresenceSketch = {
_.each(joins, function(val, name) {
if (name) {
console.log(val);
PresenceSketch.boids[name] = new Boid(PresenceSketch.p5,
Math.random() * PresenceSketch.width,
Math.random() * PresenceSketch.height,
......@@ -501,13 +526,13 @@ let PresenceSketch = {
s.background(0);
// Run all the boids
_.each(PresenceSketch.masters, function(master, key, list) {
master.run(PresenceSketch.boids);
});
_.each(PresenceSketch.boids, function(boid, key, list) {
boid.run(list);
});
_.each(PresenceSketch.masters, function(master, key, list) {
master.run(PresenceSketch.boids);
});
let fps = s.frameRate();
s.fill(255);
......
......@@ -5,6 +5,7 @@ import {Socket, Presence} from "phoenix";
import socket from "../socket";
import BpmPanel from "../bpm.js";
import PresenceSketch from "../presencesketch";
import MixerPanel from "../mixerpanel";
......@@ -15,6 +16,7 @@ export default class View extends MainView {
BpmPanel.init(socket, "bpmPanel");
PresenceSketch.init(socket, "sketch", window.innerWidth, window.innerHeight);
MixerPanel.init(socket, "mixer", ["circle", "square", "triangle", "star"], PresenceSketch);
......
......@@ -2,6 +2,7 @@
<!-- <div id="bpmPanel" class="bpmPanel"></div> -->
<div id="sketch"></div>
<div id="mixer" class="interfacePanel"></div>
<div class="row">
<div class="col-md-8">
<ul id="UserList" class="list-unstyled">
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment