Afficher une image en fond en 3D

Tao Presentations permet l'affichage en 3D. Cela veut dire qu'on peut l'utiliser sur des télévisions 3D ou des projecteurs 3D et avoir un réel effet de profondeur.

Pour donner une bonne impression de profondeur, il est important d'utiliser une image ou un film en fond qui va donner à l'oeil une perspective. Idéalement, ce fond doit couvrir correctement l'ensemble de l'écran.

Dans ce tutoriel, nous allons voir comment envoyer une image en fond d'écran qui s'adapte automatiquement à la taille de l'écran

Afficher une image

Pour afficher une image, on utilise tout simplement la fonction image de Tao Presentations. Par exemple, pour créer un simple fond d'écran utilisant le fichier Andromeda Galaxy.jpg, il suffit d'utiliser le script suivant:

color "white"
image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"

Envoyer cette image vers le fond

Sauf instructions particulière de notre part, notre image s'affiche directement sur le plan de l'écran. Si nous voulons l'envoyer en arrière plan, nous pouvons utiliser la fonction translate qui nous permet de l'envoyer par exemple "4000 pixels en arrière":

translate 0, 0, -4000
image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"

Redimensionner le fond

Le fond est maintenant entouré d'un bord noir disgracieux. On peut corriger cela assez facilement en utilisant la fonction scale pour redimensionner l'image. Par exemple:

translate 0, 0, -4000
scale 150%, 250%, 100%
image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"

Redimensionner intelligemment

Le facteur d'échelle à appliquer dépend de la taille de la fenêtre. C'est là que le fait de disposer dans Tao Presentations d'un véritable langage de programmation va se révéler très utile. Nous allons pouvoir calculer correctement le facteur d'échelle à appliquer en utilisant le code suivant:

scale_background -> scale3 background_scale
background_scale -> max(window_width/slide_width, window_height/slide_height)
scale3 S:real -> scale S, S, S
slide_width  -> 1024
slide_height -> 768

Ce code ajoute un nouveau mot à notre vocabulaire: scale_background, qui applique un facteur d'échelle applicable à un fond d'écran, qui garantit que l'image choisie couvrira toujours la totalité de la fenêtre, a supposer que l'image d'origine fasse 1024x768 comme indiqué par slide_width et slide_height.

On peut créer une autre variante sur le même principe, mais destinée à du contenu qui lui doit toujours être affiché en intégralité:

contents_scale -> min(window_width/slide_width, window_height/slide_height)
scale_contents -> scale3 contents_scale

On peut maintenant créer des présentations dans lesquelles le fond et le texte s'adaptent de façon différente à un changement de dimensions de la fenêtre: le fond occupe tout l'espace quitte à être "découpé", tandis que le texte s'adapte pour tenir en entier dans la page.

Redimensionner un fond

Il nous reste encore à calculer automatiquement le facteur d'échelle à appliquer à un fond. Celui-ci dépend de la position de la caméra.

ztrans_contents Z:real ->
    Z0 -> 6000.0
    Z0 := camera_position at 3
    translatez Z/contents_scale
    scale3 (Z0-Z)/Z0

ztrans_background Z:real ->
    Z0 -> 6000.0
    Z0 := camera_position at 3
    translatez Z/background_scale
    scale3 (Z0-Z)/Z0

Ce code ajoute deux nouveaux mots à notre vocabulaire: ztrans_background pour reculer un fond et ajuster sa taille automatiquement, et ztrans_contents pour faire la même opération avec un contenu comme un texte ou une image.

Rendre tout cela facile à utiliser.

La dernière étape est de rendre tout cela facile à utiliser. Nous allons créer le mot background pour placer n'importe quel type de contenu en fond.

background Depth:real, Body ->
    locally
        scale_background
        ztrans_background Depth
        color "white"
        Body

Nous utilisons ici une possibilité très intéressante du langage XL, celle de passer facilement un "bout de code" en argument. L'utilisation de background pour afficher notre image de fond devient très simple:

background -4000,
    image 0, 0, 100%, 100%, "Andromeda Galaxy.jpg"