Example gallery can show non-chapter folders

css/style.css

@@ -284,16 +284,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,10 +22,11 @@
 
     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];
             }
@@ -35,13 +36,14 @@
                 echo $Parsedown->text(file_get_contents($folder.'TITLE'.$language.'.md'));
                 echo '</a>';
 
-                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 +54,29 @@
                     }
                     echo '" data-properties="clickRun:editor,hoverPreview:false,showAuthor:false,openFrameIcon:false"></div>';
                 }
-
-                if (file_exists($folder.'featured_examples.php') and file_exists('FEATURED'.$language.'.md')) {
+                if (file_exists($folder.'featured_examples.php') and $shaderTotal == 0) {
+
+                    $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 +107,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,20 @@
+*[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:
+
+* Draw different waves using easing functions, then animate circles following the waves.
+
+* Design your character by combining shapes and animate it.
+
+* Make your character animation slow-motion, five times slower than the original.
+
+* Can you express difference between a metal ball and a plastic ball only through motion without changing the graphics?
+
+* 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>

showcase/SUMMARY.md

@@ -0,0 +1 @@
+Shaders have infinite possibility far beyond what we can cover in this book. This section features interesting and exiting examples handpicked from the on-line posts for your inspiration. Enjoy!

showcase/TITLE.md

@@ -0,0 +1 @@
+# Showcase

showcase/featured_examples.php

@@ -0,0 +1 @@
+<div class="glslGallery" data="160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325,160913025325" data-properties="clickRun:editor,hoverPreview:false"></div>

src/glslCanvas

@@ -1 +1 @@
-Subproject commit 254c6ec741c9d3f38d822b42d6d1f70091318512
+Subproject commit 4d5e073bf135692178d7cb62b5cc32dac2dae19f

src/glslGallery

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

src/parsedown

@@ -1 +1 @@
-Subproject commit 490a8f35a4163f59230f53c34f1fbb22a864c01e
+Subproject commit 28774a4359120d2e02e8b6285ed05670c1bc7053