Kodelifeやる

まずbrewにあるのがいい

code:a

brew install --cask kodelife

起動

https://gyazo.com/65c02b93a3a0ce0418c45026407d40b2

いかにもこれやん

プロジェクトはklproj形式っぽいね

AIはこういってる

KodeLife用なら、mainImage() を main() にして、iTime/iResolution を time/resolution に置き換えればだいたい動きます。

https://gyazo.com/393c57c3e9a7980d2409510a152e964b

すごい

code:prompt

KodeLife#version 150で動く、かっこいいシェーダーを書いてください。音源と同期するようにしてください

音源をいれる

https://gyazo.com/d9dba643afdf911cf1abce85cae58248

ClaudeがかいてくれたコードをFragmentに

code:a

// KodeLife Audio-Reactive Shader

// "NEURAL PULSE" — 音圧に反応するサイバーパンク神経回路

//

// KodeLife設定:

// iChannel0 → Audio input (マイク or ファイル)

// iResolution, iTime, iTimeDelta は自動でバインド

uniform float iTime;

uniform float iTimeDelta;

uniform vec2 iResolution;

uniform sampler2D iChannel0; // Audio texture (FFT / waveform)

out vec4 fragColor;

// ============================================================

// Utility

// ============================================================

mat2 rot2(float a) {

float c = cos(a), s = sin(a);

return mat2(c, -s, s, c);

}

float hash(vec2 p) {

p = fract(p * vec2(234.34, 435.345));

p += dot(p, p + 34.23);

return fract(p.x * p.y);

}

float noise(vec2 p) {

vec2 i = floor(p);

vec2 f = fract(p);

f = f * f * (3.0 - 2.0 * f);

float a = hash(i);

float b = hash(i + vec2(1,0));

float c = hash(i + vec2(0,1));

float d = hash(i + vec2(1,1));

return mix(mix(a,b,f.x), mix(c,d,f.x), f.y);

}

// ============================================================

// Audio sampling

// ============================================================

// KodeLife用: Spectrum Full は y=0 付近にFFTが格納されている

float getFFT(float freq) {

return texture(iChannel0, vec2(freq, 0.0)).r;

}

float bass() { return getFFT(0.02); }

float mid() { return getFFT(0.15); }

float high() { return getFFT(0.60); }

// waveformは別パラメータ(Spectrum Splitなど)か、

// とりあえずFFTで代用する

float getWave(float x) {

return texture(iChannel0, vec2(x, 0.0)).r * 2.0 - 1.0;

}

// ============================================================

// SDF primitives

// ============================================================

float sdCircle(vec2 p, float r) { return length(p) - r; }

float sdBox(vec2 p, vec2 b) {

vec2 d = abs(p) - b;

return length(max(d, 0.0)) + min(max(d.x, d.y), 0.0);

}

float sdLine(vec2 p, vec2 a, vec2 b) {

vec2 pa = p - a, ba = b - a;

float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);

return length(pa - ba * h);

}

// ============================================================

// Neural circuit lines

// ============================================================

float circuit(vec2 uv, float t, float audioMid) {

float d = 1e9;

for (int i = 0; i < 18; i++) {

float fi = float(i);

float angle = (fi / 18.0) * TAU + t * 0.3;

vec2 a = vec2(cos(angle), sin(angle)) * (0.3 + 0.05 * sin(fi + t));

vec2 b = vec2(cos(angle + 0.35), sin(angle + 0.35)) * (0.55 + audioMid * 0.3);

d = min(d, sdLine(uv, a, b));

// horizontal branch

vec2 mid_pt = (a + b) * 0.5;

vec2 c = mid_pt + vec2(0.0, 0.1 * sin(fi * 1.3 + t));

d = min(d, sdLine(uv, mid_pt, c));

}

return d;

}

// ============================================================

// Plasma / tunnel

// ============================================================

vec3 tunnel(vec2 uv, float t, float bassAmp) {

float r = length(uv);

float ang = atan(uv.y, uv.x);

float zoom = 1.0 / (r + 0.01);

float stripes = sin(zoom * 6.0 - t * 4.0 + ang * 3.0) * 0.5 + 0.5;

float pulse = sin(zoom * 12.0 - t * 8.0) * 0.5 + 0.5;

float glow = exp(-r * (2.5 - bassAmp * 1.5));

vec3 col = vec3(0.0);

col += vec3(0.0, 0.8, 1.0) * stripes * glow;

col += vec3(1.0, 0.2, 0.8) * pulse * glow * 0.5;

return col;

}

