179 lines
3.9 KiB
PHP
179 lines
3.9 KiB
PHP
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<style>
|
||
|
|
body{
|
||
|
|
overflow: hidden;
|
||
|
|
margin: 0;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script src="p5.min.js"></script>
|
||
|
|
<script>
|
||
|
|
|
||
|
|
var canvas;
|
||
|
|
|
||
|
|
//clock
|
||
|
|
var MS_PER_UPDATE = 50;
|
||
|
|
var previous;
|
||
|
|
var lag = 0.0;
|
||
|
|
|
||
|
|
let images = [];
|
||
|
|
var previousImages = [];
|
||
|
|
var currentImg = 0;
|
||
|
|
var imageCount = 0;
|
||
|
|
var imgW;
|
||
|
|
var imgH;
|
||
|
|
|
||
|
|
var angle = 0;
|
||
|
|
|
||
|
|
var loading = true;
|
||
|
|
var loadCounter = 0;
|
||
|
|
var pause = false;
|
||
|
|
var randomImage = true;
|
||
|
|
|
||
|
|
<?php
|
||
|
|
$dir ="pics";
|
||
|
|
$images = glob("$dir/*.{jpg,png,bmp}", GLOB_BRACE);
|
||
|
|
$js_images = json_encode($images);
|
||
|
|
echo "let imagePaths = ". $js_images . ";\n";
|
||
|
|
?>
|
||
|
|
|
||
|
|
function imageLoader(imagePath){
|
||
|
|
loadImage(imagePath, imageLoaded);
|
||
|
|
|
||
|
|
function imageLoaded(image) {
|
||
|
|
console.log(imagePath);
|
||
|
|
images.push(image);
|
||
|
|
//songs[index] = sound;
|
||
|
|
loadCounter++;
|
||
|
|
console.log(loadCounter, " ", imageCount);
|
||
|
|
if (loadCounter == imageCount) {
|
||
|
|
loading = false;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function setup() {
|
||
|
|
canvas = createCanvas(window.innerWidth, window.innerHeight);
|
||
|
|
if (imageCount == 0) imageCount = imagePaths.length;
|
||
|
|
for (var i = 0; i < imageCount; i++) {
|
||
|
|
try{
|
||
|
|
imageLoader(imagePaths[i]);
|
||
|
|
}
|
||
|
|
catch{
|
||
|
|
console.log("Failed loading image, path = " + imagePaths[i]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
previous = millis();
|
||
|
|
console.log(floor(previous) + ' milliseconds');
|
||
|
|
imageMode(CENTER);
|
||
|
|
textAlign(CENTER);
|
||
|
|
fill(255,255,255);
|
||
|
|
}
|
||
|
|
|
||
|
|
function update(){
|
||
|
|
var imgRatio = images[currentImg].width / images[currentImg].height;
|
||
|
|
|
||
|
|
if(!pause){
|
||
|
|
//if(!randomImage){
|
||
|
|
currentImg++;
|
||
|
|
if(currentImg == images.length){
|
||
|
|
currentImg = 0;
|
||
|
|
if(randomImage){
|
||
|
|
images = shuffle(images);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(width * height / imgRatio / height > height){
|
||
|
|
var imgWindowRatio = (pause)? height / images[currentImg].height : width / images[currentImg].width;
|
||
|
|
} else {
|
||
|
|
var imgWindowRatio = (pause) ? width / images[currentImg].width : height / images[currentImg].height;
|
||
|
|
}
|
||
|
|
imgW = images[currentImg].width*imgWindowRatio;
|
||
|
|
imgH = images[currentImg].height*imgWindowRatio;
|
||
|
|
}
|
||
|
|
|
||
|
|
function draw() {
|
||
|
|
if(loading){
|
||
|
|
|
||
|
|
background(51);
|
||
|
|
noStroke();
|
||
|
|
|
||
|
|
text("Downloaded " + loadCounter + " / " + imageCount + " images...", width/2, height/5*3 - 20);
|
||
|
|
|
||
|
|
stroke(255);
|
||
|
|
noFill();
|
||
|
|
rect(width/2 - 100, height/5*3, 200, 20);
|
||
|
|
|
||
|
|
noStroke();
|
||
|
|
fill(255, 100);
|
||
|
|
var w = 200 * loadCounter / imageCount;
|
||
|
|
rect(width/2 - 100, height/5*3, w, 20);
|
||
|
|
translate(width/2, height/2);
|
||
|
|
rotate(angle);
|
||
|
|
strokeWeight(4);
|
||
|
|
stroke(255);
|
||
|
|
line(0, 0, 30, 0);
|
||
|
|
angle += 0.1;
|
||
|
|
} else {
|
||
|
|
|
||
|
|
var current = millis();
|
||
|
|
var elapsed = current - previous;
|
||
|
|
previous = current;
|
||
|
|
lag += elapsed;
|
||
|
|
while (lag >= MS_PER_UPDATE){
|
||
|
|
update();
|
||
|
|
lag -= MS_PER_UPDATE;
|
||
|
|
}
|
||
|
|
|
||
|
|
//render
|
||
|
|
background(0);
|
||
|
|
|
||
|
|
try{
|
||
|
|
image(images[currentImg], width/2, height/2, imgW, imgH);
|
||
|
|
}
|
||
|
|
catch{
|
||
|
|
console.log("Failed displaying image " + images[currentImg]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function mouseClicked(){
|
||
|
|
pause = !pause;
|
||
|
|
}
|
||
|
|
|
||
|
|
var shuffle = function (array) {
|
||
|
|
var currentIndex = array.length;
|
||
|
|
var temporaryValue, randomIndex;
|
||
|
|
// While there remain elements to shuffle...
|
||
|
|
while (0 !== currentIndex) {
|
||
|
|
// Pick a remaining element...
|
||
|
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
||
|
|
currentIndex -= 1;
|
||
|
|
// And swap it with the current element.
|
||
|
|
temporaryValue = array[currentIndex];
|
||
|
|
array[currentIndex] = array[randomIndex];
|
||
|
|
array[randomIndex] = temporaryValue;
|
||
|
|
}
|
||
|
|
return array;
|
||
|
|
};
|
||
|
|
|
||
|
|
window.onresize = function() {
|
||
|
|
var w = window.innerWidth;
|
||
|
|
var h = window.innerHeight;
|
||
|
|
canvas.resize(w,h);
|
||
|
|
width = w;
|
||
|
|
height = h;
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|