re-importing glitch proj.
This commit is contained in:
parent
c3e3c94d38
commit
ce6ff6768d
6 changed files with 2155 additions and 748 deletions
13
index.js
13
index.js
|
|
@ -1,9 +1,20 @@
|
||||||
var http = require("http");
|
var http = require("http");
|
||||||
var express = require("express");
|
var express = require("express");
|
||||||
var app = express();
|
var app = express();
|
||||||
|
// *--- force https ---*
|
||||||
|
//from : https://glitch.com/edit/#!/force-http-or-https?path=server.js
|
||||||
|
// app.set('trust proxy', true); // <- required
|
||||||
|
// app.use((req, res, next) => {
|
||||||
|
// if(!req.secure) return res.redirect('https://' + req.get('host') + req.url);
|
||||||
|
// next();
|
||||||
|
// });
|
||||||
|
//^--- but, this doesn't work :( for us.
|
||||||
|
// maybe... 'flyio' is interfering the middle (http://pzzz.ink <- flyio -> https://dianaband-paradezzz.glitch.me)
|
||||||
|
// ==> so, we won't do it. but we will let the client do it. -> public/sketch.js #7 ~ #11
|
||||||
var server = http.createServer(app);
|
var server = http.createServer(app);
|
||||||
var port = process.env.PORT || 3000;
|
var port = process.env.PORT || 3000;
|
||||||
server.listen(port);
|
server.listen(port);
|
||||||
|
//
|
||||||
app.use(express.static("public"));
|
app.use(express.static("public"));
|
||||||
var io = require("socket.io")(server, {
|
var io = require("socket.io")(server, {
|
||||||
pingInterval: 1000,
|
pingInterval: 1000,
|
||||||
|
|
@ -41,7 +52,7 @@ var looper;
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
|
|
||||||
//pointer = 20;
|
//pointer = 20;
|
||||||
console.log(score[pointer]);
|
// console.log(score[pointer]);
|
||||||
|
|
||||||
//
|
//
|
||||||
for (var index = 0; index < roommax; index++) {
|
for (var index = 0; index < roommax; index++) {
|
||||||
|
|
|
||||||
1226
package-lock.json
generated
1226
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -1,13 +1,20 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>socket.io example #1</title>
|
<title>-*-parade-*- z/ne z//ne z///ne</title>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
<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, maximum-scale=1, minimum-scale=1, user-scalable=no"
|
||||||
|
/>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.slim.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.min.js"></script>
|
||||||
|
<link
|
||||||
|
href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
|
||||||
<script src="sketch.js"></script>
|
<script src="sketch.js"></script>
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
|
|
||||||
1432
public/score.json
1432
public/score.json
File diff suppressed because it is too large
Load diff
201
public/sketch.js
201
public/sketch.js
|
|
@ -1,47 +1,199 @@
|
||||||
/*
|
/*
|
||||||
global loadSound frameRate background createButton io noCanvas
|
global loadSound frameRate background createButton io noCanvas
|
||||||
select createP windowWidth windowHeight random createImg createDiv
|
select createP windowWidth windowHeight random createImg createDiv
|
||||||
AUTO loadJSON createCanvas
|
AUTO loadJSON createCanvas createRadio selectAll int str
|
||||||
*/
|
*/
|
||||||
|
|
||||||
var socket = io(location.host);
|
// force https
|
||||||
var n = 0;
|
var http_confirm = location.href.split(":")[0];
|
||||||
var fr = 30;
|
if (http_confirm == "http") {
|
||||||
var arr = [];
|
window.location.replace("https://" + location.host);
|
||||||
|
}
|
||||||
|
|
||||||
|
var socket = io("https://dianaband-paradezzz.glitch.me/");
|
||||||
|
var n = 0;
|
||||||
|
var fr = 20;
|
||||||
|
var arr = [];
|
||||||
|
var voice = [];
|
||||||
|
var looper;
|
||||||
var score;
|
var score;
|
||||||
|
let logo;
|
||||||
|
var silence;
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
loadJSON("/score.json", function(json) {
|
loadJSON("/score.json", function(json) {
|
||||||
score = json;
|
score = json;
|
||||||
});
|
});
|
||||||
|
silence = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F_silence.wav?v=1605079435755"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function setup() {
|
function setup() {
|
||||||
noCanvas();
|
noCanvas();
|
||||||
frameRate(fr);
|
frameRate(fr);
|
||||||
|
voice[0] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F018.mp3?v=1605065703249"
|
||||||
|
);
|
||||||
|
voice[1] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F011.mp3?v=1605065704890"
|
||||||
|
);
|
||||||
|
voice[2] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F14.mp3?v=1605065705431"
|
||||||
|
);
|
||||||
|
voice[3] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F012.mp3?v=1605065705852"
|
||||||
|
);
|
||||||
|
voice[4] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F17.mp3?v=1605065706201"
|
||||||
|
);
|
||||||
|
voice[5] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F11.mp3?v=1605065707520"
|
||||||
|
);
|
||||||
|
voice[6] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F013.mp3?v=1605065707851"
|
||||||
|
);
|
||||||
|
voice[7] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F022.mp3?v=1605065708590"
|
||||||
|
);
|
||||||
|
voice[8] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F020.mp3?v=1605065708800"
|
||||||
|
);
|
||||||
|
voice[9] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F021.mp3?v=1605065709256"
|
||||||
|
);
|
||||||
|
voice[10] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F014.mp3?v=1605065709488"
|
||||||
|
);
|
||||||
|
voice[11] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F16.mp3?v=1605065710421"
|
||||||
|
);
|
||||||
|
voice[12] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F015.mp3?v=1605065710641"
|
||||||
|
);
|
||||||
|
voice[13] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F18.mp3?v=1605065710830"
|
||||||
|
);
|
||||||
|
voice[14] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F12.mp3?v=1605065711069"
|
||||||
|
);
|
||||||
|
voice[15] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F019.mp3?v=1605065711343"
|
||||||
|
);
|
||||||
|
voice[16] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F13.mp3?v=1605065711531"
|
||||||
|
);
|
||||||
|
voice[17] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F016.mp3?v=1605065712590"
|
||||||
|
);
|
||||||
|
voice[18] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F017.mp3?v=1605065712783"
|
||||||
|
);
|
||||||
|
voice[19] = loadSound(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2F023.mp3?v=1605065713039"
|
||||||
|
);
|
||||||
|
randomvoiceplay();
|
||||||
}
|
}
|
||||||
|
|
||||||
socket.on('connect', function() {
|
//
|
||||||
socket.emit("room", 0, function(res) {
|
var myroom = -1;
|
||||||
if (res) {
|
var plogo;
|
||||||
console.log("entered the room.");
|
var intro;
|
||||||
} else {
|
var ready;
|
||||||
console.log("rejected!");
|
//
|
||||||
|
socket.on("connect", function() {
|
||||||
|
console.log("connected!");
|
||||||
|
//
|
||||||
|
|
||||||
|
if (myroom == -1 && selectAll(".roomsel").length == 0) {
|
||||||
|
//initial connection -> ask the room number.
|
||||||
|
|
||||||
|
// plogo.position(windowWidth/2, 50);
|
||||||
|
plogo = createImg(
|
||||||
|
"https://cdn.glitch.com/b121cdbd-e958-4ffd-99dd-76922c2c225b%2Flogo02.png?v=1604966478405",
|
||||||
|
"퍼레이드진진진 로고",
|
||||||
|
"",
|
||||||
|
function(im) {
|
||||||
|
im.show();
|
||||||
|
im.size(windowWidth, AUTO);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
intro = createP(
|
||||||
|
"흘러가는 진 퍼레이드에 오신거 환영합니다. <br>*본인의 기기로 보고 싶은 퍼레이드의 구간을 고르세요. <br>여러 개의 기기로 퍼레이드를 연결해서 볼 수 있습니다.<br>*이 퍼레이드에서 흘러가는 진들은 각자의 이야기를 가지고 있습니다. <br>대체텍스트가 포함되어 있어 스크린리더를 통해 이야기를 음성으로 들을 수 있습니다."
|
||||||
|
);
|
||||||
|
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());
|
||||||
|
|
||||||
|
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
|
||||||
|
);
|
||||||
|
}, 500);
|
||||||
|
} 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);
|
||||||
|
});
|
||||||
|
roomsel.child(b);
|
||||||
}
|
}
|
||||||
});
|
} else {
|
||||||
|
//re-connection -> just connect to remembered room!
|
||||||
|
socket.emit("room", myroom, function(res) {
|
||||||
|
if (res) {
|
||||||
|
console.log("entered the room -> " + myroom);
|
||||||
|
} else {
|
||||||
|
console.log("rejected!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
socket.on("post", function(post) {
|
socket.on("post", function(post) {
|
||||||
console.log(post);
|
console.log(post);
|
||||||
var object = post.object;
|
var object = post.object;
|
||||||
var img = createImg(object.src, "", "", function(im) {
|
|
||||||
|
var img = createImg(object.src, object.alt, "", function(im) {
|
||||||
im.show();
|
im.show();
|
||||||
im.size(windowHeight*(object.size.base + object.size.random*Math.random())/100, AUTO);
|
im.size(
|
||||||
im.position(windowWidth, windowHeight*(object.y.base + object.y.random*Math.random())/100);
|
(windowHeight * (object.size.base + object.size.random * Math.random())) /
|
||||||
|
100,
|
||||||
|
AUTO
|
||||||
|
);
|
||||||
|
im.position(
|
||||||
|
windowWidth,
|
||||||
|
(windowHeight * (object.y.base + object.y.random * Math.random())) / 100
|
||||||
|
);
|
||||||
im.attribute("data-type", object.type);
|
im.attribute("data-type", object.type);
|
||||||
im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
|
im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
|
||||||
|
|
||||||
//
|
//
|
||||||
if (object.type == 'icon') {
|
if (object.type == "icon") {
|
||||||
im.class("rotate");
|
im.class("rotate");
|
||||||
im.style("animation-duration", object.rotate + "s");
|
im.style("animation-duration", object.rotate + "s");
|
||||||
var orgs = im.style("transform-origin").split(" ");
|
var orgs = im.style("transform-origin").split(" ");
|
||||||
|
|
@ -64,11 +216,24 @@ function draw() {
|
||||||
x = x - windowWidth / (fr * showtime);
|
x = x - windowWidth / (fr * showtime);
|
||||||
|
|
||||||
//
|
//
|
||||||
if (type == 'icon') { }
|
if (type == "icon") {
|
||||||
|
img.style("z-index", "-1");
|
||||||
|
}
|
||||||
|
3;
|
||||||
|
|
||||||
img.position(x, y);
|
img.position(x, y);
|
||||||
if (x < -500) {
|
|
||||||
|
if (x < -windowHeight*0.9) {
|
||||||
img.remove();
|
img.remove();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function randomvoiceplay() {
|
||||||
|
(looper = function(timeout) {
|
||||||
|
setTimeout(function() {
|
||||||
|
voice[int(random(19))].play();
|
||||||
|
looper(random(8000, 12000));
|
||||||
|
}, timeout);
|
||||||
|
})(8000);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,16 @@
|
||||||
html, body {
|
html,
|
||||||
|
body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-family: Monaco;
|
margin: 1vw;
|
||||||
|
font-size: 3vw;
|
||||||
|
font-family: "Do Hyeon", sans-serif;
|
||||||
|
color: rgb(255, 64, 180);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes rolling {
|
@keyframes rolling {
|
||||||
|
|
@ -17,3 +22,30 @@ p {
|
||||||
.rotate {
|
.rotate {
|
||||||
animation: rolling 3s linear infinite;
|
animation: rolling 3s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.roomsel {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roomsel button {
|
||||||
|
width: 10%;
|
||||||
|
margin: auto;
|
||||||
|
padding: 3vw 0vw;
|
||||||
|
background-color: white;
|
||||||
|
border: 0.5vw solid rgb(255, 64, 180);
|
||||||
|
border-radius: 1vw;
|
||||||
|
color: rgb(255, 64, 180);
|
||||||
|
font-size: 5vw;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.roomsel button:hover {
|
||||||
|
background-color: rgb(255, 64, 180, 0.1);
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
margin: 2vw;
|
||||||
|
font-size: 3vw;
|
||||||
|
font-family: "Do Hyeon", sans-serif;
|
||||||
|
color: rgb(255, 64, 180);
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue