Domain Coloring with Adaptive Contouring / Ricky Reusser

Ricky Reusser

Workspace

Published

Edited

Jul 26, 2020

Importers

73 stars

More or less finished notebooks

WebGPU Shader Hydraulic Erosion Simulation How Does Mapbox Raster Colorization Work?Arc Length of a Quadratic Bézier Spline Magnetic Pendulum Tracing Lamb Modes in the Complex Plane Missing Fundamental Illusion Sliced Optimal Transport Line Integral Convolution Shanks Transformation Ueda's Attractor Cubic basis vs. Hermite interpolation Bicubic Texture Interpolation using Linear Filtering Factor-of-Two Lanczos Image Resampling Aperiodic Monotile eqn [WIP]SDF Points with regl Knocking Down the Gates with our Friend Jacobi Fast Generalized Winding Numbers in 2D HTML+CSS Periodic Three-Body Orbits Clifford and de Jong Attractors Strange Attractors on the GPU, Part 1: Implementation Strange Attractors on the GPU, Part 2: Fun!Lawson's Klein Bottle Interactive Multi-scale Turing Patterns Computing π with the Bailey-Borwein-Plouffe Formula The Double Pendulum Map Malkus Waterwheel Register Allocation and the k-Coloring Problem Multiscale Turing Patterns in WebGL Selecting the Right Opacity for 2D Point Clouds Kuramoto-Sivashinsky Equation in 2D Adaptive Contouring in Fragment Shaders Complex function plotter GPU Voronoi Diagrams using the Jump Flooding Algorithm Baker's Map Hello, g9 Dispersion in Water Surface Waves Fake Transparency for 3D Surfaces Uniformly Distributed Points on a Sphere GPU Boids Grouping Points with Principal Component Analysis Domain Coloring for Complex Functions Drawing indexed mesh data as screen-space normals without duplicating data Finding Roots in the Complex Plane Periodic Planar Three-Body Orbits 2D (Non-physical) N-body Gravity with Poisson's Equation Half-Precision Floating-Point, Visualized Integers in Single-Precision Floating-Point

Domain Coloring with Adaptive Contouring

Instanced WebGL Circles Double Compound Pendulums 3D Reaction-Diffusion Mathematical Easter Egg Coloring Toiletpaperfullerenes and Charmin Nanotubes

Also listed in…

Math

WebGL

controlPoints = [[1, -0.5], [0.3, 0.8], [-1, 0.1]];

