Skip to content

GitLab

Trajectoires
Trajectoires
Commit ff492b9c authored by Jérémie Garcia's avatar Jérémie Garcia
Browse files
Options

update with orientation ongoing

parent cde2e341
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 2377 additions and 252 deletions
WOB/server/interfaces/Trajectoires.html
View file @ ff492b9c
......@@ -44,19 +44,12 @@
<h1>Settings</h1>
<label> Undo: </label>
<div>
<a onClick="javascript:Traj.State.undo();" data-role="button" data-theme="a" data-icon="back" data-inline="true"></a>
</div>
<label>Speakers Pos: </label>
<input type="number" id="speaker_dist" name="distHP" value="1" onchange="javascript:Traj.View.updateHpDistance()" data-inline="true" />
<label>Speakers Pos: </label>
<input type="number" id="speaker_dist" name="distHP" value="1" data-mini="true" onchange="javascript:Traj.View.updateHpDistance()" data-inline="true" />
<form>
<label for="flip-curvesinback">Draw Curves in Background:</label>
<select name="flip-curvesinback" id="flip-curvesinback" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateDrawCurvesInBackground()">
<select name="flip-curvesinback" id="flip-curvesinback" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.View.updateDrawCurvesInBackground()">
<option value="off">No</option>
<option value="on" selected="selected">Yes</option>
</select>
......@@ -64,14 +57,7 @@
<form>
<label for="flip-loop">Loop Mode:</label>
<select name="flip-loop" id="flip-loop" data-role="slider" data-theme="b" onchange="javascript:Traj.Player.updateLoopMode()">
<option value="off" selected="selected">Off</option>
<option value="on">On</option>
</select>
</form>
<form>
<label for="flip-orientation">Stream Orientation:</label>
<select name="flip-orientation" id="flip-orientation" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateOrientationMode()">
<select name="flip-loop" id="flip-loop" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.Player.updateLoopMode()">
<option value="off" selected="selected">Off</option>
<option value="on">On</option>
</select>
......@@ -79,7 +65,7 @@
<form>
<label for="flip-timeSlider">Show Time Slider:</label>
<select name="flip-timeSlider" id="flip-timeSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.Events.updateTimeSliderMode()">
<select name="flip-timeSlider" id="flip-timeSlider" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.Events.updateTimeSliderMode()">
<option value="off">Off</option>
<option value="on" selected="selected">On</option>
</select>
......@@ -87,7 +73,7 @@
<form>
<label for="flip-zSlider">Show Z Slider:</label>
<select name="flip-zSlider" id="flip-zSlider" data-role="slider" data-theme="b" onchange="javascript:Traj.View.updateZSliderMode()">
<select name="flip-zSlider" id="flip-zSlider" data-role="slider" data-theme="b" data-mini="true" onchange="javascript:Traj.View.updateZSliderMode()">
<option value="off" selected="selected">Off</option>
<option value="on">On</option>
</select>
......@@ -130,6 +116,10 @@
<div style="margin-top: 40px" unselectable="on" class="unselectable" >Hold to draw a new curve</div>
</div>
<div id='feedbackDisplay' data-role="none">
<div style="margin-top: 40px" unselectable="on" class="unselectable" > </div>
</div>
<div class="canvas-left-overlay" id="playDiv">
<div data-role="controlgroup" data-type="horizontal" >
<a onClick="javascript:Traj.View.setCanvasZoom(0.8);" data-role="button" data-theme="a" data-inline="true" style="background: rgba(250, 250, 250, 0.7);"> - </a>
......@@ -161,19 +151,25 @@
<input type="hidden" class="timeSlider" value="0" />
</div>
<div id="sessionDiv">
<a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
<div id="sessionDivOverCanvas">
<a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
<a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
<a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
<a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
<div id=footer data-role="footer">
<div id="sessionDiv">
<a id="lblCurrentSession" data-role="button" data-mini="true" data-inline="true" data-inline="true">0</a>
<div id="sessionDivOverCanvas">
<a onClick="javascript:Traj.Session.selectPreviousSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-l"> Previous </a>
<a onClick="javascript:Traj.Session.selectNextSession();" data-inline="true" data-role="button" data-iconpos="notext" data-icon="arrow-r"> Next </a>
<a onClick="javascript:Traj.Session.newSession();" data-inline="true" data-role="button" data-icon="plus" data-iconpos="notext"> New </a>
<a onClick="javascript:Traj.Session.deleteSelectedSession();" data-inline="true" data-role="button" data-icon="delete" data-iconpos="notext">Delete</a>
</div>
</div>
<div class="center" id="orientation">
<input type="button" value="On" id="onoff" onclick="onoff();">
</div>
</div>
<div id=footer data-role="footer">
<div class="right" id="options-div">
<a href="#" onClick="javascript:Traj.Session.exportCurrentCurve();" data-mini="true" data-role="button">Export</a>
<a href="#" onClick="javascript:Traj.Events.OrientationRecording();" data-inline="true" data-mini="true" data-role="button" id="OrientationButton" data-theme='c'>Set Orientation</a>
<a href="#" onClick="javascript:Traj.Session.exportCurrentCurve();" data-inline="true" data-mini="true" data-role="button">Send</a>
</div>
</div>
<!-- /footer -->
......
WOB/server/interfaces/css/index.css
View file @ ff492b9c
......@@ -93,7 +93,6 @@ body {
opacity: 0.7;
}
/* NEW */
.sourceButton{
margin : -3px;
padding: 0;
......@@ -147,6 +146,7 @@ body {
position: absolute;
width: 100%;
bottom: 0;
height:40px;
}
.right {
......@@ -166,8 +166,8 @@ body {
.left {
position: absolute;
left: 0;
opacity: 0.8;
z-index: 5;
margin: 0px;
}
a.curveMenuButton {
......@@ -211,9 +211,7 @@ a.curveMenuButton {
}
#sessionDiv {
position: absolute;
left: 0px;
bottom :0;
z-index: 4;
}
......@@ -240,10 +238,6 @@ a.curveMenuButton {
padding-top: 5px;
}
#footer {
height:40px;
}
#spaceStretchDiv > input {
width: 50px;
......@@ -277,6 +271,18 @@ a.curveMenuButton {
text-align: center;
}
#feedbackDisplay {
position: absolute;
background-color: rgba(250,250,250,0.6);
top:50px;
left:5px;
width:120px;
height: 20px;
z-index: 4;
font-size: 20px;
text-align: left;
}
#contextMenu{
position:absolute;
height: 30px;
......
WOB/server/interfaces/js/OSC.js
View file @ ff492b9c
......@@ -116,7 +116,7 @@ Traj.OSC = {
sendOrientation : function(msg){
Traj.OSC.sendSpatMessage(['source',Traj.Manager.currentSource, 'yaw', msg[0]]);
//Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'pitch', msg[1]]);
// Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
//Traj.OSC.sendSpatMessage(['source', Traj.Manager.currentSource, 'roll', msg[2]]);
},
sendNewTraj : function(msg){
......
WOB/server/interfaces/js/Player.js
View file @ ff492b9c
......@@ -24,21 +24,22 @@ Traj.Player = {
yOld = curve.Y[0],
z = curve.Z[0],
counter = 0,
idx = 0,
idxOld = 0;
idx = 0;
Traj.OSC.sendPlay("start");
var begin = new Date().getTime();
var timeSliderPosition = Traj.Events.getSliderValue(); // check if the slider is not at the end (or mostly)
if (timeSliderPosition < lengthTime-100) { // if it is not, change the begin time (if it is, leave it to restart at the begining)
// check if the slider is not at the end (or mostly)
// if it is not, change the begin time (if it is, leave it to restart at the begining)
var timeSliderPosition = Traj.Events.getSliderValue();
if (timeSliderPosition < lengthTime-100) {
begin -= timeSliderPosition;
}
var now = new Date().getTime();
pointCoord = Traj.Utils.interpolate(now-begin,curve);
xOld = pointCoord[1];
yOld = pointCoord[2];
xOld = pointCoord[0];
yOld = pointCoord[1];
(function loop() {
// get time for new frame
......@@ -54,9 +55,9 @@ Traj.Player = {
// [sourceNumber, X, Y, Z, t]
pointCoord = Traj.Utils.interpolate(now,curve,idx);
x = pointCoord[1];
y = pointCoord[2];
z = pointCoord[3];
x = pointCoord[0];
y = pointCoord[1];
z = pointCoord[2];
if (!isNaN(x)&&!isNaN(y)) {
......@@ -69,11 +70,8 @@ Traj.Player = {
// clear dyn canvas = large point
Traj.View.dyn_repaint();
Traj.Player.repaintPoint(curve,[x,y]); // paint point
xOld = x;
yOld = y;
Traj.Player.repaintCurve(curve,idx,idxOld); // paint large curve
idxOld = idx;
Traj.Player.repaintCurve(curve,idx,idx-1); // paint large curve
Traj.Events.setZSliderValue(z);
}
......@@ -127,8 +125,7 @@ Traj.Player = {
idxOld = 0;
curveArray[k] = curve;
lengthTimeArray[k] = lengthTime;
pointCoordArray[k] = pointCoord;
pointCoordArray[k] = pointCoord;
xArray[k] = x;
yArray[k] = y;
xOldArray[k] = xOld;
......@@ -139,26 +136,26 @@ Traj.Player = {
}
Traj.OSC.sendPlay("start");
var begin = new Date().getTime();
// check si le curseur du player est à la fin ou non et ajuste le begin de lecture
var timeSliderPosition = Traj.Events.getSliderValue();
if (timeSliderPosition < lengthTime - 100) {
begin -= timeSliderPosition;
}
// selection de la courbe la plus longue (pour le timeSlider)
var longestCurveIdx = Traj.Manager.longestCurveIdxOfPlayedCurve(indexes);
Traj.Manager.selectCurve(longestCurveIdx);
var now = new Date().getTime();
for (var k=0; k<curvesIdx.length;k++) {
pointCoordArray[k] = Traj.Utils.interpolate(now - begin,curveArray[k]);
xOldArray[k] = pointCoordArray[k][1];
yOldArray[k] = pointCoordArray[k][2];
xOldArray[k] = pointCoordArray[k][0];
yOldArray[k] = pointCoordArray[k][1];
}
// check si le curseur du player est à la fin ou non et ajuste le begin de lecture
var timeSliderPosition = Traj.Events.getSliderValue();
if (timeSliderPosition < lengthTime - 100) {
begin -= timeSliderPosition;
}
Traj.OSC.sendPlay("start");
(function loopMulti() {
// get time for new frame
now = new Date().getTime() - begin;
......@@ -174,8 +171,8 @@ Traj.Player = {
if (lengthTimeArray[k]) {
idxArray[k] = Traj.Utils.findPointIdx(now,curveArray[k]);
pointCoordArray[k] = Traj.Utils.interpolate(now,curveArray[k],idxArray[k]);
xArray[k] = pointCoordArray[k][1];
yArray[k] = pointCoordArray[k][2];
xArray[k] = pointCoordArray[k][0];
yArray[k] = pointCoordArray[k][1];
if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
//if (counter == 1) {
......@@ -282,8 +279,8 @@ Traj.Player = {
var now = new Date().getTime();
for (var k=0; k<curvesIdx.length;k++) {
pointCoordArray[k] = Traj.Utils.interpolate(now - begin,curveArray[k]);
xOldArray[k] = pointCoordArray[k][1];
yOldArray[k] = pointCoordArray[k][2];
xOldArray[k] = pointCoordArray[k][0];
yOldArray[k] = pointCoordArray[k][1];
}
(function loopMulti() {
......@@ -301,8 +298,8 @@ Traj.Player = {
if (lengthTimeArray[k]) {
idxArray[k] = Traj.Utils.findPointIdx(now,curveArray[k]);
pointCoordArray[k] = Traj.Utils.interpolate(now,curveArray[k],idxArray[k]);
xArray[k] = pointCoordArray[k][1];
yArray[k] = pointCoordArray[k][2];
xArray[k] = pointCoordArray[k][0];
yArray[k] = pointCoordArray[k][1];
if (!isNaN(xArray[k])&&!isNaN(yArray[k])) {
//if (counter == 1) {
......
WOB/server/interfaces/js/TimedCurve.js
View file @ ff492b9c
......@@ -8,6 +8,7 @@ function TimedCurve(source) {
this.Y = [];
this.Z = [];
this.t = [];
this.orientation = [];
this.color = Traj.Utils.getColorSource(source) || Traj.Utils.getColorSource(1);
this.sourceNumber = source || Number(1);
}
......@@ -22,7 +23,14 @@ TimedCurve.prototype.addTimedPoint = function (x, y, z, t) {
this.X.push(x);
this.Y.push(y);
this.Z.push(z);
this.t.push(Math.floor(t));
this.t.push(Math.floor(t))
this.orientation.push([270,0,0]);
}
// write points into currentCurve object
TimedCurve.prototype.setOrientationAtIndex = function (orientation, idx) {
this.orientation[idx] = orientation;
}
TimedCurve.prototype.spaceScale = function (factor) {
......@@ -33,7 +41,7 @@ TimedCurve.prototype.spaceScale = function (factor) {
}
}
TimedCurve.prototype.sapceScaleAxis = function(factor,vectorAxis,pointAxis) {
TimedCurve.prototype.spaceScaleAxis = function(factor,vectorAxis,pointAxis) {
var point = [],
distance =0,
dirVector =[],
......@@ -48,7 +56,7 @@ TimedCurve.prototype.sapceScaleAxis = function(factor,vectorAxis,pointAxis) {
}
}
TimedCurve.prototype.sapceScaleAxisRange = function(factor,vectorAxis,pointAxis,pointsLine) {
TimedCurve.prototype.spaceScaleAxisRange = function(factor,vectorAxis,pointAxis,pointsLine) {
var point = [],
distance =0,
dirVector =[],
......@@ -136,6 +144,7 @@ TimedCurve.prototype.translate = function(x,y,z) {
}
}
//TODO: change or not the orientation?
TimedCurve.prototype.rotate = function(center,angle) {
var newXY,
X,
......@@ -190,3 +199,17 @@ TimedCurve.prototype.getDistanceToPoint = function(pos) {
}
return distance;
}
TimedCurve.prototype.getClosestPointIndex = function(pos) {
var distance = Infinity,
tmp, idx = 0;
for (var k=0;k<this.X.length;k++) {
tmp = Traj.Utils.distanceBtwPoints([this.X[k],this.Y[k]],pos);
if (tmp<distance) {
distance = tmp;
idx = k;
}
}
return idx;
}
WOB/server/interfaces/js/Utils.js
View file @ ff492b9c
......@@ -136,7 +136,7 @@ Traj.Utils = {
simplifyCurve : function(curve,tolerance) {
var points = [],
pt = {};
pt = {};
for (var k=0;k<curve.X.length;k++) {
var pt = {};
......@@ -157,25 +157,25 @@ Traj.Utils = {
return newCurve;
},
findPointsIdx : function(maxTime,lastPoint,curve) {
var timeSearch = curve.t[lastPoint],
pointIdx = lastPoint,
pointsIdx = [];
findPointsIdx : function(maxTime,idx,curve) {
var timeSearch = curve.t[idx],
pointIdx = idx,
pointsIdx = [];
while (timeSearch < maxTime) {
pointIdx = pointIdx+1;
timeSearch = curve.t[pointIdx];
}
var nbPoints = pointIdx-1 - lastPoint;
var nbPoints = pointIdx-1 - idx;
var points = 0;
for (points=1; points<nbPoints+1;points++){
pointsIdx.push(lastPoint+points);
pointsIdx.push(idx+points);
}
return pointsIdx;
},
findPointIdx : function(time,curve) {
var timeSearch = 0,
pointIdx = 0;
pointIdx = 0;
while (timeSearch <= time ) {
pointIdx = pointIdx+1;
timeSearch = curve.t[pointIdx];
......@@ -187,44 +187,43 @@ Traj.Utils = {
}
},
interpolate : function(now,curve,lastPoint) {
if (typeof(lastPoint) == 'undefined') {
var lastPoint = Traj.Utils.findPointIdx(now,curve);
interpolate : function(now,curve,idx) {
if(typeof(idx)=="undefined"){
var idx = Traj.Utils.findPointIdx(now,curve);
}
var lastTime = curve.t[idx],
nextTime = 0, x, y, z;
if (curve.t[idx+1]!==undefined) {
nextTime = curve.t[idx+1]
var diffTime = nextTime - lastTime;
x = curve.X[idx]*(nextTime-now)/diffTime + curve.X[idx+1]*(now-lastTime)/diffTime;
y = curve.Y[idx]*(nextTime-now)/diffTime + curve.Y[idx+1]*(now-lastTime)/diffTime;
z = curve.Z[idx]*(nextTime-now)/diffTime + curve.Z[idx+1]*(now-lastTime)/diffTime;
} else {
x = curve.X[idx];
y = curve.Y[idx];
z = curve.Z[idx];
}
var lastTime = curve.t[lastPoint],
nextTime = 0;
if (curve.t[lastPoint+1]!==undefined) {
nextTime = curve.t[lastPoint+1]
var diffTime = nextTime - lastTime;
var x = curve.X[lastPoint]*(nextTime-now)/diffTime + curve.X[lastPoint+1]*(now-lastTime)/diffTime;
var y = curve.Y[lastPoint]*(nextTime-now)/diffTime + curve.Y[lastPoint+1]*(now-lastTime)/diffTime;
var z = curve.Z[lastPoint]*(nextTime-now)/diffTime + curve.Z[lastPoint+1]*(now-lastTime)/diffTime;
} else {
var x = curve.X[lastPoint];
var y = curve.Y[lastPoint];
var z = curve.Z[lastPoint];
}
var pointCoord = [];
pointCoord.push(curve.sourceNumber);
pointCoord.push(x);
pointCoord.push(y);
pointCoord.push(z);
pointCoord.push(now);
var pointCoord = [];
pointCoord.push(x);
pointCoord.push(y);
pointCoord.push(z);
pointCoord.push(now);
return pointCoord;
return pointCoord;
},
rotate : function(cx, cy, x, y, angle) {
var radians = (Math.PI / 180) * angle,
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
cos = Math.cos(radians),
sin = Math.sin(radians),
nx = (cos * (x - cx)) - (sin * (y - cy)) + cx,
ny = (sin * (x - cx)) + (cos * (y - cy)) + cy;
return [nx, ny];
},
sign : function(x) {
return x/Math.abs(x);
},
......
WOB/server/interfaces/js/View.js
View file @ ff492b9c
......@@ -40,14 +40,6 @@ Traj.View = {
col = Traj.Utils.HSVtoRGB(h, 0.95, 0.68);
this.default_colors[i] = Traj.Utils.rgbToHex(col);
}
/*
for(var i = 0; i< Traj.Manager.NB_SOURCES;i++){
var h = (this.start_hue + i*(1/(1+ Traj.Manager.NB_SOURCES)))%1,
col = Traj.Utils.HSVtoRGB(h, 0.95, 0.68);
this.default_colors[i] = Traj.Utils.rgbToHex(col);
}
*/
},
FIRST_POINT_SIZE : 5, //pix
......@@ -97,6 +89,13 @@ Traj.View = {
this.dyn_ctx = initializeCanvasContext(this.dyn_canvas,canvas_width,canvas_height);
this.current_ctx = initializeCanvasContext(this.current_canvas,canvas_width,canvas_height);
//loads the speaker image as a sprite
this.speaker_image.onload = function() {
Traj.View.current_repaint();
};
this.speaker_image.src = 'css/speaker_icon.png';
this.minWH = Math.min(this.dyn_canvas.width, this.dyn_canvas.height);
this.pixToValue = this.scaleFactor / this.minWH;
......@@ -153,6 +152,22 @@ Traj.View = {
ctx.globalAlpha = 1;
},
speaker_image : new Image(),
drawOrientationForCurve : function(ctx, curve, index, linewidth, alpha, withPoint) {
var width = 26;
for (var i = 0; i < curve.orientation.length; i++) {
var orientation = curve.orientation[i],
alpha = orientation[0] *Math.PI / 180,
pos = Traj.Utils.convertUnitsIntoCanvasPos([curve.X[i], curve.Y[i]]);
ctx.save();
ctx.translate(pos[0]-width/2,pos[1]-width/2);
ctx.rotate(alpha);
ctx.drawImage(this.speaker_image,0,0, width, width);
ctx.restore();
};
},
//////////////////////////////////
//////// BACKGROUND DRAWING///////
//////////////////////////////////
......@@ -209,6 +224,55 @@ Traj.View = {
this.bg_ctx.font = '10px Georgia';
var pos = Traj.Utils.convertUnitsIntoCanvasPos([1, 0]);
this.bg_ctx.fillText(1, pos[0], pos[1]);
pos = Traj.Utils.convertUnitsIntoCanvasPos([-1, 0]);
this.bg_ctx.fillText(-1, pos[0], pos[1]);
pos = Traj.Utils.convertUnitsIntoCanvasPos([0, 1]);
this.bg_ctx.fillText(1, pos[0], pos[1]);
pos = Traj.Utils.convertUnitsIntoCanvasPos([0, -1]);
this.bg_ctx.fillText(-1, pos[0], pos[1]);
},
//draw the axis
drawCircularGrid : function() {
this.bg_ctx.globalAlpha = 0.6;
this.bg_ctx.beginPath();
this.bg_ctx.strokeStyle = this.COLOR_SCALE;
this.bg_ctx.lineWidth = 1.2;
var radius = 1; //in Traj Units
var radius_pix = radius * (1 / this.pixToValue);
var center_x = Math.floor(this.traj_canvas.width / 2);
var center_y = Math.floor(this.traj_canvas.height / 2);
var max_radius_pix = (center_x< center_y)? center_y : center_x;
//draw from center with a step
for (var radius = radius_pix; (radius <= max_radius_pix) && (radius < 5*radius_pix); radius += radius_pix) {
this.bg_ctx.arc(center_x, center_y, radius, 0, 2 * Math.PI, false);
}
this.bg_ctx.stroke();
//draw the axis
this.bg_ctx.globalAlpha = 1;
this.bg_ctx.beginPath();
this.bg_ctx.strokeStyle = this.COLOR_SCALE;
this.bg_ctx.lineWidth = 1;
this.bg_ctx.moveTo(Math.floor(this.traj_canvas.width / 2), 0);
this.bg_ctx.lineTo(Math.floor(this.traj_canvas.width / 2), this.traj_canvas.height);
this.bg_ctx.moveTo(0, Math.floor(this.traj_canvas.height / 2));
this.bg_ctx.lineTo(this.traj_canvas.width, Math.floor(this.traj_canvas.height / 2));
this.bg_ctx.stroke();
//draw labels for 1 units
this.bg_ctx.fillStyle = 'black';
this.bg_ctx.font = '10px Georgia';
var pos = Traj.Utils.convertUnitsIntoCanvasPos([1, 0]);
this.bg_ctx.fillText(1, pos[0], pos[1]);
pos = Traj.Utils.convertUnitsIntoCanvasPos([-1, 0]);
......@@ -253,7 +317,8 @@ Traj.View = {
this.bg_ctx.rect(0,0,this.bg_canvas.width,this.bg_canvas.height);
this.bg_ctx.fill();
}
this.drawAxis();
//this.drawAxis();
this.drawCircularGrid();
this.drawSpeakers();
},
......@@ -320,23 +385,23 @@ Traj.View = {
var currentCurve = Traj.Manager.trajectories[Traj.Manager.currentCurveIndex];
var pointCoord = Traj.Utils.interpolate(now,currentCurve);
var x = pointCoord[1];
var y = pointCoord[2];
var z = pointCoord[3];
var x = pointCoord[0];
var y = pointCoord[1];
var z = pointCoord[2];
console.log(pointCoord);