Restarting a Blogmax “private” blog

Back when I was working for HP, I was using Blogmax to build a daily blog of my activities. That was quite useful as a self-reference, but also helped my team members follow what I was doing (I was the only one working from France, most of the team being in the US).

When I started Taodyne, I stopped doing that because a) we were all in the same room, b) we did not necessarily want to publicise everything we were doing, and c) I didn’t have the time. I now really regret it, as this would have been very interesting to me as a searchable archive.

So I’ve decided to restart a private blog. Not private in the sense that it’s hidden or that you can’t read it, but in the sense that it’s really notes for myself. If they happen to be useful for someone else, good. But be warned, it’s unlikely my private blog will be of any interest to you. I insert a reference here so that Google starts indexing it :-)

5 ways Tao3D is so much better than HTML5

It’s the ultimate showdown. On the left side, the current contender, the web. Thousands of developers building exciting new technologies using JavaScript, HTML5 and mashed potatoes. On the right side, a tiny French startup with Tao3D, a brand new way to describe documents. Guess who wins? (TL;DR: You know the web has to win. But why?)




Why are there new Javascript frameworks every day?

At Google I/O 2015, Google announced Polymer 1.0, a “modern web API” according to the web site. To me, it looks a bit like AngularJS mixed with Bootstrap.js, except it’s entirely different. Google also recently bought Firebase which looks to me a bit like Ionic, except of course it’s entirely different. And just now, I discovered Famous, which seems a bit similar to Reveal.js along with Three.js, except of course it’s entirely different.

Don’t get me wrong, I’m all in favor of competition, and there is something unique about all these frameworks. But this proliferation also demonstrates that there’s something seriously wrong with the web today. And I’d like to explain what it is.


Reason #5: HTML5 is way too verbose

Consider the Hello Famous on the Famous front page. It’s a whole 38 lines of JavaScript just to make a single picture spin. What the Hulk? In Tao3D, it only takes 4 lines. Four tiny miserable lines on one side, vs. 38 with today’s leading web technologies? We are not talking about a mere 2x or 3x factor, but practically 10x. And it’s not an exception either. On a slightly more complex clock animation, Tao3D is 33x shorter than JavaScript. Don’t you want to save your carpal tunnel from premature death?

Due to limitations with WordPress and code colorization, I have to ask you to read the rest on the Taodyne web site.

Shader-based text animations

With shaders, it is possible to create interesting text animations.

The code

The following code lets you create a dancing script by using a vertex shader to move the y coordinate up and down over time, and use a fragment shader to create colorization effects:

import BlackAndWhiteThemes

theme "WhiteOnBlack"
base_slide "Dancing script",

    contents 0,
        // Create a shader transforming a sphere
            vertex_shader <>
            fragment_shader <>
        shader_set time := page_time mod 60

        text_box 0, 0, 0.6*slide_width, slide_height,
            align 0.5
            vertical_align 0.5
            color "#F4B63C"
            font "Tangerine", 120, bold
            shader_set parms := 0.8, 0.03
            paragraph "Fun text effects, 50 lines of code"
            color "white"
            font "Arial", 60
            shader_set parms := 0.3, 0.01
            paragraph "Animate text easily with Tao3D!!!"

            color "lightblue"
            font "Courier", 20
            align 1.0
            shader_set parms := 0.2, 0.7
            paragraph ""

Going further

This technique is extremely powerful. By adjusting the shader, you can easily get effects such as fuzzy text, text with punched holes inside, flaming text, glowing text, and so on.

Christophe de Dinechin

Detecting video changes

Tao3D can capture live video, and makes it quite easy to perform image analysis using shaders. Here is a simple example that shows how to highlight moving parts in a video by colorizing them in red and blue.


Capturing live video

Tao3D can capture live video in a texture by using the VLCAudioVideo module and using the qtcapture:// URL on MacOSX or dshow:// on Windows (I am not sure what the right URL would be on Linux).

So below is a simple program that would capture a live video stream and display it at the center of the screen:

import VLCAudioVideo
WEBCAM -> if is_available mac then "qtcapture://" else "dshow://"

movie_texture WEBCAM
rectangle texture_width, texture_height

Saving a texture

If we want to detect movement, we need to save a reference frame to compare to. This can be done by using a dynamic texture in which we play the movie, but that we only update at specific times. Here is what it looks like to capture a snapshot every second:

lastTex -> 0
if time mod 1 < 0.1 then
    frame_texture 640, 480,
        color "white"
        movie_texture WEBCAM
        rectangle texture_width, texture_height
    lastTex := texture

The solution above is a bit crude, since it hard-codes the frame texture size. Normally, we should capture the actual frame size from the input video:

