added pencil/erasor toggle
This commit is contained in:
parent
2043bfbf13
commit
5b537bc209
6 changed files with 681 additions and 87 deletions
87
public/js/two-v0.8.1.min.js
vendored
Normal file
87
public/js/two-v0.8.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -64,8 +64,8 @@ fastify.get("/preview/:foldername", function (request, reply) {
|
|||
reply.view("/src/pages/preview.html", {});
|
||||
});
|
||||
|
||||
//get '/entry', '/entry/', '/en/entry', '/en/entry/'
|
||||
["/entry", "/entry/", "/en/entry", "/en/entry/"].forEach(function(item) {
|
||||
//get '/entry', '/entry/', '/en/entry', '/en/entry/', '/entry/test'
|
||||
["/entry", "/entry/", "/en/entry", "/en/entry/", "/entry/test"].forEach(function(item) {
|
||||
fastify.get(item, async function (request, reply) {
|
||||
|
||||
//console.log(request.url);
|
||||
|
|
@ -99,6 +99,10 @@ fastify.get("/preview/:foldername", function (request, reply) {
|
|||
reply.view("/src/pages/entry.en.html", {
|
||||
list: folders,
|
||||
});
|
||||
} else if (url == "/entry/test") {
|
||||
reply.view("/src/pages/entry.test.html", {
|
||||
list: folders,
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.but {
|
||||
.clear {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -18,6 +18,20 @@
|
|||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#p5 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 1em 1em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.penselect {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
|
|
@ -66,7 +80,6 @@
|
|||
Parade Composition<br/>
|
||||
Flock0 promises — Flock1 flags — Flock2 bodies — Flock3 objects — Flock4 someone
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="participation">
|
||||
|
|
@ -120,8 +133,21 @@
|
|||
<!-- pixels.png ~ made with p5.js -->
|
||||
<li class="noscroll">
|
||||
<h3>5. Draw an image of the sound</h3>
|
||||
<div>
|
||||
<div id="p5">
|
||||
</div>
|
||||
<div class="tools">
|
||||
<div>
|
||||
<input class="penselect" type="radio" value="pencil" name="penselect" id="penselect-pencil" autocomplete="off" checked>
|
||||
<label for="penselect-pencil">pencil</label>
|
||||
</div>
|
||||
<div>
|
||||
<input class="penselect" type="radio" value="erasor" name="penselect" id="penselect-erasor" autocomplete="off">
|
||||
<label for="penselect-erasor">erasor</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="clear">Erase all!</button>
|
||||
</li>
|
||||
<li>
|
||||
<h3>6. passward is 2-digit numbers. It's required if you delete it.</h3>
|
||||
|
|
@ -157,9 +183,6 @@
|
|||
</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;
|
||||
|
|
@ -180,46 +203,38 @@
|
|||
var cols = 17;
|
||||
var rows = 17;
|
||||
var unit = 15; //px
|
||||
var sw = 0.4; //px (strokewidth)
|
||||
var img;
|
||||
var penselect = "pencil";
|
||||
var scrollable = true;
|
||||
|
||||
function setup() {
|
||||
var cnv = createCanvas(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
|
||||
var cnv = createCanvas(cols*unit+2, rows*unit+2);
|
||||
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();
|
||||
img = createGraphics(cols*unit+2, rows*unit+2);
|
||||
document.querySelectorAll('.penselect').forEach(item => item.onclick = () => {
|
||||
penselect = document.querySelector('input[name="penselect"]:checked').value;
|
||||
});
|
||||
//
|
||||
for (var i = 0; i < cols*rows; i++) p.push(0);
|
||||
document.querySelectorAll('.clear').forEach(item => item.onclick = () => {
|
||||
for (let a = 0; a < p.length; a++) p[a] = 0;
|
||||
});
|
||||
}
|
||||
|
||||
function draw() {
|
||||
//
|
||||
//clear
|
||||
clear();
|
||||
|
||||
//draw the grid
|
||||
stroke(255);
|
||||
strokeWeight(sw);
|
||||
strokeWeight(0.2);
|
||||
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);
|
||||
rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
image(img, 0, 0);
|
||||
|
||||
//pointer
|
||||
fill(0, 255, 0);
|
||||
strokeWeight(0);
|
||||
|
|
@ -228,24 +243,58 @@
|
|||
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);
|
||||
var mouseC = int(mouseX/unit);
|
||||
var mouseR = int(mouseY/unit);
|
||||
if (mouseC >= 0 && mouseC < cols && mouseR >= 0 && mouseR < rows) {
|
||||
if (penselect == "pencil") p[mouseC*cols + mouseR] = 1;
|
||||
else if (penselect == "erasor") p[mouseC*cols + mouseR] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
//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;
|
||||
var mouseC = int(touches[0].x/unit);
|
||||
var mouseR = int(touches[0].y/unit);
|
||||
if (mouseC >= 0 && mouseC < cols && mouseR >= 0 && mouseR < rows) {
|
||||
// if (scrollable == true) {
|
||||
// scrollable = false;
|
||||
// // firefox browser @ my android phone -> url bar auto-hiding kills drawing experience.
|
||||
// // --> https://stackoverflow.com/a/63221105
|
||||
// document.body.style.marginTop = `-${window.pageYOffset}px`;
|
||||
// document.body.style.position = 'fixed';
|
||||
// document.body.style.overflowY = 'scroll';
|
||||
// }
|
||||
if (penselect == "pencil") p[mouseC*cols + mouseR] = 1;
|
||||
else if (penselect == "erasor") p[mouseC*cols + mouseR] = 0;
|
||||
} else {
|
||||
// if (scrollable == false) {
|
||||
// scrollable = true;
|
||||
// // firefox browser @ my android phone -> url bar auto-hiding kills drawing experience.
|
||||
// // --> https://stackoverflow.com/a/63221105
|
||||
// document.body.style.position = '';
|
||||
// document.body.style.overflowY = '';
|
||||
// if (document.body.style.marginTop) {
|
||||
// const scrollTop = -parseInt(document.body.style.marginTop, 10);
|
||||
// document.body.style.marginTop = '';
|
||||
// window.scrollTo(window.pageXOffset, scrollTop);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
//draw img
|
||||
image(img, 0, 0);
|
||||
img.clear();
|
||||
img.strokeWeight(0);
|
||||
img.fill(255);
|
||||
img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
|
||||
for (var c = 0; c < cols; c++) {
|
||||
for (var r = 0; r < rows; r++) {
|
||||
if (p[c*cols + r] == 1) {
|
||||
img.rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -263,7 +312,19 @@
|
|||
var fd = new FormData(form);
|
||||
|
||||
//
|
||||
var dataurl = img.elt.toDataURL();
|
||||
var unit = 45; //mask&override 'unit' -> for crispy png.
|
||||
var img2 = createGraphics(cols*unit+2, rows*unit+2);
|
||||
img2.clear();
|
||||
img2.strokeWeight(0);
|
||||
img2.fill(255);
|
||||
for (var c = 0; c < cols; c++) {
|
||||
for (var r = 0; r < rows; r++) {
|
||||
if (p[c*cols + r] == 1) {
|
||||
img2.rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
var dataurl = img2.elt.toDataURL();
|
||||
var pixels = dataURLtoBlob(dataurl);
|
||||
fd.append("pixels", pixels, "pixels.png");
|
||||
|
||||
|
|
@ -317,7 +378,6 @@
|
|||
alert("Reminder: Password was 2-digit numbers...");
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.but {
|
||||
.clear {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
|
@ -18,6 +18,20 @@
|
|||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#p5 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 1em 1em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.penselect {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
|
|
@ -120,8 +134,21 @@
|
|||
<!-- pixels.png ~ made with p5.js -->
|
||||
<li class="noscroll">
|
||||
<h3>5. 소리 모양</h3>
|
||||
<div>
|
||||
<div id="p5">
|
||||
</div>
|
||||
<div class="tools">
|
||||
<div>
|
||||
<input class="penselect" type="radio" value="pencil" name="penselect" id="penselect-pencil" autocomplete="off" checked>
|
||||
<label for="penselect-pencil">연필</label>
|
||||
</div>
|
||||
<div>
|
||||
<input class="penselect" type="radio" value="erasor" name="penselect" id="penselect-erasor" autocomplete="off">
|
||||
<label for="penselect-erasor">지우개</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="clear">다시그리기!</button>
|
||||
</li>
|
||||
<li>
|
||||
<h3>6. 비밀 번호</h3>
|
||||
|
|
@ -158,9 +185,6 @@
|
|||
</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;
|
||||
|
|
@ -181,46 +205,38 @@
|
|||
var cols = 17;
|
||||
var rows = 17;
|
||||
var unit = 15; //px
|
||||
var sw = 0.4; //px (strokewidth)
|
||||
var img;
|
||||
var penselect = "pencil";
|
||||
var scrollable = true;
|
||||
|
||||
function setup() {
|
||||
var cnv = createCanvas(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
|
||||
var cnv = createCanvas(cols*unit+2, rows*unit+2);
|
||||
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();
|
||||
img = createGraphics(cols*unit+2, rows*unit+2);
|
||||
document.querySelectorAll('.penselect').forEach(item => item.onclick = () => {
|
||||
penselect = document.querySelector('input[name="penselect"]:checked').value;
|
||||
});
|
||||
//
|
||||
for (var i = 0; i < cols*rows; i++) p.push(0);
|
||||
document.querySelectorAll('.clear').forEach(item => item.onclick = () => {
|
||||
for (let a = 0; a < p.length; a++) p[a] = 0;
|
||||
});
|
||||
}
|
||||
|
||||
function draw() {
|
||||
//
|
||||
//clear
|
||||
clear();
|
||||
|
||||
//draw the grid
|
||||
stroke(255);
|
||||
strokeWeight(sw);
|
||||
strokeWeight(0.2);
|
||||
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);
|
||||
rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
image(img, 0, 0);
|
||||
|
||||
//pointer
|
||||
fill(0, 255, 0);
|
||||
strokeWeight(0);
|
||||
|
|
@ -229,24 +245,58 @@
|
|||
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);
|
||||
var mouseC = int(mouseX/unit);
|
||||
var mouseR = int(mouseY/unit);
|
||||
if (mouseC >= 0 && mouseC < cols && mouseR >= 0 && mouseR < rows) {
|
||||
if (penselect == "pencil") p[mouseC*cols + mouseR] = 1;
|
||||
else if (penselect == "erasor") p[mouseC*cols + mouseR] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
//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;
|
||||
var mouseC = int(touches[0].x/unit);
|
||||
var mouseR = int(touches[0].y/unit);
|
||||
if (mouseC >= 0 && mouseC < cols && mouseR >= 0 && mouseR < rows) {
|
||||
// if (scrollable == true) {
|
||||
// scrollable = false;
|
||||
// // firefox browser @ my android phone -> url bar auto-hiding kills drawing experience.
|
||||
// // --> https://stackoverflow.com/a/63221105
|
||||
// document.body.style.marginTop = `-${window.pageYOffset}px`;
|
||||
// document.body.style.position = 'fixed';
|
||||
// document.body.style.overflowY = 'scroll';
|
||||
// }
|
||||
if (penselect == "pencil") p[mouseC*cols + mouseR] = 1;
|
||||
else if (penselect == "erasor") p[mouseC*cols + mouseR] = 0;
|
||||
} else {
|
||||
// if (scrollable == false) {
|
||||
// scrollable = true;
|
||||
// // firefox browser @ my android phone -> url bar auto-hiding kills drawing experience.
|
||||
// // --> https://stackoverflow.com/a/63221105
|
||||
// document.body.style.position = '';
|
||||
// document.body.style.overflowY = '';
|
||||
// if (document.body.style.marginTop) {
|
||||
// const scrollTop = -parseInt(document.body.style.marginTop, 10);
|
||||
// document.body.style.marginTop = '';
|
||||
// window.scrollTo(window.pageXOffset, scrollTop);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
//draw img
|
||||
image(img, 0, 0);
|
||||
img.clear();
|
||||
img.strokeWeight(0);
|
||||
img.fill(255);
|
||||
img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
|
||||
for (var c = 0; c < cols; c++) {
|
||||
for (var r = 0; r < rows; r++) {
|
||||
if (p[c*cols + r] == 1) {
|
||||
img.rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -264,7 +314,19 @@
|
|||
var fd = new FormData(form);
|
||||
|
||||
//
|
||||
var dataurl = img.elt.toDataURL();
|
||||
var unit = 45; //mask&override 'unit' -> for crispy png.
|
||||
var img2 = createGraphics(cols*unit+2, rows*unit+2);
|
||||
img2.clear();
|
||||
img2.strokeWeight(0);
|
||||
img2.fill(255);
|
||||
for (var c = 0; c < cols; c++) {
|
||||
for (var r = 0; r < rows; r++) {
|
||||
if (p[c*cols + r] == 1) {
|
||||
img2.rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
var dataurl = img2.elt.toDataURL();
|
||||
var pixels = dataURLtoBlob(dataurl);
|
||||
fd.append("pixels", pixels, "pixels.png");
|
||||
|
||||
|
|
@ -294,7 +356,7 @@
|
|||
function del(that) {
|
||||
console.log();
|
||||
let text;
|
||||
let pass = prompt("Please enter password!", "숫자2개");
|
||||
let pass = prompt("패스워드를 맞춰보세요!", "숫자2개");
|
||||
if (/^\d{2}$/.test(pass)) {
|
||||
var target = that.parentElement.parentElement.getAttribute('foldername');
|
||||
const trydelete = async () => {
|
||||
|
|
|
|||
381
src/pages/entry.test.html
Normal file
381
src/pages/entry.test.html
Normal file
|
|
@ -0,0 +1,381 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||
<title>흐름을 향하여 걷는 | 소개</title>
|
||||
<link rel="stylesheet" href="/default.css" />
|
||||
<style>
|
||||
#defaultCanvas0 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.clear {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
#p5 {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tools {
|
||||
padding: 1em 1em;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.penselect {
|
||||
margin: 1em 0em;
|
||||
}
|
||||
</style>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>
|
||||
<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" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg"></div>
|
||||
<div class="content">
|
||||
<div class="first"><a href="/en/entry">EN</a></div>
|
||||
<div class="second"><a href="/" target="_blank">홈</a></div>
|
||||
<div class="notice">
|
||||
<section>
|
||||
<h1>흐름을 향하여 걷는</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>
|
||||
장소<br/>
|
||||
<a href="https://walkingtowardstheflow.xyz">walkingtowardstheflow.xyz</a><br><a href="https://www.youtube.com/c/franceencoree">주한프랑스대사관 문화과 유튜브 채널</a>
|
||||
</p>
|
||||
<p>
|
||||
작가<br/>
|
||||
<a href="https://dianaband.info" target="_blank">다이애나밴드</a> X <a href="https://cgyoon.kr/" target="_blank">윤충근</a> (문의: wonjung24@gmail.com)
|
||||
</p>
|
||||
<p>
|
||||
퍼레이드 구성<br/>
|
||||
무리0 약속들 — 무리1 깃발들 — 무리2 신체들 — 무리3 사물들 — 무리4 누구들
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="participation">
|
||||
<h1>참여 방법</h1>
|
||||
<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>
|
||||
</ol>
|
||||
</section>
|
||||
<section>
|
||||
<h1>소리 제출</h1>
|
||||
<form id="form" method="POST" enctype="multipart/form-data">
|
||||
<ul class="submit">
|
||||
<li>
|
||||
<h3>1. 소리 유형</h3>
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
<h3>5. 소리 모양</h3>
|
||||
<div>
|
||||
<div id="p5">
|
||||
</div>
|
||||
<div class="tools">
|
||||
<div>
|
||||
<input class="penselect" type="radio" value="pencil" name="penselect" id="penselect-pencil" autocomplete="off" checked>
|
||||
<label for="penselect-pencil">연필</label>
|
||||
</div>
|
||||
<div>
|
||||
<input class="penselect" type="radio" value="erasor" name="penselect" id="penselect-erasor" autocomplete="off">
|
||||
<label for="penselect-erasor">지우개</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="clear">다시그리기!</button>
|
||||
</li>
|
||||
<li>
|
||||
<h3>6. 비밀 번호</h3>
|
||||
<input id="pass" name="pass" type="text" maxlength="2" pattern="^\d{2}$" title="암호는 숫자x2개로 해주세요." required />
|
||||
<small>두 자리 숫자를 입력해주세요. 업로드한 소리를 삭제할 때 쓰입니다.</small>
|
||||
</li>
|
||||
<li>
|
||||
<input id="submit" type="submit" value="보내기!" />
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
<section>
|
||||
<h1>소리 목록</h1>
|
||||
<p>제출해주신 소리는 아래 목록에 시간순으로 쌓입니다. 각각의 모양을 클릭하면, 모양에 해당하는 소리를 듣고 소리에 대한 정보를 확인할 수 있습니다.</p>
|
||||
{{#each list}}
|
||||
<div class="items" foldername="{{this.foldername}}">
|
||||
<details>
|
||||
<summary><img class="drawing" src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/pixels.png" /></summary>
|
||||
<audio class="sound" preload="none" controls>
|
||||
<source src="https://p.dianaband.info/public/sound-parade/{{this.foldername}}/audio.mp3" type="audio/mpeg">
|
||||
</audio>
|
||||
<ul class="soundinfo"><hr>
|
||||
<li>유형 | <div class="group">{{this.group}}</div></li><hr>
|
||||
<li>제목 | <div class="title">{{this.title}}</div></li><hr>
|
||||
<li>묘사 | <div class="comment">{{this.comment}}</div></li><hr>
|
||||
</ul>
|
||||
<button class="preview" type="button" onclick="javascript:window.open('/preview/{{this.foldername}}', '_blank');">미리보기</button>
|
||||
<button class="delete" type="button" onclick="del(this)">삭제</button>
|
||||
</details>
|
||||
</div>
|
||||
{{/each}}
|
||||
</section>
|
||||
</div><!-- div class="notice" -->
|
||||
</div><!-- div class="content" -->
|
||||
<script>
|
||||
// -- 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 img;
|
||||
var penselect = "pencil";
|
||||
var scrollable = true;
|
||||
|
||||
function setup() {
|
||||
var cnv = createCanvas(cols*unit+2, rows*unit+2);
|
||||
cnv.parent("p5");
|
||||
img = createGraphics(cols*unit+2, rows*unit+2);
|
||||
document.querySelectorAll('.penselect').forEach(item => item.onclick = () => {
|
||||
penselect = document.querySelector('input[name="penselect"]:checked').value;
|
||||
});
|
||||
//
|
||||
for (var i = 0; i < cols*rows; i++) p.push(0);
|
||||
document.querySelectorAll('.clear').forEach(item => item.onclick = () => {
|
||||
for (let a = 0; a < p.length; a++) p[a] = 0;
|
||||
});
|
||||
}
|
||||
|
||||
function draw() {
|
||||
//clear
|
||||
clear();
|
||||
|
||||
//draw the grid
|
||||
stroke(255);
|
||||
strokeWeight(0.2);
|
||||
for (var c = 0; c < cols; c++) {
|
||||
for (var r = 0; r < rows; r++) {
|
||||
noFill();
|
||||
rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
|
||||
//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);
|
||||
var mouseR = int(mouseY/unit);
|
||||
if (mouseC >= 0 && mouseC < cols && mouseR >= 0 && mouseR < rows) {
|
||||
if (penselect == "pencil") p[mouseC*cols + mouseR] = 1;
|
||||
else if (penselect == "erasor") p[mouseC*cols + mouseR] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
//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);
|
||||
var mouseR = int(touches[0].y/unit);
|
||||
if (mouseC >= 0 && mouseC < cols && mouseR >= 0 && mouseR < rows) {
|
||||
if (scrollable == true) {
|
||||
scrollable = false;
|
||||
document.body.style.marginTop = `-${window.pageYOffset}px`;
|
||||
document.body.style.position = 'fixed';
|
||||
document.body.style.overflowY = 'scroll';
|
||||
}
|
||||
if (penselect == "pencil") p[mouseC*cols + mouseR] = 1;
|
||||
else if (penselect == "erasor") p[mouseC*cols + mouseR] = 0;
|
||||
} else {
|
||||
if (scrollable == false) {
|
||||
scrollable = true;
|
||||
document.body.style.position = '';
|
||||
document.body.style.overflowY = '';
|
||||
if (document.body.style.marginTop) {
|
||||
const scrollTop = -parseInt(document.body.style.marginTop, 10);
|
||||
document.body.style.marginTop = '';
|
||||
window.scrollTo(window.pageXOffset, scrollTop);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//draw img
|
||||
image(img, 0, 0);
|
||||
img.clear();
|
||||
img.strokeWeight(0);
|
||||
img.fill(255);
|
||||
for (var c = 0; c < cols; c++) {
|
||||
for (var r = 0; r < rows; r++) {
|
||||
if (p[c*cols + r] == 1) {
|
||||
img.rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function submitForm(event) {
|
||||
|
||||
//TODO : first check if there is a drawing or not. (pixels)
|
||||
|
||||
//
|
||||
var submit = document.getElementById("submit");
|
||||
submit.setAttribute('disabled', 'disabled');
|
||||
select("html").style('cursor', 'progress');
|
||||
|
||||
//
|
||||
var form = document.getElementById("form");
|
||||
var fd = new FormData(form);
|
||||
|
||||
//
|
||||
var unit = 45; //mask&override 'unit' -> for crispy png.
|
||||
var img2 = createGraphics(cols*unit+2, rows*unit+2);
|
||||
img2.clear();
|
||||
img2.strokeWeight(0);
|
||||
img2.fill(255);
|
||||
for (var c = 0; c < cols; c++) {
|
||||
for (var r = 0; r < rows; r++) {
|
||||
if (p[c*cols + r] == 1) {
|
||||
img2.rect(c*unit+1, r*unit+1, unit, unit);
|
||||
}
|
||||
}
|
||||
}
|
||||
var dataurl = img2.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.onload = () => {
|
||||
alert('감사합니다!');
|
||||
location.reload();
|
||||
//location.assign("/submit");
|
||||
}
|
||||
request.send(fd);
|
||||
|
||||
//
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
const form = document.getElementById('form');
|
||||
form.addEventListener('submit', submitForm);
|
||||
|
||||
//// ---- for 'list' rendering ----
|
||||
|
||||
function del(that) {
|
||||
console.log();
|
||||
let text;
|
||||
let pass = prompt("패스워드를 맞춰보세요!", "숫자2개");
|
||||
if (/^\d{2}$/.test(pass)) {
|
||||
var target = that.parentElement.parentElement.getAttribute('foldername');
|
||||
const trydelete = async () => {
|
||||
const response = await fetch('/delete/' + target + '/' + pass);
|
||||
if (response.ok) {
|
||||
const json = await response.json();
|
||||
return Promise.resolve(json);
|
||||
} else {
|
||||
return Promise.reject('no response.');
|
||||
}
|
||||
}
|
||||
trydelete().then((resp) => {
|
||||
if (resp.result) {
|
||||
alert("지우기 성공!");
|
||||
location.reload();
|
||||
} else {
|
||||
alert("지우기 실패-");
|
||||
}
|
||||
}).catch(console.log);
|
||||
} else {
|
||||
alert("암호는 숫자2개...");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -84,9 +84,9 @@
|
|||
}
|
||||
|
||||
//now, let's orchestrate!
|
||||
var time = 0;
|
||||
var time = 5;
|
||||
Tone.Transport.schedule((t) => mtrig(midx - 1), time);
|
||||
time = time + 12 + Math.random()*(4);
|
||||
time = time + 15 + Math.random()*(4);
|
||||
console.log(time);
|
||||
Tone.Transport.schedule((t) => mtrig(midx), time);
|
||||
time = time + 16 + Math.random()*(4);
|
||||
|
|
|
|||
Loading…
Reference in a new issue