Notebooks 2.0 is here.
Least Squares Curve Fit with the QR DecompositionLine-Sweep Ambient Occlusion with WebGPUSpring TrainingLine Sweep Ambient Occlusion in JavaScriptLine Sweep Terrain LightingSpeed Climbing World Record ProgressionWebGPU ShaderHydraulic Erosion SimulationHow Does Mapbox Raster Colorization Work?Arc Length of a Quadratic Bézier SplineMagnetic PendulumTracing Lamb Wave Modes in the Complex PlaneMissing Fundamental IllusionSliced Optimal TransportLine Integral ConvolutionShanks TransformationUeda's AttractorCubic basis vs. Hermite interpolationBicubic Texture Interpolation using Linear FilteringFactor-of-Two Lanczos Image ResamplingRendering the Aperiodic Monotileeqn [WIP]SDF Points with reglKnocking Down the Gates with our Friend JacobiFast Generalized Winding Numbers in 2DHTML+CSS Periodic Three-Body OrbitsClifford and de Jong AttractorsStrange Attractors on the GPU, Part 1: ImplementationStrange Attractors on the GPU, Part 2: Fun!Lawson's Klein BottleInteractive Multi-scale Turing PatternsComputing π with the Bailey-Borwein-Plouffe FormulaThe Double Pendulum MapMalkus WaterwheelRegister Allocation and the k-Coloring ProblemMultiscale Turing Patterns in WebGLSelecting the Right Opacity for 2D Point CloudsKuramoto-Sivashinsky Equation in 2DAdaptive Contouring in Fragment ShadersComplex function plotterBaker's MapHello, g9Dispersion in Water Surface WavesFake Transparency for 3D SurfacesUniformly Distributed Points on a SphereGPU BoidsGrouping Points with Principal Component AnalysisDomain Coloring for Complex FunctionsDrawing indexed mesh data as screen-space normals without duplicating dataFinding Roots in the Complex PlanePeriodic Planar Three-Body Orbits2D (Non-physical) N-body Gravity with Poisson's EquationHalf-Precision Floating-Point, VisualizedIntegers in Single-Precision Floating-PointDomain Coloring with Adaptive ContouringInstanced WebGL CirclesDouble Compound Pendulums3D Reaction-DiffusionMathematical Easter Egg ColoringToiletpaperfullerenes and Charmin Nanotubes
GPU Voronoi Diagrams using the Jump Flooding Algorithm
fbos = [0, 1].map(() => regl.framebuffer({ colorType }))
jfaPass = regl({
frag: `
precision highp float;
uniform sampler2D src;
uniform float stepSize;
uniform vec2 resolution;
${unpackPosition}
${jumpFloodingGLSL}
void main() {
gl_FragColor = jumpFloodingStep(gl_FragCoord.xy, resolution, stepSize);
}`,
framebuffer: regl.prop('fbos[1]'),
uniforms: {
stepSize: regl.prop('stepSize'),
src: regl.prop('fbos[0]')
}
})
drawToScreen = regl({
frag: `
precision highp float;
#extension GL_OES_standard_derivatives : enable
uniform sampler2D src;
uniform float pixelRatio, maxRadius;
uniform vec2 resolution, activePoint;
// Draw contour screen-width grid lines of the distance field
float gridFactor (float parameter, float width, float feather) {
float w1 = width - feather * 0.5;
float d = length(vec2(dFdx(parameter), dFdy(parameter)));
float looped = 0.5 - abs(mod(parameter, 1.0) - 0.5);
return smoothstep(d * (w1 + feather), d * w1, looped);
}
${unpackColor}
${unpackPosition}
void main () {
vec4 packedPositionAndColor = texture2D(src, gl_FragCoord.xy / resolution);
vec3 color = unpackColor(packedPositionAndColor);
vec2 position = unpackPosition(packedPositionAndColor);
float dist = distance(position, gl_FragCoord.xy);
float grid = 0.03 * gridFactor(log2(dist), 0.5 * pixelRatio, 1.0);
//grid += 0.05 * gridFactor(log2(dist) * 8.0, 0.5 * pixelRatio, 1.0);
vec3 baseColor = unpackColor(packedPositionAndColor);
// highlight if it matches the point hovered over
vec4 activeValue = texture2D(src, vec2(0, 1) + vec2(1, -1) * activePoint / resolution);
vec2 activePosition = unpackPosition(activeValue);
vec3 activeColor = unpackColor(activeValue);
if (activePoint.x >= 0.0 && activePosition != vec2(0) && distance(activeColor, baseColor) < 1e-4) {
baseColor = vec3(1, 0.4, 0.2);
}
// Darken by a grid
vec3 c = mix(baseColor, vec3(0), grid);
// Darken the central point
if (maxRadius > 5.0) {
c *= smoothstep(1.0, 2.0, dist / pixelRatio);
}
// Hide the outside if clipping to a circular region
c = mix(vec3(1), c, smoothstep(maxRadius, maxRadius - 1.0, dist));
// Background is white
if (position == vec2(0)) c = vec3(1);
gl_FragColor = vec4(c, 1);
}`,
uniforms: {
src: regl.prop('src'),
pixelRatio: regl.context('pixelRatio'),
maxRadius: (ctx, props) =>
props.circularCutoff ? Math.pow(2, selectedPassCount) : 100000,
activePoint: regl.prop('activePoint')
}
})
{
let drawn = false;
const frame = regl.frame(({ time }) => {
try {
if (drawn && !animate) return;
const t = animate ? time : 0;
configureMap(({ framebufferWidth, framebufferHeight }) => {
// Lazily resize only when the size has changed:
fbos.forEach(fbo => fbo.resize(framebufferWidth, framebufferHeight));
// Initialize the pattern
fbos[0].use(() => {
regl.clear({ color: [0, 0, 16, 16] });
drawPoints({ time: t });
});
// Perform ~log2(size) JFA passes
for (
let stepSize = Math.pow(2, selectedPassCount - 1);
stepSize >= 1;
stepSize /= 2
) {
jfaPass({ fbos, stepSize });
swap(fbos);
}
// Draw the result to the screen
drawToScreen({
src: fbos[0],
circularCutoff,
activePoint: mousePosition
});
drawn = true;
});
} catch (e) {
frame.cancel();
throw e;
}
});
invalidation.then(frame.cancel);
}
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.
