266 lines
7.6 KiB
JavaScript
266 lines
7.6 KiB
JavaScript
/*
|
|
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") {
|
|
// window.location.replace("https://" + location.host);
|
|
// }
|
|
|
|
var socket = io(location.host);
|
|
var n = 0;
|
|
var fr = 20;
|
|
var arr = [];
|
|
var voice = [];
|
|
var looper;
|
|
var score;
|
|
let logo;
|
|
var silence;
|
|
|
|
function preload() {
|
|
loadJSON("/score.json", function(json) {
|
|
score = json;
|
|
});
|
|
silence = loadSound("./audio/_silence.wav");
|
|
}
|
|
|
|
function setup() {
|
|
noCanvas();
|
|
if (windowWidth > 1500 && windowWidth > windowHeight) {
|
|
fr = 30;
|
|
} else {
|
|
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;
|
|
//
|
|
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("./imgs/logo02.png", "퍼레이드진진진 로고", "", 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
|
|
);
|
|
}, 1000);
|
|
} 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) {
|
|
console.log(post);
|
|
|
|
//
|
|
var object = post.object;
|
|
|
|
var img = createImg(object.src, object.alt, "", function(im) {
|
|
var sound = loadSound(object.audio, function(snd) {
|
|
//로딩이 끝나면, play!
|
|
snd.loop();
|
|
|
|
//로딩이 끝나면, show!
|
|
im.show();
|
|
|
|
//그림의 크기와 초기 위치 ==> 가로 보기인 경우
|
|
var width = 0;
|
|
if (windowWidth > windowHeight) {
|
|
|
|
width = (windowHeight * (object.size.base * 1.4 + object.size.random * Math.random())) / 100; // 좀더 크게 + 40% (ratio)
|
|
im.size(width, AUTO);
|
|
|
|
im.position(
|
|
windowWidth * 1.5, // +150% 에서 생성되어서 접근 (sound fade-in)
|
|
(windowHeight * (object.y.base + object.y.random * Math.random()) * 0.5) / 100 // 좀더 위로 위로 - 50% (ratio)
|
|
);
|
|
|
|
//그림의 크기와 초기 위치 ==> 세로 보기인 경우
|
|
} else {
|
|
|
|
width = (windowHeight * (object.size.base + object.size.random * Math.random())) / 100; // json에서 정한 크기 그대로. (ratio)
|
|
im.size(width, AUTO);
|
|
|
|
im.position(
|
|
windowWidth * 1.5, // +150% 에서 생성되어서 접근 (sound fade-in)
|
|
(windowHeight * (object.y.base + object.y.random * Math.random())) / 100 // json에서 정한 위치 그대로. (ratio)
|
|
);
|
|
}
|
|
|
|
//추가 정보들
|
|
im.attribute("data-type", object.type);
|
|
im.attribute("data-showtime", object.showtime / 1000); //milli-sec. -> seconds.
|
|
|
|
//'아이콘' 들은 애니메이션을 시켜줘야 함...
|
|
if (object.type == "icon") {
|
|
//
|
|
im.class("rotate");
|
|
im.style("animation-duration", object.rotate + "s");
|
|
var orgs = im.style("transform-origin").split(" ");
|
|
var str = parseFloat(orgs[0]) + object.pivot.x + "px";
|
|
str = str + " " + parseFloat(orgs[1]) + object.pivot.y + "px";
|
|
im.style("transform-origin", str);
|
|
//
|
|
}
|
|
|
|
//로딩이 다 되면, rendering array에 추가.
|
|
var bundle = {
|
|
ref: object,
|
|
img: im,
|
|
sound: snd,
|
|
width: width
|
|
};
|
|
arr.push(bundle);
|
|
});
|
|
});
|
|
|
|
//첨에는 hide
|
|
img.hide();
|
|
});
|
|
|
|
function draw() {
|
|
for (var i = arr.length - 1; i >= 0; i -= 1) {
|
|
var bundle = arr[i];
|
|
var img = bundle.img;
|
|
var showtime = parseFloat(img.attribute("data-showtime"));
|
|
var type = img.attribute("data-type");
|
|
var x = img.position().x;
|
|
var y = img.position().y;
|
|
y = y + random(-1, 1);
|
|
x = x - windowWidth / (fr * showtime);
|
|
|
|
//
|
|
if (type == "icon") {
|
|
img.style("z-index", "-1");
|
|
}
|
|
3;
|
|
|
|
img.position(x, y);
|
|
var pan = (x / windowWidth) * 2 - 1;
|
|
|
|
//panning
|
|
var snd = bundle.sound;
|
|
if (x >= -bundle.width && x < windowWidth) {
|
|
pan = ((x + bundle.width) / (windowWidth + bundle.width)) * 2 - 1;
|
|
snd.pan(pan);
|
|
snd.setVolume(1);
|
|
} else {
|
|
var range;
|
|
var knob;
|
|
if (x >= windowWidth) {
|
|
range = windowWidth / 2;
|
|
knob = x - windowWidth;
|
|
snd.pan(1);
|
|
snd.setVolume(1 - knob / range);
|
|
} else if (x < -bundle.width) {
|
|
range = windowWidth / 2;
|
|
knob = (x + bundle.width) * -1;
|
|
snd.pan(-1);
|
|
snd.setVolume(1 - knob / range);
|
|
}
|
|
}
|
|
|
|
//remove at -50% (sound fade-out)
|
|
var exit_x = -bundle.width - windowWidth/2;
|
|
if (x < exit_x) {
|
|
img.remove();
|
|
snd.stop();
|
|
arr.splice(i, 1);
|
|
}
|
|
}
|
|
}
|
|
|
|
// function randomvoiceplay() {
|
|
// (looper = function(timeout) {
|
|
// setTimeout(function() {
|
|
// voice[int(random(19))].play();
|
|
// looper(random(8000, 12000));
|
|
// }, timeout);
|
|
// })(8000);
|
|
// }
|