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);

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

@ -15,128 +15,240 @@
<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>
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
<div class="list"><a href="/en/list">list</a></div>
<div class="notice">
<section>
<h1>Walking &nbsp;Towards &nbsp;the Flow</h1>
<p>
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. 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 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 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>
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...
Recruiting sounds<br/>
January 17, 2022 (Mon) – January 26, 2022 (Wed)
</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.
Live performance<br/>
January 27th, 2022 (Thursday)<br>
20:45-21:00 (KST), 12:45-13:00 (CET)<br/>
</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.
Place<br/>
<a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">France en Corée - YouTube channel</a>
</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.
Parade Composition<br/>
Flock0 promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4 Whoness
</p>
<div class="info">
<p>
Recruiting sounds<br/>
January 17, 2022 (Mon) – January 26, 2022 (Wed)
</p>
<p>
Live performance<br/>
January 27th, 2022 (Thursday)<br>
20:45-21:00 (KST), 12:45-13:00 (CET)<br/>
</p>
<p>
Place<br/>
<a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">France en Corée - YouTube channel</a>
</p>
<p>
Parade Composition<br/>
Flock0 promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4 Whoness
</p>
<p>
Inquiry<br/>
wonjung24@gmail.com
</p>
</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.
<ol class="category">
<li>• Flock1 flags — Speak out five times about what you like or value.</li>
<li>• Flock2 bodies —Record the sound of your body. Applause and whistling.</li>
<li>• Flock3 objects — find the sound of things around you. Bubble wrap sound, Beads sound.</li>
<li>• Whoness —Collect the sound of others. animal, sound of water, place to take a walk.</li>
</ol>
</li>
<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>
Inquiry<br/>
wonjung24@gmail.com
</p>
</div>
</section>
<section class="participation">
<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.
<ol class="category">
<li>• Flock1 flags — Speak out five times about what you like or value.</li>
<li>• Flock2 bodies —Record the sound of your body. Applause and whistling.</li>
<li>• Flock3 objects — find the sound of things around you. Bubble wrap sound, Beads sound.</li>
<li>• Whoness —Collect the sound of others. animal, sound of water, place to take a walk.</li>
</ol>
</p>
</section>
<section>
<h2>Sound Submission</h2>
<form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit">
</li>
<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>
</section>
<section>
<h2>Sound Submission</h2>
<form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit">
<h3>1. Sound Type</h3>
<ul>
<li>
<h3>1. Sound Type</h3>
<div class="pv3">
<ul>
<li>
<input type="radio" name="group" autocomplete="off" value="flag" /> Flock1 flags
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="body" /> Flock2 bodies
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="object" /> Flock3 objects
</li>
<li>
<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>
<input id="title" name="title" type="text" autocomplete="off" required />
</div>
</li>
<li>
<h3>4. Descript the sound</h3>
<div>
<input id="comment" name="comment" type="text" autocomplete="off" required />
</div>
</li>
<!-- pixels.png ~ made with p5.js -->
<li class="noscroll">
<h3>5. Draw an image of the sound</h3>
<div id="p5">
</div>
</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>
<input type="radio" name="group" autocomplete="off" value="flag" /> Flock1 flags
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="body" /> Flock2 bodies
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="object" /> Flock3 objects
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="any" required /> Flock4 Whoness
</li>
</ul>
</form>
</section>
</div>
</div>
<script src="/entry.js"></script>
</div>
<li>
<h3>2. Sound File</h3>
<input type="file" name="audiofile" autocomplete="off" required />
</li>
<li>
<h3>3. Title</h3>
<input id="title" name="title" type="text" autocomplete="off" required />
</li>
<li>
<h3>4. Description of the sound</h3>
<input id="comment" name="comment" type="text" autocomplete="off" required />
</li>
<!-- pixels.png ~ made with p5.js -->
<li class="noscroll">
<h3>5. Draw an image of the sound</h3>
<div id="p5">
</div>
</li>
<li>
<h3>6. passward 2 numbers. It's required if you delete it.</h3>
<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
</li>
<li>
<input id="submit" type="submit" value="Upload" />
</li>
</ul>
</form>
</section>
</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>

334
src/pages/entry.html
View file

