diff --git a/public/audio/clap01.mp3 b/public/audio/clap01.mp3
new file mode 100644
index 0000000..0b7da4f
Binary files /dev/null and b/public/audio/clap01.mp3 differ
diff --git a/public/default.css b/public/default.css
index c5ef7f4..370946c 100644
--- a/public/default.css
+++ b/public/default.css
@@ -283,14 +283,20 @@ details summary::-webkit-details-marker {
}
.intro {
- display: none;
- position: relative;
- left: 50%;
- transform: translate(-50%);
- font-size: 15px;
- margin-bottom: 50px;
- writing-mode: vertical-lr;
- text-align: center;
+ animation-delay: 15s;
+ animation-name: fadeout;
+ animation-duration: 5s;
+ animation-fill-mode: forwards;
+}
+
+@keyframes fadeout {
+ 0% {
+ opacity: 0.7;
+ }
+ 100% {
+ opacity: 0;
+ display: none;
+ }
}
tr {
diff --git a/public/entry.css b/public/entry.css
deleted file mode 100644
index 42f125e..0000000
--- a/public/entry.css
+++ /dev/null
@@ -1,7 +0,0 @@
-#defaultCanvas0 {
- display: block;
-}
-
-.but {
- display: block;
-}
diff --git a/public/entry.js b/public/entry.js
deleted file mode 100644
index 73ad932..0000000
--- a/public/entry.js
+++ /dev/null
@@ -1,128 +0,0 @@
-// -- https://stackoverflow.com/a/46722645
-// history.scrollRestoration = "manual";
-
-// -- https://stackoverflow.com/a/39577640
-function dataURLtoBlob(dataURL) {
- let array, binary, i, len;
- binary = atob(dataURL.split(",")[1]);
- array = [];
- i = 0;
- len = binary.length;
- while (i < len) {
- array.push(binary.charCodeAt(i));
- i++;
- }
- return new Blob([new Uint8Array(array)], {
- type: "image/png",
- });
-}
-
-var p = [];
-var cols = 17;
-var rows = 17;
-var unit = 15; //px
-var sw = 0.4; //px (strokewidth)
-var img;
-
-function setup() {
- var cnv = createCanvas(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
- cnv.parent("p5");
- img = createGraphics(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
- var but = createButton("clear!");
- but.attribute('type', 'button');
- but.class('but').parent("p5");
- // var sav = createButton("save!");
- // sav.class('sav').parent("p5");
- for (var i = 0; i < cols*rows; i++) {
- p.push(0);
- }
- but.mousePressed(function () {
- for (var i = 0; i < cols*rows; i++) {
- p.push(0);
- }
- img.clear();
- });
-}
-
-function draw() {
- //
- clear();
-
- //draw the grid
- stroke(255);
- strokeWeight(sw);
- for (var c = 0; c < cols; c++) {
- for (var r = 0; r < rows; r++) {
- noFill();
- rect(c*(unit+sw)+sw, r*(unit+sw)+sw, unit, unit);
- }
- }
-
- //
- image(img, 0, 0);
-
- //pointer
- fill(0, 255, 0);
- strokeWeight(0);
-
- //mouse way
- circle(mouseX, mouseY, 10);
- if (mouseIsPressed && mouseButton === LEFT) {
- //find slot under the pointer
- var mouseC = int(mouseX/(unit+sw));
- var mouseR = int(mouseY/(unit+sw));
- if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
- img.strokeWeight(0);
- img.fill(255);
- img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
- }
-
- //touch way
- if (touches.length > 0) {
- circle(touches[0].x, touches[0].y, 10);
- //find slot under the pointer
- var mouseC = int(touches[0].x/(unit+sw));
- var mouseR = int(touches[0].y/(unit+sw));
- if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
- img.strokeWeight(0);
- img.fill(255);
- img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
- }
-}
-
-function submitForm(event) {
-
- //TODO : first check if there is a drawing or not. (pixels)
-
- //
- var submit = document.getElementById("submit");
- submit.setAttribute('disabled', 'disabled');
-
- //
- var form = document.getElementById("form");
- var fd = new FormData(form);
-
- //
- var dataurl = img.elt.toDataURL();
- var pixels = dataURLtoBlob(dataurl);
- fd.append("pixels", pixels, "pixels.png");
-
- for(var pair of fd.entries()) {
- console.log(pair[0]+ ', '+ pair[1]);
- }
-
- //
- var request = new XMLHttpRequest();
- request.open("POST", "/entry");
- request.send(fd);
-
- //
- event.preventDefault();
-
- //
- alert('감사합니다! Thank you!');
- location.reload();
-}
-
-const form = document.getElementById('form');
-form.addEventListener('submit', submitForm);
diff --git a/public/parade.css b/public/parade.css
deleted file mode 100644
index ff12ded..0000000
--- a/public/parade.css
+++ /dev/null
@@ -1,4 +0,0 @@
-html,
-body {
- overflow: hidden;
-}
diff --git a/public/parade.js b/public/parade.js
deleted file mode 100644
index 7791891..0000000
--- a/public/parade.js
+++ /dev/null
@@ -1,238 +0,0 @@
-// // force https
-// var http_confirm = location.href.split(":")[0];
-// if (http_confirm == "http") {
-// window.location.replace("https://" + location.host);
-// }
-
-var socket = io(location.host);
-var n = 0;
-var fr = 20;
-var arr = [];
-var looper;
-var score;
-let logo;
-var silence;
-
-function preload() {
- silence = loadSound("./audio/_silence.wav");
-}
-
-function setup() {
- noCanvas();
- if (windowWidth > 1500 && windowWidth > windowHeight) {
- fr = 30;
- } else {
- fr = 20;
- }
- frameRate(fr);
-}
-
-//
-var myroom = -1;
-var intro;
-var ready;
-//
-socket.on("connect", function() {
- console.log("connected!");
- //
-
- //TESTING... fixed to room 1.
- // myroom = 1;
-
- if (myroom == -1 && selectAll(".roomsel").length == 0) {
- //initial connection -> ask the room number.
-
- intro = createP("《흐름을 향하여 걷는》 ...");
- intro.style("font-size", windowHeight / 30 + "pt");
- intro.class("intro");
- var roomsel = createDiv();
- roomsel.class("roomsel");
- var b = createButton("시작하기!", 1);
- b.mouseClicked(function() {
- silence.play();
- myroom = parseInt(this.value());
-
- socket.emit("room", myroom, function(res) {
- if (res) {
- console.log("entered the room -> " + myroom);
- createP(str(myroom));
- // setTimeout(function() {
- // ready = createP("퍼레이드 시작합니다!!");
- // ready.position(
- // windowWidth / 2 - windowWidth / 10,
- // windowHeight / 2
- // );
- // }, 1000);
- } else {
- console.log("rejected!");
- }
- });
-
- setTimeout(function() {
- selectAll(".roomsel").forEach(function(item) {
- item.remove();
- });
- selectAll(".intro").forEach(function(item) {
- item.remove();
- });
- }, 1000);
- });
- roomsel.child(b);
- } else {
- //re-connection -> just connect to remembered room!
- socket.emit("room", myroom, function(res) {
- if (res) {
- console.log("entered the room -> " + myroom);
- } else {
- console.log("rejected!");
- }
- });
- }
-});
-
-socket.on("post", async function(post) {
-
- console.log(post);
- var resp = await new Promise((resolve, reject) => {
- loadJSON("/entries", (json) => resolve(json));
- })
- console.log(resp.list);
-
- // var object = post.object;
- var object = {
- "id": 1,
- "type": "abc",
- "src": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/pixels.png",
- "audio": "https://p.dianaband.info/public/sound-parade/" + resp.list[post] + "/audio.mp3",
- "alt": "알트",
- "size": { "base": 40, "random": 20 },
- "y": { "base": 20, "random": 10 },
- "showtime": 30000
- };
- console.log(object);
-
- var img = createImg(object.src, object.alt, "", function(im) {
- var sound = loadSound(object.audio, function(snd) {
- //로딩이 끝나면, play!
- snd.loop();
-
- //로딩이 끝나면, show!
- im.show();
-
- //그림의 크기와 초기 위치 ==> 가로 보기인 경우
- var width = 0;
- if (windowWidth > windowHeight) {
-
- width = (windowHeight * (object.size.base * 1.4 + object.size.random * Math.random())) / 100; // 좀더 크게 + 40% (ratio)
- im.size(width, AUTO);
-
- im.position(
- windowWidth * 1.5, // +150% 에서 생성되어서 접근 (sound fade-in)
- (windowHeight * (object.y.base + object.y.random * Math.random()) * 0.5) / 100 // 좀더 위로 위로 - 50% (ratio)
- );
-
- //그림의 크기와 초기 위치 ==> 세로 보기인 경우
- } else {
-
- width = (windowHeight * (object.size.base + object.size.random * Math.random())) / 100; // json에서 정한 크기 그대로. (ratio)
- im.size(width, AUTO);
-
- im.position(
- windowWidth * 1.5, // +150% 에서 생성되어서 접근 (sound fade-in)
- (windowHeight * (object.y.base + object.y.random * Math.random())) / 100 // json에서 정한 위치 그대로. (ratio)
- );
- }
-
- //추가 정보들
- im.attribute("data-type", object.type);
- im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
-
- //'아이콘' 들은 애니메이션을 시켜줘야 함...
- if (object.type == "icon") {
- //
- im.class("rotate");
- im.style("animation-duration", object.rotate + "s");
- var orgs = im.style("transform-origin").split(" ");
- var str = parseFloat(orgs[0]) + object.pivot.x + "px";
- str = str + " " + parseFloat(orgs[1]) + object.pivot.y + "px";
- im.style("transform-origin", str);
- //
- }
-
- //로딩이 다 되면, rendering array에 추가.
- var bundle = {
- ref: object,
- img: im,
- sound: snd,
- width: width
- };
- arr.push(bundle);
- });
- });
-
- //첨에는 hide
- img.hide();
-
-});
-
-function draw() {
- for (var i = arr.length - 1; i >= 0; i -= 1) {
- var bundle = arr[i];
- var img = bundle.img;
- var showtime = parseFloat(img.attribute("data-showtime"));
- var type = img.attribute("data-type");
- var x = img.position().x;
- var y = img.position().y;
- y = y + random(-1, 1);
- x = x - windowWidth / (fr * showtime);
-
- //
- if (type == "icon") {
- img.style("z-index", "-1");
- }
- 3;
-
- img.position(x, y);
- var pan = (x / windowWidth) * 2 - 1;
-
- //panning
- var snd = bundle.sound;
- if (x >= -bundle.width && x < windowWidth) {
- pan = ((x + bundle.width) / (windowWidth + bundle.width)) * 2 - 1;
- snd.pan(pan);
- snd.setVolume(1);
- } else {
- var range;
- var knob;
- if (x >= windowWidth) {
- range = windowWidth / 2;
- knob = x - windowWidth;
- snd.pan(1);
- snd.setVolume(1 - knob / range);
- } else if (x < -bundle.width) {
- range = windowWidth / 2;
- knob = (x + bundle.width) * -1;
- snd.pan(-1);
- snd.setVolume(1 - knob / range);
- }
- }
-
- //remove at -50% (sound fade-out)
- var exit_x = -bundle.width - windowWidth/2;
- if (x < exit_x) {
- img.remove();
- snd.stop();
- delete snd;
- arr.splice(i, 1);
- }
- }
-}
-
-// function randomvoiceplay() {
-// (looper = function(timeout) {
-// setTimeout(function() {
-// voice[int(random(19))].play();
-// looper(random(8000, 12000));
-// }, timeout);
-// })(8000);
-// }
diff --git a/server.js b/server.js
index a2def20..727239a 100644
--- a/server.js
+++ b/server.js
@@ -57,94 +57,48 @@ fastify.get("/", function (request, reply) {
reply.view("/src/pages/parade.html", {});
});
-//get '/entry', '/entry/'
-["/entry", "/entry/"].forEach(function(item) {
- fastify.get(item, function (request, reply) {
- reply.view("/src/pages/entry.html", {});
+//get '/entry', '/entry/', '/en/entry', '/en/entry/'
+["/entry", "/entry/", "/en/entry", "/en/entry/"].forEach(function(item) {
+ fastify.get(item, async function (request, reply) {
+
+ //console.log(request.url);
+ let url = request.url.replace(/\/$/, '');
+
+ //get list
+ let list = await fs.readdir('/media/storage/public/sound-parade/');
+ list.reverse();
+
+ // console.log(list);
+
+ let folders = [];
+ for (const item of list) {
+ var fields = JSON.parse((await fs.readFile('/media/storage/public/sound-parade/' + item + '/fields.json')).toString('utf8'));
+ folders.push({
+ foldername: item,
+ group: fields.group,
+ title: fields.title,
+ comment: fields.comment,
+ });
+ }
+
+ // console.log(folders);
+
+ //
+ if (url == "/entry") {
+ reply.view("/src/pages/entry.html", {
+ list: folders,
+ });
+ } else if (url == "/en/entry") {
+ reply.view("/src/pages/entry.en.html", {
+ list: folders,
+ });
+ }
+
});
});
// --> https://stackoverflow.com/a/40899275
// all the regex didn't work for me -- a 'last resort' method
-//get '/submit', '/submit/'
-["/submit", "/submit/"].forEach(function(item) {
- fastify.get(item, function (request, reply) {
- reply.view("/src/pages/submit.html", {});
- });
-});
-
-//get '/en/entry', '/en/entry/'
-["/en/entry", "/en/entry/"].forEach(function(item) {
- fastify.get(item, function (request, reply) {
- reply.view("/src/pages/entry.en.html", {});
- });
-});
-
-//get '/en/submit', '/en/submit/'
-["/en/submit", "/en/submit/"].forEach(function(item) {
- fastify.get(item, function (request, reply) {
- reply.view("/src/pages/submit.en.html", {});
- });
-});
-
-//get '/list', '/list/'
-["/list", "/list/"].forEach(function(item) {
- fastify.get(item, async function (request, reply) {
-
- //get list
- let list = await fs.readdir('/media/storage/public/sound-parade/');
- list.reverse();
-
- // console.log(list);
-
- let folders = [];
- for (const item of list) {
- var fields = JSON.parse((await fs.readFile('/media/storage/public/sound-parade/' + item + '/fields.json')).toString('utf8'));
- folders.push({
- foldername: item,
- group: fields.group,
- title: fields.title,
- comment: fields.comment,
- });
- }
-
- // console.log(folders);
-
- reply.view("/src/pages/list.html", {
- list: folders,
- });
- });
-});
-
-//get '/en/list', '/en/list/'
-["/en/list", "/en/list/"].forEach(function(item) {
- fastify.get(item, async function (request, reply) {
-
- //get list
- let list = await fs.readdir('/media/storage/public/sound-parade/');
- list.reverse();
-
- // console.log(list);
-
- let folders = [];
- for (const item of list) {
- var fields = JSON.parse((await fs.readFile('/media/storage/public/sound-parade/' + item + '/fields.json')).toString('utf8'));
- folders.push({
- foldername: item,
- group: fields.group,
- title: fields.title,
- comment: fields.comment,
- });
- }
-
- // console.log(folders);
-
- reply.view("/src/pages/list.en.html", {
- list: folders,
- });
- });
-});
-
//get '/entries'
fastify.get("/entries", async function (request, reply) {
@@ -180,11 +134,6 @@ fastify.get("/delete/:foldername/:pass", async function (request, reply) {
reply.send({ result: res });
});
-// //get '/folder:foldername'
-// fastify.get("/folder/:foldername", async function (request, reply) {
-// reply.send({ foldername: foldername });
-// });
-
//post on '/entry'
fastify.post("/entry", async function (request, reply) {
diff --git a/src/pages/entry.en.html b/src/pages/entry.en.html
index 681b94e..8377da4 100644
--- a/src/pages/entry.en.html
+++ b/src/pages/entry.en.html
@@ -5,6 +5,20 @@
Walking Towards the Flow | entry
+
@@ -47,7 +61,7 @@
Parade Composition
- Flock0 promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4 Whoness
+ Flock0 promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4 someone
Inquiry
@@ -61,9 +75,9 @@
1. Record the sound for about 30 seconds with a recording device or phone according to the characteristics of the flock.
- • Flock1 flags — Speak out five times about what you like or value.
- - • Flock2 bodies —Record the sound of your body. Applause and whistling.
- - • Flock3 objects — find the sound of things around you. Bubble wrap sound, Beads sound.
- - • Whoness —Collect the sound of others. animal, sound of water, place to take a walk.
+ - • Flock2 bodies — Record the sound of your body. Applause and whistling.
+ - • Flock3 objects — Find the sound of things around you. Bubble wrap sound, Beads sound.
+ - • Flock4 someone — Collect the sound of others. animal, sound of water, place to take a walk.
2. Upload the recorded sound file.
@@ -74,21 +88,23 @@
Sound Submission
+
+ Sound List
+ {{#each list}}
+
+
+ 
+
+
+ - Group |
{{this.group}}
+ - Title |
{{this.title}}
+ - Desc. |
+
+
+
+