doohoyi/sound-parade
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

1st_final

Browse source
This commit is contained in:
Dooho Yi 2022-01-17 17:35:16 +09:00
parent f4617e695f
commit 0e6fd271f6
6 changed files with 461 additions and 230 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
public/entry.js
View file

@ -29,8 +29,9 @@ function setup() {
cnv.parent("p5");
img = createGraphics(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
var but = createButton("clear!");
// var sav = createButton("save!");
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);
@ -119,7 +120,7 @@ function submitForm(event) {
event.preventDefault();
//
alert('감사합니다!');
alert('감사합니다! Thank you!');
location.reload();
}

14
server.js
View file

@ -240,7 +240,9 @@ fastify.post("/entry", async function (request, reply) {
pass: audiofile.fields.pass.value
})));
// reply.view("/src/pages/entry.html", {}); //???
// res.writeHead(301, {"Location": "/submit"});
// return res.end();
});
//socket.io
@ -271,7 +273,7 @@ io.on("connection", function(socket) {
var pointer = 0; // pointer : 0 ~ (length-1)
var looper;
(looper = function(timeout) {
setTimeout(function() {
setTimeout(async function() {
//pointer = 20;
// console.log(score[pointer]);
@ -293,9 +295,13 @@ var looper;
var timegap = 10000 + Math.random()*(40000);
console.log(timegap);
//get # list
let list = await fs.readdir('/media/storage/public/sound-parade/');
console.log(list.length);
//loop over...
pointer++;
// if (pointer >= score.length) pointer = 0;
if (pointer >= 10) pointer = 0; // up to # of folders.
if (pointer >= list.length) pointer = 0;
looper(timegap);
}, timeout);

164
src/pages/entry.en.html
View file

@ -15,7 +15,6 @@
<div class="bg"></div>
<div class="content">
<div class="lang"><a href="/entry">KR</a></div>
<div class="content">
<div class="list"><a href="/en/list">list</a></div>
<div class="notice">
<section>
@ -24,13 +23,13 @@
Have you ever seen a parade outside the procession? Drums and shouts are heard in the distance, many beings shouting, flowing by, groups appearing and moving away...
</p>
<p>
«Walking Toward the Flow» is a sound parade that creates a procession of sounds in the online space. Anyone can participate in this parade, which is made by collecting the sounds you send.
«Walking Toward the Flow» is a sound parade that creates a procession of sounds in the online space. Anyone can participate. This parade is made by collecting the sounds you sent.
</p>
<p>
«Walking Toward the Flow» consists of a total of five 'flock' of sounds: the sounds of promises, the sounds of speaking, the sounds of the body, the sounds of objects around, and the sounds of someone. They will flow in groups for about 3 minutes each and a total of 15 minutes.
«Walking Toward the Flow» consists of a total of five 'flock' of sounds: the sounds of promises, the sounds of speaking, the sounds of the body, the sounds of objects around, and the sounds of someone. They will flow in groups for about 3 minutes each and a total of 15 minutes or more.
</p>
<p>
On the night of January 27 (Thursday), the «Walking to the Flow» parade will be broadcasted along with a live performance at the 'the Night of Ideas' hosted by the Embassy of France (Ambassade de France en Corée du Sud). Thank you for your participation and interest.
On the night of January 27 (Thursday), the «Walking to the Flow» parade will be broadcasted along with a live performance at the 'the Night of Ideas' hosted by Cultural Service of the Embassy of France in Korea, Liszt Institut Hungarian Cultural Center Seoul and Embassy of Belgium in Seoul and sponsored by UNESCO Korea and Institut Français. Thank you for your participation and interest.
</p>
<div class="info">
<p>
@ -57,7 +56,6 @@
</div>
</section>
<section class="participation">
<p>
<h2>How to participate</h2>
<ol>
<li>1. Record the sound for about 30 seconds with a recording device or phone according to the characteristics of the flock.
@ -71,15 +69,12 @@
<li>2. Upload the recorded sound file.</li>
<li>3. After filling out the title and description of the sound, draw the shape of the sound and submit it.</li>
</ol>
</p>
</section>
<section>
<h2>Sound Submission</h2>
<form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit">
<li>
<h3>1. Sound Type</h3>
<div class="pv3">
<ul>
<li>
<input type="radio" name="group" autocomplete="off" value="flag" /> Flock1 flags
@ -94,24 +89,17 @@
<input type="radio" name="group" autocomplete="off" value="any" required /> Flock4 Whoness
</li>
</ul>
</div>
<li>
<h3>2. Sound File</h3>
<div>
<input type="file" name="audiofile" autocomplete="off" required />
</div>
</li>
<li>
<h3>3. title</h3>
<div>
<h3>3. Title</h3>
<input id="title" name="title" type="text" autocomplete="off" required />
</div>
</li>
<li>
<h3>4. Descript the sound</h3>
<div>
<h3>4. Description of the sound</h3>
<input id="comment" name="comment" type="text" autocomplete="off" required />
</div>
</li>
<!-- pixels.png ~ made with p5.js -->
<li class="noscroll">
@ -121,22 +109,146 @@
</li>
<li>
<h3>6. passward 2 numbers. It's required if you delete it.</h3>
<div>
<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
</div>
</li>
<li>
<div>
<input id="submit" type="submit" value="Upload" />
</div>
</li>
</li>
</ul>
</form>
</section>
</div>
</div>
<script src="/entry.js"></script>
</div>
</div><!-- div class="notice" -->
</div><!-- div class="content" -->
<script>
// -- 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();
location.assign("/en/submit");
}
const form = document.getElementById('form');
form.addEventListener('submit', submitForm);
</script>
</body>
</html>

154
src/pages/entry.html
View file

@ -15,7 +15,6 @@
<div class="bg"></div>
<div class="content">
<div class="lang"><a href="/en/entry">EN</a></div>
<div class="content">
<div class="list"><a href="/list">목록</a></div>
<div class="notice">
<section>
@ -58,7 +57,6 @@
</div>
</section>
<section class="participation">
<p>
<h2>참여 방법</h2>
<ol>
<li>1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요.
@ -72,15 +70,12 @@
<li>2. 녹음한 소리 파일을 업로드해주세요.</li>
<li>3. 소리의 제목과 묘사을 입력한 뒤, 소리의 모양을 그려 제출해주세요.</li>
</ol>
</p>
</section>
<section>
<h2>소리 제출</h2>
<form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit">
<li>
<h3>1. 소리 유형</h3>
<div class="pv3">
<ul>
<li>
<input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
@ -95,24 +90,17 @@
<input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
</li>
</ul>
</div>
<li>
<h3>2. 소리 파일</h3>
<div>
<input type="file" name="audiofile" autocomplete="off" required />
</div>
</li>
<li>
<h3>3. 소리 제목</h3>
<div>
<input id="title" name="title" type="text" autocomplete="off" required />
</div>
</li>
<li>
<h3>4. 소리 묘사</h3>
<div>
<input id="comment" name="comment" type="text" autocomplete="off" required />
</div>
</li>
<!-- pixels.png ~ made with p5.js -->
<li class="noscroll">
@ -122,22 +110,146 @@
</li>
<li>
<h3>6. 비밀번호 숫자 2개_삭제시 필요</h3>
<div>
<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
</div>
</li>
<li>
<div>
<input id="submit" type="submit" value="제출하기" />
</div>
</li>
</li>
</ul>
</form>
</section>
</div>
</div>
<script src="/entry.js"></script>
</div>
</div><!-- div class="notice" -->
</div><!-- div class="content" -->
<script>
// -- 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('감사합니다!');
//location.reload();
location.assign("/submit");
}
const form = document.getElementById('form');
form.addEventListener('submit', submitForm);
</script>
</body>
</html>

2
src/pages/list.en.html
View file

@ -17,7 +17,7 @@
<div class="content">
<div class="lang"><a href="/list">KR</a></div>
<div class="content" id="list">
<div class="list-sub"><a href="/en/entry">Submission<i class='fas fa-bell' style='font-size:24px'></i></a></div>
<div class="list-sub"><a href="/en/entry">Entry<i class='fas fa-bell' style='font-size:24px'></i></a></div>
<div class="content" id="list">
<div class="list-parade"><a href="/" target="_blank">Parade<i class='fas fa-bell' style='font-size:24px'></i></a></div> <div class="notice">
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1>

4
src/pages/submit.en.html
View file

@ -21,10 +21,10 @@
</p>
<div class="content">
<div class="sub">
<a href="/entry">≪ ENTRY</a>
<a href="/en/entry">≪ ENTRY</a>
</div>
<div class="list2">
<a href="/list">▤ LIST</a>
<a href="/en/list">▤ LIST</a>
</div>
<div class="parade">
<a href="/" target="_blank">PARADE ≫</a>