Published
Edited
Nov 27, 2020
4 forks
13 stars
WebGPU ShaderHydraulic Erosion SimulationHow Does Mapbox Raster Colorization Work?Arc Length of a Quadratic Bézier SplineMagnetic PendulumTracing Lamb 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 ResamplingAperiodic 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 plotterGPU Voronoi Diagrams using the Jump Flooding AlgorithmHello, 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
Baker's Map
Also listed in…
WebGL
function stretch(xyOut, x, y) {
// This function gets points in [0, 0.5] x [0, 1] and returns (x, y) pairs in [0, 1] x [0, 0.5]
xyOut[0] = x * 2;
xyOut[1] = y * 0.5;
}
function fold(xyOut, x, y) {
// This function gets points in [0, 1] x [0, 0.5], and returns (x, y) pairs in [0, 0.5] x [0, 1]
if (x < 0.5) {
// Try other mappings like (y, x)!
xyOut[0] = x;
xyOut[1] = y;
} else {
xyOut[0] = x - 0.5;
xyOut[1] = y + 0.5;
}
}
createREGL = require('regl')
drawLoop = {
let prevTime = null;
const frame = regl.frame(({ time }) => {
if (prevTime !== null) {
points.t += (time - prevTime) * speed;
// Trigger a new transition when enough time has elapsed
if (points.t > 1.0) points.next();
}
drawPoints(points);
prevTime = time;
});
// Stop the current animation when we re-evaluate this cell
invalidation.then(frame.cancel);
return frame;
}
points = {
// Reevaluate this cell when the restart button is clicked
restart;
// An array for positions. We'll hold onto a buffer with these positions
// unmodified so that we can determine which class (red or blue) a point
// belongs to.
const xy = new Float32Array(n * 2);
// Initialize points in the rectangle [0, 0.5] x [0, 1]
for (var i = 0; i < n; i++) {
let x = (xy[2 * i] = Math.random() * 0.5);
xy[2 * i + 1] = Math.random();
}
// Create WebGL buffers
let buffers = [0, 1, 2].map(() => regl.buffer(xy));
const output = { buffers, next, t: 0 };
// We maintain two buffers and always transition from one to the next. The transition
// has two phases, which we denote with either state = 0 or state = 1.
let state = 0;
function next() {
// Loop t in [0, 1]
output.t = output.t % 1.0;
// Swap buffer references so that we're always interpolating from 0 -> 1
let tmp = buffers[0];
buffers[0] = buffers[1];
buffers[1] = tmp;
// We insert the output into xyOut instead of a new array so that we
// don't allocate millions of new two-element Arrays every time we
// transition.
const xyOut = [0, 0];
// Update the array of data
if (state === 0) {
// In the first transition, stretch horizontally and squash vertically
for (let i = 0; i < n; i++) {
stretch(xyOut, xy[2 * i], xy[2 * i + 1]);
xy[2 * i] = xyOut[0];
xy[2 * i + 1] = xyOut[1];
}
state = 1;
} else {
for (let i = 0; i < n; i++) {
fold(xyOut, xy[2 * i], xy[2 * i + 1]);
xy[2 * i] = xyOut[0];
xy[2 * i + 1] = xyOut[1];
}
state = 0;
}
// Update the target buffer accordingly
buffers[1].subdata(xy);
}
// Delete old buffers when this cell is reevaluated
invalidation.then(() => {
buffers[0].destroy();
buffers[1].destroy();
buffers[2].destroy();
});
return output;
}
drawPoints = regl({
vert: `
precision highp float;
attribute vec2 xyA, xyB, xyInitial;
uniform float t, pointSize, pixelRatio;
varying vec2 vXY0;
void main () {
// Pass the initial (x, y) coordiantes to the fragment shader
vXY0 = xyInitial;
// Interpolate and transform to the range [-1, 1] x [-1, 1]:
gl_Position = vec4(mix(xyA, xyB, t) * 2.0 - 1.0, 0, 1);
gl_PointSize = pointSize * pixelRatio;
}`,
frag: `
precision highp float;
varying vec2 vXY0;
void main () {
const vec3 c1 = vec3(0.9, 0.1, 0.5);
const vec3 c2 = vec3(0.2, 0.5, 1);
// Color based on the *initial* position, vXY0
gl_FragColor = vec4(vXY0.x < 0.25 ? c1 : c2, 1);
}`,
attributes: {
xyInitial: regl.prop('buffers[2]'),
xyA: regl.prop('buffers[0]'),
xyB: regl.prop('buffers[1]')
},
uniforms: {
t: (ctx, props) => cubicInOut(props.t),
pointSize,
pixelRatio: regl.context('pixelRatio')
},
primitive: 'points',
count: n,
depth: { enable: false }
})
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.