|
|
|
|
|
|
|
|
|
|
|
<?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> |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<html> |
|
|
<head> |
|
|
<head> |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |
|
|
<script src="p5.min.js"></script> |
|
|
<script src="p5.min.js"></script> |
|
|
|
|
|
<script src="p5.dom.min.js"></script> |
|
|
<script> |
|
|
<script> |
|
|
|
|
|
|
|
|
var canvas; |
|
|
var canvas; |
|
|
|
|
|
|
|
|
//clock |
|
|
//clock |
|
|
var MS_PER_UPDATE = 50; |
|
|
|
|
|
|
|
|
var MS_PER_UPDATE = <?=$initial_speed ?>; |
|
|
|
|
|
let diff = <?=$max_speed ?> - <?=$min_speed ?> / <?=$steps ?>; |
|
|
var previous; |
|
|
var previous; |
|
|
var lag = 0.0; |
|
|
var lag = 0.0; |
|
|
|
|
|
|
|
|
|
|
|
//image vars |
|
|
let images = []; |
|
|
let images = []; |
|
|
var previousImages = []; |
|
|
var previousImages = []; |
|
|
var currentImg = 0; |
|
|
var currentImg = 0; |
|
|
|
|
|
|
|
|
var imgW; |
|
|
var imgW; |
|
|
var imgH; |
|
|
var imgH; |
|
|
|
|
|
|
|
|
|
|
|
//interface & menu |
|
|
var angle = 0; |
|
|
var angle = 0; |
|
|
|
|
|
|
|
|
var loading = true; |
|
|
var loading = true; |
|
|
|
|
|
var menu = true; |
|
|
var loadCounter = 0; |
|
|
var loadCounter = 0; |
|
|
var pause = false; |
|
|
var pause = false; |
|
|
var randomImage = true; |
|
|
|
|
|
|
|
|
|
|
|
<?php |
|
|
|
|
|
$dir ="pics"; |
|
|
|
|
|
$images = glob("$dir/*.{jpg,png,bmp}", GLOB_BRACE); //strato version doesnt check for imagetype!!! |
|
|
|
|
|
|
|
|
var lock = false; |
|
|
|
|
|
let startbutton, speedslider; |
|
|
|
|
|
|
|
|
$js_images = json_encode($images); |
|
|
|
|
|
|
|
|
|
|
|
echo "let imagePaths = ". $js_images . ";\n"; |
|
|
|
|
|
?> |
|
|
|
|
|
|
|
|
<?="let imagePaths = ". $js_images . ";\n"?> |
|
|
|
|
|
|
|
|
function imageLoader(imagePath){ |
|
|
function imageLoader(imagePath){ |
|
|
loadImage(imagePath, imageLoaded); |
|
|
loadImage(imagePath, imageLoaded); |
|
|
|
|
|
|
|
|
function imageLoaded(image) { |
|
|
function imageLoaded(image) { |
|
|
console.log(imagePath); |
|
|
|
|
|
images.push(image); |
|
|
images.push(image); |
|
|
//songs[index] = sound; |
|
|
|
|
|
loadCounter++; |
|
|
loadCounter++; |
|
|
console.log(loadCounter, " ", imageCount); |
|
|
|
|
|
if (loadCounter == imageCount) { |
|
|
if (loadCounter == imageCount) { |
|
|
|
|
|
startbutton.show(); |
|
|
loading = false; |
|
|
loading = false; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function start(){ |
|
|
|
|
|
images = shuffle(images); |
|
|
|
|
|
startbutton.hide(); |
|
|
|
|
|
<?php |
|
|
|
|
|
if($allowInterface){ |
|
|
|
|
|
?> |
|
|
|
|
|
speedslider.show(); |
|
|
|
|
|
<?php |
|
|
|
|
|
} |
|
|
|
|
|
?> |
|
|
|
|
|
lock = true; |
|
|
|
|
|
menu = false; |
|
|
|
|
|
} |
|
|
|
|
|
var playImage; |
|
|
function setup() { |
|
|
function setup() { |
|
|
canvas = createCanvas(window.innerWidth, window.innerHeight); |
|
|
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; |
|
|
if (imageCount == 0) imageCount = imagePaths.length; |
|
|
for (var i = 0; i < imageCount; i++) { |
|
|
for (var i = 0; i < imageCount; i++) { |
|
|
try{ |
|
|
try{ |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
previous = millis(); |
|
|
previous = millis(); |
|
|
console.log(floor(previous) + ' milliseconds'); |
|
|
|
|
|
imageMode(CENTER); |
|
|
imageMode(CENTER); |
|
|
textAlign(CENTER); |
|
|
|
|
|
fill(255,255,255); |
|
|
fill(255,255,255); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function update(){ |
|
|
function update(){ |
|
|
var imgRatio = images[currentImg].width / images[currentImg].height; |
|
|
var imgRatio = images[currentImg].width / images[currentImg].height; |
|
|
|
|
|
|
|
|
if(!pause){ |
|
|
if(!pause){ |
|
|
//if(!randomImage){ |
|
|
|
|
|
currentImg++; |
|
|
currentImg++; |
|
|
if(currentImg == images.length){ |
|
|
if(currentImg == images.length){ |
|
|
currentImg = 0; |
|
|
currentImg = 0; |
|
|
if(randomImage){ |
|
|
|
|
|
images = shuffle(images); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
images = shuffle(images); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
if(width * height / imgRatio / height > height){ |
|
|
if(width * height / imgRatio / height > height){ |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function draw() { |
|
|
function draw() { |
|
|
if(loading){ |
|
|
|
|
|
|
|
|
textAlign(CENTER); |
|
|
|
|
|
textSize(10); |
|
|
|
|
|
background(0); |
|
|
|
|
|
if(menu){ |
|
|
|
|
|
|
|
|
background(51); |
|
|
|
|
|
noStroke(); |
|
|
noStroke(); |
|
|
|
|
|
|
|
|
text("Downloaded " + loadCounter + " / " + imageCount + " images...", width/2, height/5*3 - 20); |
|
|
|
|
|
|
|
|
fill(255); |
|
|
|
|
|
textSize(30); |
|
|
|
|
|
textStyle(BOLD); |
|
|
|
|
|
text("<?=$title ?>",width/2, height/2 - 50); |
|
|
|
|
|
textStyle(NORMAL); |
|
|
|
|
|
textSize(10); |
|
|
|
|
|
|
|
|
stroke(255); |
|
|
stroke(255); |
|
|
noFill(); |
|
|
noFill(); |
|
|
rect(width/2 - 100, height/5*3, 200, 20); |
|
|
|
|
|
|
|
|
strokeWeight(1); |
|
|
|
|
|
rect(width/2 - 100, height/2+30, 200, 20); |
|
|
|
|
|
|
|
|
noStroke(); |
|
|
noStroke(); |
|
|
fill(255, 100); |
|
|
|
|
|
|
|
|
fill(100); |
|
|
var w = 200 * loadCounter / imageCount; |
|
|
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 { |
|
|
|
|
|
|
|
|
rect(width/2 - 100, height/2+30, w, 20); |
|
|
|
|
|
|
|
|
var current = millis(); |
|
|
|
|
|
var elapsed = current - previous; |
|
|
|
|
|
previous = current; |
|
|
|
|
|
lag += elapsed; |
|
|
|
|
|
while (lag >= MS_PER_UPDATE){ |
|
|
|
|
|
update(); |
|
|
|
|
|
lag -= MS_PER_UPDATE; |
|
|
|
|
|
|
|
|
<?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"; |
|
|
|
|
|
|
|
|
//render |
|
|
|
|
|
background(0); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
try{ |
|
|
|
|
|
image(images[currentImg], width/2, height/2, imgW, imgH); |
|
|
|
|
|
} |
|
|
|
|
|
catch{ |
|
|
|
|
|
console.log("Failed displaying image " + images[currentImg]); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 mouseClicked(){ |
|
|
|
|
|
if(!loading) pause = !pause; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
function overSlider() { |
|
|
|
|
|
if(mouseX > 0 && mouseX < 160 && mouseY > height - 30 && mouseY < height) { |
|
|
|
|
|
return true; |
|
|
|
|
|
} else { |
|
|
|
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
|
|
|
<?php |
|
|
|
|
|
if($allowInterface){ |
|
|
|
|
|
?> |
|
|
|
|
|
function mousePressed(){ |
|
|
|
|
|
if(!menu && !overSlider()){ |
|
|
|
|
|
if(!lock){ |
|
|
|
|
|
if(mouseButton === LEFT){ |
|
|
|
|
|
if(!loading) pause = !pause; |
|
|
|
|
|
lag = 0; |
|
|
|
|
|
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 |
|
|
} |
|
|
} |
|
|
return array; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
?> |
|
|
|
|
|
|
|
|
window.onresize = function() { |
|
|
|
|
|
var w = window.innerWidth; |
|
|
|
|
|
var h = window.innerHeight; |
|
|
|
|
|
canvas.resize(w,h); |
|
|
|
|
|
width = w; |
|
|
|
|
|
height = h; |
|
|
|
|
|
}; |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
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> |
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
<body> |
|
|
|
|
|
</body> |
|
|
|
|
|
|
|
|
</html> |
|
|
|
|
|
|
|
|
</html> |