author | ymh <ymh.work@gmail.com> |
Mon, 12 Jan 2015 17:23:05 +0100 | |
changeset 84 | d7c5bffdd2d8 |
child 85 | eff9460bd4f2 |
permissions | -rw-r--r-- |
84
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
1 |
/** |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
2 |
* js/pianoroll.js |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
3 |
* |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
4 |
* pianoroll basic component |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
5 |
* |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
6 |
*/ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
7 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
8 |
'use strict'; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
9 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
10 |
var PIXI = require('pixi'); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
11 |
var randomColor = require('randomColor'); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
12 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
13 |
function PianoRoll(parentContainer, xInit, yInit, height, linesDown, pixelsPerSecond, width, noteColors, colorsReg, lineColor, lineInterval){ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
14 |
var _this = this; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
15 |
this.container = new PIXI.DisplayObjectContainer(); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
16 |
this.container.position.x = xInit; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
17 |
this.container.position.y = yInit; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
18 |
parentContainer.addChild(this.container); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
19 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
20 |
this.linesDown = linesDown; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
21 |
this.height = height; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
22 |
this.pixelsPerSecond = pixelsPerSecond; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
23 |
this.width = width; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
24 |
this.noteColors = noteColors; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
25 |
this.colorsReg = colorsReg || {}; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
26 |
this.lineColor = lineColor; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
27 |
this.lineInterval = lineInterval; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
28 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
29 |
this.addNote = function(note, startTime, duration, velocity, canal){ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
30 |
//console.log("coucou 1", note, timeFromZero, ts, velocity, pixelsPerSecond, container, prHeight); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
31 |
var beginX = (offsetMusic + startTime) * this.pixelsPerSecond / 1000; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
32 |
var width = duration * this.pixelsPerSecond / 1000; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
33 |
// We draw the rectangle |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
34 |
var graphics = new PIXI.Graphics(); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
35 |
//console.log("beginX = ", beginX, "canal = ", canal, "color = ", noteColor[canal], "width = ", width, "note = ", note, "velocity = ", velocity); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
36 |
var color = this.colorsReg[canal]; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
37 |
if(typeof(color) === 'undefined') { |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
38 |
var colorsRegSize = Object.keys(this.colorsReg).length; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
39 |
if(colorsRegSize < this.noteColors.length) { |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
40 |
color = this.colorsReg[canal] = this.noteColors[colorsRegSize]; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
41 |
} |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
42 |
else { |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
43 |
color = this.colorsReg[canal] = parseInt(randomColor({ luminosity: 'light', hue: 'random', format:'hex'}).replace(/^#/, ''), 16); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
44 |
} |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
45 |
} |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
46 |
graphics.beginFill(color, (velocity / 128)); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
47 |
var y = (128-note) * this.height / 128; // (128-note) because y = 0 is for note = 128 and y = 128 for note = 0 |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
48 |
graphics.drawRect(0, Math.floor(y - (noteHeight/2) + ((this.height / 128)/2)), width, noteHeight); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
49 |
graphics.endFill(); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
50 |
graphics.x = beginX; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
51 |
this.container.addChild(graphics); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
52 |
}; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
53 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
54 |
this.addLine = function(lineNb){ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
55 |
var graphics = new PIXI.Graphics(); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
56 |
var x = -this.container.x; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
57 |
graphics.beginFill(0xFFFF00); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
58 |
graphics.lineStyle(1, this.lineColor); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
59 |
var y = this.linesDown ? this.height - 20 : 0; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
60 |
graphics.moveTo(x, y); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
61 |
graphics.lineTo(x, y + 20); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
62 |
graphics.endFill(); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
63 |
this.container.addChild(graphics); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
64 |
// Add text |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
65 |
var totalSec = lineNb * this.lineInterval / 1000; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
66 |
var hours = parseInt( totalSec / 3600 ) % 24; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
67 |
var minutes = parseInt( totalSec / 60 ) % 60; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
68 |
var seconds = totalSec % 60; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
69 |
var timeStr = (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
70 |
var fontObj = { font: '10pt Arial', fill: '#444444' }; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
71 |
var t = new PIXI.Text(timeStr, fontObj); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
72 |
t.x = x + 2; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
73 |
t.y = this.linesDown ? this.height - 15 : 2; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
74 |
this.container.addChild(t); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
75 |
}; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
76 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
77 |
this.moveTo = function(diffTime){ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
78 |
this.container.x = Math.floor(diffTime*this.pixelsPerSecond); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
79 |
}; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
80 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
81 |
this.removePassedObjets = function(){ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
82 |
var nbChilds = _this.container.children.length; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
83 |
var i = 0, childIsNowDisplayed = false; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
84 |
while(i<nbChilds && !childIsNowDisplayed){ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
85 |
var child = _this.container.children[0]; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
86 |
//console.log("remove ? ", child.x, child.width, ((child.x + child.width) < (Math.abs(_this.container.x) - _this.width))); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
87 |
if((child.x + child.width) < (Math.abs(_this.container.x) - _this.width)){ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
88 |
_this.container.removeChild(child); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
89 |
//console.log(" remove !!!"); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
90 |
} |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
91 |
else{ |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
92 |
childIsNowDisplayed = true; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
93 |
//console.log(" childIsNowDisplayed"); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
94 |
} |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
95 |
i++; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
96 |
} |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
97 |
//console.log("before : ", nbChilds, ", after : ", _this.container.children.length); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
98 |
}; |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
99 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
100 |
// remove notes each scene width |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
101 |
//var removeInterval = window.setInterval(this.removePassedObjets, 1000 * sceneWidth / this.pixelsPerSecond ); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
102 |
window.setInterval(this.removePassedObjets, 1000 * this.width / this.pixelsPerSecond ); |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
103 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
104 |
} |
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
105 |
|
d7c5bffdd2d8
rework on pianoroll: extract in own app + "browserify"
ymh <ymh.work@gmail.com>
parents:
diff
changeset
|
106 |
module.exports = PianoRoll; |