function createPolarDomainColoringShader (opts) {

opts = opts || {}

const magnitudeOctaves = opts.magnitudeOctaves === undefined ? 4 : +opts.magnitudeOctaves;

const phaseOctaves = opts.phaseOctaves === undefined ? 3 : +opts.phaseOctaves;

const phaseMultiplier = opts.phaseMultiplier === undefined ? 4 : +opts.phaseMultiplier;

const magnitudeMultiplier = opts.magnitudeMultiplier === undefined ? 4 : +opts.magnitudeMultiplier;

const argumentColoring = opts.argumentColoring === undefined ? 0.0 : +opts.argumentColoring;

const bias1 = opts.bias1 === undefined ? 0.0 : +opts.bias1;

const bias2 = opts.bias2 === undefined ? 0.0 : +opts.bias2;

return `${glslConstants}

${glslHypot}

${argumentColoring ? `

${glslRainbow}

` : ''}

${glslContrastFunction}

float complexContouringGridFunction (float x) {

return 4.0 * abs(fract(x - 0.5) - 0.5);

}

vec4 domainColoring (vec4 f_df,

vec2 steps,

vec2 scale,

vec2 gridOpacity,

vec2 shadingOpacity,

float lineWidth,

float lineFeather,

vec3 gridColor,

float argumentColoring

) {

float invlog2base, logspacing, logtier, n, invSteps;

vec2 res = scale * vec2(1.0, 1.0 / 6.28) * 20.0 * steps;

// Complex argument, scaled to the range [0, 4]

float carg = atan(f_df.y, f_df.x) * HALF_PI_INV * ${phaseMultiplier.toFixed(1)};

// Reciprocal of the complex magnitude

float cmagRecip = 1.0 / hypot(f_df.xy);

// Normalize z before using it to compute the magnitudes. Without this we lose half

// of the floating point range due to overflow.

vec2 znorm = f_df.xy * cmagRecip;

// Computed as d|f| / dz, evaluated in the +real direction (though any direction works)

float cmagGradientMag = hypot(vec2(dot(znorm, f_df.zw), dot(vec2(znorm.y, -znorm.x), f_df.zw)));

float cargGradientMag = cmagGradientMag * cmagRecip;

// Shade at logarithmically spaced magnitudes

float mappedCmag = -log2(cmagRecip);

float mappedCmagGradientMag = cmagGradientMag * cmagRecip;

// Magnitude steps

invlog2base = 1.0 / log2(steps.x);

logspacing = log2(mappedCmagGradientMag * res.x) * invlog2base;

logspacing = clamp(logspacing, -50.0, 50.0);

logtier = floor(logspacing);

n = log2(abs(mappedCmag)) * invlog2base - logtier;

invSteps = 1.0 / steps.x;

float magOctave0 = pow(steps.x, n) * sign(mappedCmag);

${[...Array(magnitudeOctaves - 1).keys()].map(i =>

`float magOctave${i + 1} = magOctave${i} * invSteps;`).join('\n ')}

${[...Array(magnitudeOctaves + 1).keys()].map(i =>

`float magWeight${i} = ${i === 0 || i === magnitudeOctaves ? '1e-4' : (1 + i * bias1 + bias2 * Math.pow(i, 2)).toFixed(2)};`).join('\n ')}

float width1 = max(0.0, lineWidth - lineFeather);

float width2 = lineWidth + lineFeather;

float w, scaleFactor;

float totalWeight = 0.0;

float magnitudeGrid = 0.0;

float magnitudeShading = 0.0;

scaleFactor = pow(steps.x, logtier) / cargGradientMag * 0.25;

${[...Array(magnitudeOctaves).keys()].map(i =>

`w = mix(magWeight${i}, magWeight${i + 1}, 1.0 - logspacing + logtier);

totalWeight += w;

magnitudeGrid += w * smoothstep(width1, width2, complexContouringGridFunction(magOctave${i}) * scaleFactor);

magnitudeShading += w * domainColoringContrastFunction(-magOctave${i});

scaleFactor *= steps.x;

`).join('\n ')}

magnitudeGrid /= totalWeight;

magnitudeShading /= totalWeight;

// Phase steps

invlog2base = 1.0 / log2(steps.y);

logspacing = log2(cargGradientMag * ${phaseMultiplier.toFixed(1)} * res.y) * invlog2base;

logspacing = clamp(logspacing, -50.0, 50.0);

logtier = floor(logspacing);

n = log2(abs(carg) + 1.0) * invlog2base - logtier;

invSteps = 1.0 / steps.y;

float phaseOctave0 = pow(steps.y, n) * sign(carg);

${[...Array(phaseOctaves - 1).keys()].map(i =>

`float phaseOctave${i + 1} = phaseOctave${i} * invSteps;`).join('\n ')}

${[...Array(phaseOctaves + 1).keys()].map(i =>

`const float phaseWeight${i} = ${i === 0 || i === phaseOctaves ? '1e-4' : (1 + i * bias1 + bias2 * Math.pow(i, 2)).toFixed(4)};`).join('\n ')}

totalWeight = 0.0;

float phaseShading = 0.0;

float phaseGrid = 0.0;

scaleFactor = pow(steps.y, logtier) / (cargGradientMag * ${phaseMultiplier.toFixed(1)}) * 2.0;

${[...Array(phaseOctaves).keys()].map(i =>

`w = mix(phaseWeight${i}, phaseWeight${i + 1}, 1.0 - logspacing + logtier);

totalWeight += w;

phaseGrid += w * smoothstep(width1, width2, complexContouringGridFunction(phaseOctave${i}) * scaleFactor);

phaseShading += w * domainColoringContrastFunction(phaseOctave${i});

scaleFactor *= steps.y;

`).join('\n ')}

phaseGrid /= totalWeight;

phaseShading /= totalWeight;

${argumentColoring ? (

`vec3 result = mix(vec3(1), 0.24 + 0.65 * rainbow(1.25 + carg * ${(1.0 / phaseMultiplier).toFixed(5)}), argumentColoring);`

) : (

`vec3 result = vec3(1);`

)}

float grid = 1.0;

grid = min(grid, 1.0 - (1.0 - magnitudeGrid) * gridOpacity.x);

grid = min(grid, 1.0 - (1.0 - phaseGrid) * gridOpacity.y);

float shading = 1.0 - (shadingOpacity.y * (phaseShading - 0.4) + shadingOpacity.x * (magnitudeShading - 0.4));

result *= shading;

result = mix(gridColor, result, grid);

//float cmag = -log(cmagRecip);

//float fixedMagShading = 0.5 * (1.0 - smoothstep(8.0, 1.0, cmag) * smoothstep(-8.0, -1.0, cmag));

//float lightnessCast = smoothstep(-1.0, 1.0, cmag);

//result = mix(result, vec3(lightnessCast), fixedMagShading);

return vec4(result, 1.0);

}`;

}