@ -15,129 +15,241 @@
<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>
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
<div class="list"><a href="/list">목록</a></div>
<div class="notice">
<section>
<h1>흐름을 &nbsp;향하여 &nbsp;걷는</h1>
<p>
퍼레이드를 행렬 밖에서 바라본 적이 있나요? 북소리와 함성소리가 멀리서 들리고, 많은 존재들이 외치고, 흐르듯 지나가고, 무리가 등장하고, 멀어지는......
</p>
<p>
«흐름을 향하여 걷는»은 온라인 공간에 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리가 모여 만들어집니다.
</p>
<p>
«흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
</p>
<p>
1월 27일(목) 밤, ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. '사유의 밤'은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다.
많은 참여 및 관심 부탁드립니다.
</p>
<div class="info">
<p>
퍼레이드를 행렬 밖에서 바라본 적이 있나요? 북소리와 함성소리가 멀리서 들리고, 많은 존재들이 외치고, 흐르듯 지나가고, 무리가 등장하고, 멀어지는......
소리 모집<br/>
2022년 1월 17일(월)–2022년 1월 26일(수)
</p>
<p>
«흐름을 향하여 걷는»은 온라인 공간에 소리의 행렬을 만드는 사운드 퍼레이드입니다. 누구나 참여할 수 있는 이 퍼레이드는 여러분이 보내주시는 소리가 모여 만들어집니다.
라이브 공연<br/>
2022년 1월 27일(목)<br>
20:45-21:00 (KST), 12:45-13:00 (CET)<br/>
</p>
<p>
«흐름을 향하여 걷는»은 총 다섯 개의 소리 무리로 이루어집니다. 약속하는 소리들, 말하는 소리들, 몸이 내는 소리들, 주변의 사물들, 그리고 누군가의 소리들이 무리를 지어 각 3분 내외 총 15분 가량 흘러가게 됩니다.
장소<br/>
<a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">주한프랑스대사관 문화과 유튜브 채널</a>
</p>
<p>
1월 27일(목) 밤, ‘사유의 밤’ 행사에서 «흐름을 향하여 걷는» 퍼레이드는 라이브 공연과 함께 송출될 예정입니다. '사유의 밤'은 주한 프랑스대사관 문화과, 주한 리스트 헝가리 문화원, 주한 벨기에 대사관이 주최하고, 유네스코 한국위원회와 프랑스 해외문화진흥원이 후원하여 개최됩니다.
많은 참여 및 관심 부탁드립니다.
퍼레이드 구성<br/>
무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들
</p>
<div class="info">
<p>
소리 모집<br/>
2022년 1월 17일(월)–2022년 1월 26일(수)
</p>
<p>
라이브 공연<br/>
2022년 1월 27일(목)<br>
20:45-21:00 (KST), 12:45-13:00 (CET)<br/>
</p>
<p>
장소<br/>
<a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a>, <a href="https://www.youtube.com/c/franceencoree">주한프랑스대사관 문화과 유튜브 채널</a>
</p>
<p>
퍼레이드 구성<br/>
무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들
</p>
<p>
문의<br/>
wonjung24@gmail.com
</p>
</div>
</section>
<section class="participation">
<p>
<h2>참여 방법</h2>
<ol>
<li>1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요.
<ol class="category">
<li>• 무리1 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.</li>
<li>• 무리2 신체들 — 몸에서 나는 소리를 녹음해 보아요. 박수, 휘파람도 좋아요.</li>
<li>• 무리3 사물들 — 주변 사물들의 소리를 찾아 주세요. 뽁뽁이 소리, 구슬 소리</li>
<li>• 무리4 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 소리, 산책의 장소</li>
</ol>
</li>
<li>2. 녹음한 소리 파일을 업로드해주세요.</li>
<li>3. 소리의 제목과 묘사을 입력한 뒤, 소리의 모양을 그려 제출해주세요.</li>
문의<br/>
wonjung24@gmail.com
</p>
</div>
</section>
<section class="participation">
<h2>참여 방법</h2>
<ol>
<li>1. 무리의 특성에 따라 녹음기기나 핸드폰으로 30초 가량의 소리를 녹음해주세요.
<ol class="category">
<li>• 무리1 깃발들 — 좋아하는 것, 가치에 대해 다섯 번 외쳐주세요.</li>
<li>• 무리2 신체들 — 몸에서 나는 소리를 녹음해 보아요. 박수, 휘파람도 좋아요.</li>
<li>• 무리3 사물들 — 주변 사물들의 소리를 찾아 주세요. 뽁뽁이 소리, 구슬 소리</li>
<li>• 무리4 누구들 — 누구의 소리를 모아주세요. 반려동물, 물 소리, 산책의 장소</li>
</ol>
</p>
</section>
<section>
<h2>소리 제출</h2>
<form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit">
</li>
<li>2. 녹음한 소리 파일을 업로드해주세요.</li>
<li>3. 소리의 제목과 묘사을 입력한 뒤, 소리의 모양을 그려 제출해주세요.</li>
</ol>
</section>
<section>
<h2>소리 제출</h2>
<form id="form" method="POST" enctype="multipart/form-data">
<ul class="submit">
<h3>1. 소리 유형</h3>
<ul>
<li>
<h3>1. 소리 유형</h3>
<div class="pv3">
<ul>
<li>
<input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
</li>
<li>
<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">
<h3>5. 소리 모양</h3>
<div id="p5">
</div>
</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>
<input type="radio" name="group" autocomplete="off" value="flag" /> 무리1 깃발들
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="body" /> 무리2 신체들
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="object" /> 무리3 사물들
</li>
<li>
<input type="radio" name="group" autocomplete="off" value="any" required /> 무리4 누구들
</li>
</ul>
</form>
</section>
</div>
</div>
<script src="/entry.js"></script>
</div>
<li>
<h3>2. 소리 파일</h3>
<input type="file" name="audiofile" autocomplete="off" required />
</li>
<li>
<h3>3. 소리 제목</h3>
<input id="title" name="title" type="text" autocomplete="off" required />
</li>
<li>
<h3>4. 소리 묘사</h3>
<input id="comment" name="comment" type="text" autocomplete="off" required />
</li>
<!-- pixels.png ~ made with p5.js -->
<li class="noscroll">
<h3>5. 소리 모양</h3>
<div id="p5">
</div>
</li>
<li>
<h3>6. 비밀번호 숫자 2개_삭제시 필요</h3>
<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
</li>
<li>
<input id="submit" type="submit" value="제출하기" />
</li>
</ul>
</form>
</section>
</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>