From 91c8ff02bd541bdf419c813632961eb0c66abc65 Mon Sep 17 00:00:00 2001 From: Dooho Yi Date: Tue, 19 May 2020 18:13:09 +0900 Subject: [PATCH] more responsive design. --- public/1/conductor/index.html | 4 - public/1/conductor/index.js | 189 +++++++++++++++++++++++++++------- public/1/index.html | 3 - public/1/index.js | 63 +++++++++--- 4 files changed, 196 insertions(+), 63 deletions(-) diff --git a/public/1/conductor/index.html b/public/1/conductor/index.html index cdfa723..54f11fa 100644 --- a/public/1/conductor/index.html +++ b/public/1/conductor/index.html @@ -80,10 +80,6 @@ -
들리는 상처들의 믹스
-
연결 확인
-
믹스 #1
-
믹스 #2
diff --git a/public/1/conductor/index.js b/public/1/conductor/index.js index b539bc4..2922e5d 100644 --- a/public/1/conductor/index.js +++ b/public/1/conductor/index.js @@ -177,12 +177,12 @@ $(document).ready(function() { var netstat = new Path.Circle({ center: view.bounds.topRight + [-vssw / 2, +vssw / 2], radius: vssw / 4, - fillColor: 'hotpink', - strokeWidth: 2, - strokeColor: 'gray', - dashArray: [4, 4], + fillColor: '#51D0FD', + strokeWidth: vssw * 0.03, + strokeColor: '#FFE40A', + dashArray: [vssw * 0.05, vssw * 0.05], onFrame: function(event) { - this.rotate(1); + this.rotate(0.2); } }); netstat.fillColor.alpha = 0; @@ -204,7 +204,7 @@ $(document).ready(function() { aprev.scale(vssw * 1.5); aprev.position = [0, 0]; //reset position, before relative positioning !! aprev.translate([vssw, vssw * 1.8]); - aprev.fillColor = 'pink'; + aprev.fillColor = '#FFE40A'; aprev._socket = socket; aprev._isactive = false; aprev._activate = function() { @@ -226,7 +226,7 @@ $(document).ready(function() { anext.scale(vssw * 1.5); anext.position = [0, 0]; //reset position, before relative positioning !! anext.translate([vssw * 9, vssw * 1.8]); - anext.fillColor = 'pink'; + anext.fillColor = '#FFE40A'; anext._socket = socket; anext._isactive = false; anext._activate = function() { @@ -244,17 +244,28 @@ $(document).ready(function() { }; //title background - new Path.Rectangle({ + var titlebox = new Path.Rectangle({ point: [vssw * 2, vssw * 1], size: [vssw * 6, vssw * 1.5], fillColor: 'white', - radius: 30, - }).opacity = 0.3; + radius: vssw * 0.8, + opacity: 0.3, + }); //screen #1 - 'home' changeScreen(1); 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. phonehand.addTo(project); phonehand.scale(vsw / 1.5); @@ -263,28 +274,38 @@ $(document).ready(function() { //screen #2 - check 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. new PointText({ content: "네트워크 테스트!", point: view.center + [-vssw * 3, -vssw * 2], fontWeight: 'bold', - fontSize: '2em', + fontSize: vssw * 1.0, fillColor: 'gold' }); new PointText({ content: "사운드 테스트!", point: view.center + [-vssw * 3, vssw * 0], fontWeight: 'bold', - fontSize: '2em', + fontSize: vssw * 1.0, fillColor: 'pink' }); new PointText({ content: "동그라미 터치!", point: view.center + [-vssw * 3, vssw * 2], fontWeight: 'bold', - fontSize: '2em', + fontSize: vssw * 1.0, fillColor: 'red' }); new Path.Circle({ @@ -301,6 +322,16 @@ $(document).ready(function() { changeScreen(3); 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 col = 0; col < 1; col++) { @@ -313,7 +344,7 @@ $(document).ready(function() { new Path.Rectangle({ point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.7], + size: [vssw * 1.5, vssw * 0.7], fillColor: new Color({ hue: getRandom(20, 60), saturation: 1, @@ -324,6 +355,7 @@ $(document).ready(function() { par._players.push(par._player.start()._source); // start playbacks and collect their '_source's.. par._playcount++; par.children.playcounter.content = '' + par._playcount; + par.children.speedcounter.content = Number.parseFloat(1).toFixed(1); // par._socket.emit('sound', { 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 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, size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ @@ -349,6 +395,9 @@ $(document).ready(function() { 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', { 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 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, size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ @@ -380,6 +420,7 @@ $(document).ready(function() { var par = this.parent; if (par._players.length > 0) { 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', { @@ -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 new Path.Rectangle({ point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5], @@ -403,6 +458,7 @@ $(document).ready(function() { var par = this.parent; if (par._players.length > 0) { 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', { @@ -421,6 +477,9 @@ $(document).ready(function() { _init: function() { this._player.loop = 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.. var that = this; 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._playcount++; that.children.playcounter.content = '' + that._playcount; + that.children.speedcounter.content = Number.parseFloat(1).toFixed(1); } else if (msg.action == 'stop') { if (that._players.length > 0) { (that._players.shift()).stop(); 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') { if (that._players.length > 0) { 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') { if (that._players.length > 0) { 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({ point: c.firstChild.bounds.topLeft + [0, -5], content: Object.keys(beach_sounds)[idx], - fontSize: '1em', + fontSize: vssw * 0.35, fontWeight: 'bold', fillColor: 'white' }); @@ -464,6 +529,16 @@ $(document).ready(function() { changeScreen(4); 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 col = 0; col < 1; col++) { @@ -476,7 +551,7 @@ $(document).ready(function() { new Path.Rectangle({ point: [vssw * 0.8, row * vssw * 1.4 + vssw * 3.5], radius: vssw * 0.4, - size: [vssw * 1.6, vssw * 0.7], + size: [vssw * 1.5, vssw * 0.7], fillColor: new Color({ hue: getRandom(20, 60), saturation: 1, @@ -487,6 +562,7 @@ $(document).ready(function() { par._players.push(par._player.start()._source); // start playbacks and collect their '_source's.. par._playcount++; par.children.playcounter.content = '' + par._playcount; + par.children.speedcounter.content = Number.parseFloat(1).toFixed(1); // par._socket.emit('sound', { 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 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, size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ @@ -512,6 +602,9 @@ $(document).ready(function() { 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', { 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 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, size: [vssw * 1.6, vssw * 0.7], fillColor: new Color({ @@ -543,6 +627,7 @@ $(document).ready(function() { var par = this.parent; if (par._players.length > 0) { 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', { @@ -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 new Path.Rectangle({ point: [vssw * 7.8, row * vssw * 1.4 + vssw * 3.5], @@ -566,6 +665,7 @@ $(document).ready(function() { var par = this.parent; if (par._players.length > 0) { 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', { @@ -584,6 +684,9 @@ $(document).ready(function() { _init: function() { this._player.loop = 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.. var that = this; 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._playcount++; that.children.playcounter.content = '' + that._playcount; + that.children.speedcounter.content = Number.parseFloat(1).toFixed(1); } else if (msg.action == 'stop') { if (that._players.length > 0) { (that._players.shift()).stop(); 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') { if (that._players.length > 0) { 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') { if (that._players.length > 0) { 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({ point: c.firstChild.bounds.topLeft + [0, -5], content: Object.keys(beach_sounds)[idx], - fontSize: '1em', + fontSize: vssw * 0.35, fontWeight: 'bold', fillColor: 'white' }); diff --git a/public/1/index.html b/public/1/index.html index 9f76d1e..54f11fa 100644 --- a/public/1/index.html +++ b/public/1/index.html @@ -80,9 +80,6 @@ -
들리는 상처들의 믹스
-
연결 확인
-
믹스
diff --git a/public/1/index.js b/public/1/index.js index 804c64f..ae89e24 100644 --- a/public/1/index.js +++ b/public/1/index.js @@ -24,7 +24,7 @@ $(document).ready(function() { SVGImport_size1('./imgs/iconmonstr-minus-4.svg'), //clap 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_벨.mp3"), AudioImport("./audio/2011_숲.mp3"), @@ -32,7 +32,7 @@ $(document).ready(function() { AudioImport("./audio/2011_헤비레인.mp3"), AudioImport("./audio/고요6.mp3"), AudioImport("./audio/고요7.mp3"), - //sounds page 2 ==> 7 + //beach_sounds page 2 ==> 7 AudioImport("./audio/검은산_뚜루.mp3"), AudioImport("./audio/검은산_다급.mp3"), AudioImport("./audio/검은산_부엉.mp3"), @@ -193,12 +193,12 @@ $(document).ready(function() { var netstat = new Path.Circle({ center: view.bounds.topRight + [-vssw / 2, +vssw / 2], radius: vssw / 4, - fillColor: 'hotpink', - strokeWidth: 2, - strokeColor: 'gray', - dashArray: [4, 4], + fillColor: '#51D0FD', + strokeWidth: vssw * 0.03, + strokeColor: '#FFE40A', + dashArray: [vssw * 0.05, vssw * 0.05], onFrame: function(event) { - this.rotate(1); + this.rotate(0.2); } }); netstat.fillColor.alpha = 0; @@ -220,7 +220,7 @@ $(document).ready(function() { aprev.scale(vssw * 1.5); aprev.position = [0, 0]; //reset position, before relative positioning !! aprev.translate([vssw, vssw * 1.8]); - aprev.fillColor = 'pink'; + aprev.fillColor = '#FFE40A'; aprev._socket = socket; aprev._isactive = false; aprev._activate = function() { @@ -242,7 +242,7 @@ $(document).ready(function() { anext.scale(vssw * 1.5); anext.position = [0, 0]; //reset position, before relative positioning !! anext.translate([vssw * 9, vssw * 1.8]); - anext.fillColor = 'pink'; + anext.fillColor = '#FFE40A'; anext._socket = socket; anext._isactive = false; anext._activate = function() { @@ -260,17 +260,28 @@ $(document).ready(function() { }; //title background - new Path.Rectangle({ + var titlebox = new Path.Rectangle({ point: [vssw * 2, vssw * 1], size: [vssw * 6, vssw * 1.5], fillColor: 'white', - radius: 30, - }).opacity = 0.3; + radius: vssw * 0.8, + opacity: 0.3, + }); //screen #1 - 'home' changeScreen(1); 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. phonehand.addTo(project); phonehand.scale(vsw / 1.5); @@ -279,28 +290,38 @@ $(document).ready(function() { //screen #2 - check 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. new PointText({ content: "네트워크 테스트!", point: view.center + [-vssw * 3, -vssw * 2], fontWeight: 'bold', - fontSize: '2em', + fontSize: vssw * 1.0, fillColor: 'gold' }); new PointText({ content: "사운드 테스트!", point: view.center + [-vssw * 3, vssw * 0], fontWeight: 'bold', - fontSize: '2em', + fontSize: vssw * 1.0, fillColor: 'pink' }); new PointText({ content: "동그라미 터치!", point: view.center + [-vssw * 3, vssw * 2], fontWeight: 'bold', - fontSize: '2em', + fontSize: vssw * 1.0, fillColor: 'red' }); new Path.Circle({ @@ -317,6 +338,16 @@ $(document).ready(function() { changeScreen(3); 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.scale(vsw / 1.5); iconsound.scale(vsw / 2.5);