Drawing

Tao3D includes a number of primitives for drawing 2D and 3D shapes. Attributes such as color apply to following shapes.

Coordinates are given in the order X, Y, W, H. X is horizontal, Y vertical, W is the width, H the height.

// White background (could be "transparent")
background_color "white"

// Draw a red ellipse
color "red"
ellipse 0, 0, 100, 200

// Draw a blue rectangle
color "blue"
rectangle 100, 0, 200, 100

Coordinates

2D shapes take their arguments in the order X, Y, W, H. 3D shapes take a third coordinate for position and depth, so their arguments are X, Y, Z, W, H, D.

• X is the horizontal coordinate
• Y is the vertical coordinate
• Z is the depth coordinate
• W is the width of the shape
• H is the height of the shape
• D is the depth of the shape

Initially, coordinates (0,0,0) are at the center of the screen, and one unit corresponds to one pixel.

Movies

The VLCAudioVideo module lets you play movies. Movies can be rotated, scaled or used as dynamic textures.

This means even 2D movies can be used in 3D animations.

Attributes

Instructions such as color or line_width define shape attributes. Attributes apply to all instructions that follow them and are cumulative.

// Color "red" applies to all subsequent shapes
color "red"
ellipse 0, 0, 30, 50
line_color "green"
line_width 4
rectangle -50, 0, 50, 10
color "blue"
triangle 0, 50, 20, 50

Colors

Colors are identified by name or HTML code (including CSS color names). You can also specify an optional opacity (alpha channel) as the last argument.

Alternatively, colors can be specified from numerical values in RGB, HSV or CYMK models. Hue is given in degrees between 0 and 360. All others are between 0 and 1 (or between 0% and 100%).

Transforms

Global 3D geometric transformations change the coordinate system for the entire scene: translate, rotate, scale.

Like attributes, transforms apply to all items that follow them, and accumulate.

Variants with _x, _y or _z suffix apply to the given axis: scale_x, rotate_z.

The order of transforms matters. Doing a rotation followed by a translation is not the same as a translation followed by a rotation, for example.

Local changes

You can control the scope of attributes and transforms with locally. Changes made inside a locally stay there.

// The "blue" color and rotation stay within "locally"
color "red"
rectangle 0, 0, 50, 100
locally
    color "blue", 50%
    rotate_z 35
    rectangle 120, 0, 50, 100
rectangle 120, 0, 50, 100

Text

Text is drawn inside a text_box, using the text instruction.

There can be multiple instances of text and multiple attributes in a text box.

// Draw some text over a gray rectangle
color "darkgray"
rectangle 0, 0, 400, 150

color "white"
text_box 0, 0, 400, 150,
  text "Text is generally placed inside a text box. "
  text "It will fit in that box."
  font "Arial", 24, italic
  color "yellow"
  text "Attributes can be changed in the text box as well."

Justification

Tao3D offers a wealth of text layout features, including full or partial justification and centering, both horizontally and vertically.

Centering at 0% centers left, at 100% centers right, and at 50% in the middle. Other values are possible. This is especially useful for vertical centering, where 30% looks quite nice.

// Demonstrate justification in a text box
text_box 0, 0, 180, 300,
    vertical_align 30%
    align 50%
    text "Centered text (align 50%)"
    paragraph_break
    align 0%
    text "Left aligned text (align 0%)"
    paragraph_break
    align 100%
    text "Right aligned text (align 100%)"

    paragraph_break
    align 50% , 100%
    text "Fully justified with centered last-line "
    text "(align 50%, 100%)"

Shaders

Shaders are programs that execute directly on the graphic card. They can be used to create special effects, image filters, and more.

The example shader shown here creates an "old TV" look by alternating darker and brighter rows on the screen.

// A simple 'old TV' shader on a YouTube video
import VLCAudioVideo
movie_texture "https://www.youtube.com/watch?v=vcRX0Gw1aaw"
shader_program
  fragment_shader <<
    uniform float time;
    uniform sampler2D tex;
    void main() {
      vec2 tc = gl_TexCoord[0].xy;
      vec4 color = texture2D(tex, tc);
      color.a *= sin(tc.y*600.0 + 30.3*time)*0.2 + 0.9;
      gl_FragColor = color;
    }
  >>
