Edited at

VEDAでfbm関数を使ってみる

VEDAを用いたGLSLのライブコーディングの練習をしていて、fbm関数の特性にとても興味があったので試しに使ってみました。


fbm関数


fbm.frag

float random (in vec2 st) {

return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))
* 43758.5453123);
}

float noise (in vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);

float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));

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

return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}

float fbm ( in vec2 _st) {
float v = 0.0;
float a = 0.5;
vec2 shift = vec2(100.0);

mat2 rot = mat2(cos(0.5), sin(0.5),
-sin(0.5), cos(0.50));
for (float i = 0.0; i < 5.0; ++i) {
v += a * noise(_st);
_st = rot * _st * 2.0 + shift;
a *= 0.5;
}
return v;
}


ここの記事がとても勉強になりました。


コード


helloworld.frag

/*{

"audio": true,
}*/

precision mediump float;
uniform float time;
uniform vec2 resolution;
uniform float volume;

float random (in vec2 st) {
return fract(sin(dot(st.xy,
vec2(12.9898,78.233)))
* 43758.5453123);
}

float noise (in vec2 st) {
vec2 i = floor(st);
vec2 f = fract(st);

float a = random(i);
float b = random(i + vec2(1.0, 0.0));
float c = random(i + vec2(0.0, 1.0));
float d = random(i + vec2(1.0, 1.0));

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

return mix(a, b, u.x) +
(c - a)* u.y * (1.0 - u.x) +
(d - b) * u.x * u.y;
}

float fbm ( in vec2 _st) {
float v = 0.0;
float a = 0.5;
vec2 shift = vec2(100.0);

mat2 rot = mat2(cos(0.5), sin(0.5),
-sin(0.5), cos(0.50));
for (float i = 0.0; i < 5.0; ++i) {
v += a * noise(_st);
_st = rot * _st * 2.0 + shift;
a *= 0.5;
}
return v;
}

void main() {
vec2 point = (gl_FragCoord.xy * 2. - resolution) / min(resolution.x, resolution.y);
vec3 orbs = vec3(0.0);
for(float loop = 0.0; loop < 5.0; loop++) {
vec2 q = point + vec2(fbm(point + sin(time)) * loop, fbm(point + time) * loop);
orbs += 0.1 * abs(sin(time)) / length(q);
}
gl_FragColor = vec4(vec3(orbs), 1.0);
}


クリエイティブコーディングやっぱ面白いです。