34 this.lineInterval = options.lineInterval; |
34 this.lineInterval = options.lineInterval; |
35 this.offsetMusic = options.offsetMusic || false; |
35 this.offsetMusic = options.offsetMusic || false; |
36 this.noteHeight = options.noteHeight; |
36 this.noteHeight = options.noteHeight; |
37 this.noteDict = {}; |
37 this.noteDict = {}; |
38 this.startTs = options.startTs || Date.now(); |
38 this.startTs = options.startTs || Date.now(); |
|
39 |
|
40 this.range = options.range; |
|
41 |
39 |
42 |
40 var started = false; |
43 var started = false; |
41 |
44 |
42 var isHidden = function(child) { |
45 var isHidden = function(child) { |
43 // TODO: the origin point is an approximation. Should refine this |
46 // TODO: the origin point is an approximation. Should refine this |
58 } |
61 } |
59 } |
62 } |
60 return color; |
63 return color; |
61 }; |
64 }; |
62 |
65 |
63 this.getNoteRect = function(x, y, color, alpha, width, height) { |
66 this.getNoteRect = function(note, x, y, color, alpha, width, height) { |
64 var graphics = new PIXI.Graphics(); |
67 var graphics = new PIXI.Graphics(); |
65 graphics.beginFill(color, alpha); |
68 graphics.beginFill(color, alpha); |
66 graphics.drawRect(0, 0, width, height); |
69 graphics.drawRect(0, 0, width, height); |
67 graphics.endFill(); |
70 graphics.endFill(); |
68 graphics.x = x; |
71 graphics.x = x; |
69 graphics.y = y; |
72 graphics.y = y; |
70 graphics.width = width; |
73 graphics.width = width; |
71 graphics.height = height; |
74 graphics.height = height; |
|
75 graphics.note = note; |
72 return graphics; |
76 return graphics; |
73 }; |
77 }; |
74 |
78 |
75 this.addNoteRaw = function(data) { |
79 this.addNoteRaw = function(data) { |
76 var note = data.content[3]; |
80 var note = data.content[3]; |
120 var x = (ts-this.startTs) * this.pixelsPerSecond / 1000; |
124 var x = (ts-this.startTs) * this.pixelsPerSecond / 1000; |
121 if((x+width) < (Math.abs(this.container.x) - this.width)) { |
125 if((x+width) < (Math.abs(this.container.x) - this.width)) { |
122 // not visible. do nothing |
126 // not visible. do nothing |
123 return; |
127 return; |
124 } |
128 } |
125 var y = Math.floor((128-note+0.5) * this.height / 128 - (this.noteHeight/2)); |
129 if (this.range.bottom > note || note > this.range.top){ |
|
130 if (note < this.range.bottom) |
|
131 this.range.bottom = note; |
|
132 else |
|
133 this.range.top = note; |
|
134 this.noteHeight = this.height / (this.range.top - this.range.bottom); |
|
135 this.rescaleScene(); |
|
136 } |
|
137 var y = Math.floor(((this.range.top-this.range.bottom)-(note-this.range.bottom)+0.5) * (this.height / (this.range.top-this.range.bottom)) - (this.noteHeight/2)); |
126 var color = this.getColor(channel); |
138 var color = this.getColor(channel); |
|
139 //128 hardecoded because its the maximum velocity of MIDI |
127 var alpha = (noteVelocity / 128); |
140 var alpha = (noteVelocity / 128); |
128 |
141 |
129 graphics = this.getNoteRect(x, y, color, alpha, width, this.noteHeight); |
142 graphics = this.getNoteRect(note, x, y, color, alpha, width, this.noteHeight); |
130 this.container.addChild(graphics); |
143 this.container.addChild(graphics); |
131 } |
144 } |
132 else { |
145 else { |
133 graphics.width = width; |
146 graphics.width = width; |
134 } |
147 } |
136 if(!duration && velocity) { |
149 if(!duration && velocity) { |
137 this.noteDict[channel][note].graphics = graphics; |
150 this.noteDict[channel][note].graphics = graphics; |
138 } |
151 } |
139 } |
152 } |
140 }; |
153 }; |
|
154 |
|
155 this.rescaleScene = function(){ |
|
156 var _this = this; |
|
157 var childrenToUpdate = []; |
|
158 _(_this.container.children).forEach(function(child) { |
|
159 return typeof(child) === 'undefined' || |
|
160 (!isHidden(child) && childrenToUpdate.push(child)); |
|
161 }); |
|
162 childrenToUpdate.forEach(function(child) { |
|
163 child.y = Math.floor(((_this.range.top-_this.range.bottom)-(child.note-_this.range.bottom)+0.5) * (_this.height / (_this.range.top-_this.range.bottom)) - (_this.noteHeight/2)); |
|
164 child.height = _this.noteHeight; |
|
165 }); |
|
166 } |
141 |
167 |
142 this.addLine = function(ts){ |
168 this.addLine = function(ts){ |
143 |
169 |
144 if(typeof(ts) === 'undefined') { |
170 if(typeof(ts) === 'undefined') { |
145 ts = new Date(); |
171 ts = new Date(); |