Skip to content

Instantly share code, notes, and snippets.

View omnizach's full-sized avatar

Zach Young omnizach

View GitHub Profile
@omnizach
omnizach / README.md
Last active December 4, 2016 08:46
List Gists

List Gists

I clone all my gists, and keep the folder name as the unique key for the gist. So, to find a particular gist, I use this script to list all the folders with the title found in the README.md file.

Usage:

node gists.js
@omnizach
omnizach / README.md
Last active February 29, 2016 20:56
Fireflies

Fireflies

A fun little demonstration of a visual I've had in the back of my mind for a long time.

Uses my Bezier library.

@omnizach
omnizach / README.md
Last active February 29, 2016 20:55
Animate Along Path IV

Animate Along Path IV

This example shows how you can create a Bezier spline and animate an object along its path. The speed is related to the curvature, so the arrow has to slow down as the path becomes more curved. It uses my small Bezier library.

It uses d3.timer instead of trying to precompute the speeds and easing to make the trasition work properly (error prone as the previous example shows). This is a little more straight-forward and works a lot more reliably.

@omnizach
omnizach / README.md
Last active February 29, 2016 20:53
That Bezier screensaver from Windows 2000

Bezier Screensaver

A reasonable replication of the Bezier screensaver from Windows 2000. It uses D3 and my bezier library.

@omnizach
omnizach / README.md
Last active February 29, 2016 20:59
Animate Along Path III

Animate Along Path III

This example shows how you can create a Bezier spline and animate an object along its path. It uses my small Bezier library.

Unlike previous examples, this example is a little tougher to accomplish.

First, the orientation of the arrow along the curve uses the tangent function to calculate the direction of the curve. Second, the color and speed are governed by curvature. This is a rudimentary version of how a car would drive along the

@omnizach
omnizach / README.md
Last active February 29, 2016 21:01
Animate Along Path II

Animate Along Path II

This example shows how you can create a Bezier spline and animate an object along its path. It uses my small Bezier library.

There are other solutions to this problem, and if this is all you want to accomplish, then you can use getPointAtLength on the path.

This example uses the normalize function to spread the curves out along the length of the spline uniformly. See the same example without normalization.

@omnizach
omnizach / README.md
Last active February 29, 2016 21:00
Animate Along Path I

Animate Along Path I

This example shows how you can create a Bezier spline and animate an object along its path. It uses my small Bezier library.

There are other solutions to this problem, and if this is all you want to accomplish, then you can use getPointAtLength on the path.

This example shows the difference between animating with respect to length and t. The t value is used internally to map out the curve, but is not uniformly distributed along the length. So,

@omnizach
omnizach / README.md
Last active February 29, 2016 20:52
Rainbow Circle
@omnizach
omnizach / README.md
Last active February 29, 2016 19:12
Gradient Along Stroke
@omnizach
omnizach / README.md
Last active November 13, 2015 23:01
Dragon Curve.

Dragon Curve

This is a simple script for generating a Dragon Curve.