working2...
This commit is contained in:
parent
c10cd29ae8
commit
e264af7809
8 changed files with 230 additions and 222 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// })
|
||||
// })
|
||||
// }
|
||||
|
|
|
|||
4
public/main.css
Normal file
4
public/main.css
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
103
public/sketch.js
103
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,25 +61,18 @@ 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(
|
||||
"흘러가는 진 퍼레이드에 오신거 환영합니다. <br>*본인의 기기로 보고 싶은 퍼레이드의 구간을 고르세요. <br>여러 개의 기기로 퍼레이드를 연결해서 볼 수 있습니다.<br>*이 퍼레이드에서 흘러가는 진들은 각자의 이야기를 가지고 있습니다. <br>대체텍스트가 포함되어 있어 스크린리더를 통해 이야기를 음성으로 들을 수 있습니다."
|
||||
);
|
||||
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));
|
||||
var b = createButton("시작하기!", 1);
|
||||
b.mouseClicked(function() {
|
||||
silence.play();
|
||||
myroom = parseInt(this.value());
|
||||
|
|
@ -95,13 +81,13 @@ socket.on("connect", function() {
|
|||
if (res) {
|
||||
console.log("entered the room -> " + myroom);
|
||||
createP(str(myroom));
|
||||
setTimeout(function() {
|
||||
ready = createP("퍼레이드 시작합니다!!");
|
||||
ready.position(
|
||||
windowWidth / 2 - windowWidth / 10,
|
||||
windowHeight / 2
|
||||
);
|
||||
}, 1000);
|
||||
// setTimeout(function() {
|
||||
// ready = createP("퍼레이드 시작합니다!!");
|
||||
// ready.position(
|
||||
// windowWidth / 2 - windowWidth / 10,
|
||||
// windowHeight / 2
|
||||
// );
|
||||
// }, 1000);
|
||||
} else {
|
||||
console.log("rejected!");
|
||||
}
|
||||
|
|
@ -114,14 +100,9 @@ socket.on("connect", function() {
|
|||
selectAll(".intro").forEach(function(item) {
|
||||
item.remove();
|
||||
});
|
||||
plogo.remove();
|
||||
}, 1000);
|
||||
setTimeout(function() {
|
||||
ready.remove();
|
||||
}, 8000);
|
||||
});
|
||||
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() {
|
||||
|
|
|
|||
50
server.js
50
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);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>흐름을 향하여 걷는</title>
|
||||
<title>흐름을 향하여 걷는 | 입장</title>
|
||||
<!-- <link rel="stylesheet" href="https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" /> -->
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
<link rel="stylesheet" href="/entry.css" />
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
보내주신 소리는 무리를 지어 모양과 함께 흘러갑니다. «흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어지고 무리별로 각 3분씩 총 15분동안 진행합니다.
|
||||
</p>
|
||||
<p class="white f3 pv3">
|
||||
1월 27일(목) 밤, «흐름을 향하여 걷는»은 라이브 사운드와 결합해 프랑스 대사관이 주최하는 ‘사유의 밤’ 행사에서 라이브 공연으로 송출할 예정입니다. 많은 참여와 관심 부탁드립니다.
|
||||
1월 27일(목) 밤, 프랑스 대사관이 주최하는 ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 연주와 함께 송출될 예정입니다. 많은 참여 및 관심 부탁드립니다.
|
||||
</p>
|
||||
<div class="info">
|
||||
<p class="white f3 pv3">
|
||||
|
|
@ -44,11 +44,11 @@
|
|||
</p>
|
||||
<p class="white f3 pv3">
|
||||
장소<br/>
|
||||
유튜브 스트리밍, 링크들
|
||||
유튜브 스트리밍(추후공지), 링크들
|
||||
</p>
|
||||
<p class="white f3 pv3">
|
||||
퍼레이드 구성<br/>
|
||||
0 무리 약속들 — 1 무리 깃발들 — 2 무리 신체들 — 3 무리 사물들 — 4 무리 누구들
|
||||
무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -58,14 +58,14 @@
|
|||
<ol>
|
||||
<li>1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요.
|
||||
<ol class="category">
|
||||
<li>• 무리 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.</li>
|
||||
<li>• 무리 신체들 — 몸의 소리를 모아 봅시다. 박수도 좋구요. 발을 구르거나 휘파람도 좋습니다.</li>
|
||||
<li>• 무리 사물들 — 주변에 사물들이 보이시죠? 그들의 몸의 소리, 목소리를 녹음해 보세요. 뽁뽁이 소리, 구슬구르는 소리</li>
|
||||
<li>• 무리 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 흐르는 소리, 산책할 때 듣는 소리</li>
|
||||
<li>• 무리1 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.</li>
|
||||
<li>• 무리2 신체들 — 몸에서 나는 소리를 녹음해 보아요. 박수, 휘파람도 좋아요.</li>
|
||||
<li>• 무리3 사물들 — 주변 사물들의 소리를 찾아 주세요. 뽁뽁이 소리, 구슬 소리</li>
|
||||
<li>• 무리4 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 소리, 산책의 장소</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>2. 녹음한 소리 파일을 업로드해주세요.</li>
|
||||
<li>3. 소리의 제목과 설명을 입력한 뒤, 소리의 모양을 그려 제출해주세요.</li>
|
||||
<li>3. 소리의 제목과 묘사을 입력한 뒤, 소리의 모양을 그려 제출해주세요.</li>
|
||||
</ol>
|
||||
</p>
|
||||
</section>
|
||||
|
|
@ -84,16 +84,16 @@
|
|||
<div class="pv3">
|
||||
<ul>
|
||||
<li>
|
||||
<input type="radio" name="chk_info" value="flag"> 무리 깃발들
|
||||
<input type="radio" name="chk_info" value="flag"> 무리1 깃발들
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="chk_info" value="body"> 무리 신체들
|
||||
<input type="radio" name="chk_info" value="body"> 무리2 신체들
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="chk_info" value="object"> 무리 사물들
|
||||
<input type="radio" name="chk_info" value="object"> 무리3 사물들
|
||||
</li>
|
||||
<li>
|
||||
<input type="radio" name="chk_info" value="any"> 무리 누구들
|
||||
<input type="radio" name="chk_info" value="any"> 무리4 누구들
|
||||
<li>
|
||||
</ol>
|
||||
</div>
|
||||
|
|
@ -111,13 +111,13 @@
|
|||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<h3>4. 소리 설명</h3>
|
||||
<h3>4. 소리 묘사</h3>
|
||||
<div class="pv3">
|
||||
<input id="message" name="message" required="required" type="text" />
|
||||
</div>
|
||||
</li>
|
||||
<!-- pixels.png ~ made with p5.js -->
|
||||
<li>
|
||||
<li class="noscroll">
|
||||
<h3>5. 소리 모양</h3>
|
||||
<div class="pv3" id="p5">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>흐름을 향하여 걷는</title>
|
||||
<title>흐름을 향하여 걷는 | 목록</title>
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
<link rel="stylesheet" href="/list.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
|
||||
|
|
@ -17,12 +17,12 @@
|
|||
<div class="notice">
|
||||
<h1>흐름을 향하여 걷는</h1>
|
||||
{{#each list}}
|
||||
<div class="items" foldername="{{this}}">
|
||||
<img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this}}/pixels.png" />
|
||||
<p class="name" src="https://p.dianaband.info/public/sound-parade/{{this}}/message.txt"></p>
|
||||
<audio controls class="sound">
|
||||
<source src="https://p.dianaband.info/public/sound-parade/{{this}}/audio.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
<div class="items" foldername="{{this.foldername}}">
|
||||
<img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" />
|
||||
<p class="name">{{this.message}}</p>
|
||||
<!-- <audio controls class="sound">
|
||||
<source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg">
|
||||
</audio> -->
|
||||
</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>-*-parade-*- z/ne z//ne z///ne</title>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>흐름을 향하여 걷는</title>
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
<link rel="stylesheet" href="/main.css" />
|
||||
<script src="/js/p5-v1.1.9.min.js"></script>
|
||||
<script src="/js/socket-v2.3.0.io.slim.js"></script>
|
||||
<script src="/js/p5-v0.3.11.sound.min.js"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"/>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap" rel="stylesheet" />
|
||||
<script src="/sketch.js"></script>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
<div class="content">
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue