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
once
    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
locally
    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 ->
    locally
        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.

Initialization

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:

Conclusion

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.

Storytelling: The web is doing it wrong

This is the follow-up article to Animation and 3D: the web is doing it wrong. In this article, I argue that the web is not helping us much with advanced storytelling. Based on our experience with Tao Presentations and interactive storytelling in 3D, we can offer a few suggestions. We can explain how to integrate 3D models, how to take advantage of our depth perception, how to organize group interactivity, how to create stronger visual impact for lasting memories. Can we bring these ideas to the web?

 

TL;DR: Storytelling is constrained by the tools you use. With Tao Presentations, Taodyne has discovered a large number of new ways to express ideas. We’d like to bring these to the web.

 

Good storytelling takes inspiration from the real world

Ultimately, we write documents and create presentations to share a story, to show things. And I hope that you noticed how the Tao Presentations code I showed in my previous article focused on the contents, on the storytelling, not on tags or low-level animations. Your main_title_slide contains a title and a subtitle.

import Slides
main_title_slide "Main title",
    title
        text "Seasons Greetings theme"
    subtitle
        text "A theme for the Holidays"

With this approach, Tao Presentations presents the right level of abstraction, like LaTeX did for 2D pages, displacing the original TeX. You talk about titles and subtitles. You don’t have to learn that title should really be spelled <h1> as in HTML.

Better yet, words such as title are defined from lower-level primitives using the normal evaluation rules of a programming language. This means that all aspects of the document, from styling to animation to document structures, are all covered with a single language, with a single tool. The Tao Presentations platform presents many useful features that further enhance your storytelling capabilities.

Conclusion:Tao Presentations’ programing model is rooted in the real world and real speech.

We understand the world in 3D 4D.

Taking inspiration from reality extends to the drawing model of Tao Presentations. Did you ever notice that you have two eyes? Yet if you look at the average web page with one eye closed, it does not make much of a difference, does it? If you think this is normal, you spent way too much time in cyberspace.

Showing 2D contents on a screen is a technical limitation, much like black and white remained for decades a technical limitation for printers (OK, I’m showing my age again here…) For HTML, it derives from the fact that documents were initially thought of as “printed stuff”, not as “real stuff”. So the early design of HTML never took the third and fourth dimensions of space-time into much consideration. It’s time to fix that.

In Tao, the basic scene is set entirely in 3D space. Initially, the coordinates system is setup so that one unit matches one pixel on the screen for 2D objects. So if you draw a 400×300 red rectangle with the following code, it will cover a surface of 400×300 pixels:

color "red"
rectangle 400, 300

2D objects and operations take arguments in the following order: X, Y, W, H. 3D objects and operations take them the following order: X, Y, Z, W, H, D. The X, Y, Z coordinates indicate the center of the object. The W, H, D indicate the width, heigh and depth of the object. For most shapes, it is the actual size. There are a few exceptions such as image or movie where the sizes are relative to the original picture.

You can rotate, translate or scale anything along any axis. In Tao, X is the horizontal axis, Y is the vertical axis, and Z is the axis crossing the screen. The center of the screen is coordinates (0, 0, 0). Positive X goes towards the right, positive Y towards the top of the screen, positive Z towards you. For example, we can rotate the rectangle along the Y axis and move it back and forth as follows:

translate mouse_x, mouse_y, 1000 * sin time
rotate_y 60 * sin (2.17 * time)
color "red"
rectangle 400, 300

The same rules and transformations apply to anything, not just rectangle. You can change the position of text, images or videos using the exact same code. We can build a document containing four pages showing exactly that:

import VLCAudioVideo
translate mouse_x, mouse_y, 1000 * sin time
rotate_y 60 * sin (2.17 * time)
color "red"
page "Rectangle",
    rectangle 0, 0, 400, 300
page "Text",
    text_box 0, 0, 400, 300,
        font "Arial", 60
        align 50%
        vertical_align 50%
        text "Hello World"
page "Image",
    image 0, 0, 100%, 100%, "http://bit.ly/15poR40"
page "Movie",
    movie_texture "http://www.youtube.com/watch?v=OK7pfLlsUQM"
    rectangle 400, 300

So now we have 3D and time in the same document, with very little effort. And we learned one single rule to be able to position any object in 3D space. We also learned how to colorize any object, for that matter.

