Merge pull request #111 from patriciogonzalezvivo/gallery

Gallery updates

css/style.css

@@ -295,16 +295,18 @@ code {
 }
 
 .glslGallery_item{
+    vertical-align: top;
     width: 242px;
     margin: 8px;
 }
 
 .glslGallery_thumb{
     max-width: 240px;
-  border: solid 1px #EEEEEE;
+    border: solid 1px #EEEEEE;
 }
 
 .glslGallery_item canvas.glslGallery_canvas{
+    vertical-align: top;
     max-width: 242px;
 }
 

examples/index.php

@@ -1,5 +1,6 @@
 
 <?php
+error_reporting(0);
     $path = '..';
     $subtitle = ': Gallery';
     $language = '';
@@ -14,7 +15,6 @@
     include('../chap-header.php');
 
     echo '<div id="content">';
-
     include($path.'/src/parsedown/Parsedown.php');
     $Parsedown = new Parsedown();
 
@@ -22,26 +22,32 @@
 
     if (empty($_GET)) {
         // Load all the chapters
-        $dirs = array_filter(glob('../??/'), 'is_dir');
+        $dirs = array_filter(glob('../*/'), 'is_dir');
+
         foreach ($dirs as &$folder) {
             $chp = '';
-            preg_match("/\.\.\/(\d\d)\//", $folder, $matches);
+            preg_match("/\.\.\/(.+)\//", $folder, $matches);
             if (count($matches) > 0) {
                 $chp = $matches[1];
             }
 
             if (file_exists($folder.'TITLE'.$language.'.md') and file_exists($folder.'SUMMARY'.$language.'.md')) {
-                echo '<a href="'.$folder.'">';
+                if (file_exists($folder.'README.md')) {
-                echo $Parsedown->text(file_get_contents($folder.'TITLE'.$language.'.md'));
+                  echo '<a href="'.$folder.'">';
-                echo '</a>';
+                  echo $Parsedown->text(file_get_contents($folder.'TITLE'.$language.'.md'));
+                  echo '</a>';
+                } else {
+                  echo $Parsedown->text(file_get_contents($folder.'TITLE'.$language.'.md'));
+                }
 
-                if (file_exists($folder.'SUMMARY'.$language.'.md')) {
+                if (file_exists($folder.'SHORT_SUMMARY'.$language.'.md')) {
+                    echo $Parsedown->text(file_get_contents($folder.'SHORT_SUMMARY'.$language.'.md'));
+                } else if (file_exists($folder.'SUMMARY'.$language.'.md')) {
                     echo $Parsedown->text(file_get_contents($folder.'SUMMARY'.$language.'.md'));
                 }
 
                 $shaders = array_reverse(glob($folder.'*.frag'));
                 $shadersTotal = min(count($shaders), 3);
-
                 if ($shadersTotal > 0) {
                     echo '<div class="glslGallery" data="';
                     for ($i = 0; $i < $shadersTotal; $i++) {
@@ -52,14 +58,29 @@
                     }
                     echo '" data-properties="clickRun:editor,hoverPreview:false,showAuthor:false,openFrameIcon:false"></div>';
                 }
+                if (file_exists($folder.'featured_examples.php') and $shaderTotal == 0) {
 
-                if (file_exists($folder.'featured_examples.php') and file_exists('FEATURED'.$language.'.md')) {
+                    $featuredCode = file_get_contents($folder.'featured_examples.php');
+                    preg_match_all("(\d+)", $featuredCode, $ids);
+                    if (count($ids) > 0) {
+                        echo '<div class="glslGallery" data="';
+                        $numIds = min(count($ids[0]), 3);
+                        for ($i = 0; $i < $numIds; $i++) {
+                            echo $ids[0][$i];
+                            if ($i < $numIds - 1) {
+                                echo ",";
+                            }
+                        }
+                        echo '" data-properties="clickRun:editor,hoverPreview:false,showAuthor:false,openFrameIcon:false"></div>';
+                        $shadersTotal = count($ids[0]);
+                    }
+                } else if (file_exists($folder.'featured_examples.php') and file_exists('FEATURED'.$language.'.md')) {
                     include($folder.'featured_examples.php');
                     $shadersTotal += 3;
                 }
 
                 if (count($shaders) > 3 or $shadersTotal > 3) {
-                    echo '<p class="more"><a href="/examples/?chapter='.$chp.'">more</a></p>';
+                    echo '<p class="more"><a href="../examples/?chapter='.$chp.'">more</a></p>';
                 }
             }
         }
@@ -90,7 +111,9 @@
 
 
             if (file_exists($folder.'featured_examples.php') and file_exists('FEATURED'.$language.'.md')) {
-                echo $Parsedown->text(file_get_contents('FEATURED'.$language.'.md'));
+                if ($shadersTotal != 0) {
+                    echo $Parsedown->text(file_get_contents('FEATURED'.$language.'.md'));
+                }
                 include($folder.'featured_examples.php');
             }
         }

motionToolKit/SHORT_SUMMARY.md

@@ -0,0 +1,6 @@
+*[kynd](http://www.kynd.info) Sep 9, 2016*
+
+Designing motion in a fragment shader is not straight forward and can be a bit tedious since it is not an animation tool after all. Here are some convenient tools and examples for controlling easing and timing, drawing shapes, and combining all these to create a nice sequence of motion. The first five examples introduce many useful functions that you can use as building blocks for your design. Following examples demonstrate how you can combine these tool to design complex animations.
+
+
+

motionToolKit/SUMMARY.md

@@ -0,0 +1,17 @@
+*[kynd](http://www.kynd.info) Sep 9, 2016*
+
+Designing motion in a fragment shader is not straight forward and can be a bit tedious since it is not an animation tool after all. Here are some convenient tools and examples for controlling easing and timing, drawing shapes, and combining all these to create a nice sequence of motion. The first five examples introduce many useful functions that you can use as building blocks for your design. Following examples demonstrate how you can combine these tool to design complex animations.
+
+Exercises:
+
+* Can you draw different waves using different easing functions, then animate circles following the waves?
+
+* Animate two circles. Can you express difference between different materials through motion? How a metal ball and a plastic ball behave differently?
+
+* Design your character(an animal, monster, spaceship, etc.) by combining shapes and animate it.
+
+* Speed up or down your character animation. Can you make it five times faster or slower than the original?
+
+* Add a new scene to the "wipes" example. How can you make it easy so that you don't have to adjust the timing of all subsequent parts manually?
+
+* The examples here are not necessarily optimized, especially the last one. Try reducing the number of calculation as much as possible. Many functions are running even when the elements they draw are not on-screen. How can you avoid this?

motionToolKit/TITLE.md

@@ -0,0 +1 @@
+# MotionToolKit

motionToolKit/featured_examples.php

@@ -0,0 +1 @@
+<div class="glslGallery" data="160909064320,160909064357,160909064458,160909064528,160909041106,160909064609,160909064651,160909064723,160909064802,160909064829,160909065019,160909065049,160909065147" data-properties="clickRun:editor,hoverPreview:false"></div>

src/glslGallery

@@ -1 +1 @@
-Subproject commit 3b02fadfa9a7ff9218382f8ad2334628dad4b742
+Subproject commit 22050b571c923a702761844c91d26dfbbd841750

src/main.js

@@ -2,7 +2,7 @@
 // PARSING
 //---------------------------------------------------------------
 
-//  Graph plotter function take from 
+//  Graph plotter function take from
 //  From http://blog.hvidtfeldts.net/index.php/2011/07/plotting-high-frequency-functions-using-a-gpu/
 var preFunction = "\n\
 #ifdef GL_ES\n\
@@ -114,9 +114,9 @@ function styleCodeBlocks() {
     // Highlight code blocks
     var list = document.getElementsByTagName("code");
     for(var i = 0; i < list.length; i++){
-        if (list[i].className == "language-glsl" || 
+        if (list[i].className == "language-glsl" ||
-            list[i].className == "language-bash" || 
+            list[i].className == "language-bash" ||
-            list[i].className == "language-cpp" || 
+            list[i].className == "language-cpp" ||
             list[i].className == "language-html" ||
             list[i].className == "language-processing" ){
             hljs.highlightBlock(list[i]);
@@ -130,7 +130,7 @@ function loadGlslElements() {
     var canvas = document.getElementsByClassName("canvas");
     for (var i = 0; i < canvas.length; i++){
         glslCanvas.push(new GlslCanvas(canvas[i]));
-    } 
+    }
 
     // parse EDITORS
 	var ccList = document.querySelectorAll(".codeAndCanvas");
@@ -150,7 +150,7 @@ function loadGlslElements() {
             var srcFile = sfList[i].getAttribute("data");
             glslGraphs.push(new GlslEditor(sfList[i], { canvas_width: 800, lineNumbers: false, canvas_height: 250, frag_header: preFunction, frag_footer: postFunction, tooltips: true }).open(srcFile));
         }
-    }    
+    }
 }
 
 function insertAfter(newElement,targetElement) {
@@ -163,15 +163,15 @@ function insertAfter(newElement,targetElement) {
 }
 
 function captionizeImages() {
-    if (!document.getElementsByTagName) 
+    if (!document.getElementsByTagName)
         return false;
 
-    if (!document.createElement) 
+    if (!document.createElement)
         return false;
-    
+
     var images = document.getElementsByTagName("img");
-    if (images.length < 1) 
+    if (images.length < 1)
-        return false; 
+        return false;
 
     for (var i = 0; i < images.length; i++) {
         var title = images[i].getAttribute("alt");
@@ -262,13 +262,13 @@ function nextPage() {
 	window.location.href =  url;
 }
 
-window.onload = function(){
+window.addEventListener("load", function(){
     window.scrollTo(0, 0);
     styleCodeBlocks();
-	loadGlslElements();
+    loadGlslElements();
     captionizeImages();
     window.scrollTo(0, 0);
     setTimeout(function () {
          window.scrollTo(0, 0);
     }, 500);
-};
+});