🧪 Indie software researcher & developer
👾 React game developer
Published
Edited
Apr 1, 2021
Explorative art portfolio
Space view made of multilayer simplex noise
canvas = shaderTransparent({
width: canvasWidth,
height: canvasHeight,
visibility,
})`
precision highp float;
${snoise3D}
const vec3 iResolution = vec3(
${(canvasWidth * devicePixelRatio).toFixed(1)},
${(canvasHeight * devicePixelRatio).toFixed(1)},
${devicePixelRatio.toFixed(1)}
);
const float size = 25.0;
uniform vec2 u_translation;
uniform vec2 u_scale;
uniform float u_distance;
vec3 saturate(vec3 v) { return clamp(v, 0.0, 1.0); }
vec3 hue(float h) {
float r = abs(h * 6.0 - 3.0) - 1.0;
float g = 2.0 - abs(h * 6.0 - 2.0);
float b = 2.0 - abs(h * 6.0 - 4.0);
return saturate(vec3(r, g, b));
}
vec4 nn(vec2 coords) {
float base = 1.5;
float e0 = log(u_distance) / log(base) - 1.0;
vec4 n = vec4(0.0, 0.0, 0.0, 0.0);
for (int i = -14; i <= 17; i++) {
float e1 = floor(e0) + float(i);
float len1 = pow(base, e1);
vec2 coords1 = coords.xy / len1;
float de = e1 - e0;
float ampl1 = exp(-de*de / (110.0));
float n1 = snoise(vec3(coords1.xy, len1));
float n3 = (
1.2 * abs(pow(
abs(n1),
7.0 + de * 0.25
)) * sign(n1)
+ 0.01
+ 0.08 * sin((n1 * 7.0 - 3.0))
) * ampl1;
float h = fract(e1 / 17.0);
n += vec4(hue(h) * n3, n3);
}
return n;
}
void main() {
vec2 fragCoord = vec2(0, iResolution.y) + gl_FragCoord.xy * vec2(1, -1);
vec2 position = (fragCoord - u_translation) * u_scale;
gl_FragColor = nn(position);
}
`
canvas.style.background = "black";
{
gl.uniform2f(gl.getUniformLocation(program, "u_translation"), zoomTransform.x, zoomTransform.y);
gl.uniform2f(gl.getUniformLocation(program, "u_scale"), 1 / zoomTransform.k, 1 / zoomTransform.k);
gl.uniform1f(gl.getUniformLocation(program, "u_distance"), distance / zoomTransform.k);
canvas.render();
}
snoise2D = (await fetch("https://raw.githubusercontent.com/ashima/webgl-noise/ff3b5d34eafb7ad97985e896235546ceaea5b2cf/src/noise2D.glsl")).text()
snoise3D = (await fetch("https://raw.githubusercontent.com/ashima/webgl-noise/ff3b5d34eafb7ad97985e896235546ceaea5b2cf/src/noise3D.glsl")).text()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
