Public
Edited
Dec 7, 2022
2 forks
41 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 WebGLKuramoto-Sivashinsky Equation in 2DAdaptive Contouring in Fragment ShadersComplex function plotterGPU Voronoi Diagrams using the Jump Flooding AlgorithmBaker'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
Selecting the Right Opacity for 2D Point Clouds
// Compute the point size, in device pixels
function pointSizeDevicePixels(context, props) {
// In the shader, we perform computations in 2D homogeneous coordinates
// (via a mat3) so that we can obtain the y range from the view matrix,
// but we could obtain it through any means.
const yAxisRange = 2.0 / context.view3[4];
// The height as a fraction of the current y range, then converted to device pixels
const heightFraction = props.pointYAxisSize / yAxisRange;
const deviceSize = heightFraction * context.viewportHeight;
return clamp(
deviceSize,
props.pointScreenSize[0] * context.pixelRatio,
props.pointScreenSize[1] * context.pixelRatio
);
}
function pointOpacity(context, props) {
// We use the above function for the point size. This means we can plug in any function,
// even nonlinear, as long as we compute the opacity correctly.
var p = pointSizeDevicePixels(context, props);
// Compute the plot's x and y range from the view matrix, though these could come from any source
const X = 2.0 / context.view3[0];
const Y = 2.0 / context.view3[4];
const X0 = props.initialAxisDimensions[0];
const Y0 = props.initialAxisDimensions[1];
// Viewport size, in device pixels
const W = context.viewportWidth;
const H = context.viewportHeight;
// Number of points
const N = props.N;
let alpha = ((props.rho * H * H) / (N * p * p)) * (X0 / X) * (Y0 / Y);
// If it's a circle, only (pi r^2) of the unit square is filled so we
// slightly increase the alpha accordingly.
alpha *= props.circularPoints ? 1.0 / (0.25 * Math.PI) : 1.0;
// If the pixels shrink below the minimum permitted size, then we adjust the opacity instead
// and apply clamping of the point size in the vertex shader. Note that we add 0.5 since we
// slightly inrease the size of points during rendering to accommodate SDF-style antialiasing.
const clampedPointDeviceSize =
Math.max(props.minimumPointDeviceSize, p) + 0.5;
// We square this since we're concerned with the ratio of *areas*.
alpha *= Math.pow(p / clampedPointDeviceSize, 2.0);
// And finally, we clamp to the range [0, 1]. We should really clamp this to 1 / precision
// on the low end, depending on the data type of the destination so that we never render *nothing*.
return clamp(alpha, 0.0, 1.0);
}
drawPoints = regl({
vert: `
precision highp float;
attribute vec2 xy;
uniform float pointSize, minimumPointDeviceSize;
uniform mat3 view3;
void main () {
gl_Position = vec4((view3 * vec3(xy, 1)).xy, 0, 1);
// Add 0.5 to the point size so that we can apply a +/-0.5px linear step and simulate antialiasing
gl_PointSize = max(minimumPointDeviceSize, pointSize) + 0.5;
}`,
frag: `
precision highp float;
uniform float opacity, pointSize;
uniform vec3 invertedPointColor;
float linearstep(float edge0, float edge1, float x) {
return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
}
void main () {
float alpha = opacity;
vec2 c = gl_PointCoord * 2.0 - 1.0;
#if ${circularPoints ? '1' : '0'}
// Opacity contributed by Kari Lavikka: https://twitter.com/KariLavikka/status/1335928770423910400
float sdf = length(c);
#else
float sdf = max(abs(c.x), abs(c.y));
#endif
alpha *= linearstep(pointSize + 0.5, pointSize - 0.5, sdf * pointSize);
gl_FragColor = vec4(invertedPointColor, alpha);
}`,
attributes: {
xy: regl.prop('pointsBuffer')
},
blend: {
enable: true,
func: {
srcRGB: 'src alpha',
dstRGB: 1,
srcAlpha: 1,
dstAlpha: 1
},
equation: {
rgb: 'reverse subtract',
alpha: 'add'
}
},
uniforms: {
invertedPointColor: (ctx, props) => [
1 - props.pointColorLinearRGB[0],
1 - props.pointColorLinearRGB[1],
1 - props.pointColorLinearRGB[2]
],
minimumPointDeviceSize: regl.prop('minimumPointDeviceSize'),
opacity: pointOpacity,
pointSize: pointSizeDevicePixels
},
primitive: 'points',
count: regl.prop('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.