Instantly share code, notes, and snippets.

patricksurry

Last active January 7, 2024 08:05
Imitate hand-drawn (imperfect) circles using cubic Bézier segments

Imitate hand-drawn (imperfect) circles using cubic Bézier segments, based on a Bézier approximation to a perfect circle. TLDR: a good approximation to a quarter circle of unit radius is a cubic Bézier curve with control points P0 = (0,1), P1 = (c,1), P2 = (1,c), P3 = (1,0) where c = 0.551915024494. By varying the points in a sensible way, we can do a good impression of hand-drawn circles.

Last active August 14, 2023 06:53
softclip-notebook
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Last active June 20, 2023 14:29
D3 + simpleheat.js geographic heatmap

Illustrates how to use Vladimir Agafonkin's clever simpleheat JS library to overlay a heatmap of Hopper search destinations on a D3 map.

Just for fun we use a separate svg layer 'under' the canvas to display the map, although it's easy enough to have D3 render direct to the canvas. The default canvas (and svg) 'background' is transparent so we can see through layers, making it easy to build up (say) an animated heatmap over a static map without continually redrawing the latter.

Last active June 17, 2023 22:04
Hex cube animation

Hex cube visualization

Sadly the original bl.ocks.org seems to be dead. Hopefully you can still see the visualization at this clone.

Inspired by Amit Patel's diagram illustrating cube coordinates. That diagram initially confused me because the edges of the grid cubes centered on integer coordinates in the plane x + y + z = 0 don't themselves lie in the plane, so it seemed like the animation "cheated" at the end by dissolving to planar hexagons. But of course the point is just that the silhouettes of those cubes form a perfect hexagonal tiling of the plane. That tiling is highlighted as red hexagons here.

I made this animation to get a better intuition for how those cubes intersect the zero plane. It shows what happens as we slice the cubes at x + y + z = w while reducing w towards 0. Fittingly the slice where the zero plane intersects each cube is in fac

Last active June 17, 2023 09:48 — forked from mbostock/README.md

This example adapts mbostock's quadtree brushing demo to find the nearest neighbor (shown red) of a new point (shown yellow). Choose a new point to classify by clicking on the diagram. (An alternative approach for nearest neighbors of the mouse position is D3's Voronoi polygons, but the idea here would extend to rapidly classifying many new points against a base collection of points.)

We use a data-dependent order of recursion through the quadtree

Last active March 28, 2023 23:31 — forked from dwtkns/README.md
Flying arcs with height proportional to length

Adapted from this, to avoid the second projection and make flying arc height proportional to length.

Because the 'sky' projection is just a scaled up version of the original one, the projection of a sky point in canvas coords can be easily calculated by scaling the ground projection point along the vector from the origin.

Another improvement(?) might be to avoid the swoosh/interpolate function by doing this same trick directly on the stream of points that comes from the normal projection path function.

Last active February 27, 2023 11:11
Flowsnake visualization of structural protein sequence for covid19

Illustration of how to convert from traditional axial (or cubical) hex coordinates to and from two one-dimensional enumerations based on space-filling fractal curves. The spiral honeycomb mosaic enumeration recursively labels nested "super hexes" in base 7, starting from 0 at the origin. The flowsnake enumeration also call "Gosper7" here, recursively labels the same super hexes but in a continuous sequence with no jumps.
This uses a negative base 7 with an unbalanced signed representation using the digits = (-2), - (-1), 0, 1, 2, 3, and 4. These enumerations could be useful for compact visualization of one-dimensional sequence data as well indexing hexagonal data storage with good locality properties similar to the Hilbert curve.

This example shows a simple visualization of the structural protein sequence for covid-19,

Last active April 4, 2022 17:17
Cartoonish map styles with D3 and NaturalEarth
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

Last active March 1, 2022 05:15
Omega Speedmaster demo built with G3
Last active March 1, 2020 06:23
Showing depth with a 3D globe
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters