For the first TEDx conference in Nice, we reconstructed the famous TED intro (obviously adapted for TEDx) in true stereoscopic 3D. It takes all of fifty lines of code, that is less than one page, shown at the end of this article. If you installed Tao Presentations on your computer, you can download the whole presentation (which contains many more interesting effects we will discuss here soon).

Here is the result:

Showing images in a directory

The core of this presentation is the following line of code:

show_tedx_image with files "images/TEDx-presenters/*.jpeg"

This line calls the show_tedx_image function with the name of each file in the given path in turn. It works as follows: the with keyword implements here what functional programmers call a map. It will call the given function with the arguments in the list on the right. For example, show_number with 1,2,3,4,5 would call show_number with values 1 through 5 in sequence. You can use more complex lists, e.g. show_number with 1..5, 8..23...

Drawing all pictures in a directory

In this case, the files function lists all the files with .jpeg extension in the images/TEDx-presenters. So with this simple line, we iterate over all JPEG images in a directory. Try this: change the pictures in the directory, relaunch the presentation and see what happens. The presentation updates itself. It's that easy! Try that with [insert your favorite presentation tool here].

Drawing the see-through TEDx

The other interesting feature of this short show is the see-through TEDx text. How did we do that? We simply overlay a dynamic texture created with frame_texture. The frame_texture function is very handy: it allows you to create a dynamic texture of a given size in which you can draw anything.

In that case, the dynamic texture contains a gradient "pierced" by a transparent TEDx logo, where the TEDx logo becomes less and less transparent. So the whole layering is as follows:

locally
    color TED_red, LogoTrans
    rectangle window_width, window_height
frame_texture window_width, window_height,
    locally
        color "white", 1
        TEDx_gradient window_width, window_height
        rectangle window_width, window_height
    locally
        scale_contents
        blend_function "src_color", "zero"
        color "white", 0.1 + LogoTrans
        image 0, 0, 0.9,0.9, "TEDxLogo.png"
rectangle window_width, window_height

Creating the gradient

The TEDx_gradient function is defined in theme.xl (see this article for more on themes). This function encapsulates the theme gradient that we use in several pages of the presentation. It uses the radial_gradient feature to create a smooth grayish radial gradient:

TEDx_gradient W:integer, H:integer ->
// ----------------------------------------------------------------------------
//   Draw the TEDx gradient
// ----------------------------------------------------------------------------
    radial_gradient W/2, H/2, H, W, H,
        gradient_color 0, 1.0, 1.0, 1.0, 1.0 
        gradient_color 0.2, 1.0, 1.0, 1.0, 1.0 
        gradient_color 1, 0.8, 0.8, 0.8, 1.0

Using dynamic text

We originally used a static picture to draw the TEDx logo, mostly because it was difficult to find the exact font settings that would make the logo look right. That being said, it is only marginally more complicated to use real dynamic text here. Try replacing the original frame_texture with the following code:

frame_texture window_width, window_height,
    locally
        color "white", 1
        TEDx_gradient window_width, window_height
        rectangle window_width, window_height
    locally
        scale_contents
        blend_function "src_color", "zero"
        color "white", 0.1 + LogoTrans
        frame_texture window_width, window_height,
            text_box 0, 0, window_width, window_height,
                color TED_red
                font "Arial Rounded MT Bold", 340
                align 0.5
                vertical_align 0.5
                text "TAO" & text seconds
        rectangle window_width, window_height
rectangle window_width, window_height

In this scenario, we have an outer frame_texture containing the combined gradient-pierced-by-text, and an inner frame_texture we use to draw the red text. The inner frame_texture is handy to apply the transparency and coloring to the combination of gradient and text.

Complete code listing

Here is the code:

import Animate
import VLCAudioVideo

page "TEDx Logo",
// ----------------------------------------------------------------------------
//   Show a rotating list of images
// ----------------------------------------------------------------------------
    page_duration 20
    locally
        color "white"
        movie_only ""
        TEDx_Image_Index := 0
        translate 0, -500 * fade_in(page_time, 10), -4000
        scale_background
        rotatex 20 + 55 * fade_out(page_time, 10)
        rotatey 20 * time
        show_tedx_image with files "images/TEDx-presenters/*.jpeg"

    locally
        show_tedx_red_logo fade_at(page_time*0.5, 3), fade_at(page_time*0.3, 3)


show_tedx_red_logo Depth:real, LogoTrans:real ->
// ----------------------------------------------------------------------------
//    Show the TEDx logo at given depth and transparency
// ----------------------------------------------------------------------------
    locally
        color "white", Depth
        translatez 2000 * (1-Depth)
        locally
            color TED_red, LogoTrans
            rectangle window_width, window_height
        frame_texture window_width, window_height,
            locally
                color "white", 1
                TEDx_gradient window_width, window_height
                rectangle window_width, window_height
            locally
                scale_contents
                blend_function "src_color", "zero"
                color "white", 0.1 + LogoTrans
                image 0, 0, 0.9,0.9, "TEDxLogo.png"
        rectangle window_width, window_height


show_tedx_image File:text ->
// ----------------------------------------------------------------------------
//    Show a given TEDx image
// ----------------------------------------------------------------------------
    locally
        rotatey 45 * TEDx_Image_Index
        rotatex 30 * (TEDx_Image_Index / 8 - 1)
        translatez 1000 + 400 * fade_out_at(page_time, TEDx_Image_Index * 0.2)
        texture File
        draw_rectangle 2*texture_width, 2*texture_height
        draw_rectangle W:real, H:real ->
            rectangle W, H
            texture ""
            line_color "grey"
            color "white", 0
            rectangle W, H
        
        TEDx_Image_Index := TEDx_Image_Index + 1
        no_refresh_on TimerEvent // Workaround for #1965
TEDx_Image_Index -> 0