HTMLify
script.js
Views: 174 | Author: abh
/* Script for the play */
/* Preperation for the play */
const input_div = document.getElementById("input-div");
const input_div_pera = document.getElementById("input-div-pera");
const loading_div = document.getElementById("loading-div");
const loading_div_pera = document.getElementById("loading-div-pera");
const play_div = document.getElementById("play-div");
const credit_div = document.getElementById("credit-div");
const image_upload_input = document.getElementById("image-upload-input");
const image_upload_label = document.getElementById("image-upload-label");
const background_image = document.getElementById("background-image");
const her_image = document.getElementById("her-image");
const text_layer = document.getElementById("text-layer");
const ctx = text_layer.getContext("2d");
var describe_audio;
var background_audio;
var her_images = [];
var images = {};
var images_src = [
"book2.jpg", "book.jpg", "books.jpg",
"calligraphy.jpg", "clock.jpg", "music.jpg",
"notes.jpg", "old-books.jpg", "photography.jpg",
"pocket-watch.jpg", "poetry.jpg", "telephone.jpg",
];
function hide_div(div) {
div.style.display = "none";
}
function show_div(div) {
div.style.display = "block";
}
function hide_all() {
hide_div(input_div);
hide_div(loading_div);
hide_div(play_div);
hide_div(credit_div);
}
function goto_loading() {
hide_all();
show_div(loading_div);
load_assets();
}
function goto_credit() {
hide_all();
show_div(credit_div);
}
function goto_input() {
hide_all();
show_div(input_div);
}
function goto_play() {
hide_all();
show_div(play_div);
adjust_text_layer();
play();
}
function process_images() {
input_div_pera.innerText = "Processing images";
const _images = image_upload_input.files;
if (_images.length == 0) {
input_div_pera.innerText = "Please Upload your pics\nMore is better";
return;
}
for (let i=0; i<_images.length; i++) {
let _image = _images[i];
let _img = new Image();
_img.src = URL.createObjectURL(_image);
her_images.push(_img);
}
input_div.innerHTML = `
<div class="title-bar">
<h1 class="title">Describing You</h1>
</div>
<p>Images processed you can click the button for next step</p>
<hr><br>
<button class="btn" onclick="goto_loading()">Next Step</button>`;
}
function load_assets() {
loading_div_pera.innerText = "Loading assets...";
loading_div_pera.innerText = "Loading images...";
const imagePromises = images_src.map(src => {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = src;
img.onload = () => resolve({ src, img });
img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
});
});
loading_div_pera.innerText = "Loading audios...";
describe_audio = new Audio("describe.mp3");
describe_audio.volume = 0.4;
background_audio = new Audio("golden-brown.mp3");
background_audio.volume = 0.3;
background_audio.addEventListener('ended', () => {
background_audio.currentTime = 0;
background_audio.play();
});
const audioPromises = [
new Promise((resolve) => {
describe_audio.addEventListener('canplaythrough', () => resolve(describe_audio));
}),
new Promise((resolve) => {
background_audio.addEventListener('canplaythrough', () => resolve(background_audio));
})
];
Promise.all([...imagePromises, ...audioPromises])
.then(results => {
results.slice(0, images_src.length).forEach(item => {
images[item.src] = item.img;
});
describe_audio = results[results.length - 2]; // describe
background_audio = results[results.length - 1]; // background
loading_div_pera.innerHTML = `<p>Everyting is ready</p>
<br>
<button class="btn" onclick="goto_play()">Play</button>`;
})
.catch(err => {
console.error(err);
loading_div_pera.innerText = "Error loading assets!";
});
}
function change_her_image() {
setTimeout(() => { her_image.style.opacity = 0.5 }, 300);
setTimeout(() => { her_image.style.opacity = 0.4 }, 400);
setTimeout(() => { her_image.style.opacity = 0.3 }, 500);
setTimeout(() => { her_image.style.opacity = 0.2 }, 600);
setTimeout(() => { her_image.style.opacity = 0.1 }, 700);
setTimeout(() => { her_image.src = her_images[Math.floor(Math.random() * her_images.length)].src; }, 900);
setTimeout(() => { her_image.style.opacity = 0.1 }, 1100);
setTimeout(() => { her_image.style.opacity = 0.2 }, 1200);
setTimeout(() => { her_image.style.opacity = 0.3 }, 1300);
setTimeout(() => { her_image.style.opacity = 0.4 }, 1400);
setTimeout(() => { her_image.style.opacity = 0.5 }, 1500);
}
function change_background_image() {
background_image.src = images_src[Math.floor(Math.random() * images_src.length)];
}
function adjust_text_layer() {
text_layer.width = play_div.clientWidth;
text_layer.height = play_div.clientHeight;
}
function describe() {
describe_audio.play();
captions = [
{text: "She is a", time: 310, style: "small", line: 1},
{text: "POEM", time: 840, style: "big", line: 2},
{text: "and a", time: 1150, style: "small", line: 3},
{text: "PAINTING", time: 1350, style: "big", line: 4},
{text: "too", time: 1700, style: "small", line: 5},
{text: "", time: 3300 },
{text: "everything she said", time: 3397, style: "small", line: 1},
{text: "SOUNDED", time: 4238, style: "big", line: 2},
{text: "like a", time: 4567, style: "small", line: 3},
{text: "SONG", time: 5052, style: "big", line: 4},
{text: "", time: 5500 },
{text: "and every silence was", time: 5590, style: "small", line: 2},
{text: "MUSIC", time: 6942, style: "big", line: 4},
{text: "", time: 8500 },
{text: "she's an", time: 8545, style: "small", line: 1},
{text: "OLD SONG", time: 9253, style: "big", line: 2},
{text: "with", time: 9725, style: "small", line: 3},
{text: "YOUNG EYES", time: 9961, style: "big", line: 4},
{text: "", time: 10400 },
{text: "a", time: 10433, style: "small", line: 1},
{text: "VINTAGE HEART", time: 10669, style: "big", line: 2},
{text: "and a", time: 11980, style: "small", line: 3},
{text: "BEAUTIFUL MIND", time: 12340, style: "big", line: 4},
{text: "", time: 13000 },
];
captions.forEach(caption => {
setTimeout(() => {
if (caption.text) {
write_caption(caption);
} else {
ctx.clearRect(0, 0, text_layer.width, text_layer.height);
};
}, caption.time);
});
}
function write_caption(caption) {
// don't why not working outside
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
let pos_x = text_layer.width / 2;
let pos_y = (text_layer.height*0.05) + ((text_layer.height*0.15)*caption.line)
if (caption.style == "small") {
ctx.font = "italic 48px 'Playfair Display'";
ctx.fillText(caption.text, pos_x, pos_y);
} else {
ctx.font = "600 78px 'Playfair Display'";
ctx.fillText(caption.text, pos_x, pos_y);
}
}
function play() {
change_her_image();
setInterval(change_her_image, 1800);
change_background_image();
setInterval(change_background_image, 500);
background_audio.play();
setTimeout(describe, 2000);
}
/* Play Begain */
window.addEventListener("resize", adjust_text_layer);
image_upload_input.addEventListener('change', () => {
image_upload_label.innerText = `Pics selected: ${image_upload_input.files.length}`;
});
hide_all();
show_div(input_div);
// 256