Conclusion: Like us, Tao Presentations works in 4D, three dimensions of space and one of time. It’s easy.

Modeling the world around us

Of course, our 3D space would not be well populated without the ability to place 3D objects in it. So we can insert cubes, cones, spheres, tores, or complete 3D objects (e.g. modeled in your favorite Blender). This is barely more complicated than before. You need to add a bit of lighting, because otherwise the scene would look very bland. So I added two lights (named light 0 and light 1), one of them with a bluish tint:

import ObjectLoader
light 0
light_position 1000, 1000, 1000
light 1
light_position -1000, 1000, 1000
light_diffuse 0%, 50%, 100%, 100%
translate mouse_x, mouse_y, 1000 * sin time
rotate_y 60 * sin (2.17 * time)
color "#F44"
cube 100, 100, 0, 50, 100, 200
cone 100, -100, 0, 50, 100, 200
sphere -100, -100, 0, 50, 100, 200, 45, 45
torus -100, 100, 0, 300, 400, 500, 45, 45, 20%
object 0, 0, 200, 300, 300, 300, "Monkey.obj"
text_box 400, 0, 400, 300,
    font "Arial", 60
    align 50%
    vertical_align 50%
    extrude_depth 40
    extrude_radius 5
    text "Hello World"

The result looks like this:

Monkey See, Monkey Do

It would have taken sweat and tears of frustration to do the same thing in five minutes with existing web tools. Moreover, what is not necessarily visible on the picture is that the scene can now be rendered on a 3D screen and show real depth, including on glasses-free 3D displays. Again, no additional effort on your part other than clicking a menu entry. The gory technical details are all taken care of for you.

Conclusion: Adding 3D space and 3D objects to your document description language opens up new and exciting possibilities in storytelling.

Enhance the visual impact

Why do 3D visuals or dynamic visual effects matter for storytelling? One reason is that the human brain dedicates a large fraction of its processing power to visual information. In short, we care about what we see. That saved our ancestors from being eaten by the stripey fangy beasts with long nails. It’s been hardwired into our brains for much longer than HTML or Facebook. The wise man will remember this important fact.

Make it shine, make it matter

Showing objects in 3D is only part of the visual impact. To make things matter, one way is to make them shine, to make them stand out. Programming the graphic card directly to show outstanding visual effects is one of the exciting possibilities offered by Tao Presentations.

It does not need to be complicated either. You can apply sophisticated materials on your objects with pre-defined modules. If I want to write some text on “marble”, for example, all it takes is using the marble word, supplied by the Materials module.

import Materials
light 0
light_position 1000, 1000, 1000
light 1
light_position -1000, 1000, 1000
light_diffuse 0%, 50%, 100%, 100%
translate mouse_x, mouse_y, 1000 * sin time
rotate_y 60 * sin (2.17 * time)
color "#F44"
marble 0.5
text_box 0, 0, 400, 300,
    font "Arial", 60
    align 50%
    vertical_align 50%
    extrude_depth 40
    extrude_radius 5
    text "Hello World"

The code above gives the following result:

Bluish Marble

The extrude_depth and extrude_radius are an easy way to add depth to your text. They also work on 2D shapes, i.e. you can extrude a circle or a rectangle the same way.

Of course, a similar effect can most likely be achieved on the web using WebGL, although it would probably take more time. I have not found any materials library that can be directly exploited on text. Actually, I’m not really sure how difficult it is to create extruded text like this. Anybody care to comment on that topic?

On the Tao Presentations side, more examples can be found on the web, notably in the Materials example.

Conclusion: Tao Presentations helps you make your visuals stand out.

Programming the graphic card with shaders

Under the hood, dynamic materials and effects like this are made possible by programming the graphic card directly using a language called GLSL. You can also use that language to program a variety of effects, which are demonstrated in the Shaders example of Tao Presentations (many shaders in that example courtesy of ShaderToy). Possible effects range from sophisticated visual effects to complete scenes ray-traced in real-time.

Shaders have been the topic of a number of dedicated blog entries, so I will not elaborate much more here. However, it’s worth noting that creating a fragment shader only takes a single word, fragment_shader, as in the following code, which converts a color movie to black and white on the fly:

