• 💻PC（windows or macOS）
• 📶インターネット
• 🦊Firefox(ブラウザアプリ)

これらを用意してください

Firefoxを使ってここにアクセスしてみてください
http://glslsandbox.com/e

なんかモワモワした絵+プログラムコードが見えます…

さて１行１行解説しても面白くないので、まずは全部のコードを削除します。
マウスポインタをコードの上に置き、クリック！

すると編集できるようになるのでショートカットを使って削除！
winの方は、ctrl + a からのデリートキー
macの方は、⌘ + a からのデリートキー

すべて消えました（しかし絵は消えないんですね…不思議だなあ…）

次に下記のコードをコピーして貼り付けてください！

#ifdef GL_ES
precision mediump float;
#endif

#extension GL_OES_standard_derivatives : enable

uniform float time;
uniform vec2 resolution;

void main( void ) {
	vec2 position = ( gl_FragCoord.xy / resolution.xy );
	vec4 color = vec4(0.0,1.0,0.0,1.0);

	/* 👇 ここから下がこれから編集していくエリアです。👇 */



	/* 👆 ここから上がこれから編集していくエリアです。👆*/

	gl_FragColor = color;
}

😃目に優しくない緑になったと思います。

とりあえずこれで入門としては完了なので

/* 👇 ここから下がこれから編集していくエリアです。👇 */

/* 👆 ここから上がこれから編集していくエリアです。👆*/

の中の部分にこれから色々書き加えて遊んでみます♪

基本的に数学の式をコードに変換していくわけですが、
今は理論は気にせずガンガン貼り付けて絵を描いてみましょう！

赤

color = vec4(1.0,0.0,0.0,1.0);

緑

color = vec4(1.0,1.0,0.0,1.0);

青

color = vec4(0.0,0.0,1.0,1.0);

白

color = vec4(1.0,1.0,1.0,1.0);

黒

color = vec4(0.0,0.0,0.0,1.0);

つまり
最初の数字が赤の度合い
次が緑の度合い
その次が青の度合い
最後はまた解説するので今は1.0にしてください笑

混ぜることで別の色も生み出せます！
各数値は0.0~1.0までで0.5が半分って感じです！

チャレンジ！
このサイトから好きな色を選んで表示させてみましょう！
https://www.colordic.org

※うまくいかないなどのご相談はfacebook もしくはworkplaceのチャット・コメントで受け付けます！

三角

丸

四角