// ============================================================

// Waveform ribbon

// ============================================================

vec3 waveRibbon(vec2 uv) {

float x = uv.x * 0.5 + 0.5; // 0..1

float w = getWave(clamp(x, 0.0, 1.0));

float d = abs(uv.y - w * 0.3);

float brightness = 0.006 / (d + 0.003);

vec3 col = mix(vec3(0.0, 1.0, 0.8), vec3(1.0, 0.1, 0.6), abs(w));

return col * brightness;

}

// ============================================================

// Hex grid overlay

// ============================================================

vec2 hexGrid(vec2 p, float scale) {

p *= scale;

vec2 h = vec2(1.0, sqrt(3.0));

vec2 a = mod(p, h) - h * 0.5;

vec2 b = mod(p - h * 0.5, h) - h * 0.5;

return dot(a, a) < dot(b, b) ? a : b;

}

float hexPattern(vec2 uv, float t, float highAmp) {

vec2 hp = hexGrid(uv * rot2(t * 0.1), 4.0);

float d = length(hp);

return smoothstep(0.42 + highAmp * 0.1, 0.38, d);

}

// ============================================================

// Glitch

// ============================================================

vec2 glitch(vec2 uv, float t, float amp) {

float s = floor(uv.y * 60.0);

float rnd = hash(vec2(s, floor(t * 15.0)));

if (rnd > 0.85) {

uv.x += (rnd - 0.85) * amp * sign(sin(s));

}

return uv;

}

// ============================================================

// Main

// ============================================================

void main() {

vec2 fragCoord = gl_FragCoord.xy;

vec2 uv = (fragCoord - iResolution * 0.5) / min(iResolution.x, iResolution.y);

// Audio

float b = bass() * 1.8;

float m = mid() * 1.4;

float hi = high() * 1.2;

float energy = b * 0.6 + m * 0.3 + hi * 0.1;

// Glitch UV

vec2 guv = glitch(uv + vec2(0.5), iTime, b * 0.04) - vec2(0.5);

// --- Layer 1: Tunnel ---

vec3 col = tunnel(guv, iTime, b);

// --- Layer 2: Hex grid ---

float hx = hexPattern(guv, iTime, hi);

col += vec3(0.05, 0.6, 1.0) * hx * 0.25;

// --- Layer 3: Neural circuit ---

float cd = circuit(guv * rot2(iTime * 0.05), iTime, m);

float cl = smoothstep(0.008, 0.0, cd - 0.002);

col += vec3(0.2, 1.0, 0.5) * cl * (0.6 + m * 0.8);

// Glowing circuit halo

float halo = exp(-cd * 60.0) * 0.4;

col += vec3(0.0, 0.5, 1.0) * halo * (0.5 + b);

// --- Layer 4: Central energy core ---

float coreR = 0.08 + b * 0.06 + sin(iTime * 8.0) * 0.005 * hi;

float core = sdCircle(guv, coreR);

float coreGlow = exp(-max(core, 0.0) * 25.0);

col += vec3(1.0, 0.4, 0.0) * coreGlow * (1.0 + b * 2.0);

if (core < 0.0) col += vec3(1.0, 0.9, 0.7) * abs(core) * 30.0;

// Ring pulses emanating from core (beat-triggered)

for (int i = 1; i <= 4; i++) {

float fi = float(i);

float speed = 1.2 + fi * 0.3;

float phase = mod(iTime * speed, 1.8);

float ringR = phase * 0.5 + coreR;

float ringD = abs(length(guv) - ringR);

float ringW = 0.003 / (ringD + 0.001) * (1.0 - phase / 1.8) * b;

col += mix(vec3(0.0, 1.0, 0.8), vec3(1.0, 0.0, 0.5), fi / 4.0) * ringW;

}

// --- Layer 5: Waveform ribbon ---

col += waveRibbon(guv * vec2(2.0, 1.0));

// --- Vignette ---

float vig = 1.0 - smoothstep(0.5, 1.4, length(uv) * 1.2);

col *= vig;

// --- Bloom / tone map ---

col = col / (1.0 + col); // Reinhard

col = pow(max(col, 0.0), vec3(0.45)); // gamma

// Scanlines (subtle CRT feel)

float scan = sin(fragCoord.y * 3.14159) * 0.04;

col -= scan;

// Color aberration on beat

float aber = b * 0.003;

float rr = (fragCoord.x + aber) / iResolution.x;

float bb = (fragCoord.x - aber) / iResolution.x;

col.r = mix(col.r, texture(iChannel0, vec2(rr, 0.75)).r * col.r * 2.0, 0.08);

col.b = mix(col.b, texture(iChannel0, vec2(bb, 0.75)).r * col.b * 2.0, 0.08);

fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);

}

