diff --git a/public/default.css b/public/default.css index aded71e..bb85973 100644 --- a/public/default.css +++ b/public/default.css @@ -9,6 +9,7 @@ body { color: white; font-size: 15px; line-height: 1.4; + font-family: 'Noto Sans KR', sans-serif; } .bg { @@ -27,7 +28,6 @@ body { .content { width: 100%; height: 100%; - font-family: 'Noto Sans KR', sans-serif; } .lang { @@ -122,6 +122,12 @@ ol, ul { margin-left: 40px; } +.noscroll { + overflow: hidden; +} + +.noscroll * { touch-action: none; +} button { background-color: transparent; @@ -135,9 +141,13 @@ button { } .drawing { - width: 50px; + position: relative; display: inline-block; + width: 300px; + left: 50%; + transform: translate(-50%); vertical-align: top; + text-align: center; } .name { diff --git a/public/list.js b/public/list.js index 4d531a8..cf3a385 100644 --- a/public/list.js +++ b/public/list.js @@ -1,8 +1,8 @@ -function setup() { - noCanvas(); - selectAll('.name').forEach(item => { - httpGet(item.attribute('src'), text => { - item.html(text); - }) - }) -} +// function setup() { +// noCanvas(); +// selectAll('.name').forEach(item => { +// httpGet(item.attribute('src'), text => { +// item.html(text); +// }) +// }) +// } diff --git a/public/main.css b/public/main.css new file mode 100644 index 0000000..1e59cba --- /dev/null +++ b/public/main.css @@ -0,0 +1,4 @@ +html, +body { + overflow: hidden; +} diff --git a/public/sketch.js b/public/sketch.js index f789af1..aa0b569 100644 --- a/public/sketch.js +++ b/public/sketch.js @@ -1,9 +1,3 @@ -/* -global loadSound frameRate background createButton io noCanvas -select createP windowWidth windowHeight random createImg createDiv -AUTO loadJSON createCanvas createRadio selectAll int str -*/ - // // force https // var http_confirm = location.href.split(":")[0]; // if (http_confirm == "http") { @@ -14,12 +8,33 @@ var socket = io(location.host); var n = 0; var fr = 20; var arr = []; -var voice = []; var looper; var score; let logo; var silence; +(async () => { + + fetch("/entries").then(function(response) { + return response.json(); + }).then(function(data) { + console.log(data); + }).catch(function() { + console.log("Booo"); + }); + var list = new Promise((resolve, reject) => { + var xmlHttp = new XMLHttpRequest(); + xmlHttp.open( "GET", "/entries", false ); // false for synchronous request + xmlHttp.send( null ); + return xmlHttp.responseText; + loadJSON("/entries", (json) => { + resolve(json); + }); + }); + await list; + console.log(list); +})(); + function preload() { loadJSON("/score.json", function(json) { score = json; @@ -35,32 +50,10 @@ function setup() { fr = 20; } frameRate(fr); - voice[0] = loadSound("./audio/018.mp3"); - voice[1] = loadSound("./audio/011.mp3"); - voice[2] = loadSound("./audio/14.mp3"); - voice[3] = loadSound("./audio/012.mp3"); - voice[4] = loadSound("./audio/17.mp3"); - voice[5] = loadSound("./audio/11.mp3"); - voice[6] = loadSound("./audio/013.mp3"); - voice[7] = loadSound("./audio/022.mp3"); - voice[8] = loadSound("./audio/020.mp3"); - voice[9] = loadSound("./audio/021.mp3"); - voice[10] = loadSound("./audio/014.mp3"); - voice[11] = loadSound("./audio/16.mp3"); - voice[12] = loadSound("./audio/015.mp3"); - voice[13] = loadSound("./audio/18.mp3"); - voice[14] = loadSound("./audio/12.mp3"); - voice[15] = loadSound("./audio/019.mp3"); - voice[16] = loadSound("./audio/13.mp3"); - voice[17] = loadSound("./audio/016.mp3"); - voice[18] = loadSound("./audio/017.mp3"); - voice[19] = loadSound("./audio/023.mp3"); - // randomvoiceplay(); } // var myroom = -1; -var plogo; var intro; var ready; // @@ -68,60 +61,48 @@ 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. - // plogo.position(windowWidth/2, 50); - plogo = createImg("./imgs/logo02.png", "퍼레이드진진진 로고", "", function( - im - ) { - im.show(); - im.size(windowWidth, AUTO); - }); - intro = createP( - "흘러가는 진 퍼레이드에 오신거 환영합니다.
*본인의 기기로 보고 싶은 퍼레이드의 구간을 고르세요.
여러 개의 기기로 퍼레이드를 연결해서 볼 수 있습니다.
*이 퍼레이드에서 흘러가는 진들은 각자의 이야기를 가지고 있습니다.
대체텍스트가 포함되어 있어 스크린리더를 통해 이야기를 음성으로 들을 수 있습니다." - ); + intro = createP("《흐름을 향하여 걷는》 ..."); intro.style("font-size", windowHeight / 30 + "pt"); intro.class("intro"); var roomsel = createDiv(); roomsel.class("roomsel"); - for (var idx = 9; idx > 0; idx--) { - var b = createButton(str(idx), str(idx)); - b.mouseClicked(function() { - silence.play(); - myroom = parseInt(this.value()); + 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(); - }); - plogo.remove(); - }, 1000); - setTimeout(function() { - ready.remove(); - }, 8000); + 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!"); + } }); - roomsel.child(b); - } + + 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) { @@ -135,10 +116,21 @@ socket.on("connect", function() { }); socket.on("post", function(post) { + console.log(post); - // - var object = post.object; + // var object = post.object; + var object = { + "id": 1, + "type": "abc", + "src": "https://p.dianaband.info/public/sound-parade/" + list[post] + "/pixels.png", + "audio": "https://p.dianaband.info/public/sound-parade/" + 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) { @@ -201,6 +193,7 @@ socket.on("post", function(post) { //첨에는 hide img.hide(); + }); function draw() { diff --git a/server.js b/server.js index 47a17b4..945cfbf 100644 --- a/server.js +++ b/server.js @@ -54,7 +54,6 @@ var io = require("socket.io")(fastify.server, { //get '/' fastify.get("/", function (request, reply) { - // reply.get("/src/pages/parade.html", {}); //??? reply.view("/src/pages/parade.html", {}); }); @@ -70,35 +69,31 @@ fastify.get("/", function (request, reply) { //get '/list', '/list/' ["/list", "/list/"].forEach(function(item) { fastify.get(item, async function (request, reply) { - //get list - const client = new Client(server); - const sourceFolder = await client.getFolder("/Storage/public/sound-parade/"); - const subFolders = await sourceFolder.getSubFolders(); + //get list + let list = await fs.readdir('/media/storage/public/sound-parade/'); + console.log(list); let folders = []; - for (const subFolder of subFolders) { - console.log("folder", subFolder.name); - folders.push(path.basename(subFolder.name)); + for (const item of list) { + folders.push({ + foldername: item, + message: (await fs.readFile('/media/storage/public/sound-parade/' + item + '/message.txt')).toString('utf8') + }) } - reply.view("/src/pages/list.html", { list: folders }); + reply.view("/src/pages/list.html", { + list: folders, + }); }); }); -//get '/folders' -fastify.get("/folders", async function (request, reply) { +//get '/entries' +fastify.get("/entries", async function (request, reply) { + //get list - const client = new Client(server); - const sourceFolder = await client.getFolder("/Storage/public/sound-parade/"); - const subFolders = await sourceFolder.getSubFolders(); + let list = await fs.readdir('/media/storage/public/sound-parade/'); - let folders = []; - for (const subFolder of subFolders) { - console.log("folder", subFolder.name); - folders.push(subFolder.name); - } - - reply.send({ list: folders }); + reply.send({ list: list }); }); // //get '/folder:{foldername}' @@ -194,16 +189,19 @@ var looper; // NOTE: 'index' is same => 'indexed' setTimeout(function(pointed, indexed) { - io.to("room" + indexed).emit("post", score[pointed]); + // io.to("room" + indexed).emit("post", score[pointed]); + io.to("room" + indexed).emit("post", pointed); - }, score[pointer].object.showtime * index, pointer, index); + // }, score[pointer].object.showtime * index, pointer, index); + }, 30000 * index, pointer, index); } - var timegap = score[pointer].timegap.base + Math.random()*score[pointer].timegap.random; - // console.log(timegap); + var timegap = 10000 + Math.random()*(10000); + console.log(timegap); pointer++; - if (pointer >= score.length) pointer = 0; + // if (pointer >= score.length) pointer = 0; + if (pointer >= 10) pointer = 0; // up to # of folders. looper(timegap); }, timeout); diff --git a/src/pages/entry.html b/src/pages/entry.html index 044e96b..28ebe30 100644 --- a/src/pages/entry.html +++ b/src/pages/entry.html @@ -3,13 +3,13 @@ - 흐름을 향하여 걷는 + 흐름을 향하여 걷는 | 입장 - - + + @@ -17,60 +17,60 @@
EN
-
+

흐름을  향하여  걷는

- 퍼레이드를 행렬 밖에서 바라본 적이 있나요? 북소리와 함성소리가 멀리서 들리고, 많은 존재들이 외치고, 흐르듯 지나가고, 무리가 등장하고, 잦아지는...... + 퍼레이드를 행렬 밖에서 바라본 적이 있나요? 북소리와 함성소리가 멀리서 들리고, 많은 존재들이 외치고, 흐르듯 지나가고, 무리가 등장하고, 잦아지는......

- «흐름을 향하여 걷는»은 온라인으로 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리를 모아 만듭니다. 말하는 소리, 몸이 내는 소리, 주변의 사물 또는 누군가의 소리를 보내주세요. + «흐름을 향하여 걷는»은 온라인으로 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리를 모아 만듭니다. 말하는 소리, 몸이 내는 소리, 주변의 사물 또는 누군가의 소리를 보내주세요.

- 보내주신 소리는 무리를 지어 모양과 함께 흘러갑니다. «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어지고 무리별로 각 3분씩 총 15분동안 진행합니다. -

+ 보내주신 소리는 무리를 지어 모양과 함께 흘러갑니다. «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어지고 무리별로 각 3분씩 총 15분동안 진행합니다. +

+

+ 1월 27일(목) 밤, 프랑스 대사관이 주최하는 ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 연주와 함께 송출될 예정입니다. 많은 참여 및 관심 부탁드립니다. +

+

- 1월 27일(목) 밤, «흐름을 향하여 걷는»은 라이브 사운드와 결합해 프랑스 대사관이 주최하는 ‘사유의 밤’ 행사에서 라이브 공연으로 송출할 예정입니다. 많은 참여와 관심 부탁드립니다. -

-
-

소리 모집
2022년 1월 17일(월)–2022년 1월 26일(수) -

-

-

+

+

+

라이브 공연
- 2022년 1월 27일(목)
- 20:45-21:00 (KST), 12:45-13:00 (CET)
-

-

+ 2022년 1월 27일(목)
+ 20:45-21:00 (KST), 12:45-13:00 (CET)
+

+

장소
- 유튜브 스트리밍, 링크들 -

-

+ 유튜브 스트리밍(추후공지), 링크들 +

+

퍼레이드 구성
- 0 무리 약속들 — 1 무리 깃발들 — 2 무리 신체들 — 3 무리 사물들 — 4 무리 누구들 -

-
-
-
-

+ 무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들 +

+
+ +
+

참여 방법

-
    -
  1. 1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요. -
      -
    1. • 무리 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.
      2. -
    2. • 무리 신체들 — 몸의 소리를 모아 봅시다. 박수도 좋구요. 발을 구르거나 휘파람도 좋습니다.
      3. -
    3. • 무리 사물들 — 주변에 사물들이 보이시죠? 그들의 몸의 소리, 목소리를 녹음해 보세요. 뽁뽁이 소리, 구슬구르는 소리
      4. -
    4. • 무리 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 흐르는 소리, 산책할 때 듣는 소리
      5. -
    +
      +
    1. 1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요. +
        +
      1. • 무리1 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.
        2. +
      2. • 무리2 신체들 — 몸에서 나는 소리를 녹음해 보아요. 박수, 휘파람도 좋아요.
        3. +
      3. • 무리3 사물들 — 주변 사물들의 소리를 찾아 주세요. 뽁뽁이 소리, 구슬 소리
        4. +
      4. • 무리4 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 소리, 산책의 장소
        5. +
    2. 2. 녹음한 소리 파일을 업로드해주세요.
      3. -
    3. 3. 소리의 제목과 설명을 입력한 뒤, 소리의 모양을 그려 제출해주세요.
      4. -
    -

    -
-
-

+

  • 3. 소리의 제목과 묘사을 입력한 뒤, 소리의 모양을 그려 제출해주세요.
    • + +

    +
    +
    +

    소리 제출

    -
      -
    • -

      1. 소리 유형

      -
      -
        -
      • - 무리 깃발들 -
        • -
      • - 무리 신체들 -
        • -
      • - 무리 사물들 -
        • -
      • - 무리 누구들 -
      • - -
      -
      • -
    • -

      2. 소리 파일

      -
      - -
      -
      • -
    • -

      3. 소리 제목

      -
      - -
      -
      • -
    • -

      4. 소리 설명

      -
      - -
      -
      • +
        +
      • +

        1. 소리 유형

        +
        +
          +
        • + 무리1 깃발들 +
          • +
        • + 무리2 신체들 +
          • +
        • + 무리3 사물들 +
          • +
        • + 무리4 누구들 +
        • + +
        +
        • +
      • +

        2. 소리 파일

        +
        + +
        +
        • +
      • +

        3. 소리 제목

        +
        + +
        +
        • +
      • +

        4. 소리 묘사

        +
        + +
        +
        • -
      • -

        5. 소리 모양

        -
        -
        -
        • -
      • -
        - -
        • +
      • +

        5. 소리 모양

        +
        +
        +
        • +
      • +
        + +
    -

    - +

    + diff --git a/src/pages/list.html b/src/pages/list.html index 7b68d7d..fd0f320 100644 --- a/src/pages/list.html +++ b/src/pages/list.html @@ -3,12 +3,12 @@ - 흐름을 향하여 걷는 + 흐름을 향하여 걷는 | 목록 - - + + @@ -17,12 +17,12 @@

    흐름을  향하여  걷는

    {{#each list}} -
    - -

    - +
    + +

    {{this.message}}

    +
    {{/each}}
    diff --git a/src/pages/parade.html b/src/pages/parade.html index f9f6a9d..734d5b8 100644 --- a/src/pages/parade.html +++ b/src/pages/parade.html @@ -1,20 +1,23 @@ - -*-parade-*- z/ne z//ne z///ne - - + + 흐름을 향하여 걷는 + + - - + + + - - + +
    +
    + +
    +