123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335 |
- <?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;
- 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
- }
- ?>
-
- 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>
|