この文書の現在のバージョンと選択したバージョンの差分を表示します。
両方とも前のリビジョン 前のリビジョン 次のリビジョン | 前のリビジョン | ||
local:classroom:2018:kouki:development:yuru2dprograming [2019/05/26 01:59] 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 |}} | ||
- | |||
- | さて1行1行解説しても面白くないので、まずは全部のコードを**削除**します。\\ | ||
- | マウスポインタをコードの上に置き、クリック!\\ | ||
- | {{ :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 |}} | ||
- | 😃目に優しくない緑になったと思います。 | ||
- | |||
- | とりあえずこれで入門としては完了なので | ||
- | /* 👇 ここから下がこれから編集していくエリアです。👇 */ | ||
- | |||
- | /* 👆 ここから上がこれから編集していくエリアです。👆*/ | ||
- | の中の部分にこれから色々書き加えて遊んでみます♪ | ||
- | |||
- | |||
- | ==== 貼り付けて遊ぶコードたち ==== | ||
- | 基本的に数学の式をコードに変換していくわけですが、今は理論は気にせずガンガン貼り付けて絵を描いてみましょう! | ||
- | |||
- | まずはこちら 図形 | ||
- | 三角 | ||
- | |||
- | 丸 | ||
- | |||
- | 四角 | ||
\\ | \\ |