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

# 光る玉を描く

とりあえず、何も考えずこれをエディタに入力してみましょう。
→[glslエディタへ飛ぶ。](http://jp.wgld.org/js4kintro/editor/#precision%20mediump%20float%3B%20%2F%2F%20%E8%AC%8E%0Auniform%20float%20t%3B%20%2F%2F%20t%E3%81%AB%E3%81%AF%E6%99%82%E9%96%93%E3%81%8C%E5%85%A5%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%0Auniform%20vec2%20%20r%3B%20%2F%2F%20%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA(%E4%BB%8A%E5%9B%9E%E3%81%AF512)%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%E3%82%88%E3%81%8F%E3%82%8F%E3%81%8B%E3%82%89%E3%82%93%E3%81%91%E3%81%A9%E3%80%81%E7%94%BB%E9%9D%A2%E3%82%B5%E3%82%A4%E3%82%BA0~512%E3%81%AE%E5%80%A4%E3%82%92%E3%80%810~1%E3%81%AE%E5%80%A4%E3%81%AB%E3%81%97%E3%81%A6%E3%81%8F%E3%82%8C%E3%82%8B%E3%80%82%EF%BC%88%E6%AD%A3%E8%A6%8F%E5%8C%96%E3%81%A8%E3%81%84%E3%81%86%EF%BC%89%0A%09vec2%20p%20%3D%20(gl_FragCoord.xy%20*%202.0%20-%20r)%20%2F%20min(r.x%2C%20r.y)%3B%20%0A%09%2F%2F%20length%EF%BC%9A%E5%8E%9F%E7%82%B9%E3%81%8B%E3%82%89%E3%81%A9%E3%82%8C%E3%81%8F%E3%82%89%E3%81%84%E3%81%AE%E8%B7%9D%E9%9B%A2%E3%81%8C%E3%81%82%E3%82%8B%E3%81%8B%0A%20%20%20%20float%20l%20%3D%200.1%20%2F%20length(p)%3B%0A%20%20%20%20gl_FragColor%20%3D%20vec4(vec3(l)%2C%201.0)%3B%0A%7D)
第4回は終了です。

```glsl
precision mediump float; // 謎
uniform float t; // tには時間が入ります。
uniform vec2  r; // 画面サイズ(今回は512)

// 描くためのやつ
void main(void){
	// よくわからんけど、画面サイズ0~512の値を、0~1の値にしてくれる。（正規化という）
	vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y); 
	// length：原点からどれくらいの距離があるか
    float l = 0.1 / length(p);
    gl_FragColor = vec4(vec3(l), 1.0);
}
```

こんなやつができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/e7ed7c40-1c06-6f5c-8cf7-45a5df9f64ac.png)

float lを、0.1で除算しなければ、以下のようになります。
色反転のために使ってるのが、0.1を割っている部分ですね。

```glsl
precision mediump float; // 謎
uniform float t; // tには時間が入ります。
uniform vec2  r; // 画面サイズ(今回は512)

// 描くためのやつ
void main(void){
	// よくわからんけど、画面サイズ0~512の値を、0~1の値にしてくれる。（正規化という）
	vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y); 
	// length：原点からどれくらいの距離があるか
    float l = length(p);
    gl_FragColor = vec4(vec3(l), 1.0);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/b20ce02b-2620-1255-e490-5524df87ca7d.png)

ちょっと書き換えると、こんなのができます。
→[GLSLエディタへ飛ぶ](http://jp.wgld.org/js4kintro/editor/#precision%20mediump%20float%3B%0Auniform%20float%20t%3B%20%2F%2F%20time%0Auniform%20vec2%20%20r%3B%20%2F%2F%20resolution%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%20p.x%2Cp.y%E3%82%92%E3%81%8B%E3%81%91%E7%AE%97%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81%E5%B7%A6%E4%B8%8B%E3%81%A8%E5%8F%B3%E4%B8%8A%E3%81%AE%E9%9A%85%E3%81%A3%E3%81%93%E3%81%8C%E5%85%89%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%0A%20%20%20%20%2F%2F%20abs()%E3%82%92%E3%81%A4%E3%81%91%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%80%8C%E8%B2%A0%E3%81%AE%E6%95%B0%E3%80%8D%E3%81%8C%E3%81%AA%E3%81%8F%E3%81%AA%E3%82%8A%E3%80%81%E5%85%A8%E3%81%A6%E3%81%AE%E9%9A%85%E3%81%A3%E3%81%93%E3%81%8C%E5%85%89%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82%0A%20%20%20%20%2F%2F%200.001%20%2F%20%E3%82%92%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E8%89%B2%E3%82%92%E5%8F%8D%E8%BB%A2%E3%81%95%E3%81%9B%E3%81%BE%E3%81%99%E3%80%82%0A%20%20%20%20float%20f%20%3D%200.001%20%2F%20(abs(p.x)%20*%20abs(p.y))%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; // time
uniform vec2  r; // resolution

// 描くためのやつ
void main(void){
	// 画面サイズ0-520pxまでの値を、-1~1に変換。
    vec2 p = (gl_FragCoord.xy * 2.0 - r) / min(r.x, r.y);
    // p.x,p.yをかけ算すると、左下と右上の隅っこが光ります。
    // abs()をつけることで「負の数」がなくなり、全ての隅っこが光ります。
    // 0.001 / をすることで色を反転させます。
    float f = 0.001 / (abs(p.x) * abs(p.y));
    // 描画
    gl_FragColor = vec4(vec3(f), 1.0);
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/276138/9092a54a-3dbb-cd97-637d-e016a38bcc7c.png)



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