diff --git a/examples_proto/02/README.md b/examples_proto/02/README.md new file mode 100644 index 0000000..a229a35 --- /dev/null +++ b/examples_proto/02/README.md @@ -0,0 +1,5 @@ +## "Hello World!" + +Usually the "Hello world!" example is the first step to learning a new language. In GPU-land rendering text is an overcomplicated task for a first step, instead we'll choose a bright welcoming color to shout our enthusiasm! + +Read ["Hello World!"](../02) to learn more. \ No newline at end of file diff --git a/examples_proto/02/index.php b/examples_proto/02/index.php new file mode 100644 index 0000000..83fa3a6 --- /dev/null +++ b/examples_proto/02/index.php @@ -0,0 +1,32 @@ +'; + include("../../src/parsedown/Parsedown.php"); + $Parsedown = new Parsedown(); + echo $Parsedown->text(file_get_contents($README.'.md')); + $dir = basename(__DIR__); + echo "
"; + echo ' + +
+ '; + + include("../../footer.php"); +?> + diff --git a/examples_proto/03/README.md b/examples_proto/03/README.md new file mode 100644 index 0000000..c85d777 --- /dev/null +++ b/examples_proto/03/README.md @@ -0,0 +1,11 @@ +## Uniforms + +Learn how to use Uniform variables. Uniform variables, or simply *uniforms* are the variables that carry information equally accessible from all of the threads of your shader. The [GSLS editor](http://editor.thebookofshaders.com/) has three uniforms set up for you. + +Read [Uniforms](../03) to learn more. + +```glsl +uniform vec2 u_resolution; // Canvas size (width,height) +uniform vec2 u_mouse; // mouse position in screen pixels +uniform float u_time; // Time in seconds since load +``` diff --git a/examples_proto/03/index.php b/examples_proto/03/index.php new file mode 100644 index 0000000..83fa3a6 --- /dev/null +++ b/examples_proto/03/index.php @@ -0,0 +1,32 @@ +'; + include("../../src/parsedown/Parsedown.php"); + $Parsedown = new Parsedown(); + echo $Parsedown->text(file_get_contents($README.'.md')); + $dir = basename(__DIR__); + echo "
"; + echo ' + +
+ '; + + include("../../footer.php"); +?> + diff --git a/examples_proto/05/README.md b/examples_proto/05/README.md old mode 100644 new mode 100755 index ec0c1dc..491c417 --- a/examples_proto/05/README.md +++ b/examples_proto/05/README.md @@ -1,9 +1,5 @@ -# Shader Gallery - ## Shaping functions Shaping functions is fundamental technique that is recursively used throughout this book that let you control the variation of the value at will. Study how different functions of x are used to create different shapes and try making your own function. Read [Shaping functions](../05) to learn more. - -
\ No newline at end of file diff --git a/examples_proto/05/index.php b/examples_proto/05/index.php old mode 100644 new mode 100755 index 0cf472d..83fa3a6 --- a/examples_proto/05/index.php +++ b/examples_proto/05/index.php @@ -18,7 +18,8 @@ include("../../src/parsedown/Parsedown.php"); $Parsedown = new Parsedown(); echo $Parsedown->text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
"; echo '
@@ -26,5 +27,6 @@
  • Gallery Home
    • '; - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/06/README.md b/examples_proto/06/README.md old mode 100644 new mode 100755 index 225e9ef..bb4066b --- a/examples_proto/06/README.md +++ b/examples_proto/06/README.md @@ -1,10 +1,6 @@ -# Shader Gallery - ## Colors Familiarize yourself with how to express colors in shaders. The examples cover how to mix colors and beautifully animate them over time as well as conversion between two different models(RGB and HSB). In GLSL, colors are simply just vectors, which means you can easily apply the concepts and techniques you learn here to other Read [Colors](../06) to learn more. - -
    \ No newline at end of file diff --git a/examples_proto/06/index.php b/examples_proto/06/index.php old mode 100644 new mode 100755 index e89f972..83fa3a6 --- a/examples_proto/06/index.php +++ b/examples_proto/06/index.php @@ -1,6 +1,6 @@ text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
    "; echo '
    @@ -26,5 +27,6 @@
  • Gallery Home
    • '; - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/07/README.md b/examples_proto/07/README.md old mode 100644 new mode 100755 index 76d2041..22e5f13 --- a/examples_proto/07/README.md +++ b/examples_proto/07/README.md @@ -1,9 +1,5 @@ -# Shader Gallery - ## Shapes Let's look at how to draw simple shapes in a parallel procedural way. In a nutshell, all you need to do is to determine if each pixel belongs to the shape you want to draw or not, and apply different colors accordingly. You can use coordinate system like a grid paper to draw rectangles and squares. We'll look at more advanced concept called distance field to draw more complex shapes. Read [Shapes](../07) to learn more. - -
    \ No newline at end of file diff --git a/examples_proto/07/index.php b/examples_proto/07/index.php old mode 100644 new mode 100755 index 3bfef54..83fa3a6 --- a/examples_proto/07/index.php +++ b/examples_proto/07/index.php @@ -1,6 +1,6 @@ text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
    "; echo '
    @@ -26,6 +27,6 @@
  • Gallery Home
    • '; - - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/08/README.md b/examples_proto/08/README.md old mode 100644 new mode 100755 index 1953156..644c30d --- a/examples_proto/08/README.md +++ b/examples_proto/08/README.md @@ -1,10 +1,6 @@ -# Shader Gallery - ## Matrix Matrix is a very powerful tool for manipulating vectors. By mastering how to use matrices, you can freely translate, scale and rotate shapes. Since the technique can be equally applied to anything expressed by vectors, we will look at many more advanced use of matrices later in this book. Matrices may look complex at a first glance, but you'll find it very handy and useful as you get used to the concept. Let's practice here and learn basics with simple examples. Read [Matrix](../08) to learn more. - -
    diff --git a/examples_proto/08/index.php b/examples_proto/08/index.php old mode 100644 new mode 100755 index 31dee20..83fa3a6 --- a/examples_proto/08/index.php +++ b/examples_proto/08/index.php @@ -1,6 +1,6 @@ text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
    "; echo '
    @@ -26,5 +27,6 @@
  • Gallery Home
    • '; - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/09/README.md b/examples_proto/09/README.md old mode 100644 new mode 100755 index aeed911..01c921e --- a/examples_proto/09/README.md +++ b/examples_proto/09/README.md @@ -1,9 +1,5 @@ -# Shader Gallery - ## Patterns Repetitive patterns are perfect theme for computational sketching. Different from conventional way of drawing, shaders lets you draw everything parallelly at once. Instead of repeating the same procedure many times, you will wrap and repeat the "space". Sounds like Sci-Fi? Let's find out what it really means. Read [Patterns](../09) to learn more. - -
    diff --git a/examples_proto/09/index.php b/examples_proto/09/index.php old mode 100644 new mode 100755 index bc7665d..83fa3a6 --- a/examples_proto/09/index.php +++ b/examples_proto/09/index.php @@ -1,6 +1,6 @@ text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
    "; echo '
    @@ -26,5 +27,6 @@
  • Gallery Home
    • '; - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/10/README.md b/examples_proto/10/README.md old mode 100644 new mode 100755 index 51b0a43..142b0a1 --- a/examples_proto/10/README.md +++ b/examples_proto/10/README.md @@ -1,9 +1,5 @@ -# Shader Gallery - ## Random Life is boring if everything was predictable. Though nothing is truly random in computers, we can create pseudo-randomness that looks totally unpredictable using simple tricks to create more interesting patterns and behaviors. Read [Random](../10) to learn more. - -
    \ No newline at end of file diff --git a/examples_proto/10/index.php b/examples_proto/10/index.php old mode 100644 new mode 100755 index e3ffddb..83fa3a6 --- a/examples_proto/10/index.php +++ b/examples_proto/10/index.php @@ -1,6 +1,6 @@ text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
    "; echo '
    @@ -26,5 +27,6 @@
  • Gallery Home
    • '; - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/11/README.md b/examples_proto/11/README.md old mode 100644 new mode 100755 index b09d09c..9c4e3bf --- a/examples_proto/11/README.md +++ b/examples_proto/11/README.md @@ -1,10 +1,6 @@ -# Shader Gallery - ## Noise How can we create more natural looking textures like surface of the roads, rocks, trees and clouds? Noise function is the answer. Since Ken Perlin invented his first noise algorithm in 80s, the technique has been extensively used throughout computer graphics and simulations. Even if you have never heard of the name, it's not possible you have never seen it. Let's look step by step at how the function is built and works. We also cover more efficient version of the algorithm called simplex noise. Read [Noise](../11) to learn more. - -
    \ No newline at end of file diff --git a/examples_proto/11/index.php b/examples_proto/11/index.php old mode 100644 new mode 100755 index abf9727..83fa3a6 --- a/examples_proto/11/index.php +++ b/examples_proto/11/index.php @@ -1,6 +1,6 @@ text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
    "; echo '
    @@ -26,5 +27,6 @@
  • Gallery Home
    • '; - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/README.md b/examples_proto/README.md old mode 100644 new mode 100755 index 82766db..43ff998 --- a/examples_proto/README.md +++ b/examples_proto/README.md @@ -1,123 +1,3 @@ # Shader Gallery The following is the list of examples present in this book and more from our excellent contributors and readers. Find your favorite example and play around with it. It's good idea to change the values or commenting out a part of the code to understand what each part of the code is doing. Once you feel comfortable with the example, try if you can create something unique and new by tweaking it bit by bit, then share your experiment with "share" button at the top of the editor so that someone can find it and study. - -## Featured shaders - -Featured examples shared by our readers and students. We are looking forward to see a lot more shaders created with the [GLSL editor](http://editor.thebookofshaders.com/). Please share your masterpiecess to [@bookofshaders](https://twitter.com/bookofshaders). - - -
    - - -## Getting started -### "Hello World!" - -Usually the "Hello world!" example is the first step to learning a new language. In GPU-land rendering text is an overcomplicated task for a first step, instead we'll choose a bright welcoming color to shout our enthusiasm! - -Read ["Hello World!"](../02) to learn more. - - - -### Uniforms - -Learn how to use Uniform variables. Uniform variables, or simply *uniforms* are the variables that carry information equally accessible from all of the threads of your shader. The [GSLS editor](http://editor.thebookofshaders.com/) has three uniforms set up for you. - -Read [Uniforms](../03) to learn more. - -```glsl -uniform vec2 u_resolution; // Canvas size (width,height) -uniform vec2 u_mouse; // mouse position in screen pixels -uniform float u_time; // Time in seconds since load -``` - -
    - - - -## Algorithmic drawing -### Shaping functions - -Shaping functions is fundamental technique that is recursively used throughout this book that let you control the variation of value at will. Study how different functions of x are used to create different shapes and try making your own function. - -Read [Shaping functions](../05) to learn more. - -
    -
    See All Examples
    - - - -### Color - -Familiarize yourself with how to express colors in shaders. The examples cover how to mix colors and beautifully animate them over time as well as conversion between two different models(RGB and HSB). -In GLSL, colors are simply just vectors, which means you can easily apply the concepts and techniques you learn here to other - -Read [Colors](../06) to learn more. - -
    -
    See All Examples
    - - -### Shapes - -Let's look at how to draw simple shapes in a parallel procedural way. In a nutshell, all you need to do is to determine if each pixel belongs to the shape you want to draw or not, and apply different colors accordingly. You can use coordinate system like a grid paper to draw rectangles and squares. We'll look at more advanced concept called distance field to draw more complex shapes. - -Read [Shapes](../07) to learn more. - -
    -
    See All Examples
    - - -### Matrix - -Matrix is a very powerful tool for manipulating vectors. By mastering how to use matrices, you can freely translate, scale and rotate shapes. Since the technique can be equally applied to anything expressed by vectors, we will look at many more advanced use of matrices later in this book. -Matrices may look complex at a first glance, but you'll find it very handy and useful as you get used to the concept. Let's practice here and learn basics with simple examples. - -Read [Matrix](../08) to learn more. - -
    -
    See All Examples
    - - - -### Patterns - -Repetitive patterns are perfect theme for computational sketching. Different from conventional way of drawing, shaders lets you draw everything parallely at once. Instead of repeating the same procedure many times, you will wrap and repeat the "space". Sounds like Sci-Fi? Let's find out what it really means. - -Read [Patterns](../09) to learn more. - -
    -
    See All Examples
    - - - -## Generative designs -### Random - -Life is boring if everything was predictable. Though nothing is truly random in computers, we can create pseudo-randomness that looks totally unpredictable using simple tricks to create more interesting patterns and behaviors. - -Read [Random](../10) to learn more. - -
    -
    See All Examples
    - - - -### Noise - -How can we create more natural looking textures like surface of the roads, rocks, trees and clouds? Noise function is the answer. -Since Ken Perlin invented his first noise algorithm in 80s, the technique has been extensively used throughout computer graphics and simulations. Even if you have never heard of the name, it's not possible you have never seen it. Let's look step by step at how the function is built and works. We also cover more efficient version of the algorithm called simplex noise. - -Read [Noise](../11) to learn more. - -
    -
    See All Examples
    - - - -## Advanced examples - -This section features relatively advanced examples from different chapters. Try if you can read and understand all the examples here to test yourself. - -
    -
    See All Examples
    diff --git a/examples_proto/advanced/README.md b/examples_proto/advanced/README.md old mode 100644 new mode 100755 index eec00d4..76fdf34 --- a/examples_proto/advanced/README.md +++ b/examples_proto/advanced/README.md @@ -1,7 +1,3 @@ -# Shader Gallery - ## Advanced examples 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. - -
    \ No newline at end of file diff --git a/examples_proto/advanced/index.php b/examples_proto/advanced/index.php old mode 100644 new mode 100755 index da3cc74..83fa3a6 --- a/examples_proto/advanced/index.php +++ b/examples_proto/advanced/index.php @@ -1,6 +1,6 @@ text(file_get_contents($README.'.md')); - + $dir = basename(__DIR__); + echo "
    "; echo '
    '; - include("../footer.php"); + include("../../footer.php"); ?> + diff --git a/examples_proto/css/gallery.css b/examples_proto/css/gallery.css old mode 100644 new mode 100755 index 072bc9b..a43ea80 --- a/examples_proto/css/gallery.css +++ b/examples_proto/css/gallery.css @@ -1,5 +1,11 @@ @charset 'utf-8'; +.gallery-top h2 { + padding-top: 48px; + margin-top: 48px; + border-top: 1px solid #CCCCCC; +} + .glslChapterGallery { margin-top: 48px; margin-bottom: 12px; diff --git a/examples_proto/footer.php b/examples_proto/footer.php deleted file mode 100644 index b912c8c..0000000 --- a/examples_proto/footer.php +++ /dev/null @@ -1,19 +0,0 @@ - -

    Copyright 2015 Patricio Gonzalez Vivo

    - - - - - - - '; -?> diff --git a/examples_proto/header.php b/examples_proto/header.php old mode 100644 new mode 100755 diff --git a/examples_proto/images/moon-texture.jpg b/examples_proto/images/moon-texture.jpg deleted file mode 100644 index a1f70c2..0000000 Binary files a/examples_proto/images/moon-texture.jpg and /dev/null differ diff --git a/examples_proto/images/preview.png b/examples_proto/images/preview.png deleted file mode 100644 index 0d4a45c..0000000 Binary files a/examples_proto/images/preview.png and /dev/null differ diff --git a/examples_proto/images/preview0.png b/examples_proto/images/preview0.png deleted file mode 100644 index bb55e84..0000000 Binary files a/examples_proto/images/preview0.png and /dev/null differ diff --git a/examples_proto/images/preview1.png b/examples_proto/images/preview1.png deleted file mode 100644 index 8d5a402..0000000 Binary files a/examples_proto/images/preview1.png and /dev/null differ diff --git a/examples_proto/images/preview2.png b/examples_proto/images/preview2.png deleted file mode 100644 index 5b44518..0000000 Binary files a/examples_proto/images/preview2.png and /dev/null differ diff --git a/examples_proto/index.php b/examples_proto/index.php old mode 100644 new mode 100755 index 970c149..ee6982b --- a/examples_proto/index.php +++ b/examples_proto/index.php @@ -15,11 +15,35 @@ include("./header.php"); include("../chap-header.php"); - echo '
    '; + echo '
    '; include($path."/src/parsedown/Parsedown.php"); $Parsedown = new Parsedown(); + + $chapters = array( + array("shared", FALSE), + array("02", FALSE), + array("03", FALSE), + array("05", TRUE), + array("07", TRUE), + array("09", TRUE), + array("10", TRUE), + array("11", TRUE), + array("advanced", TRUE) + ); + echo $Parsedown->text(file_get_contents($README.'.md')); + foreach ($chapters as $chapter) { + echo $Parsedown->text(file_get_contents($chapter[0].'/'.README.'.md')); + $log = $chapter[0]; + if ($chapter[1]) {$log .= ',3';} + echo "
    "; + if ($chapter[1]) { + echo "
    See All Examples
    "; + } + } + + echo '
    @@ -28,5 +52,6 @@
  • Home
    • '; - include("footer.php"); + include("../footer.php"); + ?> diff --git a/examples_proto/moon.frag b/examples_proto/moon.frag old mode 100644 new mode 100755 diff --git a/examples_proto/shared/README.md b/examples_proto/shared/README.md new file mode 100644 index 0000000..59c1e1b --- /dev/null +++ b/examples_proto/shared/README.md @@ -0,0 +1,3 @@ +## Featured shaders + +Featured examples shared by our readers and students. We are looking forward to see a lot more shaders created with the [GLSL editor](http://editor.thebookofshaders.com/). Please share your masterpiecess to [@bookofshaders](https://twitter.com/bookofshaders). \ No newline at end of file diff --git a/examples_proto/shared/index.php b/examples_proto/shared/index.php new file mode 100644 index 0000000..83fa3a6 --- /dev/null +++ b/examples_proto/shared/index.php @@ -0,0 +1,32 @@ +'; + include("../../src/parsedown/Parsedown.php"); + $Parsedown = new Parsedown(); + echo $Parsedown->text(file_get_contents($README.'.md')); + $dir = basename(__DIR__); + echo "
    "; + echo ' +
    +
    + '; + + include("../../footer.php"); +?> + diff --git a/examples_proto/src/examples.js b/examples_proto/src/examples.js old mode 100644 new mode 100755 index 36ab396..a266c39 --- a/examples_proto/src/examples.js +++ b/examples_proto/src/examples.js @@ -125,7 +125,7 @@ var shaderList = { window.addEventListener("load", function () { var elms = document.getElementsByClassName('glslChapterGallery'); - +console.log(elms); for (var i = 0; i < elms.length; i++) { var elm = elms[i]; if (elm.hasAttribute('log')) { diff --git a/examples_proto/test.html b/examples_proto/test.html old mode 100644 new mode 100755