Skip to content

Instantly share code, notes, and snippets.

View tophtucker's full-sized avatar

Toph Tucker tophtucker

190 followers · 181 following
View GitHub Profile
@tophtucker
tophtucker / .DS_Store
Last active May 3, 2024 03:34
Measure text
@tophtucker
tophtucker / README.md
Last active April 22, 2024 16:01
Beginning to reverse-engineer FizzyText

TOTALLY SUPER DUPER NOT MY WORK! Trying to illuminate how FizzyText (seen here, source here, isolated from dat.GUI dependency here) works. Original appears to have been written by George Michael Brower.

In the original, which I find brilliant:

  • Solid black text is drawn onto an invisible canvas, from which it gets bitmap data
  • The bitmap data is read like a collision detection array, where black means "you're on top of text" and white means "you're not"
  • Particles of size r=0 are randomly spawned on a visible canvas
  • The particles grow if they're on top of a (non-rendered) black pixel, and shrink till they disappear if not
  • When they shrink to r=0, they respawn randomly somewhere
  • The particles follow a Perlin noise flow field, a very sensible and fluid kind of random movement, in which nearby particles
@tophtucker
tophtucker / README.md
Last active February 21, 2024 22:11
d3 color-legend example

In response to a question on Twitter by @everybody_kurts:

“Hi @mbostock, I was looking at your stacked area chart at https://observablehq.com/@d3/stacked-area-chart. At the end of the file, you import swatches from "@d3/color-legend". I tried finding this on npmjs but to no avail. Is this exclusive to @observablehq only?”

This shows how to use the swatches function from the @d3/color-legend notebook in a plain HTML page. The example data for the swatches (the color scale and margin) is copied from the @d3/stacked-area-chart notebook.

@tophtucker
tophtucker / d3.min.js
Last active June 5, 2023 15:18
Romeo & Juliet phase portrait
!function(){function n(n){return n&&(n.ownerDocument||n.document||n).documentElement}function t(n){return n&&(n.ownerDocument&&n.ownerDocument.defaultView||n.document&&n||n.defaultView)}function e(n,t){return t>n?-1:n>t?1:n>=t?0:0/0}function r(n){return null===n?0/0:+n}function u(n){return!isNaN(n)}function i(n){return{left:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)<0?r=i+1:u=i}return r},right:function(t,e,r,u){for(arguments.length<3&&(r=0),arguments.length<4&&(u=t.length);u>r;){var i=r+u>>>1;n(t[i],e)>0?u=i:r=i+1}return r}}}function o(n){return n.length}function a(n){for(var t=1;n*t%1;)t*=10;return t}function c(n,t){for(var e in t)Object.defineProperty(n.prototype,e,{value:t[e],enumerable:!1})}function l(){this._=Object.create(null)}function s(n){return(n+="")===pa||n[0]===va?va+n:n}function f(n){return(n+="")[0]===va?n.slice(1):n}function h(n){return s(n)in this._}function g(n){return(n=s(n))in this._&&delete this._[n]}function p(){var n=[]
@tophtucker
tophtucker / BodoniXT.ttf
Last active November 4, 2022 18:27
Responsive Zara
@tophtucker
tophtucker / index.html
Last active November 4, 2022 18:26
Batterymap
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Batterymap</title>
<style>
html, body {
height: 100%;
margin: 0;
@tophtucker
tophtucker / .DS_Store
Last active November 4, 2022 18:26
Zoomable icicle line chart decomposition
@tophtucker
tophtucker / .block
Last active November 4, 2022 18:23
CMYK
license: gpl-3.0
@tophtucker
tophtucker / index.html
Last active November 4, 2022 18:23
Wiggly line (for Alan maybe? I forget)
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
overflow: visible;
}
path {
@tophtucker
tophtucker / README.md
Last active November 4, 2022 18:22
Collapsing high-dimensional normal distributions

My friend Colin has been trying to give me a better intuition for higher dimensions. His first fun fact was that the volume of an n-dimensional hypersphere peaks somewhere around n=6 or so, I forget, and then approaches 0 as n approaches infinity. Damn! Meanwhile, of course the volume of a hypercube just diverges to infinity, as you'd expect. So if you inscribe a hypersphere in a hypercube, as dimension increases, more and more of the volume is in "the corners" — ultimately, almost all of it.

That's not what I'm trying to show here, it's just cool. This is somewhat different.

Colin also pointed out that, in a high-dimensional multivariate random normal distribution (with identity covariance matrix), all the mass ends up coming to be found in a sort of donut at some distance from the middle. There's very little mass in the middle. Of course the origin is still the mean/median/mode. The problem is that the middle is just so dang small, and there's SO MUCH SPACE as you go a little further out. So if you're jus