Skip to content

Instantly share code, notes, and snippets.

@tophtucker
tophtucker / README.md
Last active Jul 23, 2021
Recirc fetching source
View README.md

Originally conceived for What Is Code as a recirculation module to link to other pages. The idea is just to show source and rendered html in some animated manner. It doesn't work cross-origin so I have some dummy html pages here, so they are fetching dummy source but linking to real source, but if it were same-origin it could just fetch the real url.

Uses Fetch API, thus Fetch polyfill, thus [es6-promise polyfill](https://github.com/jakearch

@tophtucker
tophtucker / README.md
Last active May 7, 2021
d3 color-legend example
View README.md

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.

View README.md

Swizzling! (Or pandas DataFrame "reshaping" / "pivoting" / "(un)stacking".)

Click and drag the i,j,k in the upper right to reorder. Refresh for random dimensions.

One can imagine more spreadsheety stuff, extending to 4D arrays and higher, and aggregating/slicing/collapsing/folding along different dimensions.

No, I'm not at all sure I'm using the term "swizzle" correctly. I don't understand matrices.

@tophtucker
tophtucker / README.md
Last active Mar 8, 2021
Continuous word wrap
View README.md

Been meaning to try this for a long time! Inspired to go for it by Omar's recent work! I forget how to work with gists!

To-do:

  • Account for padding and such
  • “Snap” words to the next line where they fit whole
  • Wrap into different containers? Different directions?
  • Ultimate goal: diagonal accelerometer scroll 😈

Sample text is from Moby Dick, Chapter XCVI: The Try-Works

@tophtucker
tophtucker / README.md
Last active Oct 21, 2020
Beginning to reverse-engineer FizzyText
View README.md

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 / index.html
Last active Jan 4, 2020
Inferring device position from acceleration
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
View index.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="main.css"/>
<body>
@tophtucker
tophtucker / flyer.png
Last active Sep 13, 2019
Drifting flyers on a torus