TP de "Documents Multimédia", 2014
Exercices du 25.11.2014

Je recommande de faire l'exercice 1 d'abord, mais prenez les exercices dans l'ordre que vous voulez.


1. Engrenages en SVG

Documents contenant des objets SVG peuvent être considérablement compliqués, et utilisés pour présenter des simulations des systèmes dynamiques réels. L'image ci-dessous possède un <script> ... </script> intégré, qui assure l'animation, mais votre exercice est statique et très simple.

Il s'agit d'engendrer plusieurs dents, comme ci-dessous.

engren (13K)  

La réalisation peut avoir la forme comme celle à droite. Les détails sont arbitraires. Un minimum de paramétrisation (la taille et le nombre de dents) est souhaitable

(la possibilité de changer le nombre de dents de manière relativement facile n'est pas triviale, demande un peu de calcul...).


On peut réaliser ce projet de plusieurs façons.


La réalisation proposée (aucune obligation) est plus simple, comme l'image à droite, et elle est composée de :

Quelques petits commentaires s'imposent.


Finalement, la dernière manipulation.

Animez votre roue. Mais ceci est un "bonus", d'abord la géométrie.


2. Un peu de 3D [Cubic mapping]

Si vous insistez d'engager SVG, je ne vous interdirai pas. Mais c'est surtout un exercice en feuiiles de style CSS.

Construisez en CSS (éventuellement avec un minimum de JavaScript si vous voulez) un cube 3D [ci-dessous à droite] composé de 6 images qui forment ensemble une vue totale, comme dans le tableau en bas à gauche. Quand la géométrie statique du cube sera codée correctement, vous pourrez animer l'objet.

Les détails du codage sont disponibles sur l'Internet, sauf que le code CSS est adapté souvent seulement à l'engin -webkit-. Il vous faudra ajouter partout les clauses -moz- si vous utilisez Firefox. Mais de plus en plus des variantes comme ça deviennent standardisées, et les constructions marchent sans préfixation. Je vous donne une adresse (une page de Jerôme Debray sur developpez.com) où vous trouverez la solution.

sky_lake_top (74K)
sky_lake_back (74K) sky_lake_left (74K)sky_lake_front (74K)sky_lake_right (74K)
sky_lake_bottom (74K)

Les images du lac sont plus grandes que ci-dessus. Chaque carreau est un lien vers l'original dans le dossier Images, les photos sky_lake_front.jpg, etc. Les images doivent être positionnées sur le cube de manière "naturelle", de manière à ce que les facettes voisines soient adjacentes, et leur orientation est correcte. Attention, il est très facile de se tromper d'une ou plusieurs orientations ; quelques rotations s'imposent. Le seul vrai problème était de comprendre les translations et les rotations engagées. On peut cloner la solution de l'Internet (ou de mes matériaux), mais il est préférable de se tromper et trouver l'erreur. Vous avez temps infini à votre disposition ; on pourra discuter les détails lors de la séance suivante.

Une autre page, de Paul Hayes montre une autre solution, contrairement à Jerôme Debray, la démo marche sur Firefox. Pourquoi je vous donne la solution faite par quelqu'un d'autre?


Attention : devoir obligatoire (1) !

Comme je vous ai dit hier, le 25.11.2014, le premier exercice, les engrenages, constitue votre premier exercice obligatoire. Je précise donc de manière plus formelle quelques modalités.

Si vous avez des questions, n'hésitez pas. Je suis là pour vous aider à faire quelque chose de joli. Bon courage !


Retour