Rémi Scandella

Développeur web

Biographie

Je suis Rémi, j'ai 30 ans. J'ai un bac+4 en mathématiques et je suis développeur web. J'aime créer des expériences ludiques et dynamiques sur internet.

Ma vie de geek a commencé dès le plus jeune âge ; ma passion pour les jeux vidéo est née dès que j'ai su manier la manette de la Sega MegaDrive de mes frères. Ensuite, c'est une passion pour internet qui s'est manifestée dès que j'y ai eu accès, à mes 11 ans. J'étais fasciné par la possibilité de créer mon propre site internet, accessible par tout le monde, partout.

Ma troisième passion, c'est la science. Passionné par la physique, j'ai cependant préféré m'orienter vers des études de mathématiques. Finalement, c'est au développement web que je souhaite consacrer mon temps.

Après avoir développé plusieurs projets sur le web depuis 2006 — souvent des projets personnels, sans désir de les partager — j'ai décidé d'en faire mon métier.

N'hésitez pas à me contacter, quelle qu'en soit la raison ! :)

Mes compétences

HTML
CSS
PHP
SQL
JavaScript
TypeScript
2006 2008 2010 2021

Projets personnels

Icône de Solaire

Solaire

Simulation de systèmes planétaires

Solaire sur smartphone
Solaire sur PC

Solaire est une application web qui simule un système planétaire dans un style minimaliste. Une étoile et ses planètes sont générées procéduralement, ainsi que leurs lunes et anneaux, permettant l'existence d'un grand nombre de systèmes différents.

Le pourquoi du comment

Solaire a été inspiré à la fois par ma fascination pour l'astronomie et par des projets comme No Man's Sky. Avec Solaire, mon but était d'utiliser mes connaissances en développement web pour créer une expérience contemplative simple : un système planétaire dans un style minimaliste, différent à chaque visite.

Système planétaire avec étoile verte Système planétaire avec étoile jaune
Deux exemples de systèmes planétaires générés aléatoirement

Pour cela, j'utilise Javascript pour générer différents objets : une étoile, ses planètes, leurs lunes et leurs anneaux. Chaque objet a des propriétés déterminées aléatoirement : taille, vitesse, couleur, etc. Chaque objet est ensuite animé pour donner vie au système planétaire.

La première version de Solaire utilisait le langage PHP pour générer un système sur le serveur à chaque visite. Mais j'ai voulu faire de Solaire une application web qui puisse être installée sur téléphone ou PC et fonctionner sans connexion internet ; j'ai donc converti la génération du système en JavaScript pour pouvoir générer une infinité de systèmes à la demande sans jamais contacter le serveur.

Une planète rose avec des anneaux et une lune Une planète verte avec 3 lunes Une planète bleue avec des anneaux
Quelques planètes générées aléatoirement

En développant Solaire, j'ai déterminé qu'elle devait avoir deux utilités principales :

  • la plus simple, un but contemplatif : observer un système planétaire
  • mais aussi découvrir de nouvelles choses à chaque visite

Pour rendre l'observation du système plus intéressante, j'ai décidé de donner accès à diverses options d'affichage qui peuvent changer son apparence.

Liste des options d'affichage
Options d'affichage

Prenons l'exemple des ombres des planètes. La longueur de chaque ombre n'est pas aléatoire, elle est calculée selon la distance de la planète à l'étoile et la taille de celle-ci.

Une lune qui passe dans l'ombre d'une planète produisait à l'origine une ombre plus sombre (les deux ombres superposées s'additionnaient). J'ai décidé de corriger ce phénomène pour qu'une lune passant dans l'ombre d'une planète cesse d'être éclairée par l'étoile.

Ombres superposées des planètes Ombres corrigées des planètes
La superposition des ombres (première image) n'a pas lieu. À la place, un astre qui traverse l'ombre d'un autre astre n'est plus éclairé et ne produit donc pas sa propre ombre (deuxième image)

