Danya Lette

SVG

Oct 14, 2015

UPDATE: Delaunay Triangulation

javascript math svg

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 5, 2015

Delaunay Triangulation in JS

javascript math svg

 

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.

Nov 18, 2014

SVGPathInfo Web Interface

javascript svg

SVGPathInfo user 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.

Nov 13, 2014

SVGPathInfo.js

javascript svg

I made a little Javascript library to quickly get info on an SVG path element. Check it out:

github website.

Nov 13, 2014

Math of Bézier Curves

animation javascript math svg

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.

Nov 9, 2014

SVG Arc Command Parameters

animation svg

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:

Sep 5, 2014

Pentagram ≅ Pentagon

animation javascript math svg graphs

 

Pentagrams and pentagons are actually a bit spooky…

Sep 4, 2014

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.

Sep 3, 2014

Circle w/ Cubic Bézier

math svg

 

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).