Tao3D: 33 times shorter than JavaScript for “Helvetica Clock”

Chrome Experiments are always a great source of inspiration for visual design. Yesterday, I ran into Helvetica Clock and I thougth that it would make an interesting comparison point with Tao3D, from a programmer’s perspective.


The original Helvetica Clock

The Helvetica Clock Chrome Experiment is an interesting way to show time using columns of digits:

The source code for this experiment is using Three.js, and is quite short as far as Chrome experiments are concerned: 603 lines of code, 26594 characters without comments.

So… what would it look like using Tao3D?

The result

The end result is 63 lines and 1373 characters with comments and ample spacing. That’s already a rather impressive 9.5 times less lines and 19 times less characters.

But if you pack the code the way the JavaScript code is (i.e. no comments and no extra spacing), then Tao3D only uses 39 lines of code and 796 characters. That’s now a whopping 15 times less lines and 33 times less characters.


Let’s see how this code is built. I did not try to replicate the original logic, only the result.


Setting the drawing up

The original experiment is drawn in white on a black background. It also rotates with the mouse. It uses the Arial font (or maybe Helvetica) with a relatively large size. Characters centers are aligned with one another horizontally and vertically. I will also need the Animate module for simple animations.


The following code sets up these conditions:

import Animate

// Draw in white on a black background, rotate globally with the mouse
background_color "black"
color "white"
rotate_x -180 * mouse_y / window_height
rotate_y 180 * mouse_x / window_width

// Font and text alignment
font "Arial", 300
align 0.5
align_vertically 0.5

Setting up the grid

The characters are setup on a grid, based on the size of the characters. In Helvetica, all th digits have practically the same size, so we are going to use the size of the character 0.

We store the character width in the W variable, and the character height in the H variable. This computation needs only be done once in our example, so we bracket it in a once block.

// The size of the boxes used to show each digit
    H := 1.1 * text_height "0"
    W := 1.1 * text_width "0"
// The variables we use
H -> 15.0
W -> 15.0

Where the variable is defined does not really matter, so in the final programs, I’ve put them at the end of the file.

The primary draw loop

To draw the clock, we need to draw hours, minutes and seconds, each of them with two digits. We are going to use the notation function with argument-list, which invokes a function repeatedly with a number of arguments. Here, we call a function called two_digits in turn with hours, minutes and then seconds. We will se shortly how this function is defined.

// The primary draw loop
    Index := 0
    translate_x -2.5*W
    two_digits with hours, minutes, seconds

Before drawing characters, we move to the left 2.5 times the width of a character. The reason is that the total width will be 6 characters. So the left of the drawing area is at 3 times the width of a character, and the center of the leftmost character is one half the width on the right of that. That’s the translate_x -2.5*W

Highlighting the current time

One thing that is missing in the original is that the current time is a bit hard to read, because it’s lost in all the digits. That being said, it may be part of the interest of this clock, so if you prefer, you can very well remove the code and see the clock in its original all-white glory.

// Overlay to highlight the current time
blend_function "DST_COLOR", "ONE_MINUS_SRC_ALPHA"
color_hsv 2 * time, 0.3, 0.5, 0.7
rectangle 0, 0, 6.5*W, H

Drawing the columns

Each number (hours, minutes or seconds) is drawn in two columns. We use the function with argument-list notation again, but this time, we take the high and low digit of the two_digit function’s input (hours, minutes or seconds) and pass them as input to the digit_column function. N/10 is the first digit, N mod 10 (rest of the division modulo 10) is the second digit.

// Drawing two digits
two_digits N:integer -> digit_column with N/10, N mod 10

Drawing each column

The digit_column function draws a full column of digits.

// Drawing a single digit column
digit_column N:integer ->
        adjust -N*H, currentY[Index]
        digit with 0..9

    // Move to the next one
    translate_x W
    Index := Index+1

It does so by adjusting the position of the column vertically, something that is implemented in the adjust function, and then iterating over all digits. We once again use function with argument-list, but this time, the argument list is a range, 0..9, which is the same thing as 0,1,2,3,4,5,6,7,8,9, but is shorter to write and may be implemented more efficiently.

We use locally around the code that adjusts the position vertically, to make sure that the vertical translation stays inside. In other words, the vertical translation is “undone” once you exit the locally block.

Once we are done with the drawing of the digits, we translate horizontally by an amount corresponding to the width of a character, using tranlsate_x. This ensures that the next column will be placed immediately to the right of the current one.

We also increment the Index variable. We will see in a moment how this Index variable is used to index the vertical position of the columns in the currentY array.

Drawing a single digit

To draw a single digit, we use a text_box. The center of the text box is 0, 0, but remember that we have translated horizontally (for the columns) and vertically (to bring the correct digit in the middle of the screen), so that 0, 0 is the center of the digit.

The width of the text box is 2*W and its height is 2*H. That’s, strictly speaking, more than absolutely necessary. But it does not matter since we centered the display in the text box using align 0.5 and align_vertically 0.5. Using a larger size is a safety in case you want to use a font where some digits are slightly larger than 0.