Pour arriver à cet effet visuel en CSS uniquement, j'ai dû utiliser une petite astuce : les ombres ne sont pas attachées aux planètes, mais elles vivent dans leur propre plan. Chaque ombre est d'un noir opaque, et c'est leur conteneur commun qui est transparent. Ainsi, une ombre opaque superposée à une autre ombre opaque reste opaque, puis la transparence du conteneur lui est appliquée (observé sur la deuxième image ci-dessus).

De plus, le mouvement des ombres des lunes a bénéficié d'une attention particulière. À l'origine, les lunes tournaient simplement autour de leur planète, et leur ombre était donc parallèle à celle de leur planète. Une telle approximation paraît raisonnable lorsqu'on imagine un véritable système planétaire, mais les planètes et les distances de Solaire sont beaucoup plus grandes (par rapport à la taille de l'étoile) que dans la réalité. Les ombres des lunes donnaient donc l'impression d'être incorrectement alignées (première image ci-dessous).

Ombres des lunes mal alignées Ombres des lunes bien alignées
Les ombres des lunes n'étaient à l'origine pas alignées avec l'étoile (première image), mais elles le sont désormais (deuxième image)

Pour corriger l'alignement des ombres, j'ai dû effectuer quelques calculs mathématiques pour déterminer l'animation exacte que l'on s'attend intuitivement à voir appliquée aux ombres des lunes, qui est en réalité la combinaison de trois animations :

  • la rotation de la lune autour de sa planète, à vitesse constante
  • l'oscillation de l'ombre selon la position de la lune par rapport à sa planète
  • la variation de longueur de l'ombre selon la distance de la lune à l'étoile

Après avoir programmé en CSS une animation correspondant au résultat mathématique attendu, les ombres des lunes sont maintenant correctement alignées selon la direction de leur éclairage (deuxième image ci-dessus).


Quant à la découverte de nouvelles choses à chaque visite, j'ai décidé d'incorporer un "carnet de découvertes" qui listerait les astres particuliers découverts lors de l'exploration de différents systèmes. Cette fonctionnalité est inspirée des "succès" que l'on débloque dans certains jeux vidéo en découvrant ou accomplissant certaines choses.

Carnet de découvertes presque vide
Le carnet de découvertes

La présence d'un tel carnet de découvertes m'a donné deux idées :

  • donner une description de chaque découverte, pour donner un côté légèrement éducatif / informatif à Solaire et susciter la curiosité du visiteur envers des phénomènes astronomiques réels
  • sauvegarder le système dans lequel chaque découverte a été faite, afin de pouvoir le visiter à nouveau n'importe quand

Concevoir ce système de sauvegarde de systèmes a permis non seulement de rendre chaque système revisitable, mais aussi de permettre à n'importe qui de partager un système avec quelqu'un d'autre en donnant son adresse (via un bouton de partage). Ainsi, chaque système peut être partagé pour que n'importe qui d'autre puisse visiter ce système exact.

Système planétaire avec une étoile jaune
Cliquez ici pour visiter le système exact visible sur la photo

L'adresse du système de l'image ci-dessus est "85398025394613800" : c'est simplement un nombre. Chaque système est généré ainsi, à partir d'un simple nombre. Pour garantir qu'une adresse génère toujours le même système, ce nombre est utilisé comme "graine" dans un générateur de nombres pseudo-aléatoires Mersenne-Twister, qui génère chaque donnée du système planétaire.


Toutes ces fontionnalités étant accessibles via des boutons sur l'interface, j'ai aussi placé un bouton (en forme d'œil) qui permet de cacher cette interface, afin que si le visiteur le désire, il puisse observer le système planétaire sans distraction. De plus, afin que le visiteur puisse zoomer sur le système sans que l'interface elle-même ne grossisse, j'ai dû développer ma propre fonctionnalité de zoom (utilisable avec la molette de la souris, ou en pinçant / écartant deux doigts sur écran tactile) plutôt que de me reposer sur celle incluse par défaut dans le navigateur du visiteur.