.gz · 最終更新: 2019/05/26 02:44 by kokiu
差分
この文書の現在のバージョンと選択したバージョンの差分を表示します。
| 両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
|
local:classroom:2018:kouki:development:yuru2dprograming [2019/05/26 02:44] kokiu |
local:classroom:2018:kouki:development:yuru2dprograming [2019/05/26 12:42] (現在) kokiu |
||
|---|---|---|---|
| ライン 1: | ライン 1: | ||
| - | ======🦄ゆるゆる2DCGプログラミング🦄====== | + | ======🦄ゆるゆる2DCGプログラミング：目次🦄====== |
| - | ===== 必要なもの ===== | + | * [[local:classroom:2018:kouki:development:yuru2dprograming:yuru2dstart|🦄ゆるゆる2DCGプログラミング：入門編！🦄]] |
| - | * 💻PC（windows or macOS） | + | * comingsoon... |
| - | * 📶インターネット | + | |
| - | * 🦊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(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のチャット・コメントで受け付けます！ | ||
| - | |||
| - | ==== 図形 ==== | ||
| - | 解説なしに図形はハードル高いなーと思ったので参考程度に… | ||
| - | 三角\\ | ||
| - | すいません探している途中です | ||
| - | |||
| - | 丸\\ | ||
| - | 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)))); | ||
| - | |||
| - | ==== おまけ ==== | ||
| - | ハーフトーン\\ | ||
| - | https://nogson2.hatenablog.com/entry/2017/10/31/182334 | ||
| - | |||
| - | |||
| - | |||
| - | ※うまくいかないなどのご相談はfacebook もしくはworkplaceのチャット・コメントで受け付けます！ | ||
| \\ | \\ | ||
.gz · 最終更新: 2019/05/26 02:44 by kokiu
特に明示されていない限り、本Wikiの内容は次のライセンスに従います： CC Attribution-Share Alike 4.0 International
