< < Previous
Home
-
+
Next > >
';
include($path."/footer.php");
?>
-
-
diff --git a/13/README.md b/13/README.md
index 1627e5c..42ce11b 100644
--- a/13/README.md
+++ b/13/README.md
@@ -2,41 +2,43 @@
## Fractal Brownian Motion
-Noise tends to means different things for different people. Musicians will think it in disturbing sounds, communicators as interference and astrophysics as cosmic microwave background. In fact most of this concept have one things in common that bring as back to the begining of random. Waves and their properties. Audio or electromagnetical waves, fluctuation overtime of a signal. That change happens in amplitud and frequency. The ecuation for it looks like this:
+Noise tends to mean different things to different people. Musicians will think of it in terms of disturbing sounds, communicators as interference and astrophysicists as cosmic microwave background radiation. These concepts bring us back to the physical reasons behind randomness in the world around us. However, let's start with something more fundamental, and more simple: waves and their properties. A wave is a fluctuation over time of some property. Audio waves are fluctuations in air pressure, electromagnetical waves are fluctuations in electrical and magnetic fields. Two important characteristics of a wave are its amplitude and frequency. The equation for a simple linear (one-dimensional) wave looks like this:
-* Try changing the values of the frequency and amplitud to understand how they behave.
-* Using shaping functions try changing the amplitud overtime.
-* Using shaping function try changing the frequency overtime.
+* Try changing the values of the frequency and amplitude to understand how they behave.
+* Using shaping functions, try changing the amplitud over time.
+* Using shaping functions, try changing the frequency over time.
-By doing the last to excersize you have manage to "modulate" a sine wave, and you just create AM (amplitud modulated) and FM (frequency modulated) waves. Congratulations!
+By doing the last two exercises you have managed to "modulate" a sine wave, and you just created AM (amplitude modulated) and FM (frequency modulated) waves. Congratulations!
-Another interesting property of waves is their ability to add up. Comment/uncomment and tweak the following lines. Pay atention on how the frequencies and amplitudes change conform we add different waves.
+Another interesting property of waves is their ability to add up, which is formally called superposition. Comment/uncomment and tweak the following lines. Pay attention to how the overall appearance changes as we add waves of different amplitudes and frequencies together.
-* Experiment by changing their values.
-* Is it possible to cancel two waves? how that will look like?
+* Experiment by changing the frequency and amplitude for the additional waves.
+* Is it possible to make two waves cancel each other out? What will that look like?
* Is it possible to add waves in such a way that they will amplify each other?
-In music, each note is asociated with specific a frequency. This frequencies seams to respond to a pattern where it self in what we call scale.
+In music, each note is associated with a specific frequency. The frequencies for these notes follow a pattern which we call a scale, where a doubling or halving of the frequency corresponds to a jump of one octave.
-By adding different iterations of noise (*octaves*), where in each one increment the frequencies (*Lacunarity*) and decreasing amplitude (*gain*) of the **noise** we can obtain a bigger level of granularity on the noise. This technique is call Fractal Brownian Motion (*fBM*) and in it simplest form looks like the following code
+Now, let's use Perlin noise instead of a sine wave! Perlin noise in its basic form has the same general look and feel as a sine wave. Its amplitude and frequency vary somewhat, but the amplitude remains reasonably consistent, and the frequency is restricted to a fairly narrow range around a center frequency. It's not as regular as a sine wave, though, and it's easier to create an appearance of randomness by summing up several scaled versions of noise. It is possible to make a sum of sine waves appear random as well, but it takes many different waves to hide their periodic, regular nature.
+
+By adding different iterations of noise (*octaves*), where we successively increment the frequencies in regular steps (*lacunarity*) and decrease the amplitude (*gain*) of the **noise** we can obtain a finer granularity in the noise and get more fine detail. This technique is called "fractal Brownian Motion" (*fBM*), or simply "fractal noise", and in its simplest form it can be created by the following code:
-* Progressively change the number of octaves to iterate from 1 to 2, 4, 8 and 10. See want happens.
-* With over 4 octaves try changing the lacunarity value.
-* Also with over 4 octaves change the gain value and see what happens.
+* Progressively change the number of octaves to iterate from 1 to 2, 4, 8 and 10. See what happens.
+* When you have more than 4 octaves, try changing the lacunarity value.
+* Also with >4 octaves, change the gain value and see what happens.
-Note how each in each octave the noise seams to have more detail. Also note the self similarity while more octaves are added.
+Note how with each additional octave, the curve seems to get more detail. Also note the self-similarity while more octaves are added. If you zoom in on the curve, a smaller part looks about the same as the whole thing, and each section looks more or less the same as any other section. This is an important property of mathematical fractals, and we are simulating that property in our loop. We are not creating a *true* fractal, because we stop the summation after a few iterations, but theoretically speaking, we would get a true mathematical fractal if we allowed the loop to continue forever and add an infinite number of noise components. In computer graphics, we always have a limit to how small details we can resolve, for example when objects become smaller than a pixel, so there is no need to make infinite sums to create the appearance of a fractal. A lot of terms may be needed sometimes, but never an infinite number.
-The following code is an example of how fBm could be implemented on two dimensions.
+The following code is an example of how fBm could be implemented in two dimensions to create a fractal-looking pattern:
-* Reduce the numbers of octaves by changing the value on line 37
+* Reduce the number of octaves by changing the value on line 37
* Modify the lacunarity of the fBm on line 47
* Explore by changing the gain on line 48
-This techniques is use commonly to construct procedural landscapes. The self similarity of the fBm is perfect for mountains. If you are interested in this use you defenetly should read [this great article of Inigo Quiles about advance noise](http://www.iquilezles.org/www/articles/morenoise/morenoise.htm).
+This technique is commonly used to construct procedural landscapes. The self-similarity of the fBm is perfect for mountains, because the erosion processes that create mountains work in a manner that yields this kind of self-similarity across a large range of scales. If you are interested in this, use you should definitly read [this great article by Inigo Quiles about advance noise](http://www.iquilezles.org/www/articles/morenoise/morenoise.htm).
-Using escentially the same technique is also possible to obtain other effect like what is known as **turbulence**. It's esentially a fBm but constructed from the absolute value of a signed noise.
+Using more or less the same technique, is also possible to obtain other effects like what is known as **turbulence**. It's essentially an fBm, but constructed from the absolute value of a signed noise to create sharp valleys in the function.
```glsl
for (int i = 0; i < OCTAVES; i++) {
- value += amplitud * abs(snoise(st));
+ value += amplitude * abs(snoise(st));
st *= 2.;
amplitud *= .5;
}
@@ -84,7 +86,7 @@ for (int i = 0; i < OCTAVES; i++) {
-Another member of this family of algorithms is the **ridge**. Constructed similarly to the turbolence but with some extra calculations:
+Another member of this family of algorithms is the **ridge**, where the sharp valleys are turned upside down to create sharp ridges instead:
```glsl
n = abs(n); // create creases
@@ -94,12 +96,16 @@ Another member of this family of algorithms is the **ridge**. Constructed simila
+Another variant which can create useful variations is to multiply the noise components together instead of adding them. It's also interesting to scale subsequent noise functions with something that depends on the previous terms in the loop. When we do things like that, we are moving away from the strict definition of a fractal and into the relatively unknown field of "multifractals". Multifractals are not as strictly defined mathematically, but that doesn't make them less useful for graphics. In fact, multifractal simulations are very common in modern commercial software for terrain generation. For further reading, you could read chapter 16 of the book "Texturing and Modeling: a Procedural Approach" (3rd edition), by Kenton Musgrave. Sadly, that book is out of print since a few years back, but you can still find it in libraries and on the second hand market. (There's a PDF version of the 1st edition available for purchase online, but don't buy that - it's a waste of money. It's from 1994, and it doesn't contain any of the terrain modeling stuff from the 3rd edition.)
+
### Domain Warping
[Inigo Quiles wrote this other fascinating article](http://www.iquilezles.org/www/articles/warp/warp.htm) about how is possible to use fBm to warp a space of a fBm. Mind blowing, Right? Is like the dream inside the dream of Inception.
-A mild example of this technique is the following code where the wrap is use to produce something this clouds-like texture. Note how the self similarity propertie still is apreciated.
+A less extreme example of this technique is the following code where the wrap is use to produce something this clouds-like texture. Note how the self-similarity property is still present in the result.
+
+Warping the texture coordinates with noise in this manner can be very useful, a lot of fun, and fiendishly difficult to master. It's a powerful tool, but it takes quite a bit of experience to use it well. A useful tool for this is to displace the coordinates with the derivative (gradient) of noise. [A famous article by Ken Perlin and Fabrice Neyret called "flow noise"](http://evasion.imag.fr/Publications/2001/PN01/) is based on this idea. Some modern implementations of Perlin noise include a variant that computes both the function and its analytical gradient. If the "true" gradient is not available for a procedural function, you can always compute finite differences to approximate it, although that is less accurate and involves more work.
diff --git a/13/index.php b/13/index.php
index e4b0424..31d9d3e 100644
--- a/13/index.php
+++ b/13/index.php
@@ -26,8 +26,9 @@
- < < Previous
- Home
- - Next > >
';
include($path."/footer.php");
?>
+
+
diff --git a/README-es.md b/README-es.md
index 185d773..913377e 100644
--- a/README-es.md
+++ b/README-es.md
@@ -56,7 +56,7 @@ Esta es una guía paso a paso a través del abstracto y complejo universo de los
* [Apéndice:](appendix/) Otras formas de usar este libro
* [¿Cómo puedo ver el libro offline?](appendix/)
- * [¿Cómo puedo correr los ejemplos en una RaspberryPi?](appendix/)
+ * [¿Cómo puedo correr los ejemplos en una Raspberry Pi?](appendix/)
* [¿Cómo imprimir este libro?](appendix/)
* [Galería de ejemplos](examples/)
diff --git a/README-fr.md b/README-fr.md
index 267f49e..fce8ff7 100644
--- a/README-fr.md
+++ b/README-fr.md
@@ -56,7 +56,7 @@ Ceci est un guide étape-par-étape à travers le monde abstrait et complexe des
* [Appendice:](appendix/) Autres manières d'utiliser ce livre
* [Comment puis-je consulter ce livre hors-ligne?](appendix/)
- * [Comment exécuter les exemples sur un RaspberryPi?](appendix/)
+ * [Comment exécuter les exemples sur un Raspberry Pi?](appendix/)
* [Comment imprimer ce livre?](appendix/)
* [Galerie d'exemples](examples/)
diff --git a/README-jp.md b/README-jp.md
index a43b628..472119f 100644
--- a/README-jp.md
+++ b/README-jp.md
@@ -1,7 +1,7 @@
-
+
# The Book of Shaders
-[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/) 著
+[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/)、[Jen Lowe](http://jenlowe.net/)著
この本はフラグメントシェーダーについてのガイドブックです。難解で複雑なフラグメントシェーダーの世界を、一歩一歩わかりやすくご案内します。
@@ -34,8 +34,9 @@
* Generative designs
* [ランダム](10/?lan=jp)
- * [Noise（未訳）](11/)
- * Fractional brownian motion
+ * [Noise](11/?lan=jp)
+ * [Cellular noise](12/)
+ * [Fractional brownian motion](13/)
* Fractals
* Image processing:
@@ -63,7 +64,7 @@
* [Appendix:](appendix/) Other ways to use this book
* [How can I navigate this book offline?](appendix/)
- * [How to run the examples on a RaspberryPi?](appendix/)
+ * [How to run the examples on a Raspberry Pi?](appendix/)
* [How to print this book?](appendix/)
* [Examples Gallery](examples/)
@@ -74,9 +75,9 @@
[Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/)（1982年、アルゼンチン、ブエノスアイレス生） はニューヨーク在住のアーティスト／開発者です。有機的なものと人工的なもの、アナログとデジタル、個人と集団の狭間を探求し、プログラミングコードを表現手段としてより良い共存のあり方を模索しています。
-パトリシオは心理療法（psychotherapy）と表現療法（expressive art therapy）に精通しており、パーソンズ美術大学でデザイン&テクノロジーのMFA（Master of Fine Arts - 美術系の修士に相当）を取得しています。現在は[Mapzen](https://mapzen.com/)でグラフィックエンジニアとしてオープンソースのマッピングツールの開発に携わっています。
+Patricioは心理療法（psychotherapy）と表現療法（expressive art therapy）に精通しており、パーソンズ美術大学でデザイン&テクノロジーのMFA（Master of Fine Arts - 美術系の修士に相当）を取得しています。現在は[Mapzen](https://mapzen.com/)でグラフィックエンジニアとしてオープンソースのマッピングツールの開発に携わっています。
-
+
## 訳者について
diff --git a/README-kr.md b/README-kr.md
index e989c27..55806d7 100644
--- a/README-kr.md
+++ b/README-kr.md
@@ -60,7 +60,7 @@
* [Appendix:](appendix/) Other ways to use this book
* [How can I navigate this book offline?](appendix/)
- * [How to run the examples on a RaspberryPi?](appendix/)
+ * [How to run the examples on a Raspberry Pi?](appendix/)
* [How to print this book?](appendix/)
* [Examples Gallery](examples/)
diff --git a/appendix/00/README-it.md b/appendix/00/README-it.md
index 24912a7..115166e 100644
--- a/appendix/00/README-it.md
+++ b/appendix/00/README-it.md
@@ -12,7 +12,7 @@ brew upgrade
brew install git
```
-Su **RaspberryPi** è necessario fare:
+Su **Raspberry Pi** è necessario fare:
```bash
sudo apt-get update
diff --git a/appendix/00/README.md b/appendix/00/README.md
index 41fb045..55fbb01 100644
--- a/appendix/00/README.md
+++ b/appendix/00/README.md
@@ -2,7 +2,7 @@
Let’s say you have a long trip and you want to use it to teach yourself some shaders. In that case you can make a local copy of this book on your computer and run a local server.
-For that you only need Python 2.6 and a git client. On MacOS and RaspberryPi computers Python is installed by default but you still need to install a git client. For that:
+For that you only need Python 2.6 and a git client. On MacOS and Raspberry Pi computers Python is installed by default but you still need to install a git client. For that:
In **MacOSX** be sure to have [homebrew](http://brew.sh/) installed and then on your terminal do:
@@ -12,7 +12,7 @@ brew upgrade
brew install git
```
-On **RaspberryPi** you need to do:
+On **Raspberry Pi** you need to do:
```bash
sudo apt-get update
diff --git a/appendix/01/README.md b/appendix/01/README.md
index d81ff49..de5a1e0 100644
--- a/appendix/01/README.md
+++ b/appendix/01/README.md
@@ -1,12 +1,12 @@
-## How to run the examples on a RaspberryPi?
+## How to run the examples on a Raspberry Pi?
-A few years ago, taking for granted that everybody have a computer with a GPU was a long shot. Now, most computers have a graphic unit, but is a high bar for a requirement in for example a course or class.
+A few years ago, assuming that everybody has a computer with a graphical processing unit was a long shot. Now, most computers have a GPU, but it's still a high bar for a requirement in a workshop or class, for example.
-Thanks to the [RaspberryPi project](http://www.raspberrypi.org/) a new type of small and cheap generation of computers (around $35 each) has found its way into classrooms. More importantly for the purposes of this book, the [RaspberryPi](http://www.raspberrypi.org/) comes with a decent Bradcom GPU card that can be accessed directly from the console. I made a [flexible GLSL live coding tool call **glslViewer**](https://github.com/patriciogonzalezvivo/glslViewer) that runs all the examples on this book. This program also is hable to update automatically the changes the user makes when they save it. What that means? you can edit the shader and every time you save it, the shader will be re-compile and rendered for you.
+Thanks to the [Raspberry Pi Foundation](http://www.raspberrypi.org/) a new type of small and cheap generation of computers (around $35 each) has found its way into classrooms. More importantly for the purposes of this book, the [Raspberry Pi](http://www.raspberrypi.org/) comes with a decent Broadcom GPU that can be accessed directly from the console. I made a [flexible GLSL live coding tool call **glslViewer**](https://github.com/patriciogonzalezvivo/glslViewer) that runs all the examples in this book. This program also has the ability to update automatically when the user saves a change to their code. What does this mean? You can edit the shader and every time you save it, the shader will be re-compile and render for you.
-By making a local copy of the repository of this book (see the above section) and having [```glslViewer``` installed](https://github.com/patriciogonzalezvivo/glslViewer), users can run the examples with ```glslviewer```. Also by using the ```-l``` flag they can render the example on a corner of the screen while they modify it with any text editor (like ```nano```, ```pico```, ```vi```, ```vim``` or ```emacs```). This also works if the user is connected through ssh/sftp.
+By making a local copy of the repository of this book (see the above section) and having [```glslViewer``` installed](https://github.com/patriciogonzalezvivo/glslViewer), users can run the examples with ```glslviewer```. Also by using the ```-l``` flag they can render the example in a corner of the screen while they modify it with any text editor (like ```nano```, ```pico```, ```vi```, ```vim``` or ```emacs```). This also works if the user is connected through ssh/sftp.
-To install and set this all up on the RaspberryPi after installing the OS and logging in, type the following commands:
+To install and set this all up on the Raspberry Pi after installing the OS and logging in, type the following commands:
```bash
sudo apt-get update
diff --git a/appendix/02/README-it.md b/appendix/02/README-it.md
index 91fa6cc..5577629 100644
--- a/appendix/02/README-it.md
+++ b/appendix/02/README-it.md
@@ -20,7 +20,7 @@ make
make install
```
-Su **RaspberryPi** è necessario fare:
+Su **Raspberry Pi** è necessario fare:
```bash
sudo apt-get update
@@ -45,7 +45,7 @@ Scarica e Installa [basictex & MacTeX-Additions](http://www.tug.org/mactex/morep
brew install pandoc
```
-Su **RaspberryPi**:
+Su **Raspberry Pi**:
```bash
sudo apt-get install texlive-xetex pandoc
diff --git a/appendix/02/README.md b/appendix/02/README.md
index 3ef4d44..41fb616 100644
--- a/appendix/02/README.md
+++ b/appendix/02/README.md
@@ -21,7 +21,7 @@ make
make install
```
-On **RaspberryPi** you need to do:
+On **Raspberry Pi** you need to do:
```bash
sudo apt-get update
@@ -46,7 +46,7 @@ Download and Install [basictex & MacTeX-Additions](http://www.tug.org/mactex/mor
brew install pandoc
```
-On **RaspberryPi**:
+On **Raspberry Pi**:
```bash
sudo apt-get install texlive-xetex pandoc
diff --git a/appendix/README.md b/appendix/README.md
index 321b785..0db3025 100644
--- a/appendix/README.md
+++ b/appendix/README.md
@@ -2,7 +2,7 @@
1. [How can I navigate this book off-line?](00/)
-2. [How to run the examples on a RaspberryPi?](01/)
+2. [How to run the examples on a Raspberry Pi?](01/)
3. [How to print this book?](02/)
diff --git a/css/style.css b/css/style.css
index 47b24b1..6b42c22 100644
--- a/css/style.css
+++ b/css/style.css
@@ -97,18 +97,29 @@ img {
color: #999;
}
+.toc-header {
+ font-size: 16px;
+ line-height: 16px;
+ margin-top: 24px;
+ margin-bottom: 24px;
+ text-align: right;
+ color: #999;
+}
+
.header .subtitle {
-
+
}
-.header .subtitle a{
+.header .subtitle a,
+.toc-header .subtitle a {
font-size: 1.3em;
font-style: italic;
text-decoration: none;
border: 0!important;
}
-.header a{
+.header a,
+.toc-header a {
font-size: 0.8em;
font-style: italic;
text-decoration: none;
@@ -228,7 +239,7 @@ code {
margin-left: auto;
margin-right: auto;
max-width: 700px;
-
+
}
.simpleFunction .CodeMirror {
@@ -284,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;
}
@@ -357,4 +370,3 @@ code {
font-style: italic;
text-align: right;
}
-
diff --git a/examples/README.md b/examples/README.md
old mode 100755
new mode 100644
diff --git a/examples/index.php b/examples/index.php
index 1d420c3..2ab5ca8 100755
--- a/examples/index.php
+++ b/examples/index.php
@@ -1,5 +1,6 @@
';
-
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 '
';
- echo $Parsedown->text(file_get_contents($folder.'TITLE'.$language.'.md'));
- echo '';
+ if (file_exists($folder.'README.md')) {
+ echo '
';
+ echo $Parsedown->text(file_get_contents($folder.'TITLE'.$language.'.md'));
+ echo '';
+ } 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 '
';
}
-
- 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 '
';
+ $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 '
more
';
+ echo '
more
';
}
}
}
@@ -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');
}
}
diff --git a/index.php b/index.php
index 57c13cc..ff67373 100644
--- a/index.php
+++ b/index.php
@@ -1,4 +1,4 @@
-';
-
+
include($path."/src/parsedown/Parsedown.php");
$Parsedown = new Parsedown();
echo $Parsedown->text(file_get_contents($README.'.md'));
-
+
echo '
';
include("footer.php");
-?>
\ No newline at end of file
+?>
diff --git a/motionToolKit/SHORT_SUMMARY.md b/motionToolKit/SHORT_SUMMARY.md
new file mode 100644
index 0000000..423c325
--- /dev/null
+++ b/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.
+
+
+
diff --git a/motionToolKit/SUMMARY.md b/motionToolKit/SUMMARY.md
new file mode 100644
index 0000000..3dc4227
--- /dev/null
+++ b/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?
diff --git a/motionToolKit/TITLE.md b/motionToolKit/TITLE.md
new file mode 100644
index 0000000..0d76a5d
--- /dev/null
+++ b/motionToolKit/TITLE.md
@@ -0,0 +1 @@
+# MotionToolKit
diff --git a/motionToolKit/featured_examples.php b/motionToolKit/featured_examples.php
new file mode 100644
index 0000000..6353626
--- /dev/null
+++ b/motionToolKit/featured_examples.php
@@ -0,0 +1 @@
+