| changeset 19 | 3b70b46e8044 |
| parent 18 | 517e343a86eb |
| child 20 | a2525a44ec94 |
| 18:517e343a86eb | 19:3b70b46e8044 |
|---|---|
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 = 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 sceneBgColor = 0x66FF99; |
13 var sceneBgColor = 0xFFFFFF; |
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 = 5000; // means line every 5 seconds |
17 var nbLines = -1; |
17 var nbLines = -1; |
18 var noteHeight = 110; |
|
19 var noteColor = 0xB74141; |
|
18 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds |
20 //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(); |
21 //var zeroTime = new Date("2014-10-06T12:16:43.000000Z").getTime(); |
20 var noteDict = {}; |
22 var noteDict = {}; |
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 |
23 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 |
24 // Visual config |
23 var drawPianoNotes = false; |
25 var drawPianoNotes = false; |
24 var drawVerticalLines = false; |
26 var drawHorizontalLines = false; |
27 var drawVerticalLines = true; |
|
25 |
28 |
26 |
29 |
27 //create an new instance of a pixi stage |
30 //create an new instance of a pixi stage |
28 var stage = new PIXI.Stage(sceneBgColor); |
31 var stage = new PIXI.Stage(sceneBgColor); |
29 |
32 |
36 //requestAnimFrame( animate ); |
39 //requestAnimFrame( animate ); |
37 |
40 |
38 |
41 |
39 //Draw 127 lines |
42 //Draw 127 lines |
40 var delta = sceneHeight / 128; |
43 var delta = sceneHeight / 128; |
41 for(var i=1;i<128;i++){ |
44 if(drawHorizontalLines){ |
42 var graphics = new PIXI.Graphics(); |
45 for(var i=1;i<128;i++){ |
43 graphics.beginFill(0xFFFF00); |
46 var graphics = new PIXI.Graphics(); |
44 graphics.lineStyle(1, 0xAAAAAA); |
47 graphics.beginFill(0xFFFF00); |
45 var y = delta * i; |
48 graphics.lineStyle(1, 0xAAAAAA); |
46 graphics.moveTo(0, y); |
49 var y = delta * i; |
47 graphics.lineTo(sceneWidth, y); |
50 graphics.moveTo(0, y); |
48 graphics.endFill(); |
51 graphics.lineTo(sceneWidth, y); |
49 stage.addChild(graphics); |
52 graphics.endFill(); |
53 stage.addChild(graphics); |
|
54 } |
|
50 } |
55 } |
56 |
|
51 //Draw piano notes on the left |
57 //Draw piano notes on the left |
52 if(drawPianoNotes){ |
58 if(drawPianoNotes){ |
53 for(var i=0;i<128;i++){ |
59 for(var i=0;i<128;i++){ |
54 var graphics = new PIXI.Graphics(); |
60 var graphics = new PIXI.Graphics(); |
55 var color = pianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000; |
61 var color = pianoNotes[i%12]==1 ? 0xFFFFFF : 0x000000; |
74 var container = new PIXI.DisplayObjectContainer(); |
80 var container = new PIXI.DisplayObjectContainer(); |
75 container.position.x = 0; |
81 container.position.x = 0; |
76 container.position.y = 0; |
82 container.position.y = 0; |
77 uberContainer.addChild(container); |
83 uberContainer.addChild(container); |
78 |
84 |
79 //create a texture from an image path |
|
80 var texture = PIXI.Texture.fromImage("bunny.png"); |
|
81 |
|
82 |
|
83 /*function animate() { |
|
84 requestAnimFrame( animate ); |
|
85 // just for fun, lets rotate mr rabbit a little |
|
86 //bunny.rotation += 0.1; |
|
87 container.x -= speed; |
|
88 //console.log("container.x = ", container.x); |
|
89 // render the stage |
|
90 renderer.render(stage); |
|
91 }*/ |
|
92 |
85 |
93 function moveContainer() { |
86 function moveContainer() { |
94 container.x -= pixelsPerSecond/manualFramerate; |
87 container.x -= pixelsPerSecond/manualFramerate; |
95 renderer.render(stage); |
88 renderer.render(stage); |
96 } |
89 } |
109 var width = durationDelta * pixelsPerSecond / 1000;*/ |
102 var width = durationDelta * pixelsPerSecond / 1000;*/ |
110 var beginX = noteDict[note].ts * pixelsPerSecond / 1000; |
103 var beginX = noteDict[note].ts * pixelsPerSecond / 1000; |
111 var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000; |
104 var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond / 1000; |
112 // We draw the rectangle |
105 // We draw the rectangle |
113 var graphics = new PIXI.Graphics(); |
106 var graphics = new PIXI.Graphics(); |
114 graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128)); |
107 graphics.beginFill(noteColor, (noteDict[note].velocity / 128)); |
115 var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
108 var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
116 graphics.drawRect(beginX, y, width, sceneHeight / 128); |
109 //graphics.drawRect(beginX, y, width, sceneHeight / 128); |
110 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((sceneHeight / 128)/2)), width, noteHeight); |
|
117 graphics.endFill(); |
111 graphics.endFill(); |
118 container.addChild(graphics); |
112 container.addChild(graphics); |
119 delete noteDict[note]; |
113 delete noteDict[note]; |
120 } |
114 } |
121 } |
115 } |
166 var graphics = new PIXI.Graphics(); |
160 var graphics = new PIXI.Graphics(); |
167 var x = nbLines * (lineInterval/1000) * pixelsPerSecond; |
161 var x = nbLines * (lineInterval/1000) * pixelsPerSecond; |
168 //console.log("nbLines = ",nbLines, "x = ", x); |
162 //console.log("nbLines = ",nbLines, "x = ", x); |
169 graphics.beginFill(0xFFFF00); |
163 graphics.beginFill(0xFFFF00); |
170 graphics.lineStyle(1, 0x444444); |
164 graphics.lineStyle(1, 0x444444); |
171 graphics.moveTo(x, 0); |
165 graphics.moveTo(x, sceneHeight*(9/10)); |
172 graphics.lineTo(x, sceneHeight); |
166 graphics.lineTo(x, sceneHeight); |
173 graphics.endFill(); |
167 graphics.endFill(); |
174 container.addChild(graphics); |
168 container.addChild(graphics); |
175 // Add text |
169 // Add text |
176 var totalSec = nbLines * lineInterval / 1000; |
170 var totalSec = nbLines * lineInterval / 1000; |
178 var minutes = parseInt( totalSec / 60 ) % 60; |
172 var minutes = parseInt( totalSec / 60 ) % 60; |
179 var seconds = totalSec % 60; |
173 var seconds = totalSec % 60; |
180 var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); |
174 var timeStr = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (seconds < 10 ? "0" + seconds : seconds); |
181 var t = new PIXI.Text(timeStr, { font: "10pt Arial", fill: "#444444" }); |
175 var t = new PIXI.Text(timeStr, { font: "10pt Arial", fill: "#444444" }); |
182 t.x = x + 2; |
176 t.x = x + 2; |
183 t.y = sceneHeight - 20; |
177 t.y = sceneHeight - 15; |
184 container.addChild(t); |
178 container.addChild(t); |
185 } |
179 } |
186 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate); |
180 var moveInterval = window.setInterval(moveContainer, 1000/manualFramerate); |
187 var verticalLinesInterval = false; |
181 var verticalLinesInterval = false; |
188 if(drawVerticalLines){ |
182 if(drawVerticalLines){ |