🦄ゆるゆる2DCGプログラミング：入門編！🦄

• 💻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(0.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のチャット・コメントで受け付けます！

解説なしに図形はハードル高いなーと思ったので参考程度に…

三角
すいません探している途中です

丸
https://nogson2.hatenablog.com/entry/2017/11/06/222759

四角

 color = vec4(ceil(length(max(abs(position-vec2(0.5,0.5))-0.2,0.0))));

ハーフトーン

float c = pow(0.5/length(position),5.0) * (sin(gl_FragCoord.x)+cos(gl_FragCoord.y));
color = vec4(vec3(c)  ,1.0);

https://nogson2.hatenablog.com/entry/2017/10/31/182334

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

Thank you for reading!!!!