Commit 67696dd4 authored by Jens-Christian Fischer's avatar Jens-Christian Fischer
Browse files

Feedback on the phones improved

using SVG shapes and transforms
parent 22806f30
......@@ -15,3 +15,15 @@
font-weight: bold;
font-size: 2em;
}
#svg-container {
width: 300px;
height: 300px;
border: black 1px solid;
}
svg {
fill: green;
display: block;
}
......@@ -38,12 +38,16 @@ let OrientationPanel = {
});
console.log("adding orientation");
this.orientation = new Interface.Orientation({
onvaluechange: function(pitch, roll, _yaw, _heading) {
onvaluechange: function(pitch, roll, _yaw, _heading) {
that.sliders['pitch'].setValue(pitch);
that.sliders['roll'].setValue(roll);
that.send_value([pitch, roll]);
}
let shape = document.getElementById("shape");
//console.log(values[0], values[1]);
shape.setAttribute("cx", roll * 250);
shape.setAttribute("cy", pitch * 250);
that.send_value([pitch, roll]);
}
}).start();
......@@ -64,27 +68,28 @@ let OrientationPanel = {
console.log("initialized orientation");
},
send_value(values) {
values[0] = (((values[0] - 0.25) / 0.75) - 0.5) * 2; // scale to normal movement range
values[1] = Math.pow((values[1] - 0.5), 3) * 8; // prefer larger amounts
send_value(values) {
let scaled = values.map(function(i) {
values[0] = (((values[0] - 0.25) / 0.75) - 0.5) * 2; // scale to normal movement range
values[1] = Math.pow((values[1] - 0.5), 3) * 8; // prefer larger amounts
let scaled = values.map(function(i) {
// scale to +/- Pi to one decimal
return Math.round(20 * i * Math.PI) / 10; // parseInt(i * 127);
});
if (!_.isEqual(scaled, this.old_values)) {
// console.log(scaled);
let payload = {pitch: scaled[0],
roll: scaled[1]
};
this.orientationChannel.push("orientation", payload)
.receive("error", e => console.log(e));
this.old_values = scaled;
}
return Math.round(20 * i * Math.PI) / 10; // parseInt(i * 127);
});
if (!_.isEqual(scaled, this.old_values)) {
// console.log(scaled);
let payload = {pitch: scaled[0],
roll: scaled[1]
};
this.orientationChannel.push("orientation", payload)
.receive("error", e => console.log(e));
this.old_values = scaled;
}
},
},
};
......
......@@ -68,7 +68,7 @@ Boid.prototype.flock = function(boids) {
coh.mult(this.cohesion_f);
// Add the force vectors to acceleration
this.applyForce(sep);
// this.applyForce(ali);
this.applyForce(ali);
this.applyForce(coh);
};
......@@ -327,8 +327,29 @@ Boid.prototype.fillColor = function() {
}
Boid.prototype.render = function(list) {
let border = 1;
this.p.push();
// the master looks at his minions and draws lines
if (list) {
let that = this;
let neighbordist = 250;
_.each(list, function(boid) {
var d = p5.Vector.dist(that.position, boid.position);
if ((d > 0) && (d < neighbordist)) {
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);
}
});
}
this.p.pop();
this.p.fill(this.color);
this.p.stroke(200);
this.p.strokeWeight(border);
this.p.push();
this.p.translate(this.position.x, this.position.y);
......@@ -348,20 +369,6 @@ Boid.prototype.render = function(list) {
this.p.pop();
this.adjust_radius();
// the master looks at his minions and draws lines
if (list) {
let that = this;
let neighbordist = 250;
_.each(list, function(boid) {
var d = p5.Vector.dist(that.position, boid.position);
if ((d > 0) && (d < neighbordist)) {
that.p.stroke(255);
that.p.line(that.position.x, that.position.y,
boid.position.x, boid.position.y);
}
});
}
}
......
<h1>Play</h1>
<div id="svg-container">
<%= if assigns[:user_type] == 0 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-circle">
<circle cx="50" cy="50" r="50" class="svg-circle" />
<svg width="290" height="300" xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-circle">
<circle cx="150" cy="150" r="50" id="shape"/>
</svg>
<% end %>
<%= if assigns[:user_type] == 1 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-square">
<rect width="100" height="100" class="svg-square" />
<rect width="100" height="100" class="svg-square svg" id="shape"/>
</svg>
<% end %>
<%= if assigns[:user_type] == 2 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-triangle">
<polygon points="0,0 100,0 50,100" />
<polygon points="0,0 100,0 50,100" class="svg-triangle svg" id="shape"/>
</svg>
<% end %>
<%= if assigns[:user_type] == 3 do %>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
class="svg-star">
<polygon points="50,5 20,99 95,39 5,39 80,99" />
<polygon points="50,5 20,99 95,39 5,39 80,99" class="svg-star svg" id="shape"/>
</svg>
<% end %>
</div>
<div id="orientationPanel" class="interfacePanel"></div>
<div id="accelerationPanel" class="interfacePanel"></div>
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