Animating the web: functional styles

From the first time I saw it, I’ve thought that the equals sign in programming languages is wrong. In maths, the statement x=5 says that no matter what happens, x will always equal five. In C++, or Java, or Visual Basic, it only sets x instantaneously to 5; x can still evolve over time.

This is important, because mathematical symbols (like the equals sign) are a result of centuries of learning about the best way to represent fundamental concepts. They have proved their worth time and time again in explaining the natural world. In fact, many revolutions in science have only taken place by the introduction of new symbols – Newton’s differentiation and integration symbols to explain dynamics, Einstein’s use of Reinemann equations in General Relativity, and Heisenberg’s use of matrices in Quantum Mechanics are cases in point - but the equals sign has remained constant.

So why do programming languages not follow standard mathematics?

Actually, there's one that does - spreadsheet formulas. It's probably why Excel formulas are the only language to spread out of the IT department. In Excel, if you set cell A2 to equal A1 + 5, then this will always be true – when A1 changes, A2 will update automatically to maintain the equality.

Excel handles the equals sign properly because it’s a functional programming language. Except for spreadsheets, functional languages are niche - the most common apart from Excel is probably Lisp, which was invented back in the 1960s.

Since functional programming expressions stay true even as the program evolves, they come into their own in animations.

Think back to spreadsheet functions, and imagine if you could write an HTML expression like this:

          <img id="img1" src="img1.jpg" width="10" />
          <img id="img2" src="img2.jpg" width="=2*img1.width" />
         

Note the extra equals sign, as per Excel, controlling img2 width. If img1 were resized, img2 would automatically resize too, in order to maintain its double width.

If you’ve ever tried to enable drag and drop in Javascript, you’ll know how awkward it is. With the functional approach, it’s just one line of code:

 <img id="img1" style="left:=mouse.left; top:=mouse.top" begin="img1.mousedown" end="img1.mouseup" />

This uses a simple condition to control when the animated style should work.

Once you see how this could work, you realise how cumbersome the procedural events model is in Javascript. The setInterval() function is unreliable (since you can't rely on processing speed) and inelegant - far better to think continuously, rather than triggering new events every millisecond.

I've called this approach "functional styles", because it's basically a functional programming extension to CSS styles. In this approach, any CSS style can be animated by assigning it a function (via the equals sign), rather than a direct value. And these functions have access to two continuously varying variables - the mouse position, and the time variable t.

Functional styles would open up animation on the web. Think Powerpoint animations, think Flash timelines, think interactive games, think interactive graphs and charts. In fact, think web spreadsheets! All currently require mountains of javascript and a very fast processing engine. Using functional styles, they would simply require CSS.

In a later post, I will go into the details of how this could technically work - there are very few elements other than basic CSS, XPath, and SMIL. It's possible to prove that the entire of classical physics can be incorporated into functional styles - gravity, friction and wind resistance, angular momentum, electric fields, and magnetism are all a matter of getting your CSS functions right.

For now, think how the simple equals sign, done properly, enables rich animations on the web.