Danya Lette

Math

Mar 15, 2017

ThreeJS Rhombic Dodecahedron

threejs math

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

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.

Jan 10, 2015

Random Normally Distributed Values in JS

javascript math

I want random data! But…I want them to be distributed normally!

The ability to generate random data that are normally distributed is very useful. Here’s how you do it in Javascript:

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.

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