335 lines
8.2 KiB
PHP
335 lines
8.2 KiB
PHP
<?php
|
|
|
|
/**
|
|
* overdose - Showcase images in random order - Flood recipients brains
|
|
*
|
|
* @author Victor Giers <vgiers@web.de>
|
|
*
|
|
**/
|
|
|
|
//127.0.0.1/Master/Alles/overdose/index.php?t=Beautiful Brutalism&d=brutalismus&s=200&smax=40&smin=2000&i=1
|
|
|
|
if(isset($_GET['d'])){
|
|
$dir = $_GET['d'];
|
|
} else {
|
|
echo("Technische Schwierigkeiten :(");
|
|
exit();
|
|
}
|
|
$title = isset($_GET['t'])? $_GET['t'] : "Overdose: /" . $dir ."/";
|
|
$sourcelinks = isset($_GET['l'])? $_GET['l'] : [];
|
|
$initial_speed = isset($_GET['s'])? $_GET['s'] : 200; //in Milliseconds (less = faster)
|
|
|
|
//Show playbutton and speedslider and allow mouse controls?
|
|
|
|
$allowInterface = isset($_GET['noui']) ? false : true;
|
|
|
|
//User interface options
|
|
$min_speed = isset($_GET['smin']) ? $_GET['smin'] : 2000;
|
|
$max_speed = isset($_GET['smax']) ? $_GET['smax'] : 40; //must be > 0
|
|
|
|
$steps = 10;
|
|
|
|
//Some web servers don't offer glob_brace, if this is the case for you replace >> .{jpg,png,bmp}", GLOB_BRACE << with >> " << in the following line.
|
|
//This way you'll have to take care to have only image files in your directory.
|
|
//$images = glob("$dir/*");
|
|
$images = glob("$dir/*.{jpg,JPG,jpeg,JPEG,png,PNG,bmp,BMP}", GLOB_BRACE);
|
|
|
|
$js_images = json_encode($images);
|
|
?>
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
body{
|
|
overflow: hidden;
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<script src="p5.min.js"></script>
|
|
<script src="p5.dom.min.js"></script>
|
|
<script>
|
|
|
|
var canvas;
|
|
|
|
//clock
|
|
var MS_PER_UPDATE = <?=$initial_speed ?>;
|
|
let diff = <?=$max_speed ?> - <?=$min_speed ?> / <?=$steps ?>;
|
|
var previous;
|
|
var lag = 0.0;
|
|
|
|
//image vars
|
|
let images = [];
|
|
var previousImages = [];
|
|
var currentImg = 0;
|
|
var imageCount = 0;
|
|
var imgW;
|
|
var imgH;
|
|
|
|
//interface & menu
|
|
var angle = 0;
|
|
var loading = true;
|
|
var menu = true;
|
|
var loadCounter = 0;
|
|
var pause = false;
|
|
var lock = false;
|
|
let startbutton, speedslider;
|
|
|
|
<?="let imagePaths = ". $js_images . ";\n"?>
|
|
|
|
function imageLoader(imagePath){
|
|
loadImage(imagePath, imageLoaded);
|
|
|
|
function imageLoaded(image) {
|
|
images.push(image);
|
|
loadCounter++;
|
|
if (loadCounter == imageCount) {
|
|
startbutton.show();
|
|
loading = false;
|
|
}
|
|
}
|
|
}
|
|
|
|
function start(){
|
|
images = shuffle(images);
|
|
startbutton.hide();
|
|
<?php
|
|
if($allowInterface){
|
|
?>
|
|
speedslider.show();
|
|
<?php
|
|
}
|
|
?>
|
|
lock = true;
|
|
menu = false;
|
|
}
|
|
var playImage;
|
|
function setup() {
|
|
canvas = createCanvas(window.innerWidth, window.innerHeight);
|
|
|
|
|
|
startbutton = createButton('Go');
|
|
startbutton.position(width/2-startbutton.width/2,height/2-startbutton.height/2);
|
|
startbutton.mousePressed(start);
|
|
startbutton.hide();
|
|
|
|
|
|
<?php
|
|
if($allowInterface){
|
|
?>
|
|
speedslider = createSlider(<?=$max_speed ?>, <?=$min_speed ?>, <?=$initial_speed ?>);
|
|
speedslider.style('width', '100px');
|
|
speedslider.hide();
|
|
speedslider.position(20,height-30);
|
|
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
|
|
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();
|
|
imageMode(CENTER);
|
|
fill(255,255,255);
|
|
}
|
|
|
|
|
|
function update(){
|
|
var imgRatio = images[currentImg].width / images[currentImg].height;
|
|
|
|
if(!pause){
|
|
currentImg++;
|
|
if(currentImg == images.length){
|
|
currentImg = 0;
|
|
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() {
|
|
textAlign(CENTER);
|
|
textSize(10);
|
|
background(0);
|
|
if(menu){
|
|
|
|
noStroke();
|
|
fill(255);
|
|
textSize(30);
|
|
textStyle(BOLD);
|
|
text("<?=$title ?>",width/2, height/2 - 50);
|
|
textStyle(NORMAL);
|
|
textSize(10);
|
|
|
|
stroke(255);
|
|
noFill();
|
|
strokeWeight(1);
|
|
rect(width/2 - 100, height/2+30, 200, 20);
|
|
|
|
noStroke();
|
|
fill(100);
|
|
var w = 200 * loadCounter / imageCount;
|
|
rect(width/2 - 100, height/2+30, w, 20);
|
|
|
|
<?php
|
|
$substring = "Seizure warning!\\nYou are about to look at a lot of images in random order very fast.\\n\\n";
|
|
if($allowInterface){
|
|
$substring .= "Click on the screen to pause and look at the full image.\\nUse the mouse wheel to control the speed.\\n\\n";
|
|
}
|
|
$substring .= "Note: I do not have any licenses for these images.\\nYou can look up their origin on https://images.google.com/\\n";
|
|
|
|
if (sizeof($sourcelinks) > 0){
|
|
$substring .= sizeof($links) > 1 ? 'These are sources' : 'This is one source' . ' of the images:\n';
|
|
foreach ($sourcelinks as $link) {
|
|
$substring .= $link.'\n';
|
|
}
|
|
}
|
|
?>
|
|
text("<?=$substring ?>", width/2, height/2 + 90);
|
|
|
|
|
|
if (loading){
|
|
text("Downloaded " + loadCounter + " / " + imageCount + " images...", width/2, height/2 + 70);
|
|
translate(width/2, height/2);
|
|
rotate(angle);
|
|
strokeWeight(3);
|
|
stroke(255);
|
|
line(0, 0, 12, 0);
|
|
angle += 0.1;
|
|
} else {
|
|
text("Downloaded " + loadCounter + " / " + imageCount + " images, ready to go.", width/2, height/2 + 70);
|
|
}
|
|
|
|
} else {
|
|
var current = millis();
|
|
var elapsed = current - previous;
|
|
previous = current;
|
|
lag += elapsed;
|
|
while (lag >= MS_PER_UPDATE){
|
|
update();
|
|
lag -= MS_PER_UPDATE;
|
|
}
|
|
|
|
try{
|
|
image(images[currentImg], width/2, height/2, imgW, imgH);
|
|
}
|
|
catch{
|
|
console.log("Failed displaying image " + images[currentImg]);
|
|
}
|
|
|
|
|
|
<?php
|
|
if($allowInterface){
|
|
?>
|
|
fill(255,100);
|
|
noStroke();
|
|
if(pause){
|
|
triangle(55,height-80,55, height-50, 85, height-65);
|
|
} else {
|
|
rect(55,height-80,12,30);
|
|
rect(73,height-80,12,30)
|
|
}
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
<?php
|
|
if($allowInterface){
|
|
?>
|
|
MS_PER_UPDATE = speedslider.value();
|
|
<?php
|
|
}
|
|
?>
|
|
}
|
|
}
|
|
function overSlider() {
|
|
if(mouseX > 0 && mouseX < 160 && mouseY > height - 30 && mouseY < height) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
};
|
|
|
|
<?php
|
|
if($allowInterface){
|
|
?>
|
|
function mousePressed(){
|
|
if(!menu && !overSlider()){
|
|
if(!lock){
|
|
if(mouseButton === LEFT){
|
|
if(!loading) pause = !pause;
|
|
update();
|
|
}
|
|
} else {
|
|
lock = false;
|
|
}
|
|
}
|
|
}
|
|
function mouseWheel(event) {
|
|
if(!(MS_PER_UPDATE - diff*Math.sign(event.delta) < <?=$max_speed ?>) && !(MS_PER_UPDATE - diff*Math.sign(event.delta) > <?=$min_speed ?>) ){
|
|
MS_PER_UPDATE -= diff*Math.sign(event.delta);
|
|
speedslider.value(MS_PER_UPDATE);
|
|
}
|
|
}
|
|
<?php
|
|
}
|
|
?>
|
|
|
|
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;
|
|
resizeCanvas(w,h);
|
|
width = w;
|
|
height = h;
|
|
startbutton.position(width/2-startbutton.width/2,height/2-startbutton.height/2);
|
|
|
|
<?php
|
|
if($allowInterface){
|
|
?>
|
|
speedslider.position(20,height-30);
|
|
<?php
|
|
}
|
|
?>
|
|
};
|
|
</script>
|
|
<title><?=$title ?></title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
</body>
|
|
|
|
</html>
|