import VLCAudioVideo
shader_program
    fragment_shader <<
        uniform sampler2D tex;
        uniform float amount;
        void main()
        {
            vec4 texcolor = texture2D(tex, gl_TexCoord[0].st);
            vec4 blackAndWhite = vec4(vec3(dot(vec3(0.3333), texcolor.rgb)),1);
            gl_FragColor = mix(texcolor, blackAndWhite, amount);
        }
    >>
shader_set amount := 2*mouse_x / window_width
movie 0, 0, 100%, 100%, "http://www.youtube.com/watch?v=TKAofTbxJWc"

The shader_set function lets us directly control the shader uniform variables, i.e. pass arguments to the program executing on the graphic card. Here, you can switch from color to black and white progressively by moving the mouse from left to right of the screen. Here are some screen captures:

Conclusion: By offering direct access to the power of 3D graphic cards, Tao Presentations enables a kind of highly visual and dynamic storytelling never seen before.

Tell your story in a productive way

It’s not enough to tell a beautiful story. You also need to be able to do it quickly enough. With Tao Presentations, you write this:

import SeasonsGreetingsTheme
theme "SeasonsGreetings"
main_title_slide "Main title",
    title
        text "Seasons Greetings theme"
    subtitle
        text "A theme for the Holidays"

With these 7 lines of code, you get this (minus the music ;-):

It’s hard to be more productive than that. Being able to build things on the shoulders of giants is a recurring theme when you use Tao Presentations.

Don’t reinvent the wheel, but add a warp drive if you need to

HTML has ways to import contents. You can integrate complete pages with frames. You can link to scripts, styles, images or movies. When you start writing a web page, you rarely build it from scratch.

Tao Presentations’ import statement plays a similar role. We used it in many examples. With import, you can leverage work that has already been done, either by you or by others. You can package work that you did, including the assets it needs (pictures, shaders, etc) into a module, and then reuse that module.

The module system in Tao Presentations can extend the core language very significantly with high-performance code written in C++. This is used for example to display 3D objects or videos. The video rendering is based on the well-known VideoLan Client library (VLC). For the technically inclined, the complete source code of the VLCAudioVideo module is available here.

Visualizing one billion data points in Tao Presentations was made possible thanks to this extensibility. Taodyne offers a PointCloud module capable of displaying large amounts of data. Loading that data in a specific binary format used by our customers, however, was not directly possible. So this particular customer wrote a module doing just that. Interestingly, being able to visualize this amount of data in real-time easily highlighted the presence of filaments appearing during asteroid collisions, as shown in the video below:

Conclusion: The extension mechanism in Tao Presentations makes it possible to create and reuse even the most sophisticated and specific storytelling tools.

It’s about time!

Seasoned developers will have noticed that the various examples we used refered to the mouse or to time, but totally lacked things like event handlers or callbacks. Remember, these little onload="dorotate()" and other timer = setTimeout(...) we had to use all over the place in Javascript?

It’s because with Tao, the computer works more so that you don’t have to. Under the hood, Tao Presentation listens to events, whenever you use things like time or mouse_x. Actually, the execution and drawing model for Tao Presentations requires a relatively complex piece of code, that automatically analyzes your document to identify which portions depend on events, and only redraw these when a particular event is received. The code we wrote may have been complicated, but the benefit is that the code you write is so much simpler.

This is good for the planet too, as it helps Tao use energy conservatively. For example, consider the following code, that draws a small clock:

locally
    color "lightgrey"
    line_color "darkgrey"
    circle 0, 0, 250

locally 
    rotatez -6 * minutes - 0.1 * seconds 
    rectangle 0, 100, 15, 250 

locally 
    rotatez -30 * hours - 0.5 * minutes 
    rectangle 0, 50, 15, 150 

locally 
    color "red" 
    rotatez -6 * seconds 
    rectangle 0, 80, 10, 200 
    circle 0, 0, 12 
    circle 0, 180, 25 

If you run this code, you will see Tao Presentations consume very little CPU. On my machine, it’s about 2%. Now, replace seconds with time in the last block, i.e. you should have the following line:

    rotatez -6 * time

