| changeset 18 | 517e343a86eb |
| parent 17 | 4dd9a96a6d3b |
| child 19 | 3b70b46e8044 |
| 17:4dd9a96a6d3b | 18:517e343a86eb |
|---|---|
5 function log(m) { |
5 function log(m) { |
6 ellog.innerHTML += m + '\n'; |
6 ellog.innerHTML += m + '\n'; |
7 ellog.scrollTop = ellog.scrollHeight; |
7 ellog.scrollTop = ellog.scrollHeight; |
8 }; |
8 }; |
9 |
9 |
10 //Config vars |
10 // Config vars |
11 var sceneWidth = 1000; |
11 var sceneWidth = 1000; |
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 sceneBgColor = 0x66FF99; |
13 var sceneBgColor = 0x66FF99; |
14 var manualFramerate = 24; |
14 var manualFramerate = 24; |
15 var pixelsPerSecond = 50; // nb of pixels per second |
15 var pixelsPerSecond = 50; // nb of pixels per second |
16 var lineInterval = 2000; // means line every 2 seconds |
16 var lineInterval = 2000; // means line every 2 seconds |
17 var nbLines = -1; |
17 var nbLines = -1; |
18 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds |
18 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds |
19 var zeroTime = new Date("2014-10-06T12:16:43.000000Z").getTime(); |
19 var zeroTime = new Date("2014-10-06T12:16:43.000000Z").getTime(); |
20 var noteDict = {}; |
20 var noteDict = {}; |
21 var drawPianoNotes = [1,0,1,0,1,1,0,1,0,1,0,1];//Do, Do#, Ré, Ré#, Mi, Fa, Fa#, Sol, Sol#, La, La#, Si |
21 var pianoNotes = [1,0,1,0,1,1,0,1,0,1,0,1];//Do, Do#, Ré, Ré#, Mi, Fa, Fa#, Sol, Sol#, La, La#, Si |
22 // Visual config |
|
23 var drawPianoNotes = false; |
|
24 var drawVerticalLines = false; |
|
22 |
25 |
23 |
26 |
24 //create an new instance of a pixi stage |
27 //create an new instance of a pixi stage |
25 var stage = new PIXI.Stage(sceneBgColor); |
28 var stage = new PIXI.Stage(sceneBgColor); |
26 |
29 |
27 //create a renderer instance. |
30 //create a renderer instance. |
28 var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight); |
31 var renderer = PIXI.autoDetectRenderer(sceneWidth, sceneHeight); |
29 |
32 |
30 //add the renderer view element to the DOM |
33 //add the renderer view element to the DOM |
31 document.body.appendChild(renderer.view); |
34 document.getElementById("canvasContainer").appendChild(renderer.view); |
32 |
35 |
33 //requestAnimFrame( animate ); |
36 //requestAnimFrame( animate ); |
34 |
37 |
35 |
38 |
36 //Draw 127 lines |
39 //Draw 127 lines |
43 graphics.moveTo(0, y); |
46 graphics.moveTo(0, y); |
44 graphics.lineTo(sceneWidth, y); |
47 graphics.lineTo(sceneWidth, y); |
45 graphics.endFill(); |
48 graphics.endFill(); |
46 stage.addChild(graphics); |
49 stage.addChild(graphics); |
47 } |
50 } |
48 //Draw 127 lines |
51 //Draw piano notes on the left |
49 for(var i=0;i<128;i++){ |
52 if(drawPianoNotes){ |
50 var graphics = new PIXI.Graphics(); |
53 for(var i=0;i<128;i++){ |
51 var color = drawPianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000; |
54 var graphics = new PIXI.Graphics(); |
52 if(i==60){ |
55 var color = pianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000; |
53 color = 0xFFD700; |
56 if(i==60){ |
54 } |
57 color = 0xFFD700; |
55 graphics.beginFill(color); |
58 } |
56 graphics.lineStyle(1, 0xAAAAAA); |
59 graphics.beginFill(color); |
57 var y = sceneHeight - delta * (i+1); |
60 graphics.lineStyle(1, 0xAAAAAA); |
58 graphics.drawRect(0, y, 20, delta); |
61 var y = sceneHeight - delta * (i+1); |
59 graphics.endFill(); |
62 graphics.drawRect(0, y, 20, delta); |
60 stage.addChild(graphics); |
63 graphics.endFill(); |
64 stage.addChild(graphics); |
|
65 } |
|
61 } |
66 } |
62 |
67 |
63 var uberContainer = new PIXI.DisplayObjectContainer(); |
68 var uberContainer = new PIXI.DisplayObjectContainer(); |
64 uberContainer.position.x = Math.floor(sceneWidth*4/5); |
69 uberContainer.position.x = Math.floor(sceneWidth*4/5); |
65 uberContainer.position.y = 0; |
70 uberContainer.position.y = 0; |
89 container.x -= pixelsPerSecond/manualFramerate; |
94 container.x -= pixelsPerSecond/manualFramerate; |
90 renderer.render(stage); |
95 renderer.render(stage); |
91 } |
96 } |
92 |
97 |
93 function addBunny(data){ |
98 function addBunny(data){ |
99 var timeFromZero = data.content[1]; |
|
94 var note = data.content[3]; |
100 var note = data.content[3]; |
95 var velocity = data.content[4]; |
101 var velocity = data.content[4]; |
96 if(velocity===0){ |
102 if(velocity===0){ |
97 if(note in noteDict){ |
103 if(note in noteDict){ |
98 // We close the note |
104 // We close the note |
99 var beginTime = new Date(noteDict[note].ts).getTime(); |
105 /*var beginTime = new Date(noteDict[note].ts).getTime(); |
100 var beginDelta = beginTime - zeroTime; |
106 var beginDelta = beginTime - zeroTime; |
101 var durationDelta = new Date(data.ts).getTime() - beginTime; |
107 var durationDelta = new Date(data.ts).getTime() - beginTime; |
102 var beginX = beginDelta * pixelsPerSecond / 1000; |
108 var beginX = beginDelta * pixelsPerSecond / 1000; |
103 var width = durationDelta * pixelsPerSecond / 1000; |
109 var width = durationDelta * pixelsPerSecond / 1000;*/ |
110 var beginX = noteDict[note].ts * pixelsPerSecond / 1000; |
|
111 var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000; |
|
104 // We draw the rectangle |
112 // We draw the rectangle |
105 var graphics = new PIXI.Graphics(); |
113 var graphics = new PIXI.Graphics(); |
106 graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128)); |
114 graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128)); |
107 var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
115 var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
108 graphics.drawRect(beginX, y, width, sceneHeight / 128); |
116 graphics.drawRect(beginX, y, width, sceneHeight / 128); |
110 container.addChild(graphics); |
118 container.addChild(graphics); |
111 delete noteDict[note]; |
119 delete noteDict[note]; |
112 } |
120 } |
113 } |
121 } |
114 else{ |
122 else{ |
115 noteDict[note] = {ts: data.ts, velocity:velocity}; |
123 noteDict[note] = {ts: timeFromZero, velocity:velocity}; |
116 } |
124 } |
117 } |
125 } |
118 |
126 |
119 window.onload = function() { |
127 window.onload = function() { |
120 |
128 |
174 t.x = x + 2; |
182 t.x = x + 2; |
175 t.y = sceneHeight - 20; |
183 t.y = sceneHeight - 20; |
176 container.addChild(t); |
184 container.addChild(t); |
177 } |
185 } |
178 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate); |
186 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate); |
179 var linesInterval = window.setInterval(addLine, lineInterval); |
187 var verticalLinesInterval = false; |
188 if(drawVerticalLines){ |
|
189 verticalLinesInterval = window.setInterval(addLine, lineInterval); |
|
190 } |