From 6421d53afcf10692e07ed199a24aeb011261c946 Mon Sep 17 00:00:00 2001 From: kynd Date: Sat, 9 Apr 2016 02:06:34 -0700 Subject: [PATCH 01/24] updated chapter 4 --- 04/README-jp.md | 40 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/04/README-jp.md b/04/README-jp.md index 2c8c20f..6366213 100644 --- a/04/README-jp.md +++ b/04/README-jp.md @@ -1,14 +1,46 @@ ## シェーダーを使う -そろそろ自分の得意なプラットフォームを使ってシェーダーを試してみたいところでしょう。以下ではこの本で使用するのと同じuniform変数を使えるよう、いくつかの一般的なフレームワークでシェーダーを設定する方法をお見せします。（[この章のGitHubレポジトリー](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04)には、この章で取り上げる3つのフレームワークに対応したソースコードが置いてあります） +この本を書くに当たり自分自身の練習も兼ねて、シェーダーを書いて表示したり、シェアしたり、まとめたりする為のツールを作成しました。このツールはLinux Desktop、 MacOs、[RaspberryPi](https://www.raspberrypi.org/)やブラウザ上で同じように動作します。あなたのコードを書き換える必要はありません。 + +**表示する**: この本のすべてのサンプルは[glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas)を使って表示されています。glslCanvasを使うとシェーダーを単体で、とても簡単に走らせることができます。 + +```html + +``` + +ご覧の通り、必要なのは ```class="glslCanvas"``` を指定した ```canvas``` 要素に ```data-fragment-url```でシェーダーのURLを指定することだけです。詳しくは[こちら](https://github.com/patriciogonzalezvivo/glslCanvas)をご覧ください。 + +もしあなたが私のような人だったら、コンソールから直接シェーダーを走らせたいと思うでしょう。その場合は[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer)を試してみてください。このアプリケーションを利用すると[ImageMagic](http://www.imagemagick.org/script/index.php)を使うのと同じような方法で、シェーダーをbashスクリプトやUNIXパイプラインで使うことができます。[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer)は[RaspberryPi](https://www.raspberrypi.org/)でシェーダーをコンパイルするのにとても便利なので、[openFrame.io](http://openframe.io/)でもglslViewerをシェーダーによる作品の表示に使っています。詳しくは[こちら](https://github.com/patriciogonzalezvivo/glslViewer)をご覧ください。 + +```bash +glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png +``` + +**作成する**: シェーダーのコーディングを簡単にするため、[glslEditor](https://github.com/patriciogonzalezvivo/glslEditor)というオンラインのエディターを用意しました。このエディターはこの本のサンプルにも埋め込まれています。glslEditorには幾つもの便利なウィジェットが備わっていて、直接触って具体的に結果を見ることで、抽象的なglslのコーディングをより理解しやすくしてくれます。 + +![](glslEditor-01.gif) + +もしオフラインで[SublimeText](https://www.sublimetext.com/)を使って作業したい場合はこの[glslViewerのパッケージ](https://packagecontrol.io/packages/glslViewer)をインストールすることもできます。詳しくは[こちら](https://github.com/patriciogonzalezvivo/sublime-glslViewer)をご覧ください。 + +![](glslViewer.gif) + +**シェアする**: オンラインのglslEditorを使うとあなたのシェーダーをシェアすることもできます。ページに埋め込まれたものもスタンドアローン版にもexportボタンがあり、あなたのシェーダーのURLを取得することができます。また、[openFrame.io](http://openframe.io/)に直接シェアすることもできます。 + +![](glslEditor-00.gif) + +**まとめる**: コードをシェアしてあなたのシェーダーを作品として共有しましょう。[openFrame.io](http://openframe.io/)に書き出す以外にも、あなたのシェーダーをまとめてウェブサイトに埋め込むことのできるツールを用意しました。このツールは[glslGallery](https://github.com/patriciogonzalezvivo/glslGallery)と呼ばれています。詳しくは[こちら](https://github.com/patriciogonzalezvivo/glslGallery)をご覧ください. -もしこれらのフレームワークを使わずにブラウザー以外でシェーダーを試したい場合は、[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer)をダウンロードしてコンパイルしてください。 -このプログラムは本書のサンプルのために特別に設計されたもので、MacOSまたはRasberryPIの上でターミナルから直接実行することできます。 +![](glslGallery.gif) + + +## 好みのフレームワークでシェーダーを実行する + +もし[Processing](https://processing.org/)、[Three.js](http://threejs.org/) 、[OpenFrameworks](http://openframeworks.cc/)などのフレームワークを使ったブログラミングの経験があるならば、慣れ親しんだ環境でシェーダーを試してみたいと思うでしょう。下記では人気のあるこれらのフレームワークで、この本で紹介するシェーダーを実行できるように設定する方法をお見せします（この本の[GitHubのリポジトリ](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04)にはこれら3つのフレームワークのためのソースコードが丸ごと置いてあります）。 ### **Three.js**を使う -謙虚で才気あふれる[Ricardo Cabello（MrDoob）](https://twitter.com/mrdoob)と[その他のメンバー](https://github.com/mrdoob/three.js/graphs/contributors)によって開発された[Three.js](http://threejs.org/)は、おそらく最もよく知られたWebGLのフレームワークのひとつです。このJavascriptのライブラリを使って3Dグラフィックを作る方法を学べる、サンプルやチュートリアル、本も沢山あります。 +謙虚で才気あふれる[Ricardo Cabello（MrDoob）](https://twitter.com/mrdoob)と[その他のメンバー](https://github.com/mrdoob/three.js/graphs/contributors)によって開発された[Three.js](http://threejs.org/)は、おそらく最も良く知られたWebGLのフレームワークのひとつです。このJavascriptのライブラリを使って3Dグラフィックを作る方法を学べる、サンプルやチュートリアル、本も沢山あります。 下記はシェーダーをThree.jsで使うために必要なHTMLとJavascriptのサンプルです。```id="fragmentShader"```と書かれたスクリプトに注目してください。ここに、この本に登場するシェーダーをコピーして実行することができます。 From d0c15ae8395101d4b8262e74fdfbda326e3117b0 Mon Sep 17 00:00:00 2001 From: kynd Date: Mon, 12 Sep 2016 20:00:51 -0700 Subject: [PATCH 02/24] Example gallery can show non-chapter folders --- css/style.css | 4 +++- examples/index.php | 35 ++++++++++++++++++++++------- motionToolKit/SHORT_SUMMARY.md | 6 +++++ motionToolKit/SUMMARY.md | 20 +++++++++++++++++ motionToolKit/TITLE.md | 1 + motionToolKit/featured_examples.php | 1 + showcase/SUMMARY.md | 1 + showcase/TITLE.md | 1 + showcase/featured_examples.php | 1 + src/glslCanvas | 2 +- src/glslGallery | 2 +- src/parsedown | 2 +- 12 files changed, 64 insertions(+), 12 deletions(-) create mode 100644 motionToolKit/SHORT_SUMMARY.md create mode 100644 motionToolKit/SUMMARY.md create mode 100644 motionToolKit/TITLE.md create mode 100644 motionToolKit/featured_examples.php create mode 100644 showcase/SUMMARY.md create mode 100644 showcase/TITLE.md create mode 100644 showcase/featured_examples.php diff --git a/css/style.css b/css/style.css index 47b24b1..70e7c87 100644 --- a/css/style.css +++ b/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; } diff --git a/examples/index.php b/examples/index.php index 1d420c3..b558d4f 100755 --- a/examples/index.php +++ b/examples/index.php @@ -1,5 +1,6 @@ '; - 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 ''; - 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 $shaderTotal == 0) { - if (file_exists($folder.'featured_examples.php') and file_exists('FEATURED'.$language.'.md')) { + $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 +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'); } } 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..bf5b7bc --- /dev/null +++ b/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? + + + 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 @@ +
\ No newline at end of file diff --git a/showcase/SUMMARY.md b/showcase/SUMMARY.md new file mode 100644 index 0000000..6635942 --- /dev/null +++ b/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! \ No newline at end of file diff --git a/showcase/TITLE.md b/showcase/TITLE.md new file mode 100644 index 0000000..3f69b46 --- /dev/null +++ b/showcase/TITLE.md @@ -0,0 +1 @@ +# Showcase diff --git a/showcase/featured_examples.php b/showcase/featured_examples.php new file mode 100644 index 0000000..1bf34ca --- /dev/null +++ b/showcase/featured_examples.php @@ -0,0 +1 @@ +
\ No newline at end of file diff --git a/src/glslCanvas b/src/glslCanvas index 254c6ec..4d5e073 160000 --- a/src/glslCanvas +++ b/src/glslCanvas @@ -1 +1 @@ -Subproject commit 254c6ec741c9d3f38d822b42d6d1f70091318512 +Subproject commit 4d5e073bf135692178d7cb62b5cc32dac2dae19f diff --git a/src/glslGallery b/src/glslGallery index 3b02fad..22050b5 160000 --- a/src/glslGallery +++ b/src/glslGallery @@ -1 +1 @@ -Subproject commit 3b02fadfa9a7ff9218382f8ad2334628dad4b742 +Subproject commit 22050b571c923a702761844c91d26dfbbd841750 diff --git a/src/parsedown b/src/parsedown index 490a8f3..28774a4 160000 --- a/src/parsedown +++ b/src/parsedown @@ -1 +1 @@ -Subproject commit 490a8f35a4163f59230f53c34f1fbb22a864c01e +Subproject commit 28774a4359120d2e02e8b6285ed05670c1bc7053 From fa52b7fb794c6698eb673f51098964a1a0c0228a Mon Sep 17 00:00:00 2001 From: riibiax Date: Sun, 16 Oct 2016 16:07:58 +0200 Subject: [PATCH 03/24] broken links --- 11/README-it.md | 10 +++++----- 11/README.md | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/11/README-it.md b/11/README-it.md index e5e9440..617a8ea 100644 --- a/11/README-it.md +++ b/11/README-it.md @@ -31,7 +31,7 @@ y = rand(i); //rand() è spiegata nel capitolo precedente //y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f)); "> -In queste righe stiamo facendo qualcosa di simile a quello che abbiamo fatto nel capitolo precedente. Stiamo suddividendo un numero floating continuo (```x```) nel suo intero (```i```) e nelle componenti frazionarie (```f```). Usiamo [```floor()```](.../glossary/?search=floor) per ottenere ```i``` e [```fract()```](.../glossary/?search=fract) per ottenere ```f```. Poi applichiamo ```rand()``` per la parte intera di ```x```, che dà un valore random unico a ogni integer. +In queste righe stiamo facendo qualcosa di simile a quello che abbiamo fatto nel capitolo precedente. Stiamo suddividendo un numero floating continuo (```x```) nel suo intero (```i```) e nelle componenti frazionarie (```f```). Usiamo [```floor()```](../glossary/?search=floor) per ottenere ```i``` e [```fract()```](../glossary/?search=fract) per ottenere ```f```. Poi applichiamo ```rand()``` per la parte intera di ```x```, che dà un valore random unico a ogni integer. Dopo di che si osservino le due righe commentate. La prima interpola ogni valore random in modo lineare. @@ -39,16 +39,16 @@ Dopo di che si osservino le due righe commentate. La prima interpola ogni valore y = mix(rand(i), rand(i + 1.0), f); ``` -Andate avanti e rimuovete il commento di questa linea per vedere che cosa succede. Utilizziamo la parte frazionale `f` per mischiare ([```mix()```](.../glossary/?search=mix)) i due valori random. +Andate avanti e rimuovete il commento di questa linea per vedere che cosa succede. Utilizziamo la parte frazionale `f` per mischiare ([```mix()```](../glossary/?search=mix)) i due valori random. A questo punto del libro, abbiamo imparato che possiamo fare meglio d'una interpolazione lineare, giusto? -Ora provate a decommentare la riga seguente, che utilizza una interpolazione [```smoothstep()```](.../glossary/?search=smoothstep) invece di una lineare. +Ora provate a decommentare la riga seguente, che utilizza una interpolazione [```smoothstep()```](../glossary/?search=smoothstep) invece di una lineare. ```glsl y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f)); ``` -Tolto il commento, si noti che la transizione tra i picchi diventa armoniosa. In alcune implementazioni del rumore, troverete che i programmatori preferiscono creare le proprie curve cubiche (come la seguente formula) invece di utilizzare la funzione [```smoothstep()```](.../glossary/?search=smoothstep). +Tolto il commento, si noti che la transizione tra i picchi diventa armoniosa. In alcune implementazioni del rumore, troverete che i programmatori preferiscono creare le proprie curve cubiche (come la seguente formula) invece di utilizzare la funzione [```smoothstep()```](../glossary/?search=smoothstep). ```glsl float u = f * f * (3.0 - 2.0 * f ); // curva cubica personalizzata @@ -182,7 +182,7 @@ Nel seguente codice è possibile rimuovere il commento alla linea 44 per vedere
-Un altro miglioramento introdotto da Perlin con il **Rumore Simplesso**, è la sostituzione della Curva Cubica di Hermite ( _f(x) = 3x^2-2x^3_ , che è identica alla funzione [```smoothstep()```](.../glossary/?search=smoothstep) ) con una Curva Quintica di Hermite ( _f(x) = 6x^5-15x^4+10x^3_ ). In questo modo entrambe le estremità della curva sono più "piatte" così che ogni limite si unisce con grazia con quello successivo. In altre parole si ottiene una transizione più continua tra le celle. Si può osservare ciò decommentando la seconda formula nel seguente esempio grafico (o osservando le [due equazioni fianco a fianco cliccando qui](https://www.desmos.com/calculator/2xvlk5xp8b)). +Un altro miglioramento introdotto da Perlin con il **Rumore Simplesso**, è la sostituzione della Curva Cubica di Hermite ( _f(x) = 3x^2-2x^3_ , che è identica alla funzione [```smoothstep()```](../glossary/?search=smoothstep) ) con una Curva Quintica di Hermite ( _f(x) = 6x^5-15x^4+10x^3_ ). In questo modo entrambe le estremità della curva sono più "piatte" così che ogni limite si unisce con grazia con quello successivo. In altre parole si ottiene una transizione più continua tra le celle. Si può osservare ciò decommentando la seconda formula nel seguente esempio grafico (o osservando le [due equazioni fianco a fianco cliccando qui](https://www.desmos.com/calculator/2xvlk5xp8b)).
-In these lines we are doing something similar to what we did in the previous chapter. We are subdividing a continuous floating number (```x```) into its integer (```i```) and fractional (```f```) components. We use [```floor()```](.../glossary/?search=floor) to obtain ```i``` and [```fract()```](.../glossary/?search=fract) to obtain ```f```. Then we apply ```rand()``` to the integer part of ```x```, which gives a unique random value for each integer. +In these lines we are doing something similar to what we did in the previous chapter. We are subdividing a continuous floating number (```x```) into its integer (```i```) and fractional (```f```) components. We use [```floor()```](../glossary/?search=floor) to obtain ```i``` and [```fract()```](../glossary/?search=fract) to obtain ```f```. Then we apply ```rand()``` to the integer part of ```x```, which gives a unique random value for each integer. After that you see two commented lines. The first one interpolates each random value linearly. @@ -39,16 +39,16 @@ After that you see two commented lines. The first one interpolates each random v y = mix(rand(i), rand(i + 1.0), f); ``` -Go ahead and uncomment this line to see how this looks. We use the [```fract()```](.../glossary/?search=fract) value store in `f` to [```mix()```](.../glossary/?search=mix) the two random values. +Go ahead and uncomment this line to see how this looks. We use the [```fract()```](../glossary/?search=fract) value store in `f` to [```mix()```](../glossary/?search=mix) the two random values. At this point in the book, we've learned that we can do better than a linear interpolation, right? -Now try uncommenting the following line, which uses a [```smoothstep()```](.../glossary/?search=smoothstep) interpolation instead of a linear one. +Now try uncommenting the following line, which uses a [```smoothstep()```](../glossary/?search=smoothstep) interpolation instead of a linear one. ```glsl y = mix(rand(i), rand(i + 1.0), smoothstep(0.,1.,f)); ``` -After uncommenting it, notice how the transition between the peaks gets smooth. In some noise implementations you will find that programmers prefer to code their own cubic curves (like the following formula) instead of using the [```smoothstep()```](.../glossary/?search=smoothstep). +After uncommenting it, notice how the transition between the peaks gets smooth. In some noise implementations you will find that programmers prefer to code their own cubic curves (like the following formula) instead of using the [```smoothstep()```](../glossary/?search=smoothstep). ```glsl float u = f * f * (3.0 - 2.0 * f ); // custom cubic curve @@ -154,7 +154,7 @@ For you to practice: ## Improved Noise -An improvement by Perlin to his original non-simplex noise **Simplex Noise**, is the replacement of the cubic Hermite curve ( _f(x) = 3x^2-2x^3_ , which is identical to the [```smoothstep()```](.../glossary/?search=smoothstep) function) with a quintic interpolation curve ( _f(x) = 6x^5-15x^4+10x^3_ ). This makes both ends of the curve more "flat" so each border gracefully stitches with the next one. In other words, you get a more continuous transition between the cells. You can see this by uncommenting the second formula in the following graph example (or see the [two equations side by side here](https://www.desmos.com/calculator/2xvlk5xp8b)). +An improvement by Perlin to his original non-simplex noise **Simplex Noise**, is the replacement of the cubic Hermite curve ( _f(x) = 3x^2-2x^3_ , which is identical to the [```smoothstep()```](../glossary/?search=smoothstep) function) with a quintic interpolation curve ( _f(x) = 6x^5-15x^4+10x^3_ ). This makes both ends of the curve more "flat" so each border gracefully stitches with the next one. In other words, you get a more continuous transition between the cells. You can see this by uncommenting the second formula in the following graph example (or see the [two equations side by side here](https://www.desmos.com/calculator/2xvlk5xp8b)).
-* 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 ampltude 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 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 the 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 noise seems to get more detail. Also note the self-similarity while more octaves are added. If you zoom in on the curve, 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 are 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 techniques 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 creates 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). ![Blackout - Dan Holdsworth (2010)](holdsworth.jpg) -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 +Other variants that can create useful and interesting 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. + ### 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. ![ f(p) = fbm( p + fbm( p + fbm( p ) ) ) - Inigo Quiles (2002)](quiles.jpg) -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 called "flow noise" 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. From 5309ab7640786e7a731d6122e9f5f0bdcd7c2354 Mon Sep 17 00:00:00 2001 From: Stefan Gustavson Date: Fri, 21 Oct 2016 19:48:06 +0200 Subject: [PATCH 05/24] Typos, some small edits in hindsight Added a reference for Flow Noise, and a warning for the sad excuse for an electronic version of the book "Texturing and Modeling". --- 13/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/13/README.md b/13/README.md index 7b34a65..02c20fa 100644 --- a/13/README.md +++ b/13/README.md @@ -2,7 +2,7 @@ ## Fractal Brownian Motion -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 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:
-* Experiment by changing the frequency and ampltude for the additional waves. +* 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 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. -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 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 the periodic, regular nature. +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: +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:
-Other variants that can create useful and interesting 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. +Other variants that can create useful and interesting 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. Don't buy that. It's from 1994, and it doesn't contain any of the terrain modeling stuff from the 3d edition. It's a waste of money, and it's a disgrace that it was put up for sale.) ### Domain Warping @@ -108,4 +108,4 @@ A less extreme example of this technique is the following code where the wrap is
-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 called "flow noise" 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. +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. From b610db01b90c4a81f0196e5e69f9c46a3538a7e0 Mon Sep 17 00:00:00 2001 From: Stefan Gustavson Date: Fri, 21 Oct 2016 23:00:47 +0200 Subject: [PATCH 06/24] Typos, a few small edits in hindsight --- 13/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/13/README.md b/13/README.md index 02c20fa..e63b0c2 100644 --- a/13/README.md +++ b/13/README.md @@ -96,7 +96,7 @@ Another member of this family of algorithms is the **ridge**, where the sharp va -Other variants that can create useful and interesting 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. Don't buy that. It's from 1994, and it doesn't contain any of the terrain modeling stuff from the 3d edition. It's a waste of money, and it's a disgrace that it was put up for sale.) +Other variants that can create useful and interesting 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. 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 From f92538aa927556e8fa1f6f798b0be76913afc5e1 Mon Sep 17 00:00:00 2001 From: Stefan Gustavson Date: Fri, 21 Oct 2016 23:05:17 +0200 Subject: [PATCH 07/24] Typos, minor edits --- 13/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/13/README.md b/13/README.md index e63b0c2..42ce11b 100644 --- a/13/README.md +++ b/13/README.md @@ -96,7 +96,7 @@ Another member of this family of algorithms is the **ridge**, where the sharp va -Other variants that can create useful and interesting 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. 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.) +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 From abc3b726842f41c0528df4801336a30de5c15fb6 Mon Sep 17 00:00:00 2001 From: Matt Richardson Date: Thu, 27 Oct 2016 15:10:27 -0400 Subject: [PATCH 08/24] RaspberryPi to Raspberry Pi --- 00/README-es.md | 2 +- 00/README-fr.md | 2 +- 00/README-jp.md | 2 +- 00/README-kr.md | 2 +- 00/README.md | 2 +- 04/README-es.md | 2 +- 04/README-fr.md | 4 ++-- 04/README-it.md | 2 +- 04/README.md | 4 ++-- README-es.md | 2 +- README-fr.md | 2 +- README-jp.md | 2 +- README-kr.md | 2 +- README.md | 2 +- appendix/00/README-it.md | 2 +- appendix/00/README.md | 4 ++-- appendix/01/README.md | 6 +++--- appendix/02/README-it.md | 4 ++-- appendix/02/README.md | 4 ++-- appendix/README.md | 2 +- 20 files changed, 27 insertions(+), 27 deletions(-) diff --git a/00/README-es.md b/00/README-es.md index cee43af..24c9f02 100644 --- a/00/README-es.md +++ b/00/README-es.md @@ -41,7 +41,7 @@ Alternativamente, dependiendo cuales sean tus necesidades puedes: - [Crear una versión offline del libro](https://thebookofshaders.com/appendix/) -- [Correr los ejemplos en una RaspberryPI sin un navegador](https://thebookofshaders.com/appendix/) +- [Correr los ejemplos en una Raspberry Pi sin un navegador](https://thebookofshaders.com/appendix/) - [Crear un PDF del libro para imprimir.](https://thebookofshaders.com/appendix/) diff --git a/00/README-fr.md b/00/README-fr.md index f58a444..7c12278 100644 --- a/00/README-fr.md +++ b/00/README-fr.md @@ -52,7 +52,7 @@ Cela étant et selon ce que vous voulez faire de ce livre, vous pouvez : - [créer une copie locale de ce livre pour le consulter hors-ligne](https://thebookofshaders.com/appendix/) -- [lancer les exemples directement sur RaspberryPi, sans navigateur](https://thebookofshaders.com/appendix/) +- [lancer les exemples directement sur Raspberry Pi, sans navigateur](https://thebookofshaders.com/appendix/) - [créer un PDF du livre pour l'imprimer](https://thebookofshaders.com/appendix/) diff --git a/00/README-jp.md b/00/README-jp.md index 9443aab..aa0e14e 100644 --- a/00/README-jp.md +++ b/00/README-jp.md @@ -48,7 +48,7 @@ Chrome、FirefoxやSafariなどWebGLの使える今時のブラウザーとイ - [Make an off-line version of this book](https://thebookofshaders.com/appendix/) -- [Run the examples on a RaspberryPi without a browser](https://thebookofshaders.com/appendix/) +- [Run the examples on a Raspberry Pi without a browser](https://thebookofshaders.com/appendix/) - [Make a PDF of the book to print](https://thebookofshaders.com/appendix/) diff --git a/00/README-kr.md b/00/README-kr.md index 8c0c710..2ffbe7d 100644 --- a/00/README-kr.md +++ b/00/README-kr.md @@ -40,7 +40,7 @@ Fragment shader는 매우 빠른 속도로 스크린에 렌더되는 픽셀들 - [이책의 오프라인 버젼](https://thebookofshaders.com/appendix/) -- [RaspberryPi에서 브라우져 없이 예제들 돌리기](https://thebookofshaders.com/appendix/) +- [Raspberry Pi에서 브라우져 없이 예제들 돌리기](https://thebookofshaders.com/appendix/) - [이책의 PDF버젼 만들기](https://thebookofshaders.com/appendix/) diff --git a/00/README.md b/00/README.md index e6bce64..2115a68 100644 --- a/00/README.md +++ b/00/README.md @@ -40,7 +40,7 @@ Alternatively, based on what you have or what you need from this book you can: - [Make an off-line version of this book](https://thebookofshaders.com/appendix/) -- [Run the examples on a RaspberryPi without a browser](https://thebookofshaders.com/appendix/) +- [Run the examples on a Raspberry Pi without a browser](https://thebookofshaders.com/appendix/) - [Make a PDF of the book to print](https://thebookofshaders.com/appendix/) diff --git a/04/README-es.md b/04/README-es.md index 4f71131..e47f947 100644 --- a/04/README-es.md +++ b/04/README-es.md @@ -2,7 +2,7 @@ En este punto seguro estás entusiasmado con poder probar shaders en las plataformas en las que te sientes cómodo. En los siguientes ejemplos veremos como agregarlos el algunos frameworks populares con las mismas uniforms con las que estamos trabajando en este libro. (En el [repositorio de GitHub de este capítulo](https://github.com/patriciogonzalezvivo/thebookofshaders/tree/master/04) encontrarás el código completo de estos ejemplos.) -**Nota 1**: En caso de que no quieras utilizar los shaders en los siguientes frameworks pero quieras hacerlo fuera del navegador, puedes descargar y compilar [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Este programa corre en MacOS y en RaspberryPI, permite ejecutar directamente los ejemplos desde la terminal. +**Nota 1**: En caso de que no quieras utilizar los shaders en los siguientes frameworks pero quieras hacerlo fuera del navegador, puedes descargar y compilar [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Este programa corre en MacOS y en Raspberry Pi, permite ejecutar directamente los ejemplos desde la terminal. **Nota 2**: Si no quieres usar WebGl con tus shaders y no te interesan los frameworks siguientes, puedes usar [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas). Esta herramienta fue diseñada para este libro, pero se volvió tan útil que he terminado usándola en muchos proyectos. diff --git a/04/README-fr.md b/04/README-fr.md index 0da128c..52afb56 100644 --- a/04/README-fr.md +++ b/04/README-fr.md @@ -1,7 +1,7 @@ ## exécuter vos shaders Pour les besoins de ce livre comme pour ma pratique artistique, j'ai créé un écosystème d'outils permettant de créer, d'afficher, de partager et d'organiser mes shaders. -Ces outils fonctionnent de la même manière sur Linux Desktop, MacOS, [RaspberryPi](https://www.raspberrypi.org/) et dans les navigateurs sans avoir besoin d'altérer le code. +Ces outils fonctionnent de la même manière sur Linux Desktop, MacOS, [Raspberry Pi](https://www.raspberrypi.org/) et dans les navigateurs sans avoir besoin d'altérer le code. **Affichage**: tous les exemples de ce livre sont affichés dans la page grâce à [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) qui facilite grandement la fabrication et l'affichage de shaders autonomes. @@ -14,7 +14,7 @@ Pour en savoir plus, [vous pouvez lire ceci](https://github.com/patriciogonzalez Si vous êtes comme moi, vous aurez sans doute envie de lancer vos shaders en lignes de commandes, dans ce cas vous devriez regarder [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). Cette application permet d'incorporer un shader dans un script ```bash``` ou un pipeline Unix et de l'utiliser comme [ImageMagick](http://www.imagemagick.org/script/index.php). -[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) est aussi un bon moyen de compiler vos shaders sur un [RaspberryPi](https://www.raspberrypi.org/) et c'est la raison pour laquelle [openFrame.io](http://openframe.io/) l'utilise pour afficher les oeuvres. +[glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) est aussi un bon moyen de compiler vos shaders sur un [Raspberry Pi](https://www.raspberrypi.org/) et c'est la raison pour laquelle [openFrame.io](http://openframe.io/) l'utilise pour afficher les oeuvres. Pour en savoir plus, [cliquez ici](https://github.com/patriciogonzalezvivo/glslViewer). ```bash diff --git a/04/README-it.md b/04/README-it.md index b903e38..6c79a1e 100644 --- a/04/README-it.md +++ b/04/README-it.md @@ -1,6 +1,6 @@ ## Eseguite il vostro shader -Nell'ambito della realizzazione di questo libro e della mia pratica artistica ho creato un ecosistema di strumenti per creare, visualizzare, condividere e curare gli shaders. Questo strumento funziona in modo coerente su Linux Desktop, MacOS, [RaspberryPi](https://www.raspberrypi.org/) e browser, senza la necessità di dover cambiare il vostro codice. +Nell'ambito della realizzazione di questo libro e della mia pratica artistica ho creato un ecosistema di strumenti per creare, visualizzare, condividere e curare gli shaders. Questo strumento funziona in modo coerente su Linux Desktop, MacOS, [Raspberry Pi](https://www.raspberrypi.org/) e browser, senza la necessità di dover cambiare il vostro codice. **Visualizzare**: tutti gli esempi di questo libro vengono visualizzati utilizzando [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) che rende il processo di esecuzione dello shader standalone incredibilmente facile. diff --git a/04/README.md b/04/README.md index 9508f49..5205748 100644 --- a/04/README.md +++ b/04/README.md @@ -1,6 +1,6 @@ ## Running your shader -As part of the construction of this book and my art practice I made an ecosystem of tools to create, display, share and curate shaders. This tools works consistently across Linux Desktops, MacOS, [RaspberryPi](https://www.raspberrypi.org/) and browsers without the need of changing your code. +As part of the construction of this book and my art practice I made an ecosystem of tools to create, display, share and curate shaders. This tools works consistently across Linux Desktops, MacOS, [Raspberry Pi](https://www.raspberrypi.org/) and browsers without the need of changing your code. **Display**: all live examples in this book are displayed using [glslCanvas](https://github.com/patriciogonzalezvivo/glslCanvas) which makes the process of running standalone shader incredible easy. @@ -10,7 +10,7 @@ As part of the construction of this book and my art practice I made an ecosystem As you can see, it just needs a ```canvas``` element with ```class="glslCanvas"``` and the url to your shader in the ```data-fragment-url```. Learn more about it [here](https://github.com/patriciogonzalezvivo/glslCanvas). -If you are like me, you will probably want to run shaders directly from the console, in that case you should check out [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). This application allows you to incorporate shaders into your ```bash``` scripts or unix pipelines and use it in a similar way that [ImageMagick](http://www.imagemagick.org/script/index.php). Also [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) is a great way to compile shaders on your [RaspberryPi](https://www.raspberrypi.org/), reason why [openFrame.io](http://openframe.io/) use it to display shader artwork. Learn more about this application [here](https://github.com/patriciogonzalezvivo/glslViewer). +If you are like me, you will probably want to run shaders directly from the console, in that case you should check out [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer). This application allows you to incorporate shaders into your ```bash``` scripts or unix pipelines and use it in a similar way that [ImageMagick](http://www.imagemagick.org/script/index.php). Also [glslViewer](https://github.com/patriciogonzalezvivo/glslViewer) is a great way to compile shaders on your [Raspberry Pi](https://www.raspberrypi.org/), reason why [openFrame.io](http://openframe.io/) use it to display shader artwork. Learn more about this application [here](https://github.com/patriciogonzalezvivo/glslViewer). ```bash glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png 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..34cfab8 100644 --- a/README-jp.md +++ b/README-jp.md @@ -63,7 +63,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/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/README.md b/README.md index afd8403..550a80d 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ This is a gentle step-by-step guide through the abstract and complex universe of * [Appendix:](appendix/) Other ways to use this book * [How can I navigate this book offline?](appendix/00/) - * [How to run the examples on a RaspberryPi?](appendix/01/) + * [How to run the examples on a Raspberry Pi?](appendix/01/) * [How to print this book?](appendix/02/) * [How can I collaborate?](appendix/03/) * [An introduction for those coming from JS](appendix/04/) by [Nicolas Barradeau](http://www.barradeau.com/) 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..7b3bda9 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. -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 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 [Raspberry Pi](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. 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. -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/) From fa79bc895945c43e35168d8e8b0e72a55da55f10 Mon Sep 17 00:00:00 2001 From: Matt Richardson Date: Thu, 27 Oct 2016 15:35:12 -0400 Subject: [PATCH 09/24] Readability edits --- appendix/01/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/appendix/01/README.md b/appendix/01/README.md index 7b3bda9..9ced2ee 100644 --- a/appendix/01/README.md +++ b/appendix/01/README.md @@ -1,10 +1,10 @@ ## 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 have a computer with a GPU was a long shot. Now, most computers have a graphical processing unit, but is a high bar for a requirement in a workshop or class for example. -Thanks to the [Raspberry Pi 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 [Raspberry Pi](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 Raspberry Pi after installing the OS and logging in, type the following commands: From 32d11d1b3b8872c94a95a4dc19c88e050be85bf0 Mon Sep 17 00:00:00 2001 From: Matt Richardson Date: Thu, 27 Oct 2016 15:36:29 -0400 Subject: [PATCH 10/24] Add'l readability edits --- appendix/01/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/appendix/01/README.md b/appendix/01/README.md index 9ced2ee..bbedbaf 100644 --- a/appendix/01/README.md +++ b/appendix/01/README.md @@ -1,6 +1,6 @@ ## How to run the examples on a Raspberry Pi? -A few years ago, assuming that everybody have a computer with a GPU was a long shot. Now, most computers have a graphical processing unit, but is a high bar for a requirement in a workshop or class for example. +A few years ago, assuming that everybody has a computer with a GPU was a long shot. Now, most computers have a graphical processing unit, but is a high bar for a requirement in a workshop or class, for example. 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. From 7aef3c12b8c9a07678f32c5bf8b9a14b5741b0dc Mon Sep 17 00:00:00 2001 From: Matt Richardson Date: Thu, 27 Oct 2016 15:38:13 -0400 Subject: [PATCH 11/24] Add'l readability edits --- appendix/01/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/appendix/01/README.md b/appendix/01/README.md index bbedbaf..8f59187 100644 --- a/appendix/01/README.md +++ b/appendix/01/README.md @@ -1,6 +1,6 @@ ## How to run the examples on a Raspberry Pi? -A few years ago, assuming that everybody has a computer with a GPU was a long shot. Now, most computers have a graphical processing unit, but is a high bar for a requirement in a workshop or class, for example. +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 is still a high bar for a requirement in a workshop or class, for example. 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. From 2c8dea0d258506b6227c96b7d031916ee2433e58 Mon Sep 17 00:00:00 2001 From: Matt Richardson Date: Thu, 27 Oct 2016 15:38:59 -0400 Subject: [PATCH 12/24] Minor edit --- appendix/01/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/appendix/01/README.md b/appendix/01/README.md index 8f59187..de5a1e0 100644 --- a/appendix/01/README.md +++ b/appendix/01/README.md @@ -1,6 +1,6 @@ ## How to run the examples on a Raspberry Pi? -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 is still a high bar for a requirement in a workshop or class, for example. +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 [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. From db17d0cf5d409b3f3b9ffd5ad316b91fd99dd913 Mon Sep 17 00:00:00 2001 From: kenichiy Date: Mon, 31 Oct 2016 17:33:51 +0900 Subject: [PATCH 13/24] Update chapter 04 to the latest --- 04/README-jp.md | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/04/README-jp.md b/04/README-jp.md index 6b4f1ae..cd406c4 100644 --- a/04/README-jp.md +++ b/04/README-jp.md @@ -16,7 +16,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutputImage.png ``` -**作成する**: シェーダーのコーディングを簡単にするため、[glslEditor](https://github.com/patriciogonzalezvivo/glslEditor)というオンラインのエディターを用意しました。このエディターはこの本のサンプルにも埋め込まれています。glslEditorには幾つもの便利なウィジェットが備わっていて、直接触って具体的に結果を見ることで、抽象的なglslのコーディングをより理解しやすくしてくれます。 +**作成する**: シェーダーのコーディングを簡単にするため、[glslEditor](https://github.com/patriciogonzalezvivo/glslEditor)というオンラインのエディターを用意しました。このエディターはこの本のサンプルにも埋め込まれています。glslEditorには幾つもの便利なウィジェットが備わっていて、直接触って具体的に結果を見ることで、抽象的なglslのコーディングをより理解しやすくしてくれます。[editor.thebookofshaders.com/](http://editor.thebookofshaders.com/)から単体で使うこともできます。詳しくは[こちら](https://github.com/patriciogonzalezvivo/glslEditor)をご覧ください。 ![](glslEditor-01.gif) @@ -82,7 +82,8 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput uniforms = { u_time: { type: "f", value: 1.0 }, - u_resolution: { type: "v2", value: new THREE.Vector2() } + u_resolution: { type: "v2", value: new THREE.Vector2() }, + u_mouse: { type: "v2", value: new THREE.Vector2() } }; var material = new THREE.ShaderMaterial( { @@ -101,6 +102,11 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput onWindowResize(); window.addEventListener( 'resize', onWindowResize, false ); + + document.onmousemove = function(e){ + uniforms.u_mouse.value.x = e.pageX + uniforms.u_mouse.value.y = e.pageY + } } function onWindowResize( event ) { @@ -126,7 +132,7 @@ glslViewer yourShader.frag yourInputImage.png —w 500 -h 500 -s 1 -o yourOutput [Ben Fry](http://benfry.com/)と[Casey Reas](http://reas.com/)が2001年に開発を始めた[Processing](https://processing.org/) はコーディングを始めるのに最適な、驚くほどシンプルでパワフルな開発環境です（少なくとも私にとってはそうでした）。[Andres Colubri](https://codeanticode.wordpress.com/)はopenGLとビデオに関する重要なアップデートを行いました。これによってProcessingでのシェーダーの使用が今まで以上に簡単になりました。Processingのスケッチは ```data``` フォルダーからシェーダーを検索します。このフォルダーにサンプルコードをコピーして ```shader.frag``` と名前を付けてください。 -```processing +```cpp PShader shader; void setup() { From 90970f1241413aeae15b6ecfbe26058553c5e045 Mon Sep 17 00:00:00 2001 From: kenichiy Date: Mon, 31 Oct 2016 17:34:18 +0900 Subject: [PATCH 14/24] Add Jen's name to the index page --- README-jp.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README-jp.md b/README-jp.md index 34cfab8..e96071e 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,7 +34,7 @@ * Generative designs * [ランダム](10/?lan=jp) - * [Noise（未訳）](11/) + * [Noise](11/?lan=jp) * Fractional brownian motion * Fractals @@ -74,9 +74,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/)でグラフィックエンジニアとしてオープンソースのマッピングツールの開発に携わっています。 -
Twitter - GitHub - Vimeo - Flickr
+
WebSite - Twitter - GitHub - Vimeo - Flickr
## 訳者について From 90b58be9ae59becc865141105ab94743b4c89ea1 Mon Sep 17 00:00:00 2001 From: kenichiy Date: Mon, 31 Oct 2016 18:07:12 +0900 Subject: [PATCH 15/24] And language links to the top page --- css/style.css | 22 ++++++++++++++++------ index.php | 11 ++++++----- toc-header.php | 3 +++ 3 files changed, 25 insertions(+), 11 deletions(-) create mode 100644 toc-header.php diff --git a/css/style.css b/css/style.css index 47b24b1..9ed4f82 100644 --- a/css/style.css +++ b/css/style.css @@ -97,18 +97,29 @@ img { color: #999; } -.header .subtitle { - +.toc-header { + font-size: 16px; + line-height: 16px; + margin-top: 24px; + margin-bottom: 24px; + text-align: right; + color: #999; } -.header .subtitle a{ +.header .subtitle { + +} + +.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 { @@ -357,4 +368,3 @@ code { font-style: italic; text-align: right; } - 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/toc-header.php b/toc-header.php new file mode 100644 index 0000000..fd276f4 --- /dev/null +++ b/toc-header.php @@ -0,0 +1,3 @@ +
+

日本語 - 中文版 - 한국어 - Español - Français - Italiano - English

+
From 8de08eb128de0b974612dadaa877a9696a9c057b Mon Sep 17 00:00:00 2001 From: Patricio Gonzalez Vivo Date: Mon, 31 Oct 2016 09:35:38 -0400 Subject: [PATCH 16/24] linking to chap 12 and 13! thanks --- 11/index.php | 4 +--- 13/index.php | 3 ++- README.md | 4 ++-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/11/index.php b/11/index.php index e4daa39..4245102 100644 --- a/11/index.php +++ b/11/index.php @@ -26,10 +26,8 @@
  • < < Previous
  • Home
    • - +
  • Next > >
'; include($path."/footer.php"); ?> - - 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.md b/README.md index 550a80d..4468bbf 100644 --- a/README.md +++ b/README.md @@ -29,8 +29,8 @@ This is a gentle step-by-step guide through the abstract and complex universe of * Generative designs * [Random](10/) * [Noise](11/) - * Cellular noise - * Fractional brownian motion + * [Cellular noise](12/) + * [Fractional brownian motion](13/) * Fractals * Image processing: From 6df99518fb28eba7e4ba3e36f690aeb1d7235d98 Mon Sep 17 00:00:00 2001 From: kynd Date: Thu, 3 Nov 2016 01:02:52 +0900 Subject: [PATCH 17/24] fix broken link to moon.frag --- README-jp.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README-jp.md b/README-jp.md index e96071e..e505147 100644 --- a/README-jp.md +++ b/README-jp.md @@ -1,4 +1,4 @@ - + # The Book of Shaders [Patricio Gonzalez Vivo](http://patriciogonzalezvivo.com/)、[Jen Lowe](http://jenlowe.net/)著 From d783e05ab1701eb261103523172e9fcc6ecfb592 Mon Sep 17 00:00:00 2001 From: kynd Date: Thu, 3 Nov 2016 01:03:54 +0900 Subject: [PATCH 18/24] add links to chapter 12 and 13 --- README-jp.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README-jp.md b/README-jp.md index e505147..472119f 100644 --- a/README-jp.md +++ b/README-jp.md @@ -35,7 +35,8 @@ * Generative designs * [ランダム](10/?lan=jp) * [Noise](11/?lan=jp) - * Fractional brownian motion + * [Cellular noise](12/) + * [Fractional brownian motion](13/) * Fractals * Image processing: From f389d254aa88e15bc6ad9e93d97cdb6acac87ba7 Mon Sep 17 00:00:00 2001 From: kynd Date: Sun, 6 Nov 2016 13:07:25 +0900 Subject: [PATCH 19/24] resolve conflicting onload event MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit use window.addEventListener("load”) instead of window.onload to avoid conflict --- examples/README.md | 0 src/main.js | 28 ++++++++++++++-------------- 2 files changed, 14 insertions(+), 14 deletions(-) mode change 100755 => 100644 examples/README.md diff --git a/examples/README.md b/examples/README.md old mode 100755 new mode 100644 diff --git a/src/main.js b/src/main.js index 46703bb..9f37fc6 100644 --- a/src/main.js +++ b/src/main.js @@ -2,7 +2,7 @@ // PARSING //--------------------------------------------------------------- -// Graph plotter function take from +// Graph plotter function take from // From http://blog.hvidtfeldts.net/index.php/2011/07/plotting-high-frequency-functions-using-a-gpu/ var preFunction = "\n\ #ifdef GL_ES\n\ @@ -114,9 +114,9 @@ function styleCodeBlocks() { // Highlight code blocks var list = document.getElementsByTagName("code"); for(var i = 0; i < list.length; i++){ - if (list[i].className == "language-glsl" || - list[i].className == "language-bash" || - list[i].className == "language-cpp" || + if (list[i].className == "language-glsl" || + list[i].className == "language-bash" || + list[i].className == "language-cpp" || list[i].className == "language-html" || list[i].className == "language-processing" ){ hljs.highlightBlock(list[i]); @@ -130,7 +130,7 @@ function loadGlslElements() { var canvas = document.getElementsByClassName("canvas"); for (var i = 0; i < canvas.length; i++){ glslCanvas.push(new GlslCanvas(canvas[i])); - } + } // parse EDITORS var ccList = document.querySelectorAll(".codeAndCanvas"); @@ -150,7 +150,7 @@ function loadGlslElements() { var srcFile = sfList[i].getAttribute("data"); glslGraphs.push(new GlslEditor(sfList[i], { canvas_width: 800, lineNumbers: false, canvas_height: 250, frag_header: preFunction, frag_footer: postFunction, tooltips: true }).open(srcFile)); } - } + } } function insertAfter(newElement,targetElement) { @@ -163,15 +163,15 @@ function insertAfter(newElement,targetElement) { } function captionizeImages() { - if (!document.getElementsByTagName) + if (!document.getElementsByTagName) return false; - if (!document.createElement) + if (!document.createElement) return false; - + var images = document.getElementsByTagName("img"); - if (images.length < 1) - return false; + if (images.length < 1) + return false; for (var i = 0; i < images.length; i++) { var title = images[i].getAttribute("alt"); @@ -262,13 +262,13 @@ function nextPage() { window.location.href = url; } -window.onload = function(){ +window.addEventListener("load", function(){ window.scrollTo(0, 0); styleCodeBlocks(); - loadGlslElements(); + loadGlslElements(); captionizeImages(); window.scrollTo(0, 0); setTimeout(function () { window.scrollTo(0, 0); }, 500); -}; +}); From 25830f77c65d5630b2971bc8034282a16676f638 Mon Sep 17 00:00:00 2001 From: kynd Date: Sun, 6 Nov 2016 13:11:02 +0900 Subject: [PATCH 20/24] temporary removed showcase folder --- showcase/SUMMARY.md | 1 - showcase/TITLE.md | 1 - showcase/featured_examples.php | 1 - 3 files changed, 3 deletions(-) delete mode 100644 showcase/SUMMARY.md delete mode 100644 showcase/TITLE.md delete mode 100644 showcase/featured_examples.php diff --git a/showcase/SUMMARY.md b/showcase/SUMMARY.md deleted file mode 100644 index 6635942..0000000 --- a/showcase/SUMMARY.md +++ /dev/null @@ -1 +0,0 @@ -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! \ No newline at end of file diff --git a/showcase/TITLE.md b/showcase/TITLE.md deleted file mode 100644 index 3f69b46..0000000 --- a/showcase/TITLE.md +++ /dev/null @@ -1 +0,0 @@ -# Showcase diff --git a/showcase/featured_examples.php b/showcase/featured_examples.php deleted file mode 100644 index 1bf34ca..0000000 --- a/showcase/featured_examples.php +++ /dev/null @@ -1 +0,0 @@ -
\ No newline at end of file From a5afb3e31d562e3fa2c7d38e088aef10f986b86e Mon Sep 17 00:00:00 2001 From: kynd Date: Sun, 6 Nov 2016 13:19:17 +0900 Subject: [PATCH 21/24] no link from title if README.md doesn't exist --- examples/index.php | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/examples/index.php b/examples/index.php index b558d4f..2ab5ca8 100755 --- a/examples/index.php +++ b/examples/index.php @@ -32,9 +32,13 @@ error_reporting(0); } 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.'SHORT_SUMMARY'.$language.'.md')) { echo $Parsedown->text(file_get_contents($folder.'SHORT_SUMMARY'.$language.'.md')); From a003b8ebe946cff15ebca4d478729bc2a39f5038 Mon Sep 17 00:00:00 2001 From: kynd Date: Sun, 6 Nov 2016 13:34:25 +0900 Subject: [PATCH 22/24] edit text --- motionToolKit/SUMMARY.md | 17 ----------------- 1 file changed, 17 deletions(-) diff --git a/motionToolKit/SUMMARY.md b/motionToolKit/SUMMARY.md index bf5b7bc..5f7a8aa 100644 --- a/motionToolKit/SUMMARY.md +++ b/motionToolKit/SUMMARY.md @@ -1,20 +1,3 @@ *[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? - - - From d61ef51a5aa2bca83d7999666d45c15d94908621 Mon Sep 17 00:00:00 2001 From: kynd Date: Sun, 6 Nov 2016 13:43:27 +0900 Subject: [PATCH 23/24] add exercises --- motionToolKit/SUMMARY.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/motionToolKit/SUMMARY.md b/motionToolKit/SUMMARY.md index 5f7a8aa..f15f192 100644 --- a/motionToolKit/SUMMARY.md +++ b/motionToolKit/SUMMARY.md @@ -1,3 +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? + +* 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? + +* Can you express difference between different materials through motion? How a metal ball and a plastic ball behave differently? + +* 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? From 12314194c57747836bff796bf9efa286ef3f6c40 Mon Sep 17 00:00:00 2001 From: kynd Date: Sun, 6 Nov 2016 13:45:39 +0900 Subject: [PATCH 24/24] edit text --- motionToolKit/SUMMARY.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/motionToolKit/SUMMARY.md b/motionToolKit/SUMMARY.md index f15f192..3dc4227 100644 --- a/motionToolKit/SUMMARY.md +++ b/motionToolKit/SUMMARY.md @@ -6,12 +6,12 @@ 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? -* Can you express difference between different materials through motion? How a metal ball and a plastic ball behave differently? - * 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?