Danya Lette

Animation

Oct 15, 2015

Pure CSS Animated Squiggle Underline

animation css

Probably not a great use of my time. Anyways…

Hover over me

Jul 22, 2015

CSS Border-Style Animation

animation css

You can’t use CSS to animate between a solid and a dotted border style, which makes sense because the change is non-numerical. But you can use CSS to achieve the following effect:

Dec 3, 2014

Little Animation Thingy

animation

I’m working on an animation library which specializes in animating between paths whose commands are different in number and type. Essentially, from a given set of paths, all paths’ commands are converted to cubic Bézier and then the paths with fewer subpaths or fewer commands are padded (with ’empty’ paths or commands e.g. m0 0c0 0 0 0 0 0).

The interesting part is the way in which the padding is interleaved with the preexisting commands. I’d like to eventually include several parameters to create fine grained control over the style of interleaving. I also think that adding some “noise” or an arc trajectory to the motion of the control points would produce an interesting result. We’ll see!

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 8, 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:

Oct 31, 2014

Conway’s GOLf

animation games javascript

In my free time, I’m making a game based on conway’s game of life. Here’s the result of my work so far. Obviously, it’s not a game yet, but it is a functional cellular automaton written in javascript.

Click on a cell to flip its state, or drag to paint on living cells.

 

In this example, the starting state of living cells is called a “pulsar” – an example of a cyclic form with a period of 3. In other words, if you step 3 times it will return to the original state.
Click on the cells to turn them on or off – maybe you can find other stable or cyclic forms.

Sep 5, 2014

Pentagram ≅ Pentagon

animation javascript math svg graphs

 

Pentagrams and pentagons are actually a bit spooky…

Sep 3, 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.