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