Skip to content

Instantly share code, notes, and snippets.

Avatar

Zach Young omnizach

View GitHub Profile
View README.md

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
View README.md

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 Feb 29, 2016
Animate Along Path IV
View README.md

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 Feb 29, 2016
That Bezier screensaver from Windows 2000
View README.md

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 Feb 29, 2016
Animate Along Path III
View README.md

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 Feb 29, 2016
Animate Along Path II
View README.md

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 Feb 29, 2016
Animate Along Path I
View README.md

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 Feb 29, 2016
Rainbow Circle
View README.md
@omnizach
omnizach / README.md
Last active Feb 29, 2016
Gradient Along Stroke
View README.md
@omnizach
omnizach / README.md
Last active Nov 13, 2015
Dragon Curve.
View README.md

Dragon Curve

This is a simple script for generating a Dragon Curve.