こんな世の中だからこそGLSLライブコーディングを楽しみたい

northprint

対象者 このセッションは以下の方々を対象としています： ▶ ジェネラティブアートに興味がある人 ▶ プログラミングで何か作りたい人 ▶ 新しい表現方法を探している人 ▶ リアルタイムグラフィックスに興味がある人 ▶ よくわからないけど、時間が余っている人 プログラミング経験は問いません！

AIがコードを書く時代 今やAIエージェントがプログラムを書く時代に突入しています みなさんも指示するためのプロンプトを書くことはあっても、 ソースコードを書く時間は減っているのではないでしょうか？ // 昔は一行一行、自分で書いていたコード vec3 color = vec3(0.0); for(int i = 0; i < 10; i++) { color += calculateLight(position, i); } GLSL

ジェネラティブアート そこで、私は趣味の１つとしての ジェネラティブアートを提案したいと思います ▶ プログラミングの楽しさを取り戻す ▶ 自分だけの表現を追求してみる

AIとの共存 もちろんジェネラティブアートもAIは書いてはくれますが... ▶ 細かい箇所の再現はまだ自分で書いたほうが速い ▶ AIが書いたコードをいじっていくのも有り ▶ 創造的なプロセスそのものを楽しむ " 「AIは道具。創造性は人間のもの」

ジェネラティブアートの選択肢 一重にジェネラティブアートと言っても様々な手法があります ツール/言語 特徴 難易度 p5.js 初心者向け、Web対応 低 three.js 3D表現、高機能 中 Processing 教育向け、歴史ある 中 GLSL GPU直接制御、高速 高

なぜGLSL ？ 今回はGLSLという言語を使って、 趣味としてのライブコーディングを楽しみましょう ： // GLSLの魅力 1行で複雑な模様が生まれる void main() { vec2 p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y); float d = length(p) - 0.5 + sin(atan(p.y, p.x) * 10.0 + time) * 0.1; vec3 color = mix(vec3(0.0, 1.0, 1.0), vec3(1.0, 0.0, 1.0), smoothstep(0.0, 0.01, d)); gl_FragColor = vec4(color, 1.0); } GLSL

ライブコーディングの魅力 即興性とフロー状態 // コードを書きながら、リアルタイムで変化を見る uniform float time; uniform vec2 mouse; void main() { vec2 p = gl_FragCoord.xy / resolution.xy; // マウスの動きに反応する作品 float d = distance(p, mouse); vec3 color = hsv2rgb(vec3(d + time * 0.1, 1.0, 1.0)); gl_FragColor = vec4(color, 1.0); } GLSL

GLSLの基本構造（1/2） 変数宣言部 GLSL precision highp float; // 外部からの入力 uniform float time; // 時間 uniform vec2 resolution; uniform vec2 mouse; // 画面解像度 // マウス位置

GLSLの基本構造（2/2） メイン処理 // メイン関数（各ピクセルで実行） void main() { // 正規化された座標を取得 vec2 uv = gl_FragCoord.xy / resolution.xy; // 色を計算 vec3 color = vec3(uv.x, uv.y, sin(time)); // 出力 gl_FragColor = vec4(color, 1.0); } GLSL

よく使うテクニック 1. 距離関数（SDF） float circle(vec2 p, float r) { return length(p) - r; } float box(vec2 p, vec2 b) { vec2 d = abs(p) - b; return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0); } GLSL

よく使うテクニック 2. 色空間変換 vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } GLSL

作品例 ： 波紋（1/2）
座標設定とループ処理
void main() {
vec2 p = (gl_FragCoord.xy * 2.0 - resolution)
/ min(resolution.x, resolution.y);
float ripple = 0.0;
for(int i = 0; i < 5; i++) {
float t = time - float(i) * 0.5;
vec2 origin = vec2(sin(t * 1.3), cos(t * 1.7)) * 0.5;
float d = length(p - origin);
ripple += sin(d * 20.0 - t * 5.0) / (1.0 + d * 5.0);
}

GLSL

作品例 ： 波紋（2/2） 色の計算と出力 // 前ページからの続き // ripple変数には波紋の強度が入っている vec3 color = vec3(0.5 + 0.5 * ripple); color *= vec3(0.0, 1.0, 1.0); // シアン gl_FragColor = vec4(color, 1.0); } GLSL

実際どう使われてる ？ ▶ ゲーム ▶ 3Dのコンテンツ ▶ 地図ライブラリー 同人誌書きました↗

• https://hackandmap.com/

始め方 1. オンラインエディタ ▶ Shadertoy↗ - 最も人気、コミュニティ活発 ▶ GLSL Sandbox↗ - シンプル ▶ NEORT↗ - 日本発

• https://www.shadertoy.com/
• https://glslsandbox.com/
• https://neort.io/

2. ローカル環境ソフトウェア ▶ VSCode + glsl-canvas拡張 ▶ TouchDesigner ▶ KodeLife

3. 学習リソース ▶ The Book of Shaders↗ - GLSL学習の入口 ▶ IQ's articles↗ - iq氏のWEBサイト ▶ Shadertoy↗ - 作品共有プラットフォームのスタンダード ▶ NEORT↗ - 日本発の作品共有プラットフォーム

• https://thebookofshaders.com/
• https://iquilezles.org/articles/
• https://www.shadertoy.com/
• https://neort.io/

コミュニティ GLSLライブコーディングのコミュニティは世界中に！ ▶ Shadertoy↗ - 作品共有、学習 ▶ ライブコーディングイベント ▶ Revision↗ ▶ LiveCodeNYC↗ ▶ SESSIONS↗

• https://www.shadertoy.com/
• https://2025.revision-party.net/
• https://livecode.nyc/
• https://sessions-party.com/

まとめ GLSLライブコーディングの魅力 ▶ 書いた瞬間に結果が見える ▶ 数式が生み出す予想外の美 ▶ 純粋なコーディングの楽しさ 今こそ、手を動かして創る楽しさを取り戻そう！

ご清聴ありがとうございました Twitter/X: @northprint↗ GitHub: github.com/northprint↗

• https://x.com/northprint
• https://github.com/northprint