adopted new GlslGallery

examples_proto/05/README.md

@@ -6,4 +6,4 @@ Shaping functions is fundamental technique that is recursively used throughout t
 
 Read [Shaping functions](../05) to learn more.
 
-<div class="glslChapterGallery" data="05" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="05"></div>

examples_proto/06/README.md

@@ -7,4 +7,4 @@ In GLSL, colors are simply just vectors, which means you can easily apply the co
 
 Read [Colors](../06) to learn more.
 
-<div class="glslChapterGallery" data="06" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="06"></div>

examples_proto/07/README.md

@@ -6,4 +6,4 @@ Let's look at how to draw simple shapes in a parallel procedural way. In a nutsh
 
 Read [Shapes](../07) to learn more.
 
-<div class="glslChapterGallery" data="07" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="07"></div>

examples_proto/08/README.md

@@ -7,4 +7,4 @@ Matrices may look complex at a first glance, but you'll find it very handy and u
 
 Read [Matrix](../08) to learn more.
 
-<div class="glslChapterGallery" data="08" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="08"></div>

examples_proto/09/README.md

@@ -6,4 +6,4 @@ Repetitive patterns are perfect theme for computational sketching. Different fro
 
 Read [Patterns](../09) to learn more.
 
-<div class="glslChapterGallery" data="09" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="09"></div>

examples_proto/10/README.md

@@ -6,4 +6,4 @@ Life is boring if everything was predictable. Though nothing is truly random in
 
 Read [Random](../10) to learn more.
 
-<div class="glslChapterGallery" data="10" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="10"></div>

examples_proto/11/README.md

@@ -7,4 +7,4 @@ Since Ken Perlin invented his first noise algorithm in 80s, the technique has be
 
 Read [Noise](../11) to learn more.
 
-<div class="glslChapterGallery" data="11" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="11"></div>

examples_proto/advanced/README.md

@@ -4,4 +4,4 @@
 
 In this section, we gathered relatively advanced examples from different chapters. Try if you can read and understand all the examples here to test yourself.
 
-<div class="glslChapterGallery" data="advanced" data-properties="clickRun:editor"></div>
+<div class="glslChapterGallery" data="advanced"></div>

examples_proto/header.php

@@ -27,8 +27,8 @@ echo '
 
     <!-- Gallery -->
       <link type="text/css" rel="stylesheet" href="'.$path.'/examples_proto/css/gallery.css">
-      <script type="application/javascript" src="'.$path.'/examples_proto/src/shaderList.js"></script>
       <script type="application/javascript" src="'.$path.'/examples_proto/src/glslGallery.js"></script>
+      <script type="application/javascript" src="'.$path.'/examples_proto/src/examples.js"></script>
 
       <link type="text/css" rel="stylesheet" href="'.$path.'/css/style.css">
 

examples_proto/src/examples.js

@@ -108,6 +108,7 @@ var shaderList = {
 				"examples/06/tothn598-villareal",
 				"examples/06/wangl073-villareal"],
 
+
 	"advanced":[	"08/matrix",
 					"160414040957",
 					"160414040804",
@@ -122,8 +123,23 @@ var shaderList = {
 					"10/ikeda-numered-grid"]
 };
 
-
-
-
+window.addEventListener("load", function () {
+	var options = {clickRun: 'editor'};
+    var elms = document.getElementsByClassName('glslChapterGallery');
+
+	for (var i = 0; i < elms.length; i++) {
+		var elm = elms[i];
+		if (elm.hasAttribute('data')) {
+            var data = elm.getAttribute('data').split(',');
+            if (data[1]) {
+            	options.logs = shaderList[data[0]].slice(0, Number(data[1]));
+            } else {
+            	options.logs = shaderList[data[0]];
+            }
+            console.log(options.logs);
+			var gallery = new GlslGallery(elm, options);
+        }
+    }
+});