Fast online image gallery based on p5.js
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. <?php
  2. /**
  3. * overdose - Showcase images in random order - Flood recipients brains
  4. *
  5. * @author Victor Giers <vgiers@web.de>
  6. *
  7. **/
  8. //127.0.0.1/Master/Alles/overdose/index.php?t=Beautiful Brutalism&d=brutalismus&s=200&smax=40&smin=2000&i=1
  9. if(isset($_GET['d'])){
  10. $dir = $_GET['d'];
  11. } else {
  12. echo("Technische Schwierigkeiten :(");
  13. exit();
  14. }
  15. $title = isset($_GET['t'])? $_GET['t'] : "Overdose: /" . $dir ."/";
  16. $sourcelinks = isset($_GET['l'])? $_GET['l'] : [];
  17. $initial_speed = isset($_GET['s'])? $_GET['s'] : 200; //in Milliseconds (less = faster)
  18. //Show playbutton and speedslider and allow mouse controls?
  19. $allowInterface = isset($_GET['noui']) ? false : true;
  20. //User interface options
  21. $min_speed = isset($_GET['smin']) ? $_GET['smin'] : 2000;
  22. $max_speed = isset($_GET['smax']) ? $_GET['smax'] : 40; //must be > 0
  23. $steps = 10;
  24. //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.
  25. //This way you'll have to take care to have only image files in your directory.
  26. $images = glob("$dir/*");
  27. //$images = glob("$dir/*.{jpg,JPG,jpeg,JPEG,png,PNG,bmp,BMP}", GLOB_BRACE);
  28. $js_images = json_encode($images);
  29. ?>
  30. <!DOCTYPE html>
  31. <html>
  32. <head>
  33. <meta charset="UTF-8">
  34. <style>
  35. body{
  36. overflow: hidden;
  37. margin: 0;
  38. }
  39. </style>
  40. <script src="p5.min.js"></script>
  41. <script src="p5.dom.min.js"></script>
  42. <script>
  43. var canvas;
  44. //clock
  45. var MS_PER_UPDATE = <?=$initial_speed ?>;
  46. let diff = <?=$max_speed ?> - <?=$min_speed ?> / <?=$steps ?>;
  47. var previous;
  48. var lag = 0.0;
  49. //image vars
  50. let images = [];
  51. var previousImages = [];
  52. var currentImg = 0;
  53. var imageCount = 0;
  54. var imgW;
  55. var imgH;
  56. //interface & menu
  57. var angle = 0;
  58. var loading = true;
  59. var menu = true;
  60. var loadCounter = 0;
  61. var pause = false;
  62. var lock = false;
  63. let startbutton, speedslider;
  64. <?="let imagePaths = ". $js_images . ";\n"?>
  65. function imageLoader(imagePath){
  66. loadImage(imagePath, imageLoaded);
  67. function imageLoaded(image) {
  68. images.push(image);
  69. loadCounter++;
  70. if (loadCounter == imageCount) {
  71. startbutton.show();
  72. loading = false;
  73. }
  74. }
  75. }
  76. function start(){
  77. images = shuffle(images);
  78. startbutton.hide();
  79. <?php
  80. if($allowInterface){
  81. ?>
  82. speedslider.show();
  83. <?php
  84. }
  85. ?>
  86. lock = true;
  87. menu = false;
  88. }
  89. var playImage;
  90. function setup() {
  91. canvas = createCanvas(window.innerWidth, window.innerHeight);
  92. startbutton = createButton('Go');
  93. startbutton.position(width/2-startbutton.width/2,height/2-startbutton.height/2);
  94. startbutton.mousePressed(start);
  95. startbutton.hide();
  96. <?php
  97. if($allowInterface){
  98. ?>
  99. speedslider = createSlider(<?=$max_speed ?>, <?=$min_speed ?>, <?=$initial_speed ?>);
  100. speedslider.style('width', '100px');
  101. speedslider.hide();
  102. speedslider.position(20,height-30);
  103. <?php
  104. }
  105. ?>
  106. if (imageCount == 0) imageCount = imagePaths.length;
  107. for (var i = 0; i < imageCount; i++) {
  108. try{
  109. imageLoader(imagePaths[i]);
  110. }
  111. catch{
  112. console.log("Failed loading image, path = " + imagePaths[i]);
  113. }
  114. }
  115. previous = millis();
  116. imageMode(CENTER);
  117. fill(255,255,255);
  118. }
  119. function update(){
  120. var imgRatio = images[currentImg].width / images[currentImg].height;
  121. if(!pause){
  122. currentImg++;
  123. if(currentImg == images.length){
  124. currentImg = 0;
  125. images = shuffle(images);
  126. }
  127. }
  128. if(width * height / imgRatio / height > height){
  129. var imgWindowRatio = (pause)? height / images[currentImg].height : width / images[currentImg].width;
  130. } else {
  131. var imgWindowRatio = (pause) ? width / images[currentImg].width : height / images[currentImg].height;
  132. }
  133. imgW = images[currentImg].width*imgWindowRatio;
  134. imgH = images[currentImg].height*imgWindowRatio;
  135. }
  136. function draw() {
  137. textAlign(CENTER);
  138. textSize(10);
  139. background(0);
  140. if(menu){
  141. noStroke();
  142. fill(255);
  143. textSize(30);
  144. textStyle(BOLD);
  145. text("<?=$title ?>",width/2, height/2 - 50);
  146. textStyle(NORMAL);
  147. textSize(10);
  148. stroke(255);
  149. noFill();
  150. strokeWeight(1);
  151. rect(width/2 - 100, height/2+30, 200, 20);
  152. noStroke();
  153. fill(100);
  154. var w = 200 * loadCounter / imageCount;
  155. rect(width/2 - 100, height/2+30, w, 20);
  156. <?php
  157. $substring = "Seizure warning!\\nYou are about to look at a lot of images in random order very fast.\\n\\n";
  158. if($allowInterface){
  159. $substring .= "Click on the screen to pause and look at the full image.\\nUse the mouse wheel to control the speed.\\n\\n";
  160. }
  161. $substring .= "Note: I do not have any licenses for these images.\\nYou can look up their origin on https://images.google.com/\\n";
  162. if (sizeof($sourcelinks) > 0){
  163. $substring .= sizeof($links) > 1 ? 'These are sources' : 'This is one source' . ' of the images:\n';
  164. foreach ($sourcelinks as $link) {
  165. $substring .= $link.'\n';
  166. }
  167. }
  168. ?>
  169. text("<?=$substring ?>", width/2, height/2 + 90);
  170. if (loading){
  171. text("Downloaded " + loadCounter + " / " + imageCount + " images...", width/2, height/2 + 70);
  172. translate(width/2, height/2);
  173. rotate(angle);
  174. strokeWeight(3);
  175. stroke(255);
  176. line(0, 0, 12, 0);
  177. angle += 0.1;
  178. } else {
  179. text("Downloaded " + loadCounter + " / " + imageCount + " images, ready to go.", width/2, height/2 + 70);
  180. }
  181. } else {
  182. var current = millis();
  183. var elapsed = current - previous;
  184. previous = current;
  185. lag += elapsed;
  186. while (lag >= MS_PER_UPDATE){
  187. update();
  188. lag -= MS_PER_UPDATE;
  189. }
  190. try{
  191. image(images[currentImg], width/2, height/2, imgW, imgH);
  192. }
  193. catch{
  194. console.log("Failed displaying image " + images[currentImg]);
  195. }
  196. <?php
  197. if($allowInterface){
  198. ?>
  199. fill(255,100);
  200. noStroke();
  201. if(pause){
  202. triangle(55,height-80,55, height-50, 85, height-65);
  203. } else {
  204. rect(55,height-80,12,30);
  205. rect(73,height-80,12,30)
  206. }
  207. <?php
  208. }
  209. ?>
  210. <?php
  211. if($allowInterface){
  212. ?>
  213. MS_PER_UPDATE = speedslider.value();
  214. <?php
  215. }
  216. ?>
  217. }
  218. }
  219. function overSlider() {
  220. if(mouseX > 0 && mouseX < 160 && mouseY > height - 30 && mouseY < height) {
  221. return true;
  222. } else {
  223. return false;
  224. }
  225. };
  226. <?php
  227. if($allowInterface){
  228. ?>
  229. function mousePressed(){
  230. if(!menu && !overSlider()){
  231. if(!lock){
  232. if(mouseButton === LEFT){
  233. if(!loading) pause = !pause;
  234. lag = 0;
  235. update();
  236. }
  237. } else {
  238. lock = false;
  239. }
  240. }
  241. }
  242. function mouseWheel(event) {
  243. if(!(MS_PER_UPDATE - diff*Math.sign(event.delta) < <?=$max_speed ?>) && !(MS_PER_UPDATE - diff*Math.sign(event.delta) > <?=$min_speed ?>) ){
  244. MS_PER_UPDATE -= diff*Math.sign(event.delta);
  245. speedslider.value(MS_PER_UPDATE);
  246. }
  247. }
  248. <?php
  249. }
  250. ?>
  251. var shuffle = function (array) {
  252. var currentIndex = array.length;
  253. var temporaryValue, randomIndex;
  254. // While there remain elements to shuffle...
  255. while (0 !== currentIndex) {
  256. // Pick a remaining element...
  257. randomIndex = Math.floor(Math.random() * currentIndex);
  258. currentIndex -= 1;
  259. // And swap it with the current element.
  260. temporaryValue = array[currentIndex];
  261. array[currentIndex] = array[randomIndex];
  262. array[randomIndex] = temporaryValue;
  263. }
  264. return array;
  265. };
  266. window.onresize = function() {
  267. var w = window.innerWidth;
  268. var h = window.innerHeight;
  269. resizeCanvas(w,h);
  270. width = w;
  271. height = h;
  272. startbutton.position(width/2-startbutton.width/2,height/2-startbutton.height/2);
  273. <?php
  274. if($allowInterface){
  275. ?>
  276. speedslider.position(20,height-30);
  277. <?php
  278. }
  279. ?>
  280. };
  281. </script>
  282. <title><?=$title ?></title>
  283. </head>
  284. <body>
  285. </body>
  286. </html>