doohoyi/scar-mix-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

more responsive design.

Browse source
This commit is contained in:
Dooho Yi 2020-05-19 18:13:09 +09:00
parent 31065d9df0
commit 91c8ff02bd
4 changed files with 196 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/1/conductor/index.html
View file

@ -80,10 +80,6 @@
</div> </div>
<canvas id="screen" resize style="z-index:0"></canvas> <canvas id="screen" resize style="z-index:0"></canvas>
<div id="objstring1" class="objstring fw7 courier f3 white" style="z-index:1">들리는 상처들의 믹스</div>
<div id="objstring3" class="objstring fw7 courier f3 white" style="z-index:-1">연결 확인</div>
<div id="objstring4" class="objstring fw7 courier f3 white" style="z-index:-1">믹스 #1</div>
<div id="objstring5" class="objstring fw7 courier f3 white" style="z-index:-1">믹스 #2</div>
</body> </body>
</html> </html>

189
public/1/conductor/index.js
View file

@ -177,12 +177,12 @@ $(document).ready(function() {
var netstat = new Path.Circle({ var netstat = new Path.Circle({
center: view.bounds.topRight + [-vssw / 2, +vssw / 2], center: view.bounds.topRight + [-vssw / 2, +vssw / 2],
radius: vssw / 4, radius: vssw / 4,
fillColor: 'hotpink', fillColor: '#51D0FD',
strokeWidth: 2, strokeWidth: vssw * 0.03,
strokeColor: 'gray', strokeColor: '#FFE40A',
dashArray: [4, 4], dashArray: [vssw * 0.05, vssw * 0.05],
onFrame: function(event) { onFrame: function(event) {
this.rotate(1); this.rotate(0.2);
} }
}); });
netstat.fillColor.alpha = 0; netstat.fillColor.alpha = 0;
@ -204,7 +204,7 @@ $(document).ready(function() {
aprev.scale(vssw * 1.5); aprev.scale(vssw * 1.5);
aprev.position = [0, 0]; //reset position, before relative positioning !! aprev.position = [0, 0]; //reset position, before relative positioning !!
aprev.translate([vssw, vssw * 1.8]); aprev.translate([vssw, vssw * 1.8]);
aprev.fillColor = 'pink'; aprev.fillColor = '#FFE40A';
aprev._socket = socket; aprev._socket = socket;
aprev._isactive = false; aprev._isactive = false;
aprev._activate = function() { aprev._activate = function() {
@ -226,7 +226,7 @@ $(document).ready(function() {
anext.scale(vssw * 1.5); anext.scale(vssw * 1.5);
anext.position = [0, 0]; //reset position, before relative positioning !! anext.position = [0, 0]; //reset position, before relative positioning !!
anext.translate([vssw * 9, vssw * 1.8]); anext.translate([vssw * 9, vssw * 1.8]);
anext.fillColor = 'pink'; anext.fillColor = '#FFE40A';
anext._socket = socket; anext._socket = socket;
anext._isactive = false; anext._isactive = false;
anext._activate = function() { anext._activate = function() {
@ -244,17 +244,28 @@ $(document).ready(function() {
}; };
//title background //title background
new Path.Rectangle({ var titlebox = new Path.Rectangle({
point: [vssw * 2, vssw * 1], point: [vssw * 2, vssw * 1],
size: [vssw * 6, vssw * 1.5], size: [vssw * 6, vssw * 1.5],
fillColor: 'white', fillColor: 'white',
radius: 30, radius: vssw * 0.8,
}).opacity = 0.3; opacity: 0.3,
});
//screen #1 - 'home' //screen #1 - 'home'
changeScreen(1); changeScreen(1);
new Path.Rectangle([0, 0], vs).fillColor = '#999'; new Path.Rectangle([0, 0], vs).fillColor = '#999';
//title - text
new PointText({
point: titlebox.bounds.center,
content: ' 사운드-랩 § soundLab ',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em',
}).fitBounds(titlebox.bounds);
//hello, screen. //hello, screen.
phonehand.addTo(project); phonehand.addTo(project);
phonehand.scale(vsw / 1.5); phonehand.scale(vsw / 1.5);
@ -263,28 +274,38 @@ $(document).ready(function() {
//screen #2 - check //screen #2 - check
changeScreen(2); changeScreen(2);
new Path.Rectangle([0, 0], vs).fillColor = '#393'; new Path.Rectangle([0, 0], vs).fillColor = '#05C183';
//title - text
new PointText({
point: [vssw * 2, vssw * 1],
content: ' 연결 확인 ',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em'
}).fitBounds(titlebox.bounds);
//TODO: info text. //TODO: info text.
new PointText({ new PointText({
content: "네트워크 테스트!", content: "네트워크 테스트!",
point: view.center + [-vssw * 3, -vssw * 2], point: view.center + [-vssw * 3, -vssw * 2],
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '2em', fontSize: vssw * 1.0,
fillColor: 'gold' fillColor: 'gold'
}); });
new PointText({ new PointText({
content: "사운드 테스트!", content: "사운드 테스트!",
point: view.center + [-vssw * 3, vssw * 0], point: view.center + [-vssw * 3, vssw * 0],
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '2em', fontSize: vssw * 1.0,
fillColor: 'pink' fillColor: 'pink'
}); });
new PointText({ new PointText({
content: "동그라미 터치!", content: "동그라미 터치!",
point: view.center + [-vssw * 3, vssw * 2], point: view.center + [-vssw * 3, vssw * 2],
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '2em', fontSize: vssw * 1.0,
fillColor: 'red' fillColor: 'red'
}); });
new Path.Circle({ new Path.Circle({
@ -301,6 +322,16 @@ $(document).ready(function() {
changeScreen(3); changeScreen(3);
new Path.Rectangle([0, 0], vs).fillColor = '#333'; new Path.Rectangle([0, 0], vs).fillColor = '#333';
//title - text
new PointText({
point: [vssw * 2, vssw * 1],
content: ' 믹스 #1 ',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em'
}).fitBounds(titlebox.bounds);
// //
for (var row = 0; row < 7; row++) { for (var row = 0; row < 7; row++) {
for (var col = 0; col < 1; col++) { for (var col = 0; col < 1; col++) {
@ -313,7 +344,7 @@ $(document).ready(function() {
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.5, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
@ -324,6 +355,7 @@ $(document).ready(function() {
par._players.push(par._player.start()._source); // start playbacks and collect their '_source's.. par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
par._playcount++; par._playcount++;
par.children.playcounter.content = '' + par._playcount; par.children.playcounter.content = '' + par._playcount;
par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
// //
par._socket.emit('sound', { par._socket.emit('sound', {
name: par._key, name: par._key,
@ -332,9 +364,23 @@ $(document).ready(function() {
}); });
} }
}), }),
//playcounterbox
new Path.Rectangle({
name: 'playcounterbox',
point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
size: [vssw * 0.6, vssw * 0.8],
}),
//playcounter
new PointText({
name: 'playcounter',
content: '' + 0,
fillColor: 'white',
fontSize: '2em',
fontWeight: 'bold'
}),
//stop button //stop button
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 2.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
@ -349,6 +395,9 @@ $(document).ready(function() {
par._playcount--; par._playcount--;
par.children.playcounter.content = '' + par._playcount; par.children.playcounter.content = '' + par._playcount;
} }
if (par._players.length == 0) {
par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
}
// //
par._socket.emit('sound', { par._socket.emit('sound', {
name: par._key, name: par._key,
@ -357,18 +406,9 @@ $(document).ready(function() {
}); });
} }
}), }),
//playcounter
new PointText({
name: 'playcounter',
content: '' + 0,
point: [vssw * 4.8, row * vssw * 1.4 + vssw * 3.5 + vssw * 0.6],
fillColor: 'white',
fontSize: '2em',
fontWeight: 'bold'
}),
//faster button //faster button
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 5.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
@ -380,6 +420,7 @@ $(document).ready(function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
par._players[par._players.length - 1].playbackRate.value += 0.2; par._players[par._players.length - 1].playbackRate.value += 0.2;
par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
} }
// //
par._socket.emit('sound', { par._socket.emit('sound', {
@ -389,6 +430,20 @@ $(document).ready(function() {
}); });
} }
}), }),
//speedcounterbox
new Path.Rectangle({
name: 'speedcounterbox',
point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
size: [vssw * 0.6, vssw * 0.8],
}),
//speedcounter
new PointText({
name: 'speedcounter',
content: '' + 0,
fillColor: 'white',
fontSize: '2em',
fontWeight: 'bold'
}),
//slower button //slower button
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
@ -403,6 +458,7 @@ $(document).ready(function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
par._players[par._players.length - 1].playbackRate.value -= 0.2; par._players[par._players.length - 1].playbackRate.value -= 0.2;
par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
} }
// //
par._socket.emit('sound', { par._socket.emit('sound', {
@ -421,6 +477,9 @@ $(document).ready(function() {
_init: function() { _init: function() {
this._player.loop = true; this._player.loop = true;
this._player.retrigger = true; this._player.retrigger = true;
this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
//socket io event handling.. //socket io event handling..
var that = this; var that = this;
this._socket.on('sound', function(msg) { this._socket.on('sound', function(msg) {
@ -429,19 +488,25 @@ $(document).ready(function() {
that._players.push(that._player.start()._source); // start playbacks and collect their '_source's.. that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
that._playcount++; that._playcount++;
that.children.playcounter.content = '' + that._playcount; that.children.playcounter.content = '' + that._playcount;
that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
} else if (msg.action == 'stop') { } else if (msg.action == 'stop') {
if (that._players.length > 0) { if (that._players.length > 0) {
(that._players.shift()).stop(); (that._players.shift()).stop();
that._playcount--; that._playcount--;
that.children.playcounter.content = '' + that._playcount; that.children.playcounter.content = '' + that._playcount;
} }
if (that._players.length == 0) {
that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
}
} else if (msg.action == 'faster') { } else if (msg.action == 'faster') {
if (that._players.length > 0) { if (that._players.length > 0) {
that._players[that._players.length - 1].playbackRate.value += 0.2; that._players[that._players.length - 1].playbackRate.value += 0.2;
that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
} }
} else if (msg.action == 'slower') { } else if (msg.action == 'slower') {
if (that._players.length > 0) { if (that._players.length > 0) {
that._players[that._players.length - 1].playbackRate.value -= 0.2; that._players[that._players.length - 1].playbackRate.value -= 0.2;
that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
} }
} }
} }
@ -453,7 +518,7 @@ $(document).ready(function() {
new PointText({ new PointText({
point: c.firstChild.bounds.topLeft + [0, -5], point: c.firstChild.bounds.topLeft + [0, -5],
content: Object.keys(beach_sounds)[idx], content: Object.keys(beach_sounds)[idx],
fontSize: '1em', fontSize: vssw * 0.35,
fontWeight: 'bold', fontWeight: 'bold',
fillColor: 'white' fillColor: 'white'
}); });
@ -464,6 +529,16 @@ $(document).ready(function() {
changeScreen(4); changeScreen(4);
new Path.Rectangle([0, 0], vs).fillColor = '#333'; new Path.Rectangle([0, 0], vs).fillColor = '#333';
//title - text
new PointText({
point: [vssw * 2, vssw * 1],
content: ' 믹스 #2 ',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em'
}).fitBounds(titlebox.bounds);
// //
for (var row = 0; row < 7; row++) { for (var row = 0; row < 7; row++) {
for (var col = 0; col < 1; col++) { for (var col = 0; col < 1; col++) {
@ -476,7 +551,7 @@ $(document).ready(function() {
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.5, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
hue: getRandom(20, 60), hue: getRandom(20, 60),
saturation: 1, saturation: 1,
@ -487,6 +562,7 @@ $(document).ready(function() {
par._players.push(par._player.start()._source); // start playbacks and collect their '_source's.. par._players.push(par._player.start()._source); // start playbacks and collect their '_source's..
par._playcount++; par._playcount++;
par.children.playcounter.content = '' + par._playcount; par.children.playcounter.content = '' + par._playcount;
par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
// //
par._socket.emit('sound', { par._socket.emit('sound', {
name: par._key, name: par._key,
@ -495,9 +571,23 @@ $(document).ready(function() {
}); });
} }
}), }),
//playcounterbox
new Path.Rectangle({
name: 'playcounterbox',
point: [vssw * 2.3, row * vssw * 1.4 + vssw * 3.5],
size: [vssw * 0.6, vssw * 0.8],
}),
//playcounter
new PointText({
name: 'playcounter',
content: '' + 0,
fillColor: 'white',
fontSize: '2em',
fontWeight: 'bold'
}),
//stop button //stop button
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 2.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 2.9, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
@ -512,6 +602,9 @@ $(document).ready(function() {
par._playcount--; par._playcount--;
par.children.playcounter.content = '' + par._playcount; par.children.playcounter.content = '' + par._playcount;
} }
if (par._players.length == 0) {
par.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
}
// //
par._socket.emit('sound', { par._socket.emit('sound', {
name: par._key, name: par._key,
@ -520,18 +613,9 @@ $(document).ready(function() {
}); });
} }
}), }),
//playcounter
new PointText({
name: 'playcounter',
content: '' + 0,
point: [vssw * 4.8, row * vssw * 1.4 + vssw * 3.5 + vssw * 0.6],
fillColor: 'white',
fontSize: '2em',
fontWeight: 'bold'
}),
//faster button //faster button
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 5.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 5.0, row * vssw * 1.4 + vssw * 3.5],
radius: vssw * 0.4, radius: vssw * 0.4,
size: [vssw * 1.6, vssw * 0.7], size: [vssw * 1.6, vssw * 0.7],
fillColor: new Color({ fillColor: new Color({
@ -543,6 +627,7 @@ $(document).ready(function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
par._players[par._players.length - 1].playbackRate.value += 0.2; par._players[par._players.length - 1].playbackRate.value += 0.2;
par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
} }
// //
par._socket.emit('sound', { par._socket.emit('sound', {
@ -552,6 +637,20 @@ $(document).ready(function() {
}); });
} }
}), }),
//speedcounterbox
new Path.Rectangle({
name: 'speedcounterbox',
point: [vssw * 6.6, row * vssw * 1.4 + vssw * 3.5],
size: [vssw * 0.6, vssw * 0.8],
}),
//speedcounter
new PointText({
name: 'speedcounter',
content: '' + 0,
fillColor: 'white',
fontSize: '2em',
fontWeight: 'bold'
}),
//slower button //slower button
new Path.Rectangle({ new Path.Rectangle({
point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5], point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5],
@ -566,6 +665,7 @@ $(document).ready(function() {
var par = this.parent; var par = this.parent;
if (par._players.length > 0) { if (par._players.length > 0) {
par._players[par._players.length - 1].playbackRate.value -= 0.2; par._players[par._players.length - 1].playbackRate.value -= 0.2;
par.children.speedcounter.content = Number.parseFloat(par._players[par._players.length - 1].playbackRate.value).toFixed(1);
} }
// //
par._socket.emit('sound', { par._socket.emit('sound', {
@ -584,6 +684,9 @@ $(document).ready(function() {
_init: function() { _init: function() {
this._player.loop = true; this._player.loop = true;
this._player.retrigger = true; this._player.retrigger = true;
this.children.playcounter.fitBounds(this.children.playcounterbox.bounds);
this.children.speedcounter.fitBounds(this.children.speedcounterbox.bounds);
this.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
//socket io event handling.. //socket io event handling..
var that = this; var that = this;
this._socket.on('sound', function(msg) { this._socket.on('sound', function(msg) {
@ -592,19 +695,25 @@ $(document).ready(function() {
that._players.push(that._player.start()._source); // start playbacks and collect their '_source's.. that._players.push(that._player.start()._source); // start playbacks and collect their '_source's..
that._playcount++; that._playcount++;
that.children.playcounter.content = '' + that._playcount; that.children.playcounter.content = '' + that._playcount;
that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
} else if (msg.action == 'stop') { } else if (msg.action == 'stop') {
if (that._players.length > 0) { if (that._players.length > 0) {
(that._players.shift()).stop(); (that._players.shift()).stop();
that._playcount--; that._playcount--;
that.children.playcounter.content = '' + that._playcount; that.children.playcounter.content = '' + that._playcount;
} }
if (that._players.length == 0) {
that.children.speedcounter.content = Number.parseFloat(1).toFixed(1);
}
} else if (msg.action == 'faster') { } else if (msg.action == 'faster') {
if (that._players.length > 0) { if (that._players.length > 0) {
that._players[that._players.length - 1].playbackRate.value += 0.2; that._players[that._players.length - 1].playbackRate.value += 0.2;
that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
} }
} else if (msg.action == 'slower') { } else if (msg.action == 'slower') {
if (that._players.length > 0) { if (that._players.length > 0) {
that._players[that._players.length - 1].playbackRate.value -= 0.2; that._players[that._players.length - 1].playbackRate.value -= 0.2;
that.children.speedcounter.content = Number.parseFloat(that._players[that._players.length - 1].playbackRate.value).toFixed(1);
} }
} }
} }
@ -616,7 +725,7 @@ $(document).ready(function() {
new PointText({ new PointText({
point: c.firstChild.bounds.topLeft + [0, -5], point: c.firstChild.bounds.topLeft + [0, -5],
content: Object.keys(beach_sounds)[idx], content: Object.keys(beach_sounds)[idx],
fontSize: '1em', fontSize: vssw * 0.35,
fontWeight: 'bold', fontWeight: 'bold',
fillColor: 'white' fillColor: 'white'
}); });

3
public/1/index.html
View file

@ -80,9 +80,6 @@
</div> </div>
<canvas id="screen" resize style="z-index:0"></canvas> <canvas id="screen" resize style="z-index:0"></canvas>
<div id="objstring1" class="objstring fw7 courier f3 white" style="z-index:1">들리는 상처들의 믹스</div>
<div id="objstring3" class="objstring fw7 courier f3 white" style="z-index:-1">연결 확인</div>
<div id="objstring4" class="objstring fw7 courier f3 white" style="z-index:-1">믹스</div>
</body> </body>
</html> </html>

63
public/1/index.js
View file

@ -24,7 +24,7 @@ $(document).ready(function() {
SVGImport_size1('./imgs/iconmonstr-minus-4.svg'), SVGImport_size1('./imgs/iconmonstr-minus-4.svg'),
//clap //clap
AudioImport_p5("./audio/clap@2/" + ("0" + getRandomInt(1, 2)).slice(-2) + ".mp3"), AudioImport_p5("./audio/clap@2/" + ("0" + getRandomInt(1, 2)).slice(-2) + ".mp3"),
//sounds page 1 ==> 7 //beach_sounds page 1 ==> 7
AudioImport("./audio/2011_2011.mp3"), AudioImport("./audio/2011_2011.mp3"),
AudioImport("./audio/2011_벨.mp3"), AudioImport("./audio/2011_벨.mp3"),
AudioImport("./audio/2011_숲.mp3"), AudioImport("./audio/2011_숲.mp3"),
@ -32,7 +32,7 @@ $(document).ready(function() {
AudioImport("./audio/2011_헤비레인.mp3"), AudioImport("./audio/2011_헤비레인.mp3"),
AudioImport("./audio/고요6.mp3"), AudioImport("./audio/고요6.mp3"),
AudioImport("./audio/고요7.mp3"), AudioImport("./audio/고요7.mp3"),
//sounds page 2 ==> 7 //beach_sounds page 2 ==> 7
AudioImport("./audio/검은산_뚜루.mp3"), AudioImport("./audio/검은산_뚜루.mp3"),
AudioImport("./audio/검은산_다급.mp3"), AudioImport("./audio/검은산_다급.mp3"),
AudioImport("./audio/검은산_부엉.mp3"), AudioImport("./audio/검은산_부엉.mp3"),
@ -193,12 +193,12 @@ $(document).ready(function() {
var netstat = new Path.Circle({ var netstat = new Path.Circle({
center: view.bounds.topRight + [-vssw / 2, +vssw / 2], center: view.bounds.topRight + [-vssw / 2, +vssw / 2],
radius: vssw / 4, radius: vssw / 4,
fillColor: 'hotpink', fillColor: '#51D0FD',
strokeWidth: 2, strokeWidth: vssw * 0.03,
strokeColor: 'gray', strokeColor: '#FFE40A',
dashArray: [4, 4], dashArray: [vssw * 0.05, vssw * 0.05],
onFrame: function(event) { onFrame: function(event) {
this.rotate(1); this.rotate(0.2);
} }
}); });
netstat.fillColor.alpha = 0; netstat.fillColor.alpha = 0;
@ -220,7 +220,7 @@ $(document).ready(function() {
aprev.scale(vssw * 1.5); aprev.scale(vssw * 1.5);
aprev.position = [0, 0]; //reset position, before relative positioning !! aprev.position = [0, 0]; //reset position, before relative positioning !!
aprev.translate([vssw, vssw * 1.8]); aprev.translate([vssw, vssw * 1.8]);
aprev.fillColor = 'pink'; aprev.fillColor = '#FFE40A';
aprev._socket = socket; aprev._socket = socket;
aprev._isactive = false; aprev._isactive = false;
aprev._activate = function() { aprev._activate = function() {
@ -242,7 +242,7 @@ $(document).ready(function() {
anext.scale(vssw * 1.5); anext.scale(vssw * 1.5);
anext.position = [0, 0]; //reset position, before relative positioning !! anext.position = [0, 0]; //reset position, before relative positioning !!
anext.translate([vssw * 9, vssw * 1.8]); anext.translate([vssw * 9, vssw * 1.8]);
anext.fillColor = 'pink'; anext.fillColor = '#FFE40A';
anext._socket = socket; anext._socket = socket;
anext._isactive = false; anext._isactive = false;
anext._activate = function() { anext._activate = function() {
@ -260,17 +260,28 @@ $(document).ready(function() {
}; };
//title background //title background
new Path.Rectangle({ var titlebox = new Path.Rectangle({
point: [vssw * 2, vssw * 1], point: [vssw * 2, vssw * 1],
size: [vssw * 6, vssw * 1.5], size: [vssw * 6, vssw * 1.5],
fillColor: 'white', fillColor: 'white',
radius: 30, radius: vssw * 0.8,
}).opacity = 0.3; opacity: 0.3,
});
//screen #1 - 'home' //screen #1 - 'home'
changeScreen(1); changeScreen(1);
new Path.Rectangle([0, 0], vs).fillColor = '#999'; new Path.Rectangle([0, 0], vs).fillColor = '#999';
//title - text
new PointText({
point: titlebox.bounds.center,
content: ' 사운드-랩 § soundLab ',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em',
}).fitBounds(titlebox.bounds);
//hello, screen. //hello, screen.
phonehand.addTo(project); phonehand.addTo(project);
phonehand.scale(vsw / 1.5); phonehand.scale(vsw / 1.5);
@ -279,28 +290,38 @@ $(document).ready(function() {
//screen #2 - check //screen #2 - check
changeScreen(2); changeScreen(2);
new Path.Rectangle([0, 0], vs).fillColor = '#393'; new Path.Rectangle([0, 0], vs).fillColor = '#05C183';
//title - text
new PointText({
point: [vssw * 2, vssw * 1],
content: ' 연결 확인 ',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em'
}).fitBounds(titlebox.bounds);
//TODO: info text. //TODO: info text.
new PointText({ new PointText({
content: "네트워크 테스트!", content: "네트워크 테스트!",
point: view.center + [-vssw * 3, -vssw * 2], point: view.center + [-vssw * 3, -vssw * 2],
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '2em', fontSize: vssw * 1.0,
fillColor: 'gold' fillColor: 'gold'
}); });
new PointText({ new PointText({
content: "사운드 테스트!", content: "사운드 테스트!",
point: view.center + [-vssw * 3, vssw * 0], point: view.center + [-vssw * 3, vssw * 0],
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '2em', fontSize: vssw * 1.0,
fillColor: 'pink' fillColor: 'pink'
}); });
new PointText({ new PointText({
content: "동그라미 터치!", content: "동그라미 터치!",
point: view.center + [-vssw * 3, vssw * 2], point: view.center + [-vssw * 3, vssw * 2],
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '2em', fontSize: vssw * 1.0,
fillColor: 'red' fillColor: 'red'
}); });
new Path.Circle({ new Path.Circle({
@ -317,6 +338,16 @@ $(document).ready(function() {
changeScreen(3); changeScreen(3);
new Path.Rectangle([0, 0], vs).fillColor = '#333'; new Path.Rectangle([0, 0], vs).fillColor = '#333';
//title - text
new PointText({
point: [vssw * 2, vssw * 1],
content: ' 믹스 #1 ',
fillColor: 'white',
fontFamily: 'AppleGothic, Sans-serif',
fontWeight: 'bold',
fontSize: '3em'
}).fitBounds(titlebox.bounds);
iconsound.addTo(project); iconsound.addTo(project);
//iconsound.scale(vsw / 1.5); //iconsound.scale(vsw / 1.5);
iconsound.scale(vsw / 2.5); iconsound.scale(vsw / 2.5);