stack = createLayerStack(width, Math.max(500, Math.min(700, width * 0.8)), devicePixelRatio, {

regl: reglCanvasWithOptions({

attributes: {depthStencil: false, antialias: false}

}),

svg: DOM.svg

})

viewport = createViewport(stack, {t: 10, r: 5, b: 20, l: 30})

yScale = d3.scaleLinear()

.domain([-1.75, 1.75])

.range([viewport.height - viewport.margin.b, viewport.margin.t]);

xScale = constrainLinearScaleAspectRatio(

d3.scaleLinear()

.domain([-1, 1])

.range([viewport.margin.l, viewport.width - viewport.margin.r]),

yScale, 1);

configureRegl = ({

viewport: createReglViewportConfiguration(stack.layers.regl),

scale: createReglLinearScaleConfiguration(stack.layers.regl),

map: createReglMap(stack.layers.regl),

})

originalXScale = xScale.copy()

originalYScale = yScale.copy()

import {mat3create, mat3invert, mat3multiply} from '@rreusser/gl-mat3'

import {vec2transformMat3, vec2forEach} from '@rreusser/gl-vec2'

import {

reglCanvasWithOptions,

createLayerStack,

createViewport,

viewportAxes,

constrainLinearScaleAspectRatio,

createReglViewportConfiguration,

createReglLinearScaleConfiguration,

createReglMap,

mat3ViewportFromLinearScales,

mat3fromLinearScales,

persistentZoom

} from '@rreusser/regl-tools'

d3 = require('d3@5')

import {slider, checkbox, color} from '@jashkenas/inputs'

import {circle_interp, clerp} from '@jrus/circle-arc-interpolation'

import {csub, cmul, cdiv} from '@jrus/complex'

import {bezeval, bezpts_to_svgpath} from '@jrus/bezplot'

glslHypot = `

#ifndef GLSL_HYPOT

#define GLSL_HYPOT

float hypot (vec2 z) {

float x = abs(z.x);

float y = abs(z.y);

float t = min(x, y);

x = max(x, y);

t = t / x;

return x * sqrt(1.0 + t * t);

}

#endif`

import {math_css, $, $$} with {$css as $css} from "@jrus/misc"

$css = html`${math_css}`

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.

Learn more