7 ellog.scrollTop = ellog.scrollHeight; |
7 ellog.scrollTop = ellog.scrollHeight; |
8 }; |
8 }; |
9 |
9 |
10 // Config vars |
10 // Config vars |
11 var sceneWidth = 1920; |
11 var sceneWidth = 1920; |
12 var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals -> better look |
12 //var sceneHeight = 128 * 4; // multiple of 128 because of 128 levels in midi signals -> better look |
|
13 var prHeight1 = 435; |
|
14 var prHeight2 = 645; |
|
15 var sceneHeight = prHeight1 + prHeight2; |
13 var sceneBgColor = 0xFFFFFF; |
16 var sceneBgColor = 0xFFFFFF; |
|
17 var lineColor = 0x444444; |
14 var manualFramerate = 24; |
18 var manualFramerate = 24; |
15 var pixelsPerSecond = 50; // nb of pixels per second |
19 var pixelsPerSecond1 = Math.floor(sceneWidth / 30); // nb of pixels per second |
|
20 var pixelsPerSecond2 = Math.floor(sceneWidth / 60); // nb of pixels per second |
16 var lineInterval = 5000; // means line every 5 seconds |
21 var lineInterval = 5000; // means line every 5 seconds |
17 var nbLines = -1; |
22 var nbLines = -1; |
18 var noteHeight = 110; |
23 var noteHeight = 110; |
19 var noteColor = 0xB74141; |
24 var noteColor = 0xB74141; |
20 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds |
25 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds |
75 uberContainer.position.x = Math.floor(sceneWidth*4/5); |
80 uberContainer.position.x = Math.floor(sceneWidth*4/5); |
76 uberContainer.position.y = 0; |
81 uberContainer.position.y = 0; |
77 stage.addChild(uberContainer); |
82 stage.addChild(uberContainer); |
78 |
83 |
79 |
84 |
80 var container = new PIXI.DisplayObjectContainer(); |
85 var container1 = new PIXI.DisplayObjectContainer(); |
81 container.position.x = 0; |
86 container1.position.x = 0; |
82 container.position.y = 0; |
87 container1.position.y = 0; |
83 uberContainer.addChild(container); |
88 uberContainer.addChild(container1); |
84 |
89 var container2 = new PIXI.DisplayObjectContainer(); |
|
90 container2.position.x = 0; |
|
91 container2.position.y = prHeight1; |
|
92 uberContainer.addChild(container2); |
|
93 |
|
94 // Line between two containers |
|
95 var graphics = new PIXI.Graphics(); |
|
96 graphics.beginFill(0xFFFF00); |
|
97 graphics.lineStyle(1, lineColor); |
|
98 var y = delta * i; |
|
99 graphics.moveTo(0, prHeight1); |
|
100 graphics.lineTo(sceneWidth, prHeight1); |
|
101 graphics.endFill(); |
|
102 stage.addChild(graphics); |
85 |
103 |
86 function moveContainer() { |
104 function moveContainer() { |
87 container.x -= pixelsPerSecond/manualFramerate; |
105 container1.x -= pixelsPerSecond1/manualFramerate; |
|
106 container2.x -= pixelsPerSecond2/manualFramerate; |
88 renderer.render(stage); |
107 renderer.render(stage); |
89 } |
108 } |
90 |
109 |
91 function addBunny(data){ |
110 function addBunny(data){ |
92 var timeFromZero = data.content[1]; |
111 var timeFromZero = data.content[1]; |
93 var note = data.content[3]; |
112 var note = data.content[3]; |
94 var velocity = data.content[4]; |
113 var velocity = data.content[4]; |
95 if(velocity===0){ |
114 if(velocity===0){ |
96 if(note in noteDict){ |
115 if(note in noteDict){ |
97 // We close the note |
116 // We close the note in container one |
98 /*var beginTime = new Date(noteDict[note].ts).getTime(); |
117 /*var beginTime = new Date(noteDict[note].ts).getTime(); |
99 var beginDelta = beginTime - zeroTime; |
118 var beginDelta = beginTime - zeroTime; |
100 var durationDelta = new Date(data.ts).getTime() - beginTime; |
119 var durationDelta = new Date(data.ts).getTime() - beginTime; |
101 var beginX = beginDelta * pixelsPerSecond / 1000; |
120 var beginX = beginDelta * pixelsPerSecond1 / 1000; |
102 var width = durationDelta * pixelsPerSecond / 1000;*/ |
121 var width = durationDelta * pixelsPerSecond1 / 1000;*/ |
103 var beginX = noteDict[note].ts * pixelsPerSecond / 1000; |
122 var beginX = noteDict[note].ts * pixelsPerSecond1 / 1000; |
104 var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000; |
123 var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond1 / 1000; |
105 // We draw the rectangle |
124 // We draw the rectangle |
106 var graphics = new PIXI.Graphics(); |
125 var graphics = new PIXI.Graphics(); |
107 graphics.beginFill(noteColor, (noteDict[note].velocity / 128)); |
126 graphics.beginFill(noteColor, (noteDict[note].velocity / 128)); |
108 var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
127 var y = (128-note) * prHeight1 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
109 //graphics.drawRect(beginX, y, width, sceneHeight / 128); |
128 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight1 / 128)/2)), width, noteHeight); |
110 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((sceneHeight / 128)/2)), width, noteHeight); |
|
111 graphics.endFill(); |
129 graphics.endFill(); |
112 container.addChild(graphics); |
130 container1.addChild(graphics); |
|
131 // container 2 |
|
132 beginX = noteDict[note].ts * pixelsPerSecond2 / 1000; |
|
133 width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond2 / 1000; |
|
134 // We draw the rectangle |
|
135 graphics = new PIXI.Graphics(); |
|
136 graphics.beginFill(noteColor, (noteDict[note].velocity / 128)); |
|
137 y = (128-note) * prHeight2 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
|
138 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight2 / 128)/2)), width, noteHeight); |
|
139 graphics.endFill(); |
|
140 container2.addChild(graphics); |
|
141 // delete entry |
113 delete noteDict[note]; |
142 delete noteDict[note]; |
114 } |
143 } |
115 } |
144 } |
116 else{ |
145 else{ |
117 noteDict[note] = {ts: timeFromZero, velocity:velocity}; |
146 noteDict[note] = {ts: timeFromZero, velocity:velocity}; |
156 |
185 |
157 |
186 |
158 function addLine(){ |
187 function addLine(){ |
159 nbLines++; |
188 nbLines++; |
160 var graphics = new PIXI.Graphics(); |
189 var graphics = new PIXI.Graphics(); |
161 var x = nbLines * (lineInterval/1000) * pixelsPerSecond; |
190 var x = nbLines * (lineInterval/1000) * pixelsPerSecond1; |
162 //console.log("nbLines = ",nbLines, "x = ", x); |
191 //console.log("nbLines = ",nbLines, "x = ", x); |
163 graphics.beginFill(0xFFFF00); |
192 graphics.beginFill(0xFFFF00); |
164 graphics.lineStyle(1, 0x444444); |
193 graphics.lineStyle(1, lineColor); |
165 graphics.moveTo(x, sceneHeight*(9/10)); |
194 graphics.moveTo(x, prHeight1 - 20); |
166 graphics.lineTo(x, sceneHeight); |
195 graphics.lineTo(x, prHeight1); |
167 graphics.endFill(); |
196 graphics.endFill(); |
168 container.addChild(graphics); |
197 container1.addChild(graphics); |
169 // Add text |
198 // Add text |
170 var totalSec = nbLines * lineInterval / 1000; |
199 var totalSec = nbLines * lineInterval / 1000; |
171 var hours = parseInt( totalSec / 3600 ) % 24; |
200 var hours = parseInt( totalSec / 3600 ) % 24; |
172 var minutes = parseInt( totalSec / 60 ) % 60; |
201 var minutes = parseInt( totalSec / 60 ) % 60; |
173 var seconds = totalSec % 60; |
202 var seconds = totalSec % 60; |
174 var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); |
203 var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); |
175 var t = new PIXI.Text(timeStr, { font: "10pt Arial", fill: "#444444" }); |
204 var fontObj = { font: "10pt Arial", fill: "#444444" }; |
|
205 var t = new PIXI.Text(timeStr, fontObj); |
176 t.x = x + 2; |
206 t.x = x + 2; |
177 t.y = sceneHeight - 15; |
207 t.y = prHeight1 - 15; |
178 container.addChild(t); |
208 container1.addChild(t); |
|
209 // Second container |
|
210 graphics = new PIXI.Graphics(); |
|
211 x = nbLines * (lineInterval/1000) * pixelsPerSecond2; |
|
212 graphics.beginFill(0xFFFF00); |
|
213 graphics.lineStyle(1, lineColor); |
|
214 graphics.moveTo(x, 0); |
|
215 graphics.lineTo(x, 20); |
|
216 graphics.endFill(); |
|
217 container2.addChild(graphics); |
|
218 var t = new PIXI.Text(timeStr, fontObj); |
|
219 t.x = x + 2; |
|
220 t.y = 2; |
|
221 container2.addChild(t); |
|
222 |
179 } |
223 } |
180 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate); |
224 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate); |
181 var verticalLinesInterval = false; |
225 var verticalLinesInterval = false; |
182 if(drawVerticalLines){ |
226 if(drawVerticalLines){ |
183 verticalLinesInterval = window.setInterval(addLine, lineInterval); |
227 verticalLinesInterval = window.setInterval(addLine, lineInterval); |