Skip to content

Instantly share code, notes, and snippets.

View tophtucker's full-sized avatar

Toph Tucker tophtucker

189 followers · 181 following
View GitHub Profile
@tophtucker
tophtucker / index.html
Last active October 9, 2015 08:16
Lenticular V
<!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 / index.html
Last active October 9, 2015 08:17
Lenticular VI
<!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 / README.md
Last active October 9, 2015 08:11
Nearest neighbor

nearestNeighbor lets you find the closest neighbor to a given point in a two-dimensional space. Demo: click around up there.

It uses d3's voronoi geometry, but it convenient for more abstract uses where you might not want to draw anything onscreen at all. All it really adds is an algorithm from StackOverflow for finding which polygon generated by the voronoi geometry contains the point. And then it just brute-forces it. It's idiotic. At this point you might as well just brute-force distances to every neighboring point, right? But maybe I can improve it to be non-worthless. "If the polygons form a planar graph with each edge labelled with its two polygon neighbors, then one simple way is to run a semi-infinite ray up from the point until it hits its first edge. Then the relevant containing polygon is one of that edge's neighbors." OK rpi.edu, I don't know how to cast a ray until it hits i

@tophtucker
tophtucker / README.md
Created October 24, 2015 22:52
Lenticular VII

For devices with accelerometers

@tophtucker
tophtucker / d3-jetpack.js
Last active November 2, 2015 22:48
Timecoder
(function() {
function jetpack(d3) {
d3.selection.prototype.translate = function(xy) {
return this.attr('transform', function(d,i) {
return 'translate('+[typeof xy == 'function' ? xy(d,i) : xy]+')';
});
};
d3.transition.prototype.translate = function(xy) {
@tophtucker
tophtucker / index.html
Last active October 29, 2015 00:25
Text annotations (list)
<!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 class="text-annotation">
@tophtucker
tophtucker / README.md
Last active July 23, 2021 19:20
Recirc fetching source

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 / index.html
Last active September 13, 2019 10:11
Decay
<!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 / 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 March 2, 2018 12:11
Streaky Text

Crappy ripoff of FizzyText (seen here, source here, my attempted explanation here) in which collision-detection (of particles with letterforms) is used to slow the particles down instead of engorge them. And then a third canvas is introduced which isn't cleared every frame, so the particles leave translucent streaks.

It looks like an inkjet printer!!

Refresh many times for streaky imperfect printing!