SVG
UPDATE: Delaunay Triangulation
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.
Delaunay Triangulation in JS
My initial goal was to make a dynamically generated triangle pattern for a site, like so:
The pattern.
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.
The demo.
In the demo, drag points to see the triangulation recalculate.
SVGPathInfo Web Interface
I made this site so that SVGPathInfo can be used online. Just paste in your path string and convert it to JSON, relative, absolute or cubic Bézier.
SVGPathInfo.js
I made a little Javascript library to quickly get info on an SVG path element. Check it out:
github | website. |
Math of Bézier Curves
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 x
and y
are determined independently, according to a third parameter, dubbed t
.
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
where P0
and P3
are the start and end points, and P1
and P2
are the first and second control points.
SVG Arc Command Parameters
An SVG <path>
element’s “arc” command (denoted a
or A
) has 7 parameters:
<path d='a {rx} {ry} {x-axis-rotation} {large-arc-flag} {sweepflag} {x} {y}' />
That’s quite a lot of params for one command, and the names of the params are not exactly enlightening. Here’s the deal:
Pentagram ≅ Pentagon
animation javascript math svg graphs
Pentagrams and pentagons are actually a bit spooky…
Graph Theory
animation javascript math svg graphs
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.
Circle w/ Cubic Bézier
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 (P_1
& P_2
).