diff --git a/11/README-jp.md b/11/README-jp.md index 791e48c..37d30ce 100644 --- a/11/README-jp.md +++ b/11/README-jp.md @@ -7,11 +7,11 @@ It's time for a break! We've been playing with random functions that look like TV white noise, our head is still spinning thinking about shaders, and our eyes are tired. Time to go out for a walk! -少し休憩しましょう!ここまでテレビのホワイトノイズに見えるようなランダム関数を扱ってきましたが、私たちの頭はまだシェーダーのことを考えることでいっぱいで、目が疲れてきました。散歩に出る時間です! +少し休憩しましょう。テレビのホワイトノイズのようなランダム関数で遊んで、頭はまだシェーダーのことでいっぱい。目も疲れてきました。散歩に出る時間です。 We feel the air on our skin, the sun in our face. The world is such a vivid and rich place. Colors, textures, sounds. While we walk we can't avoid noticing the surface of the roads, rocks, trees and clouds. -(散歩をしていると)空気を肌に、太陽を顔に感じます。世界はこのように鮮やかで豊かな場所なのです。色、テキスチャー、音。歩いている間、道や岩、木や雲のサーフェスに注目せざるにはいられません。 +空気を肌に、日差しを顔に感じます。世界はこのように鮮やかで豊かな場所なのです。色、肌合い、音。歩いている間中、道や岩、木や雲の表情に気を取られずにはいられません。 ![](texture-00.jpg) ![](texture-01.jpg) @@ -23,17 +23,17 @@ We feel the air on our skin, the sun in our face. The world is such a vivid and The unpredictability of these textures could be called "random," but they don't look like the random we were playing with before. The “real world” is such a rich and complex place! How can we approximate this variety computationally? -これらのテキスチャーは予測不可能という点では「ランダム」と呼ぶことができるでしょう。でも、これらの外見は明らかに前の章で私たちが扱ってきたランダムとは違います。「現実世界」はこのように豊かで複雑な場所なのです!それでは、コンピューターを用いてこのようなレベルの多様性に近づくためにはどうしたらいいのでしょうか。 +これらのテクスチャーの不規則性をランダムと呼ぶこともできるでしょう。しかし、これらの外見は前の章で私たちが扱ってきたランダムとは違います。現実世界は実に豊かで複雑な場所なのです。どうすればコンピューターを用いてこの多様な世界に近づくことができるでしょうか。 This was the question [Ken Perlin](https://mrl.nyu.edu/~perlin/) was trying to solve in the eary 1980s when he was commissioned to generate more realistic textures for the movie "Tron." In response to that, he came up with an elegant *Oscar winning* noise algorithm. (No biggie.) -この疑問は、[Ken Perlin](https://mrl.nyu.edu/~perlin/) が1980年代初期に、「TRON」というディズニーの新作映画のために「もっとリアルな」テキスチャーを生成するという仕事を依頼されたときに、取り組んでいた問題です。 結果として、彼は *オスカー賞を受賞した* エレガントなノイズ・アルゴリズムにたどりつきました。たいしたことではありません。 +この疑問は1980年代初頭、「TRON」という映画のためのよりリアルなテクスチャーを生成するという依頼を受けて[Ken Perlin](https://mrl.nyu.edu/~perlin/) が取り組んでいた問題です。 結果として、彼はオスカー賞に輝くエレガントなノイズ・アルゴリズムにたどりつきました。 ![Disney - Tron (1982)](tron.jpg) The following is not the classic Perlin noise algorithm, but it is a good starting point to understand how to generate noise. -下記は、クラシックなパーリンノイズアルゴリズムではありませんが、どのようにして *スムーズなランダム* つまり *ノイズ* を生成するかについて理解するよい出発点になります。 +下記はクラシックなパーリンノイズアルゴリズムではありませんが、スムーズなランダム、つまりノイズを生成する方法について理解するためのよい出発点になります。
We start by scaling the space by 5 (line 45) in order to see the interpolation between the squares of the grid. Then inside the noise function we subdivide the space into cells. We store the integer position of the cell along with the fractional positions inside the cell. We use the integer position to calculate the four corners' coordinates and obtain a random value for each one (lines 23-26). Finally, in line 35 we interpolate between the 4 random values of the corners using the fractional positions we stored before. -グリッドの四角の間の補間を見るために、空間を5ずつに区切る所からはじめます (45行目)。次に、ノイズ関数の中に、空間をセルに細分していきます。セルの整数ポジションとともに端数ポジションを、セルの中に格納します。整数ポジションを四つの角の座標点の計算に用い、それぞれに対するランダム値を獲得します (23-26行)。最後に、35行目で、前に格納した端数ポジションを使って、角の4つのランダム値の間を補間します。 +グリッドの正方形の間の補間を見るために、まず空間を5倍に拡大します (45行目)。そしてノイズ関数の中で空間を升目に分割します。升目の位置を示す整数と、升目の中での位置を表す端数部分を共に格納します。整数の位置を4つの角の座標の計算に用い、それぞれに対するランダムな値を獲得します(23-26行)。最後に35行目では、前に格納した端数の位置を使って、角の4つのランダムな値の間を補間しています。 Now it's your turn. Try the following exercises: -今度はあなたの番です。下記のエクササイズをやってみましょう。 +あなたの番です。下記の課題に挑戦しましょう。 * Change the multiplier of line 45. Try to animate it. -* 45行目の乗数を変えてみましょう。アニメーションにしてみましょう。 +* 45行目の掛ける数を変えてみましょう。また、このサンプルをアニメーションにしてみましょう。 * At what level of zoom does the noise start looking like random again? -* どのレベルのズームで、ノイズはランダムに再び見え始めるようになりますか? +* どのぐらいズームすると、ノイズがまたただのランダムに見え始めるでしょう? * At what zoom level is the noise is imperceptible? -* どのレベルのズームで、ノイズがわからなくなりますか? +* ノイズが小さすぎて見えなくなるまでにはどれくらいズームすればよいでしょう。 * Try to hook up this noise function to the mouse coordinates. -* このノイズ関数を、マウスの位置に適応させてみましょう。 +* このノイズ関数をマウスの位置に対応して変化させてみましょう。 * What if we treat the gradient of the noise as a distance field? Make something interesting with it. -* ノイズのグラデーションを距離として扱ってみるとどうなりますか?これを使って何か興味深いものをつくってください。 +* ノイズのグラデーションをディスタンスフィールドとして扱うとどうなるでしょう。これを使って何か興味深いものを使ってください。 * Now that you've achieved some control over order and chaos, it's time to use that knowledge. Make a composition of rectangles, colors and noise that resembles some of the complexity of a [Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko) painting. -* これであなたもある程度、秩序とカオスのコントロールができるようになりました。今度はこの知識を活用する時間です。 [Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko) の絵画の複雑さのような四角と色、そしてノイズのコンポジションをつくってみましょう。 +* ある程度、秩序とカオスをコントロールできるようになったので、この知識を活用してみましょう。 いくつかの四角形と色、ノイズを組み合わせて[Mark Rothko](http://en.wikipedia.org/wiki/Mark_Rothko) の絵画のような複雑さを持つ作品を作ってみましょう。 ![Mark Rothko - Three (1950)](rothko.jpg) - ## Using Noise in Generative Designs +## ジェネラティブデザインでノイズを使う Noise algorithms were originally designed to give a natural *je ne sais quoi* to digital textures. The 1D and 2D implementations we've seen so far were interpolations between random *values*, which is why they're called **Value Noise**, but there are more ways to obtain noise... +ノイズのアルゴリズムは本来、自然な *je ne sais quoi* (訳注:言葉では表せない質感、美しさ)をデジタルなテクスチャーに与えるために考え出されました。ここまで見てきた一次元と +二次元の実装はランダムな値の間の補間を行うもので、そのためバリューノイズと呼ばれているのでした。しかしノイズを作り出す方法はこれだけではありません。 + [ ![Inigo Quilez - Value Noise](value-noise.png) ](../edit.html#11/2d-vnoise.frag) As you discovered in the previous exercises, value noise tends to look "blocky." To diminish this blocky effect, in 1985 [Ken Perlin](https://mrl.nyu.edu/~perlin/) developed another implementation of the algorithm called **Gradient Noise**. Ken figured out how to interpolate random *gradients* instead of values. These gradients were the result of a 2D random function that returns directions (represented by a ```vec2```) instead of single values (```float```). Click on the following image to see the code and how it works. +課題の中で気付いたと思いますが、バリューノイズはブロック状に見えてしまいがちです。これを抑えるため、[Ken Perlin](https://mrl.nyu.edu/~perlin/) は1985年にグラデーションノイズ(gradient noise)と呼ばれるアルゴリズムを開発しました。 + [ ![Inigo Quilez - Gradient Noise](gradient-noise.png) ](../edit.html#11/2d-gnoise.frag) Take a minute to look at these two examples by [Inigo Quilez](http://www.iquilezles.org/) and pay attention to the differences between [value noise](https://www.shadertoy.com/view/lsf3WH) and [gradient noise](https://www.shadertoy.com/view/XdXGW8). +少し時間を取って[Inigo Quilez](http://www.iquilezles.org/)の作った2つのサンプルを見てみましょう。[バリューノイズ](https://www.shadertoy.com/view/lsf3WH)と[グラデーションノイズ](https://www.shadertoy.com/view/XdXGW8)との違いに注目してください。 + Like a painter who understands how the pigments of their paints work, the more we know about noise implementations the better we will be able to use them. For example, if we use a two dimensional noise implementation to rotate the space where straight lines are rendered, we can produce the following swirly effect that looks like wood. Again you can click on the image to see what the code looks like. +絵の具の中の顔料の働きを理解している画家のように、ノイズの実装方法について知るほどより上手に使いこなせるようになります。例えば二次元のノイズを、複数の直線が描かれた空間を回転させるために使うと下記の通り、木目のように見える渦巻き状の効果を作り出すことができます。画像をクリックするとコードも見ることができます。 + [ ![Wood texture](wood.png) ](../edit.html#11/wood.frag) ```glsl @@ -193,6 +196,8 @@ Like a painter who understands how the pigments of their paints work, the more w Another way to get interesting patterns from noise is to treat it like a distance field and apply some of the tricks described in the [Shapes chapter](../07/). +ノイズから面白いパターンを作り出すもう1つの方法は、ノイズをディスタンスフィールドのように扱い[形について](../07/)の章で取り上げたテクニックを応用することです。 + [ ![Splatter texture](splatter.png) ](../edit.html#11/splatter.frag) ```glsl @@ -202,14 +207,28 @@ Another way to get interesting patterns from noise is to treat it like a distanc A third way of using the noise function is to modulate a shape. This also requires some of the techniques we learned in the [chapter about shapes](../07/). +さらにもう1つの方法はノイズ関数を図形を変形させるのに使うことです。これにもまた[形について](../07/)の章で学んだテクニックが必要になります。 + For you to practice: +練習してみましょう。 + * What other generative pattern can you make? What about granite? marble? magma? water? Find three pictures of textures you are interested in and implement them algorithmically using noise. + +* 他にどんなパターンを生成できるでしょう。御影石、大理石、マグマ、水のようなパターンはどうでしょう。好きなパターンの画像を3つ用意して、ノイズを使ったアルゴリズムで実装してください。 + * Use noise to modulate a shape. + +* ノイズを使って図形を変形させてください。 + * What about using noise for motion? Go back to the [Matrix chapter](../08/). Use the translation example that moves the "+" around, and apply some *random* and *noise* movements to it. + +* ノイズを動きのために使うのはどうでしょう。[二次元行列](../08/)を振り返ってください。小さな十字を平行移動させるサンプルを使ってランダムとノイズを応用した動きをさせてみましょう。 + * Make a generative Jackson Pollock. +* アルゴリズム版のジャクソン・ポロックを作り出しましょう。 ![Jackson Pollock - Number 14 gray (1948)](pollock.jpg)