38 uberContainer.position.x = Math.floor(sceneWidth*9/10); |
38 uberContainer.position.x = Math.floor(sceneWidth*9/10); |
39 uberContainer.position.y = 0; |
39 uberContainer.position.y = 0; |
40 stage.addChild(uberContainer); |
40 stage.addChild(uberContainer); |
41 |
41 |
42 |
42 |
43 function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond){ |
43 function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width){ |
44 |
44 var _this = this; |
45 this.container = new PIXI.DisplayObjectContainer(); |
45 this.container = new PIXI.DisplayObjectContainer(); |
46 this.container.position.x = xInit; |
46 this.container.position.x = xInit; |
47 this.container.position.y = yInit; |
47 this.container.position.y = yInit; |
48 parentContainer.addChild(this.container); |
48 parentContainer.addChild(this.container); |
49 |
49 |
50 this.linesDown = linesDown; |
50 this.linesDown = linesDown; |
51 this.height = height; |
51 this.height = height; |
52 this.pixelsPerSecond = pixelsPerSecond; |
52 this.pixelsPerSecond = pixelsPerSecond; |
|
53 this.width = width; |
53 |
54 |
54 this.addNote = function(note, startTime, duration, velocity, canal){ |
55 this.addNote = function(note, startTime, duration, velocity, canal){ |
55 //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); |
56 //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); |
56 var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000; |
57 var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000; |
57 var width = duration * this.pixelsPerSecond / 1000; |
58 var width = duration * this.pixelsPerSecond / 1000; |
58 // We draw the rectangle |
59 // We draw the rectangle |
59 var graphics = new PIXI.Graphics(); |
60 var graphics = new PIXI.Graphics(); |
60 //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); |
61 //console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); |
61 graphics.beginFill(noteColor[canal], (velocity / 128)); |
62 graphics.beginFill(noteColor[canal], (velocity / 128)); |
62 var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
63 var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
63 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight); |
64 graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight); |
64 graphics.endFill(); |
65 graphics.endFill(); |
|
66 graphics.x = beginX; |
65 this.container.addChild(graphics); |
67 this.container.addChild(graphics); |
66 }; |
68 }; |
67 |
69 |
68 this.addLine = function(lineNb){ |
70 this.addLine = function(lineNb){ |
69 var graphics = new PIXI.Graphics(); |
71 var graphics = new PIXI.Graphics(); |
84 var fontObj = { font: "10pt Arial", fill: "#444444" }; |
86 var fontObj = { font: "10pt Arial", fill: "#444444" }; |
85 var t = new PIXI.Text(timeStr, fontObj); |
87 var t = new PIXI.Text(timeStr, fontObj); |
86 t.x = x + 2; |
88 t.x = x + 2; |
87 t.y = this.linesDown ? this.height - 15 : 2; |
89 t.y = this.linesDown ? this.height - 15 : 2; |
88 this.container.addChild(t); |
90 this.container.addChild(t); |
89 } |
91 }; |
90 |
92 |
91 this.moveTo = function(diffTime){ |
93 this.moveTo = function(diffTime){ |
92 this.container.x = Math.floor(diffTime*this.pixelsPerSecond); |
94 this.container.x = Math.floor(diffTime*this.pixelsPerSecond); |
93 }; |
95 }; |
94 |
96 |
|
97 this.removePassedObjets = function(){ |
|
98 var nbChilds = _this.container.children.length; |
|
99 var i = 0, childIsNowDisplayed = false; |
|
100 while(i<nbChilds && !childIsNowDisplayed){ |
|
101 var child = _this.container.children[0]; |
|
102 //console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width))); |
|
103 if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){ |
|
104 _this.container.removeChild(child); |
|
105 //console.log(" remove !!!"); |
|
106 } |
|
107 else{ |
|
108 childIsNowDisplayed = true; |
|
109 //console.log(" childIsNowDisplayed"); |
|
110 } |
|
111 i++; |
|
112 } |
|
113 }; |
|
114 |
95 } |
115 } |
96 |
116 |
97 // Init containers |
117 // Init containers |
98 var container1 = new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1); |
118 var container1 = new PianoRoll(uberContainer, 0, 0, prHeight1, true, pixelsPerSecond1, sceneWidth); |
99 var container2 = new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2); |
119 var container2 = new PianoRoll(uberContainer, 0, prHeight1, prHeight2, false, pixelsPerSecond2, sceneWidth); |
100 |
120 |
101 // Line between two containers |
121 // Line between two containers |
102 var graphics = new PIXI.Graphics(); |
122 var graphics = new PIXI.Graphics(); |
103 graphics.beginFill(0xFFFF00); |
123 graphics.beginFill(0xFFFF00); |
104 graphics.lineStyle(1, lineColor); |
124 graphics.lineStyle(1, lineColor); |
213 |
235 |
214 |
236 |
215 // Init page and intervals |
237 // Init page and intervals |
216 addLine(); |
238 addLine(); |
217 var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate); |
239 var moveInterval = window.setInterval(replaceContainers, 1000/manualFramerate); |
218 verticalLinesInterval = window.setInterval(addLine, lineInterval); |
240 var verticalLinesInterval = window.setInterval(addLine, lineInterval); |
|
241 var removeInterval1 = window.setInterval(container1.removePassedObjets, 1000 * sceneWidth / pixelsPerSecond1 ); |
|
242 var removeInterval2 = window.setInterval(container2.removePassedObjets, 1000 * sceneWidth / pixelsPerSecond2 ); |
219 |
243 |
220 // Little inteval to show time |
244 // Little inteval to show time |
221 var nbSec = 0; |
245 var nbSec = 0; |
222 var mySpan = document.getElementById("myspan"); |
246 var mySpan = document.getElementById("myspan"); |
223 function updateTime(){ |
247 function updateTime(){ |