必要なもの ・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;

}

😃目に優しくない緑になったと思います。 とりあえずこれで入門としては完了なので /* 👇 ここから下がこれから編集していくエリアです。👇 */

/* 👆 ここから上がこれから編集していくエリアです。👆*/ の中の部分にこれから色々書き加えて遊んでみます♪

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

まずはこちら　図形 三角

丸

四角