HoNoBoNoWiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
======🦄ゆるゆる2DCGプログラミング：入門編！🦄======

===== 必要なもの =====
  * 💻PC（windows or macOS）
  * 📶インターネット
  * 🦊Firefox(ブラウザアプリ)

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

===== コンピュータに絵を描かせよう入門 =====
Firefoxを使ってここにアクセスしてみてください\\
http://glslsandbox.com/e

なんかモワモワした絵+プログラムコードが見えます…
{{ :local:classroom:2018:kouki:development:yuru2d:yuru2d1kai:スクリーンショット_2019-05-26_1.39.43.png?600 |}}

さて１行１行解説しても面白くないので、まずは全部のコードを**削除**します。\\
マウスポインタをコードの上に置き、クリック！\\
{{ :local:classroom:2018:kouki:development:yuru2d:yuru2d1kai:スクリーンショット_2019-05-26_1.45.17.png?600 |}}

すると編集できるようになるのでショートカットを使って削除！\\
winの方は、ctrl + a からのデリートキー\\
macの方は、⌘ + a からのデリートキー\\
{{ :local:classroom:2018:kouki:development:yuru2d:yuru2d1kai:スクリーンショット_2019-05-26_1.54.13.png?600 |}}
{{ :local:classroom:2018:kouki:development:yuru2d:yuru2d1kai:スクリーンショット_2019-05-26_1.54.30.png?600 |}}

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

次に下記のコードをコピーして貼り付けてください！
	#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;
	}

{{ :local:classroom:2018:kouki:development:yuru2d:yuru2d1kai:スクリーンショット_2019-05-26_1.57.08.png?600 |}}
😃目に優しくない緑になったと思います。

とりあえずこれで入門としては完了なので
	/* 👇 ここから下がこれから編集していくエリアです。👇 */
	
	/* 👆 ここから上がこれから編集していくエリアです。👆*/
の中の部分にこれから色々書き加えて遊んでみます♪
\\
\\

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

==== 色 ====
赤
	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

{{ :local:classroom:2018:kouki:development:yuru2d:yuru2d1kai:ハーフトーン_ゆるゆるプログラミング.png?600 |}}

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

\\
\\
**//Thank you for reading!!!!//**

<WRAP left safety round box 87px>
**[[local:classroom:2018:kouki:development:yuru2dprograming|previous]]**
</WRAP>

<WRAP center safety round box 66px>
**[[local:classroom:2018:kouki|home]]**
</WRAP>
HoNoBoNoWiki

ユーザ用ツール

サイト用ツール

ページ用ツール
