giers10
/
overdose

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