La terre et ses rayons

Dans cet article nous allons voir comment créer avec Tao Presentations une suite de pages qui permettent de faire un menu grâce à des rayons colorés autour de la Terre. Voici à quoi ressemble le résultat final (la Terre tourne sur elle même) :

Afficher le fond

Le fond est simplement constitué d’une photo de la galaxie Andromède. Les utilisateurs de Macintosh pourront trouver cette image sous /Library/Desktop Pictures/Andromeda Galaxy.jpg. Les autres pourront utiliser une autre image de ciel étoilé.
Comme l'image originale est un peu trop claire, on l’assombrit en la coloriant en gris.

color "gray"
image 0, 0, 0.6, 0.6, "Andromeda Galaxy.jpg"

Placer le fond en profondeur

Tao Presentations permet l'affichage en 3D sur les écrans qui le permettent, par exemple un téléviseur 3D. Pour que l’effet 3D puisse être rendu, il nous faut placer l'image de fond en arrière. Nous allons pour cela utiliser une technique décrite précédemment.

background -2400,
    color "gray"
    image 0, 0, 0.6, 0.6, "Andromeda Galaxy.jpg"

Ce code nous permet de faire deux choses très utiles: envoyer l'image en arrière plan avec translatez sans faire apparaître de bord noir, et s'assurer qu'il s'adapte automatiquement à la taille de la fenêtre ou de l'écran.

Afficher la Terre

La Terre est affichée en léger arrière plan avec background -800, ... pour permettre aux information de venir se mettre devant. La Terre en elle-même est constituée d’une sphère sur laquelle est plaquée une texture représentant la surface du globe.
On rajoute une deuxième sphère autour de la première, sur laquelle est plaquée une texture de nuages qui tourne légèrement plus lentement que la Terre. Pour cette deuxième texture, nous utilisons un fichier .PNG qui permet d'avoir de la transparence. Enfin, ajouter une lumière permet de rendre l'ensemble beaucoup plus réaliste.

background -800,
    light 0
    light_position 1000, 1000, 1000

    texture_wrap true, true
    rotatey 3.5 * time
    texture "earth.bmp"
    sphere 550
    rotatey -0.2 * time
    texture "clouds.png"
    sphere 560

Afficher les textes un par un

Chaque «gélule» est sur une page différente pour utiliser le mécanisme pré-câblé de défilement des pages par les flèches haut et bas pour l’affichage progressif.

Fond

On va donc créer une fonction «earth_background» qui va gérer l’affichage du fond tel que nous l’avons vu dans les étapes précédentes :

earth_background ->
    locally
        background -2400,
            color "gray"
            image 0, 0, 0.6, 0.6, "Andromeda Galaxy.jpg"

        background -800,
            light 0
            light_position 1000, 1000, 1000

            texture_wrap true, true
            rotatey 3.5 * time
            texture "earth.bmp"
            sphere 550
            rotatey -0.2 * time
            texture "clouds.png"
            sphere 560

Gélule de texte

Ce qui est identique dans chaque gélule, c’est sa taille et sa «position» à la rotation près. Ce qui diffère entre les gélule, c’est la couleur, la rotation et le texte. On va donc créer une fonction qui dessine une gélule et qui prend le texte en paramètre, la rotation et la couleur seront donnés avant l’appel à la fonction :

rrect T:text ->
    locally
        translatex 500
        translatez -50
        rounded_rectangle 0, 0, 300, 80, 50
                    
        text_box 0, 0, 280, 80,
            color "white"
            font "Arial Rounded MT Bold", 40
            align 0.5
            vertical_align 0.5
            text T

On dessine donc un rectangle arrondi, et on y place une boîte de texte centrée horizontalement et verticalement, contenant le texte donné en paramètre.
Puis nous appelons cette fonction après avoir fait la rotation et donné la couleur de la gélule :

        locally
            rotatez 25 * (2-N)
            color tao_color N
            rrect tao_ray_text N

Affichage de l’ensemble du texte

Maintenant nous faisons une fonction qui affiche de 1 à 5 rayons suivant un nombre maximum de rayons souhaités :

tao_rays Max:integer ->
    locally
        translatex 100
        scale_contents
        tao_ray 0, Max
        tao_ray 1, Max
        tao_ray 2, Max
        tao_ray 3, Max
        tao_ray 4, Max

tao_ray N:integer, NbMaxRay:real ->
    if NbMaxRay > N then
        locally
            rotatez 25 * (2-N)
            color tao_color N
            rrect tao_ray_text N

Affichage des pages

Et enfin nous définissons les pages qui affichent les rayons :

page "Spinning Earth in 3D",
    earth_background

page "Spinning Earth + Dynamic",
    earth_background
    tao_rays 1

page "Spinning Earth + Interactive",
    earth_background
    tao_rays 2

page "Spinning Earth + Simple",
    earth_background
    tao_rays 3

page "Spinning Earth + Extensible",
    earth_background
    tao_rays 4

page "Spinning Earth + 3D",
    earth_background
    tao_rays 5