added examples_proto/

examples_proto/README-c00.md

@@ -0,0 +1,18 @@
+# Gallery - Getting started
+
+## Examples
+
+Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
+
+Read [getting started](../00/)
+
+<div id="c00-examples"></div>
+<script type="text/javascript">gallery.createExampleList("c00")</script>
+
+
+## Shared Shaders
+
+Let's look at what your fellow learners are doing. Bellow are the shaders shared for this chapter by the readers of this book.  
+
+<div id="c00-shared-examples"></div>
+<script type="text/javascript">gallery.createExampleList("c00-shared")</script>

examples_proto/README-c05.md

@@ -0,0 +1,18 @@
+# Gallery - Shaping functions
+
+## Examples
+
+Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
+
+Read [Shaping funcions](../05/)
+
+<div id="c05-examples"></div>
+<script type="text/javascript">gallery.createExampleList("c05")</script>
+
+
+## Shared Shaders
+
+Let's look at what your fellow learners are doing. Bellow are the shaders shared for this chapter by the readers of this book.  
+
+<div id="c05-shared-examples"></div>
+<script type="text/javascript">gallery.createExampleList("c05-shared")</script>

examples_proto/README-shared.md

@@ -0,0 +1,7 @@
+# Gallery - All Shared Shaders
+
+## Shared shaders
+Let's look at what your fellow learners are doing. This page features all the shaders shared by the readers of this book.  
+
+<div id="shared-examples"></div>
+<script type="text/javascript">gallery.createExampleList("shared")</script>

examples_proto/README.md

@@ -0,0 +1,42 @@
+# Shader Gallery
+
+The following is a list of examples present in this book more from our excellent contributers and readers.
+
+## Featured shaders
+<a id="shared" />
+
+Featured examples from the shaders shared by our readers.
+
+<div id="shared-examples"></div>
+<script type="text/javascript">gallery.createExampleList("shared", 3)</script>
+<div class="extra-container"><a href="shared.php">See All Shared Shaders</a></div>
+
+
+## Getting started
+### "Hello World!"
+<a id="c02" />
+
+Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
+
+<div id="c02-examples"></div>
+<script type="text/javascript">gallery.createExampleList("c02", 3)</script>
+
+
+### Uniforms
+<a id="c03" />
+
+Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
+
+<div id="c03-examples"></div>
+<script type="text/javascript">gallery.createExampleList("c03", 3)</script>
+
+## Algorithmic drawing
+### Shaping functions
+
+<a id="c05" />
+
+Some blurb about what the chapter is about. Bacon ipsum dolor amet ham hock tongue picanha pancetta kevin sausage. Meatloaf biltong cupim pork loin ham turducken shoulder t-bone bacon capicola pancetta pork kielbasa. Meatball kevin bresaola beef ribs, meatloaf ribeye drumstick turkey. Cow pig ham picanha corned beef leberkas filet mignon landjaeger ribeye pork capicola short ribs doner.
+
+<div id="c05-examples"></div>
+<script type="text/javascript">gallery.createExampleList("c05", 6)</script>
+<div class="extra-container"><a href="c05.php">See All Examples</a></div>

examples_proto/c05.php

@@ -0,0 +1,24 @@
+<?php
+
+	$path = "..";
+	$subtitle = ": gallery - Shaping functions";
+	include("header.php");
+
+	echo '
+	<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
+	<hr>
+	<div id="content" class="gallery">';
+
+	include($path."/src/parsedown/Parsedown.php");
+	$Parsedown = new Parsedown();
+	echo $Parsedown->text(file_get_contents ('README-c05.md'));
+
+	echo '
+	</div>
+	<hr>
+	<ul class="navigationBar" >
+		<li class="navigationBar" onclick="window.location.href=\'index.php\'">Gallery Home </li>
+	</ul>';
+
+	include("footer.php");
+?>

examples_proto/css/gallery.css