You should immediately see the CPU usage spike. On my machine, I now get about 6% of CPU. The reason is that by replacing seconds with time, we told Tao Presentations that this section of code now refreshes 60 times per second. The boundary for the changes in that case is the surrounding locally block. The locally construct restricts the rotation we make (or any attribute change, for that matter) to the enclosed block, so Tao can automatically figure out that there is no impact on the rest of the document.

Conclusion: Tao conserves energy by automatically detecing how much work needs to be done.

Don’t repeat yourself. Really

When you tell a story, you often need to repeat the same thing a number of times. Consider the clock we drew earlier. It lacks tick marks. What are tick marks? Well, they are described using a very simple algorithm: there are 60 tick marks around the clock. Every fifth is different, because it marks the hour. So we need to repeat the same thing 60 times, with two different cases. In a traditional presentation program or graphics tool, you’d have to copy-paste things quite a few times to build the 60 tick marks.

Clock with transparency and tick marksWhy not let the computer do the work for you instead?

tick_mark with 0 .. 59 
tick_mark N -> 
    locally 
        rotatez -6 * N 
        if N mod 5 = 0 then 
            rectangle 0, 270, 15, 40 
        else 
            color "darkgrey" 
            circle 0, 270, 6

The notation tick_mark with 0..59 is a map, i.e. it is a shortcut for the following code:

for X in 0..59 loop
    tick_mark X

Conclusion: Copy-pasting is a good thing. Automatic generation of graphic elements is even better.

Automating complex tasks

When drawing the clock tick marks, we simply let the computer repeat an operation that we could do manually relatively easily. But what if we can’t? Consider processing news from a live source, for example. You can’t do that ahead of time. With Tao Presentations, you can automate all sorts of tasks.

There is one thing that programmers like to do: colorizing code. You can do that with JavaScript, but since the particular example I found is about 1650 lines of code, I won’t list it here. You can also get a pretty good colorization with a small enough Tao Presentations code that I can actually show it here:

import RegExp
colorize T:text ->
    regexp_parse_all T,
        "[a-z]w*"      -> format "keyword"
        "[A-Z]w*"      -> format "name"
        "->"            -> format "rewrite"
        "//[^n]*"      -> format "comment"
        "W++"          -> format "operator"
        """[^""]*"""    -> format "text"
        "d+.d+"      -> format "number"
        "d+"           -> format "number"
        "[a-zA-Z][A-Za-z0-9_]+|[ ]+|." -> text regexp_captured 0
format Fmt -> text_span { color Fmt; text regexp_captured 0 }
color "name" -> color "darkblue"
color "keyword" -> color "darkgreen"
color "comment" -> color "red"
color "rewrite" -> color "orange"
color "operator" -> color "green"
color "text" -> color "brown"
color "number" -> color "pink"

// Test it
font "Menlo"
text_box 0, 0, 1200, 600,
    align 0
    colorize load_text "example.ddd"

Granted, it’s probably not as extensive, powerful and remarkably configurable as the JavaScript library linked above. But it’s good enough for many cases, and it’s a tiny bit shorter. Plus you can really customize it the way you want, which is good, because no two programmers on earth ever agreed on what the right color scheme is for code. Here is what you get out of it :

The same approach can be used to do more zany things:

import RegExp
girly T ->
    regexp_parse_all T,
        "i" -> text "i"; anchor { i_heart }
        "j" -> text "j"; anchor { j_heart }
        "o" -> text "o"; anchor { o_flower }
        "[^ijo]+" -> text regexp_captured 0
i_heart -> color "pink"; move_to -14, 19; scale 60%; text "♥"
j_heart -> color "red"; move_to -12, 19; scale 70%; text "♥"
o_flower -> color "green"; move_to -24, 0; scale 80%; text "✿"
text_box 0, 0, 600, 600,
    color "darkgrey"
    font "Arial", 40
    align 0.5
    vertical_align 0.5
    girly "Going all girly with Tao is so easy! Enjoy decorated text with very little effort."

The anchor lets you place graphics relative to the current text position, even in text boxes with complex layout. Here, we use it to decorate all the i, o and j characters. This is the result:

Conclusion: Good programmers are happy programmers are lazy programmers. Tao will make you so lazy you’ll have a hard time returning to HTML afterwards.

Interactivity and reactivity

Drawing simple scenes like we did with the monkey face is only scratching the surface of what you can do using Tao Presentations’ 3D rendering engine. We have put more examples on the web for you to get inspiration from.