// Drawing a single digit in a text box
digit N:integer ->
    text_box 0,0,2*W,2*H,
        render N
    translate_y H

Once we have drawn this digit, we move up by H using translate_y, so that the next digit will be drawn immediately above it.

Vertical adjustment

We now get to the most interesting part of this short program, the animation for the vertical displacement of the columns. This happens in the following code from digit_column:

adjust -N*H, currentY[Index]

Vertical displacement

The -N*H is the target value for the vertical translation. When we want to display 7 in the middle of the screen, we translate 5*H down, and then we draw digits starting at 0, and move up by H with each digit, so that by the time we reach 7, we are back at the middle of the screen.

Smooth displacement

In order to smooth the displacement of the columns, however, we do not directly translate by the target amount, -N*H. Instead, we translate by a “current” Y value, stored in currentY[Index]. This is why we pass currentY[Index] to the adjust function when we call it from digit_column.

// Vertical adjustment - Common case
adjust TY:real, Y:real ->
    interpolate 0.1, TY, Y
    translate_y Y

This code uses the interpolate function defined in the Animate module to interpolate between a target value, TY (target Y), and the current value, Y. Of interest, the interpolate function updates the value of Y. This works because Tao3D passes arguments by reference. In other words, the value Y that interpolate updates is also the value of currentY[Index] passed by digit_column.


However, an interesting case happens the first time we run throught the code. Initially, currentY[Index] is not initialized. Therefore, it is not a real number, and the argument currentY[Index] does not match the Y:real parameter definition.

In that case, we fall back to the other possible definition for adjust, which initializes currentY[Index], before calling the normal definition with the initialized value.

// Vertical adjustment - Initialization case
adjust TY:real, Other ->
    currentY[Index] := TY
    adjust TY, currentY[Index}

Going further

You can do a number of variations on the theme. For example, this code adds a small shader program to enhance the feeling of depth, and putting the digits on a ring instead of putting them in a column.

Here is what it looks like:


This short example shows how the very high-level features in Tao3D make it possible to create programs that are much shorter than their JavaScript equivalent. Among the features used here:

  • The notation function with argument-list is a very handy shorcut for calling a function repeatedly, either with unrelated values such as hours,minutes,seconds, or with a sequence such as 0..9.
  • Translations (or rotations) to move shapes or text around in 3D space.
  • Storing and accessing indexed values with the array-like notation currentY[Index]. Note that you could index with integer values like here, but that you could also use discontinuous elements, text indexes or real numbers.
  • Pattern matching and using type differences to deal with different kinds, like initialization for adjust.

Tao3D Libre Edition – Tao is now Open Source

Taodyne just released Tao3D “Libre Edition”, a GPLv3 version of Tao3D.

What is Tao3D?

Tao3D is a functional reactive programming language designed specifically for real-time 3D animations. It lets you create sophisticated, data-rich presentations very quickly. It used to be called “Tao Presentations”, but as we open the source code, we think it’s about time we change the name as well. Tao3D stands for “The Art of 3D“.

Yeah, but why should I care?

Tao3D is a fun development environment, ideal to teach programming to kids, because you immediately see what you do, graphically. It is also a great tool to present complex information. If you have a billion data points to explore interactively, it can do that. If you want to show a 3D model of a new car, it can do that too. And if all you need is to see what a given text does in 32 different typefaces, nothing is easier than to do it with Tao.

If you are a graphics programmer, it’s probably one of the best environments out here to test shaders interactively, in relatively realistic environments. You can also use it to quickly prototype new user interface ideas, typically with one tenth the amount of code it would take with JavaScript/HTML or some old technology like that.

Oh, and it’s free, and the code source is available. So can’t find a better bargain…

Is the source code any interesting for developers?

Tao3D is implemented using a few ideas that might spark some interest notably for people who work on compilers.

1. A homo-iconic source code format that remains readable.

Homoiconic languages like Lisp (i.e. languages where code and data are “the same thing”) are often relatively hard to read for humans. Tao3D uses a parse tree format that is very simple yet can represent practically any source code in a relatively natural way.

Specifically, there are 8 node types: integer, real, text, name, infix, prefix, postfix and block. The first four are terminals as well as leafs in the parse tree. The last four are inner nodes, and represent the way humans perceive a specific operation. “Infix” represents “A+B” or “A and B”. “Prefix” represent “+3” or “sin x”. “Postfix” represent “3%” or “3km”. Finally, “Block” represent (A) or [A] or {A}. Blocks are used to represent indentation. Infix are used to represent line separators.

Like in Lisp, the parse tree is also the fundamental data structure at runtime. The type system as described in the reference document is not fully implemented yet, but once it is, it will be a thing of beauty🙂

2. A compilation strategy based on tree rewrites

A single operator, ->, which reads as “transforms into”, is used to define functions, operators, variables and macros / syntactic structures.

// X transforms into 0: Defines X as a variable

// Define a factorial function
0! -> 1
N! -> N * (N-1)!

