p5.sound -> Tone.js

downloads/download.sh

@@ -0,0 +1,39 @@
+#!/bin/bash
+
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2Fmessagesound.mp3" -o "messagesound.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F020.mp3" -o "020.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F018.mp3" -o "018.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F017.mp3" -o "017.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F019.mp3" -o "019.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F015.mp3" -o "015.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F016.mp3" -o "016.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F013.mp3" -o "013.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F011.mp3" -o "011.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F012.mp3" -o "012.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F014.mp3" -o "014.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F13.png" -o "13.png"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2Flogo.png" -o "logo.png"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2Flogo02.png" -o "logo02.png"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F018.mp3" -o "018.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F011.mp3" -o "011.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F15.mp3" -o "15.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F14.mp3" -o "14.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F012.mp3" -o "012.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F17.mp3" -o "17.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F19.mp3" -o "19.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F11.mp3" -o "11.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F013.mp3" -o "013.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F022.mp3" -o "022.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F020.mp3" -o "020.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F021.mp3" -o "021.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F014.mp3" -o "014.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F16.mp3" -o "16.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F015.mp3" -o "015.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F18.mp3" -o "18.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F12.mp3" -o "12.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F019.mp3" -o "019.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F13.mp3" -o "13.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F016.mp3" -o "016.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F017.mp3" -o "017.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F023.mp3" -o "023.mp3"
+curl "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F_silence.wav" -o "_silence.wav"

index.js

@@ -12,15 +12,15 @@ var app = express();
 // maybe... 'flyio' is interfering the middle (http://pzzz.ink <- flyio -> https://dianaband-paradezzz.glitch.me)
 // ==> so, we won't do it. but we will let the client do it. -> public/sketch.js #7 ~ #11
 var server = http.createServer(app);
-var port = process.env.PORT || 3000;
+var port = process.env.PORT || 9009;
 server.listen(port);
 //
 app.use(express.static("public"));
-var io = require("socket.io")(server, { 
+var io = require("socket.io")(server, {
   pingInterval: 1000,
-  pingTimeout: 3000  
-});   
- 
+  pingTimeout: 3000
+});
+
 //
 var score = require("./public/score.json");
 
@@ -33,7 +33,7 @@ var roommax = 16;
 io.on("connection", function(socket) {
   console.log("someone connected.");
   socket.on("disconnect", function() { console.log("someone disconnected."); });
-  
+
   socket.on("room", function(room, fn) {
     // parseInt(room)
     if (room >= 0 && room < roommax) {
@@ -43,35 +43,35 @@ io.on("connection", function(socket) {
       fn(false);
     }
   });
-});   
+});
 
 //
 var pointer = 0; // pointer : 0 ~ (length-1)
 var looper;
-(looper = function(timeout) { 
+(looper = function(timeout) {
   setTimeout(function() {
-    
+
     //pointer = 20;
     // console.log(score[pointer]);
- 
+
     //
     for (var index = 0; index < roommax; index++) {
-      
+
       // NOTE: 'pointer' must be 'remembered' since 'pointer' will increase almost immediately! pass as argument => 'pointed'
       // NOTE: 'index' is same => 'indexed'
       setTimeout(function(pointed, indexed) {
-        
+
         io.to("room" + indexed).emit("post", score[pointed]);
-        
+
       }, score[pointer].object.showtime * index, pointer, index);
     }
 
     var timegap = score[pointer].timegap.base + Math.random()*score[pointer].timegap.random;
     // console.log(timegap);
-    
-    pointer++;    
+
+    pointer++;
     if (pointer >= score.length) pointer = 0;
-    
+
     looper(timegap);
   }, timeout);
-})(1000);
+})(1000);

public/index.html

@@ -8,13 +8,10 @@
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
     />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
-    <link
-      href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap"
-      rel="stylesheet"
-    />
+    <script src="./js/p5-v1.1.9.min.js"></script>
+    <script src="./js/socket-v2.3.0.io.slim.js"></script>
+    <script src="./js/Tone-14.8.36.min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"/>
 
     <script src="sketch.js"></script>
     <link rel="stylesheet" href="style.css" />

public/sketch.js

@@ -1,5 +1,5 @@
 /*
-global loadSound frameRate background createButton io noCanvas 
+global loadSound frameRate background createButton io noCanvas
 select createP windowWidth windowHeight random createImg createDiv
 AUTO loadJSON createCanvas createRadio selectAll int str
 */
@@ -10,7 +10,15 @@ if (http_confirm == "http") {
   window.location.replace("https://" + location.host);
 }
 
-var socket = io("https://dianaband-paradezzz.glitch.me/");
+function AudioImport(url) {
+  return new Promise(function(resolve, reject) {
+    var audio = new Tone.Player(url, function() {
+      resolve(audio);
+    }).toDestination();
+  });
+}
+
+var socket = io(location.host);
 var n = 0;
 var fr = 20;
 var arr = [];
@@ -20,78 +28,41 @@ var score;
 let logo;
 var silence;
 
-function preload() {
+async function preload() {
   loadJSON("/score.json", function(json) {
     score = json;
   });
-  silence = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F_silence.wav?v=1605079435755"
-  );
+  silence = await AudioImport("./audio/_silence.wav");
 }
 
