💻Coding 📐Design 🎨Art 😁Smile.
fragShaderSource = `
// https://www.shadertoy.com/view/lsX3W4
precision mediump float;
uniform vec2 u_size;
uniform float u_time;
float fixedTime = u_time / 2.0;
float distanceToMandelbrot(in vec2 c)
{
// iterate
float di = 1.0;
vec2 z = vec2(0.0);
float m2 = 0.0;
vec2 dz = vec2(0.0);
for (int i = 0; i < 300; i++)
{
if (m2 > 1024.0)
{
di = 0.0;
break;
}
// Z' -> 2·Z·Z' + 1
dz = 2.0 * vec2(z.x * dz.x - z.y * dz.y, z.x * dz.y + z.y * dz.x) + vec2(1.0, 0.0);
// Z -> Z² + c
z = vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y) + c;
m2 = dot(z, z);
}
// distance
float d = 0.5 * sqrt(dot(z, z) / dot(dz, dz)) * log(dot(z, z));
if (di > 0.5)
d = 0.0;
return d;
}
void main()
{
vec2 p = (2.0 * gl_FragCoord.xy - u_size.xy) / u_size.y;
// animation
float tz = 0.5 - 0.5 * cos(0.225 * fixedTime);
float zoo = pow(0.5, 13.0 * tz);
vec2 c = vec2(-0.05, .6805) + p * zoo;
// distance to Mandelbrot
float d = distanceToMandelbrot(c);
// do some soft coloring based on distance
d = clamp(pow(4.0 * d / zoo, 0.2), 0.0, 1.0);
vec3 col = vec3(d);
gl_FragColor = vec4(col, 1.0);
}
`
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.