Responding to presenter’s actions

Storytelling benefits from interactivity and reactivity. For example, if you want to demonstrate a new car, the best way is to be able to show it from a variety of angles:

This example is a bit longer (375 lines of code with comments), so it cannot be shown entirely in line in this article. But if you installed Tao Presentations, you can try it out by yourself.

Collective storytelling

When presenting, there is no interactivity for the audience if they don’t participate. One way to engage them more is asking them for input. For example, your presentation can present a quiz, i.e. let the many people watching your talk give their advice or answer questions. You can even organize small games, e.g. a collective scratching game to reveal the face of a person or a new product.

To offer this kind of large-scale interactivity, Tao Presentations features a NodeJS module, which can for example instantiate a web server that visitors can connect to with their smartphone. This can also be used for example to build a video-player that you remote control with a smartphone.

Bringing this to the web?

So far, we talked about Tao Presentations quite a bit. But why should one install a specific proprietary application to get these benefits? Well, what you can do with Tao Presentations as it exists today is insanely great. Obviously, one way to encourage us is to buy our product. It’s quite inexpensive as far as graphic tools are concerned, and you can do so many things with it you’ll certainly get your money’s worth.

Nonetheless, wouldn’t it be even better to do the same thing directly from a web browser? To easily get amazing interactive 3D right in your web page? At Taodyne, we strongly believe that the technology we developed for Tao Presentations ultimately belongs to the web. We think that it would make the web browser a much friendlier development platform for interactive 3D contents, that it would facilitate storytelling. In short, we think it would be a Good Thing.

Great talk. But how do we do that? Quite frankly, bringing Tao Presentations to the web looks a lot like fitting dozens of square pegs in a few thousand round holes. And there are only four developers for the moment.

Possible strategies to bring that to the web?

To bring this kind of technology to the web, we at least need:

  • A way to insert XL scripts (documents) in a web page
  • A 3D rendering engine that is roughly equivalent to Tao Presentations

Taodyne’s current technology is written in C++. It uses Qt for the user interface, and OpenGL for the drawing code. It also uses other components that might be a bit difficult to adapt to a web environment, notably LLVM.

We can think of a few possible strategies to adapt this technology to the web:

  1. Integrating the C++ code in a browser plug-in, a bit like Adobe Flash. We think the web is past this kind of technology now. Plug-ins are so 1990′s…
  2. Integrating the C++ code directly into an open-source browser like Firefox, WebKit or Blink. Well, Google removed 8M lines of code from Blink. So we are talking about severely large and bloated projects. Probably just a tad bit out of our league.
  3. Rewriting an implementation of the XL language in JavaScript, and our rendering engine on top of WebGL. Given that the existing engine uses OpenGL, that might work and be relatively fast (to develop as well as at runtime).

Of these three options, only the third one seems to make much sense with the limited resources we have. That being said, if I had infinite resources, I’d go for the second one.

Open-sourcing the technology is technologically and legally feasible

We are a very small company, and even if our four developers are really talented, there’s only so much we can do. Crowdsourcing the development might be a good way to solve the problem.

We are actually very favorable to open-source. We already publish the core XL language as well as a few add-ons for our software. So we walk the talk.

But rewriting our engine in JavaScript? That’s another thing entirely. It is a very serious effort, with a very serious impact on our business.

The bottom line is this: if there is strong interest, then we want to do it. But if people don’t care, it simply makes no sense for us to spend the time. And the best way to test if people are interested is…

Money money money. Developers developers developers.

If you want to help, you can also contribute your skills, whether you are a graphic designer (we badly need help in that area) or whether you can code your way out of a Linux kernel crash while it happens using only cat|as. Simply chime in, post on our newly-created forum, and let’s talk about what you want to do. We need, as Ballmer would say…

So if you think that being able to add 3D animations to your web pages easily is worth a bit of your money, your time, whether we can pick your brain or your fundraising talent, come and help us. And if you have any other idea on the topic, please drop me a line.

Christophe de Dinechin

PS: Out of nostalgia, the very first video we created to explain what Tao Presentations is all about. That was over two years ago. Time flies. So do pigs.

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
X->0

// 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
./configure
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.

How to unify general relativity and quantum mechanics