-function setup() {
+async function setup() {
   noCanvas();
+  if (windowWidth > 1500 && windowWidth > windowHeight) {
+    fr = 30;
+  } else {
+    fr =20;
+  }
   frameRate(fr);
-  voice[0] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F018.mp3?v=1605065703249"
-  );
-  voice[1] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F011.mp3?v=1605065704890"
-  );
-  voice[2] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F14.mp3?v=1605065705431"
-  );
-  voice[3] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F012.mp3?v=1605065705852"
-  );
-  voice[4] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F17.mp3?v=1605065706201"
-  );
-  voice[5] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F11.mp3?v=1605065707520"
-  );
-  voice[6] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F013.mp3?v=1605065707851"
-  );
-  voice[7] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F022.mp3?v=1605065708590"
-  );
-  voice[8] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F020.mp3?v=1605065708800"
-  );
-  voice[9] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F021.mp3?v=1605065709256"
-  );
-  voice[10] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F014.mp3?v=1605065709488"
-  );
-  voice[11] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F16.mp3?v=1605065710421"
-  );
-  voice[12] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F015.mp3?v=1605065710641"
-  );
-  voice[13] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F18.mp3?v=1605065710830"
-  );
-  voice[14] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F12.mp3?v=1605065711069"
-  );
-  voice[15] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F019.mp3?v=1605065711343"
-  );
-  voice[16] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F13.mp3?v=1605065711531"
-  );
-  voice[17] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F016.mp3?v=1605065712590"
-  );
-   voice[18] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F017.mp3?v=1605065712783"
-  ); 
-  voice[19] = loadSound(
-    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F023.mp3?v=1605065713039"
-  );
+  voice[0] = await AudioImport("./audio/018.mp3");
+  voice[1] = await AudioImport("./audio/011.mp3");
+  voice[2] = await AudioImport("./audio/14.mp3");
+  voice[3] = await AudioImport("./audio/012.mp3");
+  voice[4] = await AudioImport("./audio/17.mp3");
+  voice[5] = await AudioImport("./audio/11.mp3");
+  voice[6] = await AudioImport("./audio/013.mp3");
+  voice[7] = await AudioImport("./audio/022.mp3");
+  voice[8] = await AudioImport("./audio/020.mp3");
+  voice[9] = await AudioImport("./audio/021.mp3");
+  voice[10] = await AudioImport("./audio/014.mp3");
+  voice[11] = await AudioImport("./audio/16.mp3");
+  voice[12] = await AudioImport("./audio/015.mp3");
+  voice[13] = await AudioImport("./audio/18.mp3");
+  voice[14] = await AudioImport("./audio/12.mp3");
+  voice[15] = await AudioImport("./audio/019.mp3");
+  voice[16] = await AudioImport("./audio/13.mp3");
+  voice[17] = await AudioImport("./audio/016.mp3");
+  voice[18] = await AudioImport("./audio/017.mp3");
+  voice[19] = await AudioImport("./audio/023.mp3");
   randomvoiceplay();
 }
 
@@ -110,7 +81,7 @@ socket.on("connect", function() {
 
     // plogo.position(windowWidth/2, 50);
     plogo = createImg(
-      "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2Flogo02.png?v=1604966478405",
+      "./imgs/logo02.png",
       "퍼레이드진진진 로고",
       "",
       function(im) {
@@ -128,7 +99,7 @@ socket.on("connect", function() {
     for (var idx = 9; idx > 0; idx--) {
       var b = createButton(str(idx), str(idx));
       b.mouseClicked(function() {
-        silence.play();
+        silence.start();
         myroom = parseInt(this.value());
 
         socket.emit("room", myroom, function(res) {
@@ -141,7 +112,7 @@ socket.on("connect", function() {
                 windowWidth / 2 - windowWidth/10,
                 windowHeight / 2
               );
-            }, 500);
+            }, 1000);
           } else {
             console.log("rejected!");
           }
@@ -180,15 +151,32 @@ socket.on("post", function(post) {
 
   var img = createImg(object.src, object.alt, "", function(im) {
     im.show();
-    im.size(
-      (windowHeight * (object.size.base + object.size.random * Math.random())) /
-        100,
-      AUTO
-    );
-    im.position(
-      windowWidth,
-      (windowHeight * (object.y.base + object.y.random * Math.random())) / 100
-    );
+    if (windowWidth > windowHeight) {
+      im.size(
+        (windowHeight *
+          (object.size.base * 1.4 + object.size.random * Math.random())) /
+          100,
+        AUTO
+      );
+      im.position(
+        windowWidth,
+        (windowHeight *
+          (object.y.base + object.y.random * Math.random()) *
+          0.5) /
+          100
+      );
+    } else {
+      im.size(
+        (windowHeight *
+          (object.size.base + object.size.random * Math.random())) /
+          100,
+        AUTO
+      );
+      im.position(
+        windowWidth,
+        (windowHeight * (object.y.base + object.y.random * Math.random())) / 100
+      );
+    }
     im.attribute("data-type", object.type);
     im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
 
@@ -232,7 +220,7 @@ function draw() {
 function randomvoiceplay() {
   (looper = function(timeout) {
     setTimeout(function() {
-      voice[int(random(19))].play();
+      voice[int(random(19))].start();
       looper(random(8000, 12000));
     }, timeout);
   })(8000);