【超簡単！】直感的にGLSLを学ぶ。(5)

# グラフィックを複製する。

まず１つのグラフィックを制作します。
→[glslエディタへ飛ぶ](http://jp.wgld.org/js4kintro/editor/#precision%20mediump%20float%3B%20%2F%2F%20%E8%AC%8E%E3%81%AE%E9%96%A2%E6%95%B0%E3%80%82%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E6%94%BE%E7%BD%AE%E3%80%82%0Auniform%20float%20t%3B%20%2F%2F%20%E6%99%82%E9%96%93%EF%BC%88%E6%AF%8E%E7%A7%92%E5%A4%89%E3%82%8F%E3%82%8B%EF%BC%89%0Auniform%20vec2%20%20r%3B%20%2F%2F%20%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%0A%0A%2F%2F%20%E6%8F%8F%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%84%E3%81%A4%0Avoid%20main(void)%7B%0A%09%2F%2F%20%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA0-520px%E3%81%BE%E3%81%A7%E3%81%AE%E5%80%A4%E3%82%92%E3%80%81-1~1%E3%81%AB%E5%A4%89%E6%8F%9B%E3%80%82%0A%20%20%20%20vec2%20p%20%3D%20(gl_FragCoord.xy%20*%202.0%20-%20r)%20%2F%20min(r.x%2C%20r.y)%3B%0A%20%20%20%20%2F%2F%20length(p)%E3%81%A7%E3%80%81%E4%B8%AD%E5%A4%AE%E3%81%8B%E3%82%89%E3%81%AE%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E5%8F%96%E5%BE%97%E3%80%82%0A%20%20%20%20%2F%2F%20%E3%80%8C0.01%20%2F%E3%80%8D%20%E3%81%A7%E3%80%81%E8%89%B2%E5%8F%8D%E8%BB%A2%E3%80%82%0A%20%20%20%20float%20f%20%3D%200.01%20%2F%20length(p)%3B%0A%20%20%20%20%2F%2F%20%E6%8F%8F%E7%94%BB%0A%20%20%20%20gl_FragColor%20%3D%20vec4(vec3(f)%2C%201.0)%3B%0A%7D)

```glsl
precision mediump float; // 謎の関数。とりあえず放置。
uniform float t; // 時間（毎秒変わる）
uniform vec2  r; // 画面サイズ

// 描くためのやつ
void main(void){
	// 画面サイズ0-520pxまでの値を、-1~1に変換。
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    // length(p)で、中央からのベクトルの大きさを取得。
    // 「0.01 /」 で、色反転。
    float f = 0.01 / length(p);
    // 描画
    gl_FragColor = vec4(vec3(f), 1.0);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/176a0406-17c3-6395-8d5c-8af296ee546c.png)

これをmod()を使用し、100個に増やします。
おわりです。
→[glslエディタヘ飛ぶ](http://jp.wgld.org/js4kintro/editor/#precision%20mediump%20float%3B%20%2F%2F%20%E8%AC%8E%E3%81%AE%E9%96%A2%E6%95%B0%E3%80%82%E3%81%A8%E3%82%8A%E3%81%82%E3%81%88%E3%81%9A%E6%94%BE%E7%BD%AE%E3%80%82%0Auniform%20float%20t%3B%20%2F%2F%20%E6%99%82%E9%96%93%EF%BC%88%E6%AF%8E%E7%A7%92%E5%A4%89%E3%82%8F%E3%82%8B%EF%BC%89%0Auniform%20vec2%20%20r%3B%20%2F%2F%20%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA%0A%0A%2F%2F%20%E6%8F%8F%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%84%E3%81%A4%0Avoid%20main(void)%7B%0A%09%2F%2F%20%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA0-520px%E3%81%BE%E3%81%A7%E3%81%AE%E5%80%A4%E3%82%92%E3%80%81-1~1%E3%81%AB%E5%A4%89%E6%8F%9B%E3%80%82%0A%20%20%20%20vec2%20p%20%3D%20(gl_FragCoord.xy%20*%202.0%20-%20r)%20%2F%20min(r.x%2C%20r.y)%3B%0A%20%20%20%20%2F%2F%20mod(p%2C0.2)%E3%81%AB%E3%82%88%E3%82%8A%E3%80%81-1~1%E3%81%AE%E5%80%A4%E3%81%8C%E3%80%810~0.1%E3%81%8F%E3%82%89%E3%81%84%E3%81%AB%E7%B8%AE%E5%B0%8F%E3%81%95%E3%82%8C%E3%82%8B%E3%80%82%0A%20%20%20%20%2F%2F%20%E3%81%9D%E3%82%8C%E3%82%92-0.1%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7-0.1~0.1%E3%81%8F%E3%82%89%E3%81%84%E3%81%AB%E3%81%AA%E3%82%8B%E3%80%82%0A%20%20%20%20%2F%2F%20%E3%81%AA%E3%81%AE%E3%81%A7%E7%B5%90%E6%9E%9C%E3%80%81%EF%BC%91%E3%81%A4%E3%81%A0%E3%81%A3%E3%81%9F%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%81%8C%E3%80%8110x10%E3%81%AE100%E5%80%8B%E3%81%AE%E3%82%B0%E3%83%A9%E3%83%95%E3%82%A3%E3%83%83%E3%82%AF%E3%81%AB%E5%A4%89%E5%8C%96%E3%81%99%E3%82%8B%E3%80%82%0A%20%20%20%20vec2%20q%20%3D%20mod(p%2C%200.2)%20-%200.1%3B%0A%20%20%20%20%2F%2F%20length(q)%E3%81%A7%E3%80%81%E4%B8%AD%E5%A4%AE%E3%81%8B%E3%82%89%E3%81%AE%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%81%AE%E5%A4%A7%E3%81%8D%E3%81%95%E3%82%92%E5%8F%96%E5%BE%97%E3%80%82%0A%20%20%20%20%2F%2F%20%E3%80%8C0.01%20%2F%E3%80%8D%20%E3%81%A7%E3%80%81%E8%89%B2%E5%8F%8D%E8%BB%A2%E3%80%82%0A%20%20%20%20float%20f%20%3D%200.01%20%2F%20length(q)%3B%0A%20%20%20%20%2F%2F%20%E6%8F%8F%E7%94%BB%0A%20%20%20%20gl_FragColor%20%3D%20vec4(vec3(f)%2C%201.0)%3B%0A%7D)

```glsl
precision mediump float; // 謎の関数。とりあえず放置。
uniform float t; // 時間（毎秒変わる）
uniform vec2  r; // 画面サイズ

// 描くためのやつ
void main(void){
	// 画面サイズ0-520pxまでの値を、-1~1に変換。
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    // mod(p,0.2)により、-1~1の値が、0~0.1くらいに縮小される。
    // それを-0.1することで-0.1~0.1くらいになる。
    // なので結果、１つだったグラフィックが、10x10の100個のグラフィックに変化する。
    vec2 q = mod(p, 0.2) - 0.1;
    // length(q)で、中央からのベクトルの大きさを取得。
    // 「0.01 /」 で、色反転。
    float f = 0.01 / length(q);
    // 描画
    gl_FragColor = vec4(vec3(f), 1.0);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/e6523f5a-ceaf-688b-e5a2-1c4e35d10443.png)

【色々学ぶより、まず実行して瞬間的に学びたい人用に、既に偉大な方々が書かれた入門用のコードをもっと簡単に紹介していきます。】
今回はdoxasさんが書かれたコードを元にしています。あくまでこの記事は表面的なものなので、詳しくはこちらへ！：
https://qiita.com/doxas/items/25bb50a3db85129e2980