shader_set time := page_time
color "white"
rounded_rectangle 0, 0, window_width, window_height, 40

3D objects

The ObjectLoader module makes it easy to display 3D models.

Normally, 3D objects are shown along with their textures and materials. But it is also possible to apply colors or shaders to the objects.

Audi S5 model from Resurs3D.

Image processing

You can turn Tao3D into a powerful image processing tool. One technique is to create pages for each image to process, capture a screen snapshot for each page, and then move to the next page automatically.

In this example, we colorize and emboss a number of Escher pictures fetched from the web, and then create a fuzzy border around them before capturing them as a PNG picture.

The screenshot can be taken with transparency (alpha channel). Note that if you use a transparent background, MacOSX may display garbage on the screen where the picture remains transparent. This is normal.

// Process all images in this list
ESCHER_IMAGES ->
   "another_world.jpg",
   "ascending_and_descending.jpg",
   "balcony.jpg",
   "belvedere.jpg",
   "bond_of_union.jpg",
   "bulldog.jpg",
   "circle_limit_I.jpg"

import Filters
window_size 800, 600
process_image with ESCHER_IMAGES
process_image Image ->
  page Image,
      background_color "transparent"
      texture "http://britton.disted.camosun.bc.ca/" &
              "escher/" & Image

      // Wait until texture has loaded
      if texture_width > 0 then
        emboss
        fuzzy_border 0.1
        color_hsv 20 * page_number, 1, 1
        rectangle texture_width, texture_height
        screenshot text_replace(Image,".jpg",".png"), true
        next_page

page "Done", false

Reactive

Tao3D is reactive: using time is enough to redraw the code as time passes. Using mouse_x is enough to redraw each time the mouse moves.

With on, you can define more traditional "callbacks" for other events.

// The color automatically changes with time
color_hsv 20 * time, 40%, 80%

// The ellipse automatically follows the mouse
ellipse mouse_x, mouse_y, 100, 200

// Change camera position when we hit keys
on "key:a", { camera_position 2000, 200, 3000 }
on "key:p", { camera_position -2000, -1200, 3000 }
on "key:r", { camera_position 0, 0, 3000 }

Functions

You declare variables or functions with the -> operator (which reads as transforms into). You transform the code on the left of -> into the code on the right.

Tao3D is functional and homoiconic. Code is data. Functions are defined like any other variable. Passing code as function arguments is so easy you will not even notice you are doing it.

// Declare variables foo and bar
foo -> 0
bar -> 10

// Declare function bar taking one argument
// (note that we overload 'bar')
bar N ->
    // Here, locally is a function that takes
    // code as an argument. Did you notice?
    locally
        color_hsv 20 * N, 90%, 70%, 40%
        rotate_z 17 * N
        ellipse 0, 0, 400, 200

// Call 'bar N' for all values between foo and bar
background_color "white"
for I in foo..bar loop
    bar I

Custom notations

Tao3D is based on concept programming, and uses simple notations that are easy to read and learn.

You can also define your own notations, using the same -> operator as for functions. It's like operator overloading on steroids.

This mechanism is actually used to implement practically everything in Tao3D, including control structures such as if-then-else or for loops.

// A custom notation to repeat a shape
[A..B] Body ->
    for I in A..B loop
        locally
            color_hsv 20 * I, 90%, 70%, 40%
            rotate_z 17 * I
            Body

// Tao3D can use indentation-based blocks
[1..5]
    ellipse 100, 0, 140, 30
    translate_x -180
    font "Arial", 40
    text "Hello"

// Or {} blocks if you prefer...
[3..20] { rectangle 50, 20, 30, 25 }

Imports & themes

Tao3D includes a complete system for modules.

Modules can be written in C++ and do complicated things like using VLC to decode videos. But most often, they are written in the Tao3D language. They can implement animated themes.

import SeasonsGreetingsTheme

theme "SeasonsGreetings"
main_title_slide "The main title slide",
    title "Seasons Greetings theme"
    subtitle "A theme for the holidays"

section_slide "A section slide",
    title "Section title"
    subtitle "Section subtitle"

slide "Bullet points",
    * "Bullet points"
    ** "More bullet points"
    *** "Deeper"