Set the player and the visual represetnation to the same color

parent 729ad8b4
defmodule Grains.Type do
@nr_types 4
@nr_colors 255
@nr_saturations 50
def select_type(uuid) do
Integer.mod(parse(uuid), @nr_types)
end
# returns a tuple for hue / saturation
def select_color(uuid) do
i = parse(uuid)
h = Integer.mod(i, @nr_colors);
s = 50 + Integer.mod(i, @nr_saturations);
{h, s}
end
def parse(uuid) do
{i, _} = Integer.parse(uuid, 16)
Integer.mod(i, @nr_types)
i
end
end
......@@ -3,7 +3,7 @@ defmodule Grains.Mixfile do
def project do
[app: :grains,
version: "0.0.83",
version: "0.0.84",
elixir: "~> 1.2",
elixirc_paths: elixirc_paths(Mix.env),
compilers: [:phoenix, :gettext] ++ Mix.compilers,
......
......@@ -80,7 +80,9 @@ defmodule Grains.Presence do
def fetch(_topic, entries) do
for {key, %{metas: metas}} <- entries, into: %{} do
{key, %{metas: metas, type: Type.select_type(key)}}
{hue, saturation} = Type.select_color(key)
{key, %{metas: metas, type: Type.select_type(key),
hue: hue, saturation: saturation}}
end
end
......
......@@ -30,7 +30,7 @@ defmodule Grains.UserSocket do
# See `Phoenix.Token` documentation for examples in
# performing token verification on connect.
@max_age 2 * 7 * 24 * 60 * 60
@max_age 1 * 60 * 60
def connect(%{"token" => "foobar"}, socket) do
{:ok, assign(socket, :user_uuid, "foobar")}
......
......@@ -12,12 +12,15 @@ defmodule Grains.Token do
uuid = get_session(conn, :user_uuid) || UUID.uuid4(:hex)
token = Phoenix.Token.sign(conn, "user socket", uuid )
type = Type.select_type(uuid)
{hue, saturation} = Type.select_color(uuid)
IO.puts "User Type: #{type}"
conn
|> assign(:user_token, token)
|> assign(:user_type, type)
|> assign(:user_hue, hue)
|> assign(:user_saturation, saturation)
|> put_session(:user_uuid, uuid)
|> configure_session(renew: true)
......
......@@ -25,21 +25,6 @@ let OrientationPanel = {
this.scale_pitch = (this.max_pitch - this.min_pitch);
this.scale_roll = (this.max_roll - this.min_roll);
// let min_pitch = document.getElementById('min_pitch');
// let max_pitch = document.getElementById('max_pitch');
// let scale_pitch = document.getElementById('scale_pitch');
// min_pitch.innerHTML = this.min_pitch;
// max_pitch.innerHTML = this.max_pitch;
// scale_pitch.innerHTML = this.scale_pitch;
// let min_roll = document.getElementById('min_roll');
// let max_roll = document.getElementById('max_roll');
// let scale_roll = document.getElementById('scale_roll');
// min_roll.innerHTML = this.min_roll;
// max_roll.innerHTML = this.max_roll;
// scale_roll.innerHTML = this.scale_roll;
},
init(socket, domId) {
......@@ -74,22 +59,13 @@ let OrientationPanel = {
that.sliders['pitch'].setValue(pitch);
that.sliders['roll'].setValue(roll);
// let _oroll = document.getElementById("oroll");
// let _opitch = document.getElementById("opitch");
// _oroll.innerHTML = parseInt(roll * 100) / 100;
// _opitch.innerHTML = parseInt(pitch * 100) / 100;
that.calibrate(pitch, roll);
let shape = document.getElementById("shape");
//console.log(values[0], values[1]);
let x = 100 * (roll - that.min_roll) / that.scale_roll;
let y = 100 * (pitch - that.min_pitch) / that.scale_pitch;
// let _roll = document.getElementById("roll");
// let _pitch = document.getElementById("pitch");
// _roll.innerHTML = parseInt(x);
// _pitch.innerHTML = parseInt(y);
shape.setAttribute('transform','translate(' + (x) + ', ' + (y) + ')');
......
......@@ -8,7 +8,7 @@ import {Socket, Presence} from "phoenix";
// Boid class
// Methods for Separation, Cohesion, Alignment added
function Boid(p, x, y, type) {
function Boid(p, x, y, type, hue, saturation) {
this.p = p;
this.acceleration = this.p.createVector(0, 0);
this.velocity = p5.Vector.random2D();
......@@ -23,9 +23,10 @@ function Boid(p, x, y, type) {
this.separation_f = 2.0;
this.alignment_f = 1.0;
this.cohesion_f = 2.0;
this.spin = parseInt(this.p.random(-50, 50));
this.saturation = this.p.random(50, 100);
this.color = this.p.color(this.p.random(359), 100, 100);
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);
};
......@@ -353,7 +354,7 @@ Boid.prototype.render = function(list) {
}
this.p.pop();
this.p.fill(this.color);
this.p.fill(this.color, this.saturation, 80);
this.p.stroke(200);
this.p.strokeWeight(border);
......@@ -409,7 +410,8 @@ let PresenceSketch = {
PresenceSketch.boids[name] = new Boid(PresenceSketch.p5,
Math.random() * PresenceSketch.width,
Math.random() * PresenceSketch.height,
PresenceSketch.types[val.type]);
PresenceSketch.types[val.type],
val.hue, val.saturation);
}
});
},
......@@ -432,7 +434,8 @@ let PresenceSketch = {
PresenceSketch.boids[p.user] = new Boid(PresenceSketch.p5,
Math.random() * PresenceSketch.width,
Math.random() * PresenceSketch.height,
PresenceSketch.types[p.type]);
PresenceSketch.types[p.type],
val.hue, val.saturation);
}
}
});
......
......@@ -3,9 +3,12 @@
// To use Phoenix channels, the first step is to import Socket
// and connect at the socket path in "lib/my_app/endpoint.ex":
import {Socket} from "phoenix"
import {Socket} from "phoenix";
let socket = new Socket("/socket", {params: {token: window.userToken,
hue: window.userHue,
saturation: window.userSaturation }});
let socket = new Socket("/socket", {params: {token: window.userToken}})
// When you connect, you'll often need to authenticate the client.
// For example, imagine you have an authentication plug, `MyAuth`,
......
......@@ -30,8 +30,8 @@ export default class MainView {
room.on("presence_state", state => {
console.log("p_s");
this._presences = Presence.syncState(this._presences, state)
this.render(this._presences)
this._presences = Presence.syncState(this._presences, state);
this.render(this._presences);
});
room.on("presence_diff", diff => {
......@@ -39,7 +39,7 @@ export default class MainView {
console.log(diff);
this._presences = Presence.syncDiff(this._presences, diff);
this.render(this._presences, diff)
this.render(this._presences, diff);
});
console.log("joining presence");
......
......@@ -23,6 +23,12 @@ export default class View extends MainView {
}, 5000);
let shape = document.getElementById("shape");
let hue = window.userHue;
let saturation = window.userSaturation;
shape.setAttribute('fill', "hsl(" + hue + ', ' + saturation + '%, 80%)');
console.log("PlayerView mounted");
}
......
......@@ -18,6 +18,9 @@
</div> <!-- /container -->
<script>window.userToken = "<%= assigns[:user_token] %>"</script>
<script>window.userType = "<%= assigns[:user_type] %>"</script>
<script>window.userHue = "<%= assigns[:user_hue] %>"</script>
<script>window.userSaturation = "<%= assigns[:user_saturation] %>"</script>
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>
</body>
</html>
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