• 💻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; } 😃目に優しくない緑になったと思います。 とりあえずこれで入門としては完了なので /* 👇 ここから下がこれから編集していくエリアです。👇 */ /* 👆 ここから上がこれから編集していくエリアです。👆*/ の中の部分にこれから色々書き加えて遊んでみます♪ 基本的に数学の式をコードに変換していくわけですが、今は理論は気にせずガンガン貼り付けて絵を描いてみましょう！ まずはこちら　図形 三角 丸 四角