Published
Edited
Nov 27, 2020
4 forks
13 stars
Ueda's AttractorJacobi Elliptic Functions in the Complex PlaneSDF Points with reglClifford and de Jong AttractorsDrawing Instanced Lines with reglInstanced Line RenderingLawson's Klein BottleInteractive Multi-scale Turing PatternsSelecting the Right Opacity for 2D Point CloudsAdaptive Contouring in Fragment ShadersFake Transparency for 3D SurfacesGPU BoidsDouble Compound Pendulums3D Reaction-DiffusionMathematical Easter Egg ColoringToiletpaperfullerenes and Charmin NanotubesQuasicrystalsObservable + regl2D (Non-physical) N-body Gravity with Poisson's EquationPeriodic Planar Three-Body OrbitsQuick (miterless) Lines in WebGLSpin WebGLicosphereregl-cameraFinding Roots in the Complex Planeglsl-complexglsl-complex-auto-differentiationDomain Coloring with Adaptive Contouringgl-mat3gl-mat4gl-vec4gl-quatgl-mat2gl-vec3gl-vec2Instanced WebGL Circlesregl-toolsDomain Coloring for Complex FunctionsContour Plots with regl Observable PlotDrawing indexed mesh data as screen-space normals without duplicating dataGPUs, FFTs, and the 1-D Schrödinger Equation
Baker's Map
Also listed in…
More or less finished notebooks
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.