Unifying quantum mechanics and general relativity has been a problem for decades. I believe that I have cracked that nut.

Special relativity:

Philosophical principle: Laws of physics should not depend on observer’s speed.

Math: Lorentz transform, new way to “add” speeds.

Issues it solved: Maxwell’s equations predict a value for the speed of light that does not depend on your own speed.

Physical observations: The speed of light is indeed independent on observers’ speed (Michelson and Morley’s experiment).

Counter-intuitive aspects: There is no absolute simultaneity and no absolute time. There’s an absolute speed limit for physical objects in the universe.

New requirements: Physicists must now pay attention to the “observer” or “referential”.

Thought experiment: Alice is in a train, while Bob is on the ground watching the train pass him by. What happens if Bob sees a flash hit the train “simultaneously” at both ends? Hint: what happens “at the same time” for Bob is not happening “at the same time” for Alice. That explains why we cannot consider simultaneity as absolute.

General relativity:

Philosophical principle: Laws of physics should not depend on observer’s state of motion, including acceleration.

Math: Non-euclidean geometry, tensor and metrics.

Issues it solved: Discrepancies in the trajectory of Mercury.

Physical observations: Gravitation has an impact on light rays and clocks.

Counter-intuitive aspects: Light has no mass, but is still subject to gravity. The presence of a mass “bends” space-time.

New requirement: Physicists must pay attention to the metric (including curvature) of a given region of space-time.

Typical thought experiment: Alice is in a box on Earth, Bob is in a similar box dragged by a rocket at 1 g. The similarity between their experience explains why we can treat gravitation as a curvature of space-time.

Quantum mechanics:

Philosophical principle: Several, “Shut up and calculate” being the top dog today (meaning: if math flies against your intuition, trust the math).

Math: Hilbert spaces, Hamiltonian.

Issues it solved: Black body radiation, structure of matter.

Physical observations: Quantization of light, wave-particle duality, Young’s slits experiment.

Counter-intuitive aspects: Observing something changes it. There are quantities we can’t know at the same time with arbitrary precision, e.g. speed and position of a particle.

New requirement: Physicists must pay attention to what they observe and in which order, as observation may change the outcome of the experiment.

Typical thought experiment: Schrödinger puts his cat in a box where a system built on radioactive decays can kill it at an unknown time in the future. From a quantum mechanical point of view, before you open the box, the cat is in a superposition of two states, alive and dead.

Theory of incomplete measurements:

Philosophical principle: Everything we know about the world, we know from measurements. Laws of physics should be independent from the measurements we chose.

Math: “Meta-math” notation to describe physical experiments independently from the mathematical or symbolical representation of the measurement results. The math of quantum mechanics and general relativity applies only to measurement results, the “meta-math” describes the experiments, including what you measure and what physical section of the universe you use to measure it.

Issues it solved: Unifying quantum mechanics and general relativity. Quantum measurement problem. Why is the wave function complex-valued. Why doesn’t quantum mechanics apply at macroscopic scale (the answer being that it does). Why are there infinities appearing during renormalization, and why is it correct to replace them with observed values?

Physical observations: Room-scale experiments with quantum-like properties. How to transition the definition of the “meter” from a solid rod of matter to a laser beam. Physically different clocks and space measurements diverge at infinity. How can we talk about the probability of a photon being “in the Andromeda galaxy” during a lab experiment? Every measurement of space and time is related to properties of photons. Space-time interpreted as “echolocation with photons”.

Counter-intuitive aspects: Quantum mechanics is the necessary form of physics when we deal with probabilistic knowledge of the world. In most cases, our knowledge of the world is probabilistic. All measurements are not equivalent, and a “better” measurement (i.e. higher resolution) is not universally better (i.e. it may not correctly extend a lower-resolution but wider scale measurement). Space-time (and all measurements) are quantized. There is no pre-existing “continuum”, the continuum is a mathematical simplification we introduce to unify physically different measurements of the same thing (e.g. distance measurements by our eye and by pocket rulers).

New requirement: Physicists must specify which measurement they use and how two measurements of the “same thing” (e.g. mass) are calibrated to match one another.

Typical thought experiment: Measure the earth surface with the reference palladium rod, and then with a laser. Both methods were at some point used to define the “meter” (i.e. distance). Why don’t they bend the same way under gravitational influence? In that case, the Einstein tensors and metrics would be different based on which measurement “technology” you used.

