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 ShadersBaker's MapFake 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 OrbitsSpin 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
Quick (miterless) Lines in WebGL
lissajous = (t, a, b, δ) =>
t.map(t => [Math.sin(a * t + δ), Math.cos(b * t), 0])
{
// The WebGL and regl context is defined below so that we don't recreate it every
// time we execute this cell.
const { canvas, regl, camera } = plot1;
// We do recreate the draw command every time, but this doesn't seem to cause problems.
const drawLines = createDrawLineCommand(regl);
camera(() => {
drawLines({
// We pass a list of [[x0, y0, z0], [x1, y1, z1], ...]
position: lissajous(t, a, b, δ)
});
});
return canvas;
}
{
const { canvas, regl, camera } = plot2;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
camera(() => {
drawBorderedLines({
position: lissajous(t, a, b, δ),
borderColor: { constant: [0.4, 0.8, 1, 1] }
});
});
return canvas;
}
{
const { canvas, regl, camera } = plot3;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
// Construct a buffer *once*
const buffer = regl.buffer(lissajous(t, a, b, δ));
function draw() {
// Needed for regl to maintain its state with our custom timing loop
regl.poll();
camera(({ time }) => {
// Update the buffer data in-place. This is much faster and less
// disruptive than passing array data to the draw command or manually
// creating a new buffer for each frame.
buffer.subdata(lissajous(t, a, b, time));
drawBorderedLines({
// buffer doesn't expose the number of items, so we need to specify
// the number of vertices
count: t.length,
position: buffer
});
});
return canvas;
}
if (play) {
while (true) yield draw();
} else {
yield draw();
}
}
{
const { canvas, regl, camera } = plot4;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
camera(() => {
drawBorderedLines({
position: lissajous(t, a, b, δ),
width: { constant: lineWidth },
color: { constant: hexToFloatRgba(lineColor) },
borderWidth: { constant: borderWidth },
borderColor: { constant: hexToFloatRgba(borderColor) },
maxExpectedTurningAngle
});
});
return canvas;
}
{
const { canvas, regl, camera } = plot5;
const drawBorderedLines = createDrawBorderedLineCommand(regl);
const spectrum = t => [
0.5 + 0.5 * Math.cos(t),
0.5 + 0.5 * Math.cos(t - (2 / 3) * Math.PI),
0.5 + 0.5 * Math.cos(t - (4 / 3) * Math.PI),
1
];
const wavyGrayscale = t => [
0.5 + 0.5 * Math.cos(t * 10),
0.5 + 0.5 * Math.cos(t * 10),
0.5 + 0.5 * Math.cos(t * 10),
1
];
camera(() => {
drawBorderedLines({
position: lissajous(t, a, b, δ),
width: t.map(t => 5 + 3 * Math.cos(t)),
color: t.map(spectrum),
borderWidth: t.map(t => 5 + 3 * Math.cos(t)),
borderColor: t.map(wavyGrayscale),
maxExpectedTurningAngle
});
});
return canvas;
}
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.