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 |
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 |
22 // Visual config |
23 var drawPianoNotes = false; |
23 var drawPianoNotes = false; |
24 var drawHorizontalLines = false; |
24 var drawHorizontalLines = false; |
25 var drawVerticalLines = true; |
25 var drawVerticalLines = true; |
|
26 // Timecode method |
|
27 var timePageLoaded = Date.now(); |
|
28 var offsetMusic = false; |
26 |
29 |
27 |
30 |
28 //create an new instance of a pixi stage |
31 //create an new instance of a pixi stage |
29 var stage = new PIXI.Stage(sceneBgColor); |
32 var stage = new PIXI.Stage(sceneBgColor); |
30 |
33 |
98 container1.x -= pixelsPerSecond1/manualFramerate; |
101 container1.x -= pixelsPerSecond1/manualFramerate; |
99 container2.x -= pixelsPerSecond2/manualFramerate; |
102 container2.x -= pixelsPerSecond2/manualFramerate; |
100 renderer.render(stage); |
103 renderer.render(stage); |
101 } |
104 } |
102 function moveContainerMore() { |
105 function moveContainerMore() { |
103 container1.x -= 10*(pixelsPerSecond1/manualFramerate); |
106 container1.x -= 50*(pixelsPerSecond1/manualFramerate); |
104 container2.x -= 10*(pixelsPerSecond2/manualFramerate); |
107 container2.x -= 50*(pixelsPerSecond2/manualFramerate); |
105 renderer.render(stage); |
108 renderer.render(stage); |
106 } |
109 } |
107 function moveContainerRight() { |
110 function moveContainerRight() { |
108 container1.x += 10*(pixelsPerSecond1/manualFramerate); |
111 container1.x += 50*(pixelsPerSecond1/manualFramerate); |
109 container2.x += 10*(pixelsPerSecond2/manualFramerate); |
112 container2.x += 50*(pixelsPerSecond2/manualFramerate); |
110 renderer.render(stage); |
113 renderer.render(stage); |
111 } |
114 } |
112 |
115 |
113 function addBunny(data){ |
116 function addNoteInContainer(note, startTime, duration, velocity, pixelsPerSecond, container, prHeight){ |
114 var timeFromZero = data.content[1]; |
117 //console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); |
|
118 var beginX = (offsetMusic + startTime) * pixelsPerSecond / 1000; |
|
119 var width = duration * pixelsPerSecond / 1000; |
|
120 // We draw the rectangle |
|
121 var graphics = new PIXI.Graphics(); |
|
122 graphics.beginFill(noteColor, (velocity / 128)); |
|
123 var y = (128-note) * prHeight / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
|
124 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight / 128)/2)), width, noteHeight); |
|
125 graphics.endFill(); |
|
126 container.addChild(graphics); |
|
127 } |
|
128 |
|
129 function addNotes(data){ |
|
130 if(!offsetMusic){ |
|
131 // get difference between the current note timecode and my zero to set the difference between the canvas's zero and the music's zero |
|
132 // in order to place in real time |
|
133 var now = Date.now(); |
|
134 var timeBetweenNowAndStart = now - timePageLoaded; |
|
135 offsetMusic = timeBetweenNowAndStart - data.content[1]; |
|
136 //console.log("start: ", timePageLoaded, ", now: ", now, ", timeBetweenNowAndStart = ", timeBetweenNowAndStart, ", offsetMusic = ", offsetMusic); |
|
137 } |
115 var note = data.content[3]; |
138 var note = data.content[3]; |
116 var velocity = data.content[4]; |
139 var velocity = data.content[4]; |
117 if(velocity===0){ |
140 if(velocity===0){ |
118 if(note in noteDict){ |
141 if(note in noteDict){ |
119 // We close the note in container one |
142 // We close the note in container one |
120 /*var beginTime = new Date(noteDict[note].ts).getTime(); |
143 //console.log("coucou 2", data); |
121 var beginDelta = beginTime - zeroTime; |
144 var duration = data.content[1] - noteDict[note].ts; |
122 var durationDelta = new Date(data.ts).getTime() - beginTime; |
145 addNoteInContainer(note, noteDict[note].ts, duration, noteDict[note].velocity, pixelsPerSecond1, container1, prHeight1); |
123 var beginX = beginDelta * pixelsPerSecond1 / 1000; |
146 addNoteInContainer(note, noteDict[note].ts, duration, noteDict[note].velocity, pixelsPerSecond2, container2, prHeight2); |
124 var width = durationDelta * pixelsPerSecond1 / 1000;*/ |
|
125 var beginX = noteDict[note].ts * pixelsPerSecond1 / 1000; |
|
126 var width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond1 / 1000; |
|
127 // We draw the rectangle |
|
128 var graphics = new PIXI.Graphics(); |
|
129 graphics.beginFill(noteColor, (noteDict[note].velocity / 128)); |
|
130 var y = (128-note) * prHeight1 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
|
131 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight1 / 128)/2)), width, noteHeight); |
|
132 graphics.endFill(); |
|
133 container1.addChild(graphics); |
|
134 // container 2 |
|
135 beginX = noteDict[note].ts * pixelsPerSecond2 / 1000; |
|
136 width = (timeFromZero - noteDict[note].ts) * pixelsPerSecond2 / 1000; |
|
137 // We draw the rectangle |
|
138 graphics = new PIXI.Graphics(); |
|
139 graphics.beginFill(noteColor, (noteDict[note].velocity / 128)); |
|
140 y = (128-note) * prHeight2 / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
|
141 graphics.drawRect(beginX, Math.floor(y - (noteHeight/2) + ((prHeight2 / 128)/2)), width, noteHeight); |
|
142 graphics.endFill(); |
|
143 container2.addChild(graphics); |
|
144 // delete entry |
147 // delete entry |
145 delete noteDict[note]; |
148 delete noteDict[note]; |
146 } |
149 } |
147 } |
150 } |
148 else{ |
151 else{ |
149 noteDict[note] = {ts: timeFromZero, velocity:velocity}; |
152 noteDict[note] = {ts: data.content[1], velocity:velocity}; |
150 } |
153 } |
151 } |
154 } |
152 |
155 |
153 // Socket management |
156 // Socket management |
154 var sock = null; |
157 var sock = null; |