パラメータ設定

https://gyazo.com/ee83b96c3316cda37e959fd0636ee8d8

変数名をiChannel0にする

KodilifeではiResolutionはresolutionらしい

Claudeにもっかいおねがいした

code:a

uniform float time;

uniform vec2 resolution;

out vec4 fragColor;

mat2 rot2(float a) {

float c = cos(a), s = sin(a);

return mat2(c, -s, s, c);

}

float sdLine(vec2 p, vec2 a, vec2 b) {

vec2 pa = p - a, ba = b - a;

return length(pa - ba * clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0));

}

float circuit(vec2 uv, float t, float m) {

float d = 1e9;

for (int i = 0; i < 18; i++) {

float fi = float(i);

float angle = (fi / 18.0) * TAU + t * 0.3;

vec2 a = vec2(cos(angle), sin(angle)) * (0.3 + 0.05 * sin(fi + t));

vec2 b = vec2(cos(angle + 0.35), sin(angle + 0.35)) * (0.55 + m * 0.3);

d = min(d, sdLine(uv, a, b));

vec2 mp = (a + b) * 0.5;

d = min(d, sdLine(uv, mp, mp + vec2(0.0, 0.1 * sin(fi * 1.3 + t))));

}

return d;

}

vec3 tunnel(vec2 uv, float t, float b) {

float r = length(uv);

float ang = atan(uv.y, uv.x);

float zoom = 1.0 / (r + 0.01);

float stripes = sin(zoom * 6.0 - t * 4.0 + ang * 3.0) * 0.5 + 0.5;

float pulse = sin(zoom * 12.0 - t * 8.0) * 0.5 + 0.5;

float glow = exp(-r * (2.5 - b * 1.5));

return vec3(0.0, 0.8, 1.0) * stripes * glow

+ vec3(1.0, 0.2, 0.8) * pulse * glow * 0.5;

}

void main() {

vec2 uv = (gl_FragCoord.xy - resolution * 0.5) / min(resolution.x, resolution.y);

float b = abs(sin(time * 2.1)) * 0.7 + 0.3;

float m = abs(sin(time * 4.3 + 1.0)) * 0.5 + 0.3;

float hi = abs(sin(time * 8.7 + 2.0)) * 0.4 + 0.2;

vec3 col = tunnel(uv, time, b);

// Circuit lines

float cd = circuit(uv * rot2(time * 0.05), time, m);

col += vec3(0.2, 1.0, 0.5) * smoothstep(0.008, 0.0, cd - 0.002) * (0.6 + m * 0.8);

col += vec3(0.0, 0.5, 1.0) * exp(-cd * 60.0) * 0.4 * (0.5 + b);

// Core

float coreR = 0.08 + b * 0.06 + sin(time * 8.0) * 0.005 * hi;

float core = length(uv) - coreR;

col += vec3(1.0, 0.4, 0.0) * exp(-max(core, 0.0) * 25.0) * (1.0 + b * 2.0);

if (core < 0.0) col += vec3(1.0, 0.9, 0.7) * abs(core) * 30.0;

// Ring pulses

for (int i = 1; i <= 4; i++) {

float fi = float(i);

float phase = mod(time * (1.2 + fi * 0.3), 1.8);

float ringD = abs(length(uv) - (phase * 0.5 + coreR));

col += mix(vec3(0.0, 1.0, 0.8), vec3(1.0, 0.0, 0.5), fi / 4.0)

* 0.003 / (ringD + 0.001) * (1.0 - phase / 1.8) * b;

}

// Vignette

col *= 1.0 - smoothstep(0.5, 1.4, length(uv) * 1.2);

// Tone map + gamma

col = col / (1.0 + col);

col = pow(max(col, 0.0), vec3(0.45));

col -= sin(gl_FragCoord.y * PI) * 0.04;

fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);

}

https://gyazo.com/586383d44d8dd7168095f9dc001bee19

お?

音源同期ちょっとわかりにくいのでわかりやすいやつつくってもらう

音源同期超わかりやすい版

code:a

// ============================================================

// AUDIO VISUALIZER - 音源同期が超わかりやすい版

