downloads/download.sh

@@ -1,39 +0,0 @@
-#!/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 || 9009;
+var port = process.env.PORT || 3000;
 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,10 +8,13 @@
       name="viewport"
       content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
     />
-    <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="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="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,15 +10,7 @@ if (http_confirm == "http") {
   window.location.replace("https://" + location.host);
 }
 
-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 socket = io("https://dianaband-paradezzz.glitch.me/");
 var n = 0;
 var fr = 20;
 var arr = [];
@@ -28,41 +20,78 @@ var score;
 let logo;
 var silence;
 
-async function preload() {
+function preload() {
   loadJSON("/score.json", function(json) {
     score = json;
   });
-  silence = await AudioImport("./audio/_silence.wav");
+  silence = loadSound(
+    "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F_silence.wav?v=1605079435755"
+  );
 }
 
-async function setup() {
+function setup() {
   noCanvas();
-  if (windowWidth > 1500 && windowWidth > windowHeight) {
-    fr = 30;
-  } else {
-    fr =20;
-  }
   frameRate(fr);
-  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");
+  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"
+  );
   randomvoiceplay();
 }
 
@@ -81,7 +110,7 @@ socket.on("connect", function() {
 
     // plogo.position(windowWidth/2, 50);
     plogo = createImg(
-      "./imgs/logo02.png",
+      "https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2Flogo02.png?v=1604966478405",
       "퍼레이드진진진 로고",
       "",
       function(im) {
@@ -99,7 +128,7 @@ socket.on("connect", function() {
     for (var idx = 9; idx > 0; idx--) {
       var b = createButton(str(idx), str(idx));
       b.mouseClicked(function() {
-        silence.start();
+        silence.play();
         myroom = parseInt(this.value());
 
         socket.emit("room", myroom, function(res) {
@@ -112,7 +141,7 @@ socket.on("connect", function() {
                 windowWidth / 2 - windowWidth/10,
                 windowHeight / 2
               );
-            }, 1000);
+            }, 500);
           } else {
             console.log("rejected!");
           }
@@ -151,32 +180,15 @@ socket.on("post", function(post) {
 
   var img = createImg(object.src, object.alt, "", function(im) {
     im.show();
-    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.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.
 
@@ -220,7 +232,7 @@ function draw() {
 function randomvoiceplay() {
   (looper = function(timeout) {
     setTimeout(function() {
-      voice[int(random(19))].start();
+      voice[int(random(19))].play();
       looper(random(8000, 12000));
     }, timeout);
   })(8000);