giers10
/
overdose
Watch 1
Star 0
Fork 0
Code Issues 1 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

user interface, code-comments, ..

master
Victor Giers 4 years ago
parent
3c8bbf1e19
commit
159f90679d
1 changed files with 234 additions and 79 deletions
Split View Show Diff Stats
  1. 234
    79
      index.php

+ 234
- 79
index.php View File

@@ -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;

<?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){
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 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>

Write Preview
Loading…
Cancel
Save