lastTex -> 0
frameWidth  -> 640
frameHeight -> 480
if time mod 1 < 0.1 then
    frame_texture 640, 480,
        color "white"
        movie_texture WEBCAM
        rectangle texture_width, texture_height
    lastTex := texture

Comparing textures

A simple shader program that compares two textures and highlights the difference in red/blue will look like this:

uniform sampler2D last;
uniform sampler2D cur;

void main()
    vec4 old = texture2D(last, gl_TexCoord[0].st);
    vec4 new = texture2D(cur, gl_TexCoord[1].st);
    gl_FragColor = vec4(0.3*vec3(old.r + old.g + old.b),1) + vec4(1,0,0,0) * (new - old);

The last line adds a grey image and a red channel that contains the difference between the new and old picture. Apparently, when this difference becomes negative, GLSL will push up the blue and green channels of the resulting fragment color as a result of color normalization.

I will save this program in a file called diff.fs for easier editing. Remember that Tao3D will reload the shader code when you change it.

Comparing the snapshot and the current image

We can now run the shader program to compare the snapshot and the current image from the camera:

import Slides
import VLCAudioVideo

WEBCAM -> if is_available mac then "qtcapture://" else "dshow://"

base_slide "Test",
    lastTex -> 0

    color "white"
    contents 0,
        if time mod 1  640
            frameHeight -> 480
            frame_texture frameWidth, frameHeight,
                color "white"
                movie_texture WEBCAM
                rectangle texture_width, texture_height
                frameWidth := texture_width
                frameHeight := texture_height
            lastTex := texture
            texture lastTex
        rectangle -400, 0, 640, 480

    contents 0,
        texture_unit 0
        texture lastTex
        texture_unit 1
        movie_texture WEBCAM
            fragment_shader_file "diff.fs"
        shader_set last := 0
        shader_set cur  := 1
        rectangle 400, 0, 640, 480

The result will look something like this:

It’s of course more interesting when it helps highlight small movements:

Going further

This is only a starting point. You can explore ideas such as:

  • Using other sources such as a webcam.
  • Exploring the capabilities of shaders. The Filters module shows a few common algorithms in image processing that can serve as a starting point.
  • Storing more than one texture for finer analysis.

That was easy!

Christophe de Dinechin

Digital art in 3D

For one month starting today, in Sophia-Antipolis is the first place in the world where you can see real-time digital art in glasses-free 3D. If you are in the area, come and see it at Espace Saint-Philippe, Avenue de Roumanille in Biot.

Today, Taodyne installed a new glasses-free 3D screen at This screen, powered by Taodyne’s unique Tao3D digital signage solution, offers an unprecedented visual experience, combining amazing visuals and ever-renewed interesting or useful contents.

3D interactive visual art (3DIVART): beautiful and always new

The 3D screen exposed at features a number of pieces from the 3DIVART collection. 3DIVART, it’s more than 100 digital art pieces specially crafted for glasses-free 3D displays (many of them thanks to our friends at ShaderToy). And the list keeps growing. Each piece is beautiful, intriguing, mind-blowing, or just funny.



Ray Manta



What’s even more amazing, each of these pieces is computed in real-time, for your eyes only. As a result, you will never see the same thing twice.

More artistic ways to present information

Art can be used to present information in a more entertaining way. For example, the collection includes a Dali-style clock (inspired by The Persistence of Memory), which shows the actual time. Watch as the clock’s hands spin in a surrealistic movement around a floppy hourglass body.

Dali donne l'heure

Showing real-time information

Using the NewsFeed module of Tao3D, the digital signage solution exposed at includes a ticker that shows real-time news from a variety of RSS sources, including Google News or Clubic.

Real-time News

This means that the screen is not just staying there passively, showing the same movies over and over. Instead, the screens shows something new every single day, useful data from sources of information you know and trust.

Christophe de Dinechin

Going to deep space, now theoretically possible?

I have already discussed earlier why we need to go into deep space if we want to have a future as a specie. But the problem is how to do it? Until now, this was considered impossible.

A first theoretical step had been made, with the Alcubierre drive, an interesting solution to the equations of general relativity that would allow a section of space to move faster than light, although what is inside would not feel acceleration. The solution can be interpreted as moving space rather than matter. But until recently, it was considered as impossible in practice because of the amount of energy required.

This is apparently changing, and work in that field seems to have advanced a lot faster than I anticipated. Here is a video from people working on it, complete with artistic renderings of what the ships might look like:

Now I only need to reconcile that work with my own pet theory and see where that leads me :-)

By the way, I talk about this later because I saw this through an article about another interesting step in space engine technology, an electromagnetic drive that appears to be working in a vacuum, something which was until now considered hard to believe.

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.