Animation
Pure CSS Animated Squiggle Underline
Probably not a great use of my time. Anyways…
Hover over me
CSS Border-Style Animation
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:
Little Animation Thingy
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!
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:
Conway’s GOLf
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.
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.