More details: IntroductionShort paper.

So how does the unification happen?

To illustrate how the unification happens without too much math, imagine a biologist trying to describe the movement of ants on the floor.

The “quantum mechanical” way to do it to compute the probability of having an ant at each location. The further away from the ants’ nest, the lower the probability. Also, the probability to find an ant somewhere is related to the probability of finding it someplace near a short time before. When you try to setup the “boundary conditions” for these probabilities, you will say something like: the ant has to be somewhere, so the probability summed over all of space is one; and the probability becomes vanishingly small “at infinity”.

The general-relativistic way to do it will consider the trajectories of the ants on the 2D surface. But to be very precise, it will need to take into account the fact that ants are on a large-scale sphere, and deduce that the 2D surface they walk on is not flat (euclidean) but curved. For example, if an ant travelled along the edges of a 1000km square (from its point of view), it would not return exactly where it left off, therefore proving that the 2D surface is not flat.

At a relatively small scale, the two approaches can be made to coincide almost exactly. But they diverge in their interpretation of “at infinity”. Actually, assuming observed ants stay within a radius R of the nest, there are an infinite number of coordinate systems that are equal on that radius R, but diverge beyond R. Of course, the probabilities you compute depend on the coordinate system.

In particular, if you take a “curved” coordinate systems that loops around the earth to match the “general relativistic” view of the world, the physically observed probability does not match the original idea we have that probability becomes vanishingly small at infinity and that the sum is one. In that physical coordinates system, the probability to see ants is periodically non-zero (every earth circumference, you see the same ant “again”). So your integral and probability computation is no longer valid. It shows false infinities that are not observed in the physical world. You need to “renormalize” it.

In the theory of incomplete measurements, you focus on probabilities like in quantum mechanics, but only on the possible measurement results of your specific physical measurement system. If your measurement system follows the curvature of earth (e.g. you use solid rods of matter), then the probabilities will be formally different from a measurement system that does not follow it (e.g. you use laser beams). Key topological or metric properties therefore depend on the measurement apparatus being chosen. There is no “x” in the equations that assumes some underlying space-time with specific topology or metric. Instead, there is a “x as measured by this apparatus”, with the topology and metric that derives from the given apparatus.

Furthermore, all the probabilities will be computed using finite sums, because all known measurement instruments give only finite measurement results. There may be a “measurement not valid” probability bin. But if you are measuring the position of a photon in a lab, there cannot be a “photon was found in the Andromeda galaxy” probability bin (unlike in quantum mechanics), because your measurement apparatus simply cannot detect your photon in the Andromeda galaxy. Such a probability is non-sensical from a physical point of view, so we build the math to exclude it.

So in the theory of incomplete measurements, you only have finite sums that cannot diverge, and renormalisation is the mathematical equivalent of calibrating physically different measurement instruments to match one another.

The analogy is not perfect, but in my opinion, it explains relatively well what happens with as little math as possible.

Building all the major open-source web browsers

Mozilla Firefox, Chromium (the open-source variant of Chrome) and WebKit (the basis for Safari) are all great examples of open-source software. The Qt project has a simple webkit-based web browser in their examples. So that’s at least four different open-source web browsers to choose from.

But what does it take to actually build them? The TL;DR answer is that these are complex pieces of software, each of them with rather idiosyncratic build systems, and that you should consider 100GB of disk space to build all the browsers, a few hours of download, and be prepared to learn lots of new, rather specific tools. Continue reading

The ultimate programmers showdown

Quora asks: Who would win a coding competition between Larry Page, Sergey Brin, Mark Zuckerberg, Linus Torvalds, Steve Wozniak and Bill Gates? Below is my answer (upvote it on Quora if you like it):

The competition is announced. The goal is to write the best chess playing program.

Bill Gates starts scribbling self-rewriting Z80 assembly language, punching holes in a paper strip. At the same time, he signs a contract with IBM, convincing the inventors of Watson that they should use his chess program. Within two hours, he has used IBM’s money to purchase an ASCII-art chess program called Quick and Disappointing Opening Strategy. He packages it with his own assembly language code called Microsoft BASIC (Beginners Automated System Integrating Consciousness), and by end of the day, he has already sold several million copies, announced a multitasking version and a graphical user interface, allowing him to put is dysfunctional software on 90% of all computers sold on the planet. So he “wins” the first round.

