user interface, code-comments, ..
This commit is contained in:
Victor Giers
313
index.php
313
index.php
@@ -1,3 +1,42 @@
|
||||
<?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>
|
||||
@@ -9,15 +48,18 @@
|
||||
}
|
||||
</style>
|
||||
<script src="p5.min.js"></script>
|
||||
<script src="p5.dom.min.js"></script>
|
||||
<script>
|
||||
|
||||
var canvas;
|
||||
|
||||
//clock
|
||||
var MS_PER_UPDATE = 50;
|
||||
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;
|
||||
@@ -25,39 +67,67 @@
|
||||
var imgW;
|
||||
var imgH;
|
||||
|
||||
//interface & menu
|
||||
var angle = 0;
|
||||
|
||||
var loading = true;
|
||||
var menu = true;
|
||||
var loadCounter = 0;
|
||||
var pause = false;
|
||||
var randomImage = true;
|
||||
var lock = false;
|
||||
let startbutton, speedslider;
|
||||
|
||||
<?php
|
||||
$dir ="pics";
|
||||
$images = glob("$dir/*.{jpg,png,bmp}", GLOB_BRACE); //strato version doesnt check for imagetype!!!
|
||||
|
||||
$js_images = json_encode($images);
|
||||
|
||||
echo "let imagePaths = ". $js_images . ";\n";
|
||||
?>
|
||||
<?="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) {
|
||||
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{
|
||||
@@ -69,23 +139,19 @@
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
images = shuffle(images);
|
||||
}
|
||||
}
|
||||
if(width * height / imgRatio / height > height){
|
||||
@@ -98,83 +164,172 @@
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if(loading){
|
||||
textAlign(CENTER);
|
||||
textSize(10);
|
||||
background(0);
|
||||
if(menu){
|
||||
|
||||
background(51);
|
||||
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);
|
||||
noFill();
|
||||
rect(width/2 - 100, height/5*3, 200, 20);
|
||||
strokeWeight(1);
|
||||
rect(width/2 - 100, height/2+30, 200, 20);
|
||||
|
||||
noStroke();
|
||||
fill(255, 100);
|
||||
fill(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 {
|
||||
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 overSlider() {
|
||||
if(mouseX > 0 && mouseX < 160 && mouseY > height - 30 && mouseY < height) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
function mouseClicked(){
|
||||
if(!loading) 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;
|
||||
<?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);
|
||||
|
||||
</head>
|
||||
<?php
|
||||
if($allowInterface){
|
||||
?>
|
||||
speedslider.position(20,height-30);
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
};
|
||||
</script>
|
||||
<title><?=$title ?></title>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</head>
|
||||
|
||||
</html>
|
||||
<body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user