Mar 15, 2017
I’ve been working with threejs a bunch lately. Here’s a pretty shiny tessellation of a space-filling polyhedron called the rhombic dodecahedron:
Oct 14, 2015
Make your delaunay triangulation squirm in the updated version of this project, here.
This version also allows you to toggle between wallpaper and wireframe mode.
I decided to build in this functionality because I wanted to make my polygonal background wallpaper be constantly moving slightly, but it’s way too computationally expensive to do that atm. In other words, be warned: your fan will spin up.
Oct 4, 2015
My initial goal was to make a dynamically generated triangle pattern for a site, like so:
That site will generate a new pattern on each visit.
Here you see a set of points, randomly generated, that has been triangulated. In other words, every generated point has become the vertex of a triangle and all triangles are non-overlapping.
In the demo, drag points to see the triangulation recalculate.
Jan 10, 2015
I want random data! But…I want them to be distributed normally!
Nov 13, 2014
If you are at all interested in SVG or Bézier curves, you’ve probably seen something like Jason Davies’ animation. I found that those animations are an excellent way of intuitively grasping how Bézier curves work. However, the math behind it all is less intuitive.
I just read this really illuminating article.
Something I hadn’t realized before reading the article is that, mathematically, Bézier curves are not defined as run-of-the-mill functions. Whereas generally one would plug an
x value into a function to determine a
y value, à la
f(x) = y = ax + b , Bézier curves are defined parametrically. The values of
y are determined independently, according to a third parameter, dubbed
This is the general formula for a cubic Bézier:
B(t) = (1-t)3·P0 + 3·(1-t)2·t·P1 + 3·(1-t)·t2·P2 + t3·P3
P3 are the start and end points, and
P2 are the first and second control points.
Sep 3, 2014
I’m currently reading a book on graph theory.
A graph, in the mathematical sense, is a completely abstract object made up of sets. However, it definitely lends itself to visual representation, so I’m having a bit of fun making visualizations of some of the concepts.
Sep 3, 2014
This paper demonstrates an extremely accurate approximation of a circle using cubic bezier curves.
It takes 4 curves, one for each 90° circle arc.
As you can see above, I’ve implemented that approximation. The black dots represent the start (
P_0) and end (
P_3) of each segment, and the red dots represent the control points (