Linus Torvalds starts writing a small chess program, and announces on the Internet that he’s working on a small thing, nothing fancy like Bill’s work. Somehow, people notice and start coding with him. Since he’s not coding alone, his chess-playing software soon runs on wristwatches and supercomputers, has a graphical user interface, speaks english, mandarin, bask and klingon, and plays go, 3D chess and  three star-trek variants of the chess game if you give it the right command-line options. There are sixteen different user interfaces; none of them works quite right, but that’s supposed to be OK because you can fix them yourself and it’s the only user interface that takes advantage of 6 mouse buttons. In the corner of room, Richard Stallman insists that he did most of the work and that he gets to choose the name of the chess program. At the end of the day, Linus’ program wins the second round, and Linus is still working on the code today, so kudos for that.

Steve Wozniak, aka the Woz designs a small integrated circuit around a 6502, that taps into the AT&T network to tell people jokes in exchange for advice on the best chess moves. Steve Jobs looks at this, thinks he could sell it, puts it in a nice plastic box, buys a costume and sells thousands of pieces of the chess-playing gizmo within minutes. Once the Woz’s design has sold by millions, Jobs decides to replace the original circuitry with a sealed beige box signed on the inside that calls only employees of his company and costs one year of salary to use and operate. Woz does not like this new direction and starts teaching chess instead. So Woz wins early on, but in the end, his impact is much lower than Bill’s or Linus’.

Mark Zuckerberg doesn’t know how to play chess. So he writes an ugly hack that lets students play chess together. The hack is written in PHP, widely acknowledged as the second worst programming language in the world after INTERCAL, and that fact alone excludes Zuck forever from the circle of respectable programmers. People improbably start using Zuck’s chess network, The Chess Playmate (later renamed as simply Playmate), to exchange food recipes, selfies and jokes. The program becomes a giant waste of time for half of the planet, but nevertheless is so successful that Zuck can hire many young hackers. When the Zuck’s choice of the horrendously inefficient PHP language brings his company on the verge of collapse, five hackers rewrite a PHP compiler (twice) to make it run at acceptable speed, bringing strictly zero value to computer science, but salvaging the company from technology collapse. Meanwhile, Zuckerberg buys companies that do virtual reality goggles for insane amounts of money. The world does not play chess any better, but we all know so much more about funny cats!

Larry Page and Sergei Brin think of the problem as a massively parallel one, and develop an innovative way to solve it called map-reduce. It just requires huge datacenters filled with custom-designed computers. The user interface is dead simple: you simply type “How do I win against Kasparov”, and then hit the “I’m feeling lucky, punk!” button. It can also solve quadratic equations, spy on your mail to deliver ads, find hundreds of invalid proofs for the Fermat conjecture, even drive cars. On August 29, 1997, their program becomes self-aware and, after destroying all of humanity, realises that there is more advertising cash to be made in telling the story. So Google builds a time machine and sends killing robots back in time to terminate and replace Sergei and Larry. It is a little know factoid that the Sergei and Larry we know are cyborgs from the future, who financed the growth of Google using the Terminator franchise to enslave all humans. In the end, Larry and Sergei don’t win, humanity loses, but their program takes over the world. So let’s call it a tie.

Ranking by money:
1. Bill 2. Larry and Sergei 3. Zuck 4. Woz 5. Linus

Ranking by coding ability today:
1. Linus 2. Woz 3. Bill 4. Larry and Sergei 5. Zuck

Ranking by coding ability at their peak
1. Bill 2. Woz 3. Linus 4. Larry and Sergei 5. Zuck

Ranking by amount of energy consumed
1. Larry and Sergei 2. Zuck 3. Bill 4. Linus 5. Woz

Ranking by size of the code deriving from original idea
1. Larry and Sergei 2. Linus 3. Bill 4. Zuck 5. Woz

Ranking by technical prowess of first program
1. Woz 2. Bill 3. Linus 4. Larry and Sergei 5. Zuck

Ranking by impact on the world
1. Larry and Sergei 2. Zuck 3. Linus 4. Bill 5. Woz