// KodeLife デフォルト変数:

// time : 経過時間

// resolution : 画面解像度

// spectrum : vec3(低音, 中音, 高音) 0.0〜1.0

//

// Kontrol Panel → Parameters → + → Built-In → Audio → Spectrum Split

// → 名前を "spectrum" にする

// ============================================================

uniform float time;

uniform vec2 resolution;

uniform vec3 spectrum; // x=低音(bass), y=中音(mid), z=高音(high)

out vec4 fragColor;

void main() {

vec2 uv = (gl_FragCoord.xy - resolution * 0.5) / resolution.y;

float bass = spectrum.x;

float mid = spectrum.y;

float high = spectrum.z;

vec3 col = vec3(0.0);

// -------------------------------------------------------

// 1. 背景: ベース音で赤くフラッシュ

// -------------------------------------------------------

col += vec3(1.0, 0.05, 0.1) * bass * 0.6;

// -------------------------------------------------------

// 2. 中心の円: ベース音で大きくなる

// -------------------------------------------------------

float r = length(uv);

float circleR = 0.05 + bass * 0.25;

float circle = smoothstep(circleR + 0.01, circleR, r);

col += vec3(1.0, 0.4, 0.0) * circle;

// 円の光輪

float glow = exp(-abs(r - circleR) * 20.0) * (0.3 + bass * 0.8);

col += vec3(1.0, 0.3, 0.0) * glow;

// -------------------------------------------------------

// 3. イコライザーバー: 中音で高さが変わる

// 画面下部に横並びのバー

// -------------------------------------------------------

int barCount = 32;

for (int i = 0; i < barCount; i++) {

float fi = float(i);

float fN = float(barCount);

// バーのX座標 (-0.5 〜 +0.5)

float barX = (fi / fN) - 0.5 + (0.5 / fN);

float barW = 0.4 / fN;

// 各バーの高さ: 中音 + 時間でゆらぎ

float freq = fi / fN;

float height = mid * (0.3 + 0.4 * abs(sin(freq * PI * 2.0 + time * 3.0 + fi * 0.5)));

height += high * 0.1 * abs(sin(fi * 1.7 + time * 8.0));

// バー領域判定 (画面下から上方向)

float barBottom = -0.48;

float barTop = barBottom + height;

float inBar = step(barBottom, uv.y) * step(uv.y, barTop)

* step(abs(uv.x - barX), barW * 0.5);

// バーの色: 低→青、中→緑、高→赤

vec3 barCol = mix(

vec3(0.0, 0.5, 1.0),

vec3(1.0, 0.1, 0.2),

uv.y / barTop

);

// 高さによって明るさ変化

barCol *= 1.0 + high * 2.0;

col += barCol * inBar;

}

// -------------------------------------------------------

// 4. 波紋リング: 高音でリングを発射

// -------------------------------------------------------

for (int i = 0; i < 5; i++) {

float fi = float(i);

float speed = 0.6 + fi * 0.15;

float phase = mod(time * speed + fi * 0.4, 1.5);

float ringR = phase * 0.5;

float ringW = 0.004 / (abs(r - ringR) + 0.002);

float fade = (1.0 - phase / 1.5) * high;

col += vec3(0.2, 1.0, 0.8) * ringW * fade;

}

// -------------------------------------------------------

// 5. テキスト的な水平ライン: 全音域でうねる

// -------------------------------------------------------

for (int i = 0; i < 5; i++) {

float fi = float(i);

float yPos = (fi / 5.0) * 0.6 - 0.3;

float wave = sin(uv.x * 10.0 + time * 3.0 + fi) * mid * 0.05

+ sin(uv.x * 25.0 + time * 6.0 - fi) * high * 0.02;

float d = abs(uv.y - yPos - wave);

float line = 0.002 / (d + 0.001) * (0.2 + mid * 0.5);

col += vec3(0.0, 0.8, 1.0) * line * (1.0 - r);

}

// -------------------------------------------------------

// 仕上げ: ビネット + トーンマップ

// -------------------------------------------------------

col *= 1.0 - smoothstep(0.4, 0.9, r);

col = col / (1.0 + col);

col = pow(max(col, 0.0), vec3(0.45));

fragColor = vec4(clamp(col, 0.0, 1.0), 1.0);

}

https://gyazo.com/f73e09a41c1e9e12f455b9c56ffb76d6

いいじゃん

Cmd+Shift+Iでフル画面とトグルできる

宇宙っぽいのつくってみる