GithubThis page is at least 10 years old !
Les twist(er) bars
Attention, cet article casse un mythe.
Les "twister bar" (aka plein d'autres noms) est un effet ressemblant à une barre verticale de section carrée (ou pas), qui tourne et se tord sur son axe. Un peu comme du fer forgé animé.
On sait que la section de la barre va toujours rester la même, et qu'elle sera toujours à la verticale (dessinée de haut en bas). Si on prend chaque tranche horizontale de la barre, on se retrouve avec un carré vu de côté qui tourne sur un axe passant par son centre (l'axe Y, vertical, dans notre cas).
Comme dessiner un carré vu de côté risque de ne pas être très visible, prenons plutôt un cube rendu avec une source de lumière derrière la camera et en mode orthographique, que l'on fait tourner sur le même axe Y:
Merci Blender (source) !
On peut par exemple faire le rendu de cette animation sur n images et sur 90° (pas besoin de la faire sur 360° vu qu'on va voir les 4 mêmes faces). Ne pas oublier de faire la rotation non pas de 0 a 90°, mais de 0 a 90-(90/n)°, sinon les premières et dernières images seront les mêmes, et cela pourrait se voir.
Le nombre d'images définira la finesse des dégradés produits par l'éclairage. A estimer selon la mémoire disponible.
Voici ce que donne la séquence avec n = 16, notez bien que les images 0 et 15 sont différentes:
Ces 16 images sont tout ce qu'il faut comme ressources graphiques pour l'effet. Elles peuvent être pre-rendues (comme ici) ou calculées une fois avant de lancer l'effet.
Comme indiqué précédemment, le cube a été pris comme exemple pour bien montrer la rotation. On remarquera que dans ces 16 images, toutes les lignes horizontales sont les mêmes. On peut donc retenir qu'une ligne, résultant ici en une bande de lookup de 512*1 pixels, que voici:
Plus difficile de distinguer la rotation, n'est-ce pas ?
Tout ce qu'il reste à faire, à chaque nouvelle image, est de copier ces tranches ligne par ligne, de haut en bas, selon une fonction qui va produire une vague plus ou moins complexe, et qui bouclera sur n (modulo n).
La vague va donc servir d'index pour choisir quelle tranche copier (parmi les 16).
Ici, la formule peut paraître complexe, mais il n'est qu'un produit fantaisiste. La seule nécessité est de ne pas aller trop "haut en fréquence" pour ne pas avoir du "bruit" au lieu d'une rotation, et le "%16" qui permet de se limiter a notre bande de lookup.
Pour récupérer la position dans cette bande, il suffit de multiplier l'index par la largeur de chaque tranche (ici 32 pixels). i étant le numéro de la ligne qu'on souhaite rendre:
d = sin((c+i)/8)
cs = 15+(cos(b+d/4)*12)
tranche = 32*(int((i/cs)+(64+cos(a/64)*63))%16)
On peut ensuite aller plus loin en entremêlant deux de ces twist bars. Sans aller jusqu'au tri en Z tranche-par-tranche, on peut se limiter à n'avoir qu'une symétrie entre les deux (déphasage de pi/2).
On peut ainsi se servir du sinus de l'angle pour savoir si il faut dessiner l'une avant l'autre, ou l'inverse, et ainsi obtenir un effet de profondeur.
if (sin(angle) > 0) {
draw_a
draw_b
} else {
draw_b
draw_a
}
Merci encore, Blender (source) !
Et pourquoi ne pas aller encore plus loin en utilisant un comptage binaire dans le lookup pour dessiner du texte ?
Sur certains navigateurs, des lignes parasites apparaissent sur les bords, ceci est du a l'interpolation de la fonction canvas, ce n'est pas un bug du script.
