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 = 800; |
11 var sceneWidth = 1000; |
12 var sceneHeight = 400; |
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 speed = 1; // container -x position at each frame. Speed = 1 ~ 110px for 2 seconds |
|
16 var pixelsPerSecond = 50; // nb of pixels per second |
15 var pixelsPerSecond = 50; // nb of pixels per second |
17 var lineInterval = 2000; // means line every 2 seconds |
16 var lineInterval = 2000; // means line every 2 seconds |
18 var nbLines = 0; |
17 var nbLines = 0; |
19 |
18 //var speed = 1; // container -x position at each frame. Speed = 1 ~ 100px for 2 seconds |
20 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 = {}; |
21 |
21 |
22 |
22 |
23 //create an new instance of a pixi stage |
23 //create an new instance of a pixi stage |
24 var stage = new PIXI.Stage(sceneBgColor); |
24 var stage = new PIXI.Stage(sceneBgColor); |
25 |
25 |
29 //add the renderer view element to the DOM |
29 //add the renderer view element to the DOM |
30 document.body.appendChild(renderer.view); |
30 document.body.appendChild(renderer.view); |
31 |
31 |
32 //requestAnimFrame( animate ); |
32 //requestAnimFrame( animate ); |
33 |
33 |
|
34 |
|
35 //Draw 127 lines |
|
36 var delta = sceneHeight / 128; |
|
37 for(var i=1;i<128;i++){ |
|
38 var graphics = new PIXI.Graphics(); |
|
39 graphics.beginFill(0xFFFF00); |
|
40 graphics.lineStyle(1, 0xAAAAAA); |
|
41 var y = delta * i; |
|
42 graphics.moveTo(0, y); |
|
43 graphics.lineTo(sceneWidth, y); |
|
44 graphics.endFill(); |
|
45 |
|
46 stage.addChild(graphics); |
|
47 } |
|
48 |
34 var uberContainer = new PIXI.DisplayObjectContainer(); |
49 var uberContainer = new PIXI.DisplayObjectContainer(); |
35 uberContainer.position.x = Math.floor(sceneWidth*4/5); |
50 uberContainer.position.x = Math.floor(sceneWidth*4/5); |
36 uberContainer.position.y = 0; |
51 uberContainer.position.y = 0; |
37 stage.addChild(uberContainer); |
52 stage.addChild(uberContainer); |
|
53 |
|
54 |
38 var container = new PIXI.DisplayObjectContainer(); |
55 var container = new PIXI.DisplayObjectContainer(); |
39 container.position.x = 0; |
56 container.position.x = 0; |
40 container.position.y = 0; |
57 container.position.y = 0; |
41 uberContainer.addChild(container); |
58 uberContainer.addChild(container); |
42 |
59 |
58 container.x -= pixelsPerSecond/manualFramerate; |
75 container.x -= pixelsPerSecond/manualFramerate; |
59 renderer.render(stage); |
76 renderer.render(stage); |
60 } |
77 } |
61 |
78 |
62 function addBunny(data){ |
79 function addBunny(data){ |
63 // create a new Sprite using the texture |
80 var note = data.content[3]; |
64 var bunny = new PIXI.Sprite(texture); |
81 var velocity = data.content[4]; |
65 // center the sprites anchor point |
82 if(velocity===0){ |
66 //bunny.anchor.x = 0.5; |
83 if(note in noteDict){ |
67 //bunny.anchor.y = 0.5; |
84 // We close the note |
68 deltaMilliseconds = new Date(data.ts).getTime() - zeroTime; |
85 var beginTime = new Date(noteDict[note].ts).getTime(); |
69 //bunny.position.x = (sceneWidth / 2) - container.x; |
86 var beginDelta = beginTime - zeroTime; |
70 //bunny.position.y = Math.floor(Math.random()*sceneHeight); |
87 var durationDelta = new Date(data.ts).getTime() - beginTime; |
71 var x = deltaMilliseconds * pixelsPerSecond / 1000; |
88 var beginX = beginDelta * pixelsPerSecond / 1000; |
72 bunny.position.x = x; |
89 var width = durationDelta * pixelsPerSecond / 1000; |
73 bunny.position.y = Math.floor( data.content[3] * sceneHeight / 128 ); |
90 // We draw the rectangle |
74 bunny.alpha = data.content[4] / 128; |
91 var graphics = new PIXI.Graphics(); |
75 console.log("diff temporelle = ", x); |
92 graphics.beginFill(0x0000AA, (noteDict[note].velocity / 128)); |
76 container.addChild(bunny); |
93 var y = (128-note) * sceneHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
|
94 graphics.drawRect(beginX, y, width, sceneHeight / 128); |
|
95 graphics.endFill(); |
|
96 //console.log("diff temporelle = ", x); |
|
97 container.addChild(graphics); |
|
98 delete noteDict[note]; |
|
99 } |
|
100 } |
|
101 else{ |
|
102 noteDict[note] = {ts: data.ts, velocity:velocity}; |
|
103 } |
77 } |
104 } |
78 |
105 |
79 window.onload = function() { |
106 window.onload = function() { |
80 |
107 |
81 ellog = document.getElementById('log'); |
108 ellog = document.getElementById('log'); |