initial commit

index.php

@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+  body{
+    overflow: hidden;
+    margin: 0;
+  }
+  </style>
+  <script src="p5.min.js"></script>
+  <script>
+
+  var canvas;
+
+  //clock
+  var MS_PER_UPDATE = 50;
+  var previous;
+  var lag = 0.0;
+
+  let images = [];
+  var previousImages = [];
+  var currentImg = 0;
+  var imageCount = 0;
+  var imgW;
+  var imgH;
+
+  var angle = 0;
+
+  var loading = true;
+  var loadCounter = 0;
+  var pause = false;
+  var randomImage = true;
+
+  <?php
+  $dir ="pics";
+  $images = glob("$dir/*.{jpg,png,bmp}", GLOB_BRACE);
+  $js_images = json_encode($images);
+  echo "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) {
+        loading = false;
+      }
+    }
+  }
+
+  function setup() {
+    canvas = createCanvas(window.innerWidth, window.innerHeight);
+    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();
+    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);
+        }
+      }
+    }
+    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() {
+    if(loading){
+
+      background(51);
+      noStroke();
+
+      text("Downloaded " + loadCounter + " / " + imageCount + " images...", width/2, height/5*3 - 20);
+
+      stroke(255);
+      noFill();
+      rect(width/2 - 100, height/5*3, 200, 20);
+
+      noStroke();
+      fill(255, 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 {
+
+      var current = millis();
+      var elapsed = current - previous;
+      previous = current;
+      lag += elapsed;
+      while (lag >= MS_PER_UPDATE){
+        update();
+        lag -= MS_PER_UPDATE;
+      }
+
+      //render
+      background(0);
+
+      try{
+        image(images[currentImg], width/2, height/2, imgW, imgH);
+      }
+      catch{
+        console.log("Failed displaying image " + images[currentImg]);
+      }
+    }
+  }
+
+  function mouseClicked(){
+    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;
+    }
+    return array;
+  };
+
+  window.onresize = function() {
+    var w = window.innerWidth;
+    var h = window.innerHeight;
+    canvas.resize(w,h);
+    width = w;
+    height = h;
+  };
+  </script>
+
+
+</head>
+
+<body>
+</body>
+
+</html>