@@ -0,0 +1,36 @@
+div.gallery {
+}
+
+div.gallery ul, div.gallery ul {
+	list-style: none;
+	padding:0;
+	margin: 0;
+}
+
+div.gallery li {
+	display: inline-block;
+	margin-bottom: 24px;
+	margin-left: 8px;
+	margin-right: 16px;
+}
+
+div.gallery .imgcontainer {
+	width: 242px;
+}
+div.gallery .imgcontainer img {
+	width: 240px;
+	border: solid 1px #ccc;
+}
+
+div.gallery h2 {
+	line-height: 64px;
+	border-bottom: solid 1px #9a9a9a;
+	margin-bottom: 24px;
+}
+
+div.gallery h3 {
+	margin-top: 64px;
+}
+div.gallery div.extra-container {
+	text-align: right;
+}

examples_proto/footer.php

@@ -0,0 +1,18 @@
+<?php
+echo '
+		<footer>
+			<p> Copyright 2015 <a href="http://www.patriciogonzalezvivo.com" target="_blank">Patricio Gonzalez Vivo</a> </p>
+		</footer>
+
+	<script>	  (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
+		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		  })(window,document,"script","//www.google-analytics.com/analytics.js","ga");
+
+		  ga("create", "UA-18824436-2", "auto");
+		  ga("send", "pageview");
+		</script>
+	</body>
+</html>
+	';
+?>

examples_proto/header.php

@@ -0,0 +1,52 @@
+<?php
+
+// main menu
+echo '
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>The Book of Shaders'.$subtitle.'</title>
+		<link href="/favicon.gif" rel="shortcut icon"/>
+		<meta name="keywords" content="shader,openGL,WebGL,GLSL,book,procedural,generative" />
+		<meta name="description" content="Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders." />
+
+		<meta name="twitter:site" content="@bookofshaders">
+	    <meta name="twitter:title" content="The Book Of Shaders">
+	    <meta name="twitter:description" content="Gentle step-by-step guide through the abstract and complex universe of Fragment Shaders.">
+	    <meta name="twitter:creator" content="@patriciogv">
+	    <meta name="twitter:domain" content="thebookofshaders.edu">
+	    <link href="/favicon.gif" rel="shortcut icon"/>
+
+		<!-- Highlight -->
+		<link type="text/css" rel="stylesheet" href="'.$path.'/css/github.css">
+		<script type="text/javascript" src="'.$path.'/src/highlight.min.js"></script>
+
+		<!-- GlslCanvas -->
+		<script type="text/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/build/GlslCanvas.min.js"></script>
+
+		<!-- GlslEditor -->
+    	<link type="text/css" rel="stylesheet" href="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/css/main.css">
+    	<script type="application/javascript" src="https://rawgit.com/patriciogonzalezvivo/glslEditor/gh-pages/build/js/glslEditor.js"></script>
+
+    <!-- Jquery -->
+      <script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
+
+    <!-- Gallery -->
+      <link type="text/css" rel="stylesheet" href="css/gallery.css">
+      <script type="application/javascript" src="src/gallery.php"></script>
+
+      <link type="text/css" rel="stylesheet" href="'.$path.'/css/style.css">
+
+
+';
+
+if ( $language !== '' && file_exists($path.'/css/style'.$language.'.css') ) {
+  	echo '<link type="text/css" rel="stylesheet" href="'.$path.'/css/style'.$language.'.css">';
+  }
+
+echo '
+	</head>
+	<body>
+	';
+?>

examples_proto/index.php

@@ -0,0 +1,24 @@
+<?php
+
+	$path = "..";
+	$subtitle = ": gallery";
+	include("header.php");
+
+	echo '
+	<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
+	<hr>
+	<div id="content" class="gallery">';
+
+	include($path."/src/parsedown/Parsedown.php");
+	$Parsedown = new Parsedown();
+	echo $Parsedown->text(file_get_contents ('README.md'));
+
+	echo '
+	</div>
+	<hr>
+	<ul class="navigationBar" >
+		<li class="navigationBar" onclick="window.location.href=\'../\'"> Home </li>
+	</ul>';
+
+	include("footer.php");
+?>

examples_proto/moon.frag

@@ -0,0 +1,77 @@
+// Author @patriciogv - 2015
+// http://patriciogonzalezvivo.com
+
+#ifdef GL_ES
+precision mediump float;
+#endif
+
+#define PI 3.1415926535
+#define HALF_PI 1.57079632679
+
+uniform vec2 u_resolution;
+uniform float u_time;
+
+uniform sampler2D u_tex0;
+uniform vec2 u_tex0Resolution;
+
+float speedMoon = 0.01;
+float speedSun = 0.25;
+
+vec3 sphereNormals(in vec2 uv) {
+    uv = fract(uv)*2.0-1.0; 
+    vec3 ret;
+    ret.xy = sqrt(uv * uv) * sign(uv);
+    ret.z = sqrt(abs(1.0 - dot(ret.xy,ret.xy)));
+    ret = ret * 0.5 + 0.5;    
+    return mix(vec3(0.0), ret, smoothstep(1.0,0.98,dot(uv,uv)) );
+}
+
+vec2 sphereCoords(vec2 _st, float _scale){
+    float maxFactor = sin(1.570796327);
+    vec2 uv = vec2(0.0);
+    vec2 xy = 2.0 * _st.xy - 1.0;
+    float d = length(xy);
+    if (d < (2.0-maxFactor)){
+        d = length(xy * maxFactor);
+        float z = sqrt(1.0 - d * d);
+        float r = atan(d, z) / 3.1415926535 * _scale;
+        float phi = atan(xy.y, xy.x);
+
+        uv.x = r * cos(phi) + 0.5;
+        uv.y = r * sin(phi) + 0.5;
+    } else {
+        uv = _st.xy;
+    }
+    return uv;
+}
+
+vec4 sphereTexture(in sampler2D _tex, in vec2 _uv) {
+    vec2 st = sphereCoords(_uv, 1.0);
+
+    float aspect = u_tex0Resolution.y/u_tex0Resolution.x;
+    st.x = fract(st.x*aspect + u_time*speedMoon);
+
+    return texture2D(_tex, st);
+}
+
+void main(){
+    vec2 st = gl_FragCoord.xy/u_resolution.xy;
+    vec3 color = vec3(1.0);
+  
+    color *= sphereTexture(u_tex0, st).rgb;
+
+    // Calculate sun direction
+    vec3 sunPos = normalize(vec3(cos(u_time*speedSun-HALF_PI),0.0,sin(speedSun*u_time-HALF_PI)));
+    vec3 surface = normalize(sphereNormals(st)*2.0-1.0);
+   
+    // Add Shadows
+    color *= dot(sunPos,surface);
+
+    // Blend black the edge of the sphere
+    float radius = 1.0-length( vec2(0.5)-st )*2.0;
+    color *= smoothstep(0.001,0.05,radius);
+
+    color = 1.0-color;
+
+    gl_FragColor = vec4(color,1.0);
+}

examples_proto/shared.php

@@ -0,0 +1,24 @@
+<?php
+
+	$path = "..";
+	$subtitle = ": gallery - all posts";
+	include("header.php");
+
+	echo '
+	<div class="header"><p><a href="http://patriciogonzalezvivo.com/2015/thebookofshaders/">The Book of Shaders</a> by <a href="http://patriciogonzalezvivo.com">Patricio Gonzalez Vivo</a></p></div>
+	<hr>
+	<div id="content" class="gallery">';
+
+	include($path."/src/parsedown/Parsedown.php");
+	$Parsedown = new Parsedown();
+	echo $Parsedown->text(file_get_contents ('README-shared.md'));
+
+	echo '
+	</div>
+	<hr>
+	<ul class="navigationBar" >
+		<li class="navigationBar" onclick="window.location.href=\'index.php\'">Gallery Home </li>
+	</ul>';
+
+	include("footer.php");
+?>

examples_proto/src/gallery.php

@@ -0,0 +1,39 @@
+var examples = {};
+
+<?php
+$path = "";
+include($path."gallery_shared.php");
+include($path."gallery_c02.php");
+include($path."gallery_c03.php");
+include($path."gallery_c05.php");
+?>
+
+
+var gallery = function() {
+  function createLi(d) {
+    var li = $("<li>");
+    var a = $("<a>").attr("href", d.url);
+    var container = $("<div>").attr("class", "imgcontainer")
+    .append($("<img>").attr({"src": d.src, "alt": d.caption}))
+    .append($("<div>").attr("class", "caption").text(d.caption));
+    li.append(a);
+    a.append(container);
+    return li;
+  }
+
+  function createUl(list, length) {
+    var ul = $("<ul>");
+    for (var i = 0; i < length && i < list.length; i ++) {
+      ul.append(createLi(list[i]));
+    }
+    return ul;
+  }
+
+  return {
+    createExampleList: function(id, length) {
+      if (!length) {length = examples[id].length;}
+      var div = $("#" + id + "-examples");
+        div.append(createUl(examples[id], length));
+      }
+  }
+}();

examples_proto/src/gallery_c02.php

@@ -0,0 +1,18 @@
+<?php
+echo '
+examples.c02 = [
+  {url:"../edit.html#02/hello_world.frag", src: "images/preview.png", caption: "Hello World!"}
+];
+
+examples["c00-shared"] = [
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."}
+];
+';
+?>

examples_proto/src/gallery_c03.php

@@ -0,0 +1,19 @@
+<?php
+echo '
+examples.c03 = [
+  {url:"../edit.html#03/time.frag", src: "images/preview.png", caption: "u_time"},
+  {url:"../edit.html#03/space.frag", src: "images/preview.png", caption: "gl_FragCoord"}
+];
+
+examples["c03-shared"] = [
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."}
+];
+';
+?>

examples_proto/src/gallery_c05.php

@@ -0,0 +1,33 @@
+<?php
+echo '
+examples.c05 = [
+  {url:"../edit.html#05/linear.frag", src: "images/preview.png", caption: "Linear Interpolation"},
+  {url:"../edit.html#05/expo.frag", src: "images/preview.png", caption: "Exponential Interpolation"},
+  {url:"../edit.html#03/space.frag", src: "images/preview.png", caption: "Step function"},
+  {url:"../edit.html#05/step.frag", src: "images/preview.png", caption: "Smoothstep function"},
+  {url:"../edit.html#05/smoothstep.frag", src: "images/preview.png", caption: "Step function"},
+  {url:"../edit.html#05/impulse.frag", src: "images/preview.png", caption: "Iñigo Quiles\'s Impulse"},
+  {url:"../edit.html#05/cubicpulse.frag", src: "images/preview.png", caption: "Iñigo Quiles\'s Cubic Pulse"},
+  {url:"../edit.html#05/expstep.frag", src: "images/preview.png", caption: "Iñigo Quiles\'s Exponential Step"},
+  {url:"../edit.html#05/expstep.frag", src: "images/preview.png", caption: "Iñigo Quiles\'s Parabola"},
+  {url:"../edit.html#05/parabola.frag", src: "images/preview.png", caption: "Iñigo Quiles\'s Power Curve"},
+  {url:"../edit.html#05/expstep.frag", src: "images/preview.png", caption: "Iñigo Quiles\'s Parabola"},
+  {url:"../edit.html#05/pcurve.frag", src: "images/preview.png", caption: "Iñigo Quiles\'s Power Curve"},
+  {url:"../edit.html#05/easing.frag", src: "images/preview.png", caption: "Easing functions"},
+  {url:"../edit.html#examples/05/stepwise.frag", src: "images/preview.png", caption: "Stepwise function"},
+  {url:"../edit.html?log=160208105810", src: "images/preview.png", caption: "kynd\'s quadratic bezier"},
+  {url:"../edit.html?log=160208105716", src: "images/preview.png", caption: "kynd\'s cubic bezier (1)"},
+  {url:"../edit.html?log=160208105702", src: "images/preview.png", caption: "kynd\'s cubic bezier (2)"}
+];
+
+examples["c05-shared"] = [
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."}
+];
+';

examples_proto/src/gallery_shared.php

@@ -0,0 +1,14 @@
+<?php
+echo '
+examples.shared = [
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."},
+  {url:"../edit.html#06/mix.frag", src: "images/preview.png", caption: "Caption, credit, etc."}
+];
+';
+?>