drawPlot3(domainColoringParameters)
drawPlot3 = plot3.createDrawFunction(`vec2 f (vec2 z) {
return cdiv(cmul(csqr(z) - vec2(1, 0), csqr(z - vec2(2, 1))), csqr(z) + vec2(2, 2));
}`)
drawPlot1 = plot1.createDrawFunction(`
vec2 f (vec2 z) {
return z;
}
`)
drawPlot1(domainColoringParameters)
drawPlot2 = plot2.createDrawFunction(`
uniform float n;
vec2 f (vec2 z) {
return cpow(z, n);
}
`)
drawPlot2(Object.assign({n}, domainColoringParameters))
glsl = ({
domainColoring: `
vec3 domainColoring (
vec2 z,
vec2 polarGridSpacing,
float polarGridStrength,
vec2 rectGridSpacing,
float rectGridStrength,
float poleLightening,
float poleLighteningSharpness,
float rootDarkening,
float rootDarkeningSharpness,
float lineWidth
) {
vec2 zpolar = cpolar(z);
float carg = zpolar.x * HALF_PI_INV;
float mag = zpolar.y;
float dx = 2.0 / 640.0;
float dfdx = length(vec2(dFdx(mag), dFdy(mag))) / dx;
float spacing = dfdx;
float base = 10.0;
float logspacing = log2(spacing) / log2(base);
float logtier = floor(logspacing);
float tier = pow(base, logtier);
float c = 0.0;
c += mod(mag / tier , 1.0);
c += smoothstep(logtier + 1.0, logtier, logspacing) * mod(mag / tier * base, 1.0);
c += smoothstep(logtier, logtier + 1.0, logspacing) * mod(mag / tier / base, 1.0);
if (true) {
dfdx = length(vec2(dFdx(carg), dFdy(carg))) / dx;
spacing = dfdx;
base = 4.0;
logspacing = log2(spacing) / log2(base);
logtier = floor(logspacing);
tier = pow(base, logtier);
c += mod(carg / tier , 1.0);
c += smoothstep(logtier + 1.0, logtier, logspacing) * mod(carg / tier * base, 1.0);
c += smoothstep(logtier, logtier + 1.0, logspacing) * mod(carg / tier / base, 1.0);
} else {
c += fract(carg * 4.0);
c += 0.5 * fract(carg * 8.0);
c += 0.25 * fract(carg * 16.0);
}
c = c / 3.0 * 0.1 + 0.8;
return (0.2 + 0.8 * cubehelixRainbow(carg)) * c;
}
`,
useStandardDerivatives: `
#extension GL_OES_standard_derivatives : enable
`,
constants: `
#define PI 3.141592653589793238
#define HALF_PI 1.57079632679
#define HALF_PI_INV 0.15915494309
#define LOG_2 0.69314718056
#define C_ONE (vec2(1.0, 0.0))
#define C_I (vec2(0.0, 1.0))
#define TO_RADIANS 0.01745329251
`,
precision: `
precision highp float;
`,
hsv2rgb: `
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);
}
`,
hypot: `
float hypot (vec2 z) {
float t;
float x = abs(z.x);
float y = abs(z.y);
t = min(x, y);
x = max(x, y);
t = t / x;
return x * sqrt(1.0 + t * t);
}
`,
complex: `
float cosh (float x) {
return 0.5 * (exp(x) + exp(-x));
}
float sinh (float x) {
return 0.5 * (exp(x) - exp(-x));
}
vec2 sinhcosh (float x) {
float ex = exp(x);
float emx = exp(-x);
return 0.5 * vec2(
ex + emx,
ex - emx
);
}
vec2 cmul (vec2 a, vec2 b) {
return vec2(
a.x * b.x - a.y * b.y,
a.y * b.x + a.x * b.y
);
}
vec2 cmul (vec2 a, vec2 b, vec2 c) {
return cmul(cmul(a, b), c);
}
vec2 cdiv (vec2 a, vec2 b) {
return vec2(
a.y * b.y + a.x * b.x,
a.y * b.x - a.x * b.y
) / dot(b, b);
}
vec2 cinv (vec2 z) {
return vec2(z.x, -z.y) / dot(z, z);
}
vec2 cexp (vec2 z) {
return vec2(cos(z.y), sin(z.y)) * exp(z.x);
}
vec2 clog (vec2 z) {
return vec2(
log(hypot(z)),
atan(z.y, z.x)
);
}
vec2 cpolar (vec2 z) {
return vec2(
atan(z.y, z.x),
hypot(z)
);
}
vec2 cpow (vec2 z, float x) {
float r = hypot(z);
float theta = atan(z.y, z.x) * x;
return vec2(cos(theta), sin(theta)) * pow(r, x);
}
vec2 cpow (vec2 a, vec2 b) {
float aarg = atan(a.y, a.x);
float amod = hypot(a);
float theta = log(amod) * b.y + aarg * b.x;
return vec2(cos(theta), sin(theta)) * pow(amod, b.x) * exp(-aarg * b.y);
}
vec2 csqrt (vec2 z) {
vec2 zpolar = cpolar(z);
float theta = zpolar.x * 0.5;
float mod = sqrt(zpolar.y);
return vec2(cos(theta), sin(theta)) * mod;
}
vec2 csqr (vec2 z) {
return vec2(z.x * z.x - z.y * z.y, 2.0 * z.x * z.y);
}
vec2 ccos (vec2 z) {
return sinhcosh(z.y) * vec2(cos(z.x), -sin(z.x));
}
vec2 csin (vec2 z) {
return sinhcosh(z.y).yx * vec2(sin(z.x), cos(z.x));
}
vec2 ctan (vec2 z) {
vec2 e2iz = cexp(2.0 * vec2(-z.y, z.x));
return cdiv(e2iz - C_ONE, cmul(C_I, C_ONE + e2iz));
}
vec2 cacos (vec2 z) {
vec2 t1 = csqrt(vec2(z.y * z.y - z.x * z.x + 1.0, -2.0 * z.x * z.y));
vec2 t2 = clog(vec2(t1.x - z.y, t1.y + z.x));
return vec2(HALF_PI - t2.y, t2.x);
}
vec2 casin (vec2 z) {
vec2 t1 = csqrt(vec2(z.y * z.y - z.x * z.x + 1.0, -2.0 * z.x * z.y));
vec2 t2 = clog(vec2(t1.x - z.y, t1.y + z.x));
return vec2(t2.y, -t2.x);
}
vec2 catan (vec2 z) {
float d = z.x * z.x + (1.0 - z.y) * (1.0 - z.y);
vec2 t1 = clog(vec2(1.0 - z.y * z.y - z.x * z.x, -2.0 * z.x) / d);
return 0.5 * vec2(-t1.y, t1.x);
}
vec2 ccosh (vec2 z) {
return sinhcosh(z.x).yx * vec2(cos(z.y), sin(z.y));
}
vec2 csinh (vec2 z) {
return sinhcosh(z.x) * vec2(cos(z.y), sin(z.y));
}
vec2 ctanh (vec2 z) {
vec2 ez = cexp(z);
vec2 emz = cexp(-z);
return cdiv(ez - emz, ez + emz);
}
`,
cubeHelix: `
// https://github.com/d3/d3-color
vec3 cubehelix(vec3 c) {
float a = c.y * c.z * (1.0 - c.z);
float cosh = cos(c.x + PI / 2.0);
float sinh = sin(c.x + PI / 2.0);
return vec3(
(c.z + a * (1.78277 * sinh - 0.14861 * cosh)),
(c.z - a * (0.29227 * cosh + 0.90649 * sinh)),
(c.z + a * (1.97294 * cosh))
);
}
// https://github.com/d3/d3-scale-chromatic
vec3 cubehelixRainbow(float t) {
float ts = 0.25 - 0.25 * cos((t - 0.5) * PI * 2.0);
return cubehelix(vec3(
(360.0 * t - 100.0) * TO_RADIANS,
1.5 - 1.5 * ts,
(0.8 - 0.9 * ts)
));
}
`,
wireframe: `
// https://github.com/rreusser/glsl-solid-wireframe
float wireframe (float parameter, float width, float feather) {
float w1 = width - feather * 0.5;
float d = fwidth(parameter);
float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
return smoothstep(d * w1, d * (w1 + feather), looped);
}
float wireframe (vec2 parameter, float width, float feather) {
float w1 = width - feather * 0.5;
vec2 d = fwidth(parameter);
vec2 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
vec2 a2 = smoothstep(d * w1, d * (w1 + feather), looped);
return min(a2.x, a2.y);
}
float wireframe (vec3 parameter, float width, float feather) {
float w1 = width - feather * 0.5;
vec3 d = fwidth(parameter);
vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
vec3 a3 = smoothstep(d * w1, d * (w1 + feather), looped);
return min(min(a3.x, a3.y), a3.z);
}
float wireframe (vec4 parameter, float width, float feather) {
float w1 = width - feather * 0.5;
vec4 d = fwidth(parameter);
vec4 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
vec4 a4 = smoothstep(d * w1, d * (w1 + feather), looped);
return min(min(min(a4.x, a4.y), a4.z), a4.w);
}
float wireframe (float parameter, float width) {
float d = fwidth(parameter);
float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
return smoothstep(d * (width - 0.5), d * (width + 0.5), looped);
}
float wireframe (vec2 parameter, float width) {
vec2 d = fwidth(parameter);
vec2 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
vec2 a2 = smoothstep(d * (width - 0.5), d * (width + 0.5), looped);
return min(a2.x, a2.y);
}
float wireframe (vec3 parameter, float width) {
vec3 d = fwidth(parameter);
vec3 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
vec3 a3 = smoothstep(d * (width - 0.5), d * (width + 0.5), looped);
return min(min(a3.x, a3.y), a3.z);
}
float wireframe (vec4 parameter, float width) {
vec4 d = fwidth(parameter);
vec4 looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
vec4 a4 = smoothstep(d * (width - 0.5), d * (width + 0.5), looped);
return min(min(min(a4.x, a4.y), a4.z), a4.z);
}
`,
})
drawPlot4 = plot4.createDrawFunction(`
uniform float t;
vec2 f (vec2 z) {
//return vec2(pow(2.0, z.x * 1.0));
vec2 fz = C_ONE;
vec2 a0 = cexp(vec2(0.375, -0.125 * t));
fz = cmul(fz, z - cexp(vec2(0.0, t)));
fz = cdiv(fz, z - cexp(vec2(0.5, 0.5 * t)));
fz = cmul(fz, z - cexp(vec2(0.125, -0.625 * t)));
fz = cdiv(fz, z - cexp(vec2(0.25, -0.25 * t)));
fz = cmul(fz, csqr(z - a0));
return fz;
}
`)
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.