// Define an 'if-then-else'
if true then X else Y -> X
if false then X else Y -> Y

3. A reactive approach for dynamic events

Tao3D is reactive, meaning that the program automatically reacts to events and updates accordingly. For example, you can have a circle that follows the mouse with the following program:

color "red"
circle mouse_x, mouse_y, 100

This automatically create a mouse-based animation. More examples are given in the article linked at the beginning of this post.

4. A real-time code generation using LLVM

Tao3D uses LLVM to dynamically generate code on the fly as you change its source code. This is not new per se, but if you are interested in this kind of things, this is an example of code that can teach you how to do it.

Build instructions

git clone https://github.com/c3d/tao-3D.git
cd tao-3D
git submodule update --init --recursive
make install

Fork me on GitHub, and enjoy.

Reminder: What does it do?

As a reminder, here is the video I already posted yesterday that shows what Tao can do for you.

Introduction to the Tao language

The video below is a quick introduction to the Tao language:

The source code is accessible on GitHub. You can download Tao Presentations from the Taodyne web site if you want to try it yourself.

Animation and 3D: the web is doing it wrong

In Animation and 3D: the web is doing it wrong, I argue that the way the web does animation and 3D is completely bogus and deserves to die. With Tao Presentations, we offer a dynamic document description language that lets us write shorter code that is much closer to storytelling. We’d like to bring this to the web.

Have you ever created a dynamic animation on a web site, or displayed a 3D object? Really, why is it so complicated? Why should I learn how to use half a dozen libraries, write dozens of line of boilerplate HTML, WebGL and CSS code, just to rotate some text on the screen or display a 3D object? Why do I need three (or four, or five) languages, libraries or frameworks to design a single animated web page?
In the realm of business presentations, Tao Presentations solved this problem with a 3D dynamic document description language, letting you easily create sophisticated interactive 3D animations and presentations. What if we brought this very innovative platform to the web? What kind of applications would become possible if we improved web browsers in the areas of storytelling, interactivity, 3D or multimedia?

La SNCF en flagrant délit d’IP-tracking

La SNCF augmente son prix de 41% en deux minutes

La SNCF augmente son prix de 41% en deux minutes

La SNCF affirme ne pas pratiquer l’IP tracking, J’ai du mal à y croire.

Il y a quelques minutes, ma femme va sur le site Voyages SNCF, et demande un billet Paris-Antibes. Prix du billet: 80€. “Attention, dernières places à ce prix”, bien sûr. Mais à un moment, elle fait une erreur, et décide de refaire une recherche sur le même site. Le même billet passe soudainement à 113€.

Je fais un essai depuis un autre navigateur, puis depuis une autre machine dans la même maison (donc même adresse IP depuis l’extérieur). Le billet reste coincé à 113€.

Mais, histoire de vérifier si les billets à 80€ ont vraiment été épuisés (la théorie du blog de la SNCF ci-dessus), je décide de passer par mon smartphone en 3G. Du coup, forcément, changement d’adresse IP. Et là, surprise (pas vraiment, en fait), je retrouve le billet à 80€. Que j’achète.

Le billet acheté: 80€ seulement !

Le billet acheté: 80€

Alor, si la SNCF ne fait pas d’IP tracking, pourquoi ce que je viens de décrire se passe à chaque fois? Ce phénomène ne peut pas s’expliquer par l’épuisement des billets à un certain palier de tarif; parce que les prix affichés sur un même ordinateur dépendent de l’IP utilisée !

Coding a DNA strand in 3D

In this live coding session, we demonstrate how to quickly create a DNA strand in 3D:

The whole code is below:

import LuckyStarsTheme
theme "LuckyStars"

picture_slide "Did DNA come from outer space?", 
    light 0
    light_position 1000, 1000, 1000
    translate -300, 0, -300
    rotatey mouse_x
    random_seed 12345
    dna_strand with -30 .. 30

slide "Arguments in favor", 
    * "Tardigrades can live in space"

dna_strand N:integer -> 
        translatey 50 * N
        rotatey 10 * N
            rotatey 90
            color "#BBB"
            cylinder 0, 0, 0, 10, 10, 200
        dna_base_pair random (0, 3)

dna_base_pair N:integer -> 
    dna_base_color N mod 4
    sphere 100, 0, 0, 40
    dna_base_color (N + 2) mod 4
    sphere -100, 0, 0, 40
    dna_base_name 140, N mod 4
    dna_base_name -140, (N + 2) mod 4

dna_base_color 0 -> color "red"
dna_base_color 1 -> color "blue"
dna_base_color 2 -> color "green"
dna_base_color 3 -> color "grey"

dna_base_name X:integer, N:integer -> 
    text_box X, 0, 40, 40, 
        font "Arial", 30
        color "white"
        align 0.5
        vertical_align 0.5
        dna_base_text N

dna_base_text 0 -> text "C"
dna_base_text 1 -> text "A"
dna_base_text 2 -> text "G"
dna_base_text 3 -> text "T"