Un autre monde

Grandville

Jean Ignace Isidore Gérard Grandville était un caricaturiste Français, né à Nancy en 1803, et mort à Vanves en 1847. Parmi ses recueils les plus célèbres, on peut trouver Les Métamorphoses du jour, qui sont une série de scénettes de comédie, et évidemment, Un autre monde, une série d'illustrations surréalistes réalisées dans un livre, dont notre œuvre présentée ici est tirée.

— Source: Wikipedia

Le Jongleur des Univers

Cette illustration très connue de Grandville est considérée comme un précurseur du mouvement surréaliste. Elle représente au premier plan plusieurs planètes, dont l'une ressemble à la Terre, et sur laquelle se tien un homme. À l'arrière-plan, on peut voir évidemment le jongleur, qui semble démesurément grand par rapport à notre personnage au premier plan, et qui jongle lui-même avec d'autres planètes, mais qui n'ont pas la texture de la Terre cette fois.
Le fond est plutôt sombre et vide, sans doute pour illustrer un ciel clair, ou alors un vide spatial. Une étoile semble échapper au jongleur, et manque de tomber sur l'homme au premier plan, qui tente de s'en protéger.

Clin d'oeil de Queen

Pour leur album Innuendo sorti en 1991, le groupe de rock Queen a utilisé le Jongleur des Univers comme pochette d'album. Leur version est colorisée, et l'étoile qui tombe sur l'homme au premier plan est remplacée par une banane. On peut constater que les pochettes des singles de cet album reprennent d'autres illustrations de Grandville, toutes venant de Un Autre Monde.

Notre représentation ici s'inspire librement de l'interprétation de Queen, notamment pour la colorisation des différents éléments.

On peut remarquer que sur le clip vidéo de la pièce Innuendo, notre illustration est animée pendant quelques secondes :

Explication technique : Les planètes de jonglage

Pour pouvoir faire tourner les planètes autour d'un centre donné, et pour pouvoir ajuster leur nombre, de manière a toujours les afficher en cercle, j'ai dû créer un petit algorithme qui permet de déterminer la position de chaque planète par rapport à un centre donné.
Tout d'abord, le prototype de la fonction est le suivant :

function createCircle(center, radius, radiusSphere, num)

center - correspond à la position du cercle dans l'espace. Les planètes tournent autour de ce centre.
radius - correspond au rayon du cercle formé par les planètes, autrement dit à la distance entre le centre de révolution et le centre de chaque sphère.
radiusSphere - correspond au rayon d'une planète.
num - correspond au nombre de planètes qu'il faut créer dans le cercle.

L'algorithme va ensuite initialiser la gémométrie d'une sphère en fonction du rayon donné, ainsi que l'objet 3D qui va contenir toutes les sphères. L'objet 3D est très important car c'est lui qui va déterminer le point de pivot pour que la rotation s'effectue correctement, c'est-à-dire autour du centre de révolution :

var geom = new THREE.SphereGeometry(radiusSphere, 16, 16);
var res = new THREE.Object3D();

Ensuite, l'algorithme va siplement effetuer une boucle for pour créer toutes les planètes. La boucle va de 0 à num - 1, pour que le nombre de sphère soit égal au nombre désiré.

for (let i = 0 ; i < num ; i++)
{
    var sphere = new THREE.Mesh(geom, createShaderMaterial("phongDiffuse", light));
    sphere.position.x = radius * Math.cos(i * ((2*Math.PI)/num));
    sphere.position.y = radius * Math.sin(i * ((2*Math.PI)/num));

    res.add(sphere);
}

À chaque tour de boucle, l'algorithme utilise l'équation paramétrique de cercle :

x = centreX + rayon * cos(angle)
y = centreY + rayon * cos(angle)

Cela nous permet de déterminer la position de la sphère. Ici, on considère que le centre du cercles est à l'origine, car notre objet 3D se trouve par défaut à cet endroit.
L'angle défini par i * (2*Math.PI)/num est déterminé en fonction du nombre de sphères au total et du numéro de la sphère courante ; cela nous permet de répartir les sphères de manière uniforme dans le cercle.
La fonction createShaderMaterial("phongDiffuse", light) est une fonction définie ailleurs dans le script, qui retourne un matériel utilisant un shader personnalisé qui donne un effet cartoon cel-shading. Cela nous permet d'utiliser ce shader sur nos sphères.
Enfin, l'algorithme ajoute la sphère nouvellement créée dans l'objet 3D.

Nous n'avons plus qu'à déplacer notre objet 3D à la position voulue, et à le retourner pour pouvoir l'utiliser et l'ajouter à la scène. Comme les sphères ont été placées autour de l'objet 3D, nous pouvons le bouger et le tourner à notre guise ; les sphères suivront l'objet de manière cohérente :

res.position.copy(center);
return res;

Nous faisons une copie du vecteur center, sinon il est passé par référence, et ce n'est pas ce que nous voulons.

Graphe de Scène

Scène
├─ Caméra
├─ Lumière directionnelle
├─ La Terre
├─ Mars
├─ Uranus
├─ Jupiter
├─ Pluton
├─ Étoile
├─ Jongleur
├─ Explorateur
├─ Cercle 1
   ├─ Planète a1
   ├─ Planète a2
   ├─ Planète a3
   ├─ Planète a4
    .
    . (nombre défini par l'utilisateur)
    .
├─ Cercle 2
   ├─ Planète b1
   ├─ Planète b2
   ├─ Planète b3
   ├─ Planète b4
    .
    . (nombre défini par l'utilisateur)
    .