Projet
03
Hypnosis Triangles
Description
Hypnosis Triangles est un projet d'école pour un cours de generative design. Le but était de créer un poster génératif au format A4/A3 avec des pattern différents, en respectant quelques consignes, comme avoir des facteurs minimum différents que l'utilisateur peut changer pour générer un nouveau poster.
Ce que j'ai imaginé : des triangles équilatéraux qui tournent à des vitesses décroissantes depuis le centre, avec une interpolation de couleur entre deux teintes et une apparition progressive. Tous les paramètres sont contrôlables en temps réel via un panneau.
Features
-
01
Framework Poster
Classe
Postermaison qui gère le format A4/A3, les marges, le footer typographique et le rendu composite entre canvas intérieur et canvas de sortie. -
02
Modes 2D & 3D
Deux contextes de rendu interchangeables : Canvas 2D natif ou Three.js — activables via un seul paramètre sans changer la logique du framework.
-
03
Contrôles Tweakpane
Panneau de contrôle live avec paramètres couleurs, nombre de triangles, incrément de taille, délai de stagger et vitesse de rotation — chaque changement redessine en temps réel.
-
04
Animation staggerée
Apparition progressive des triangles avec délai cumulatif par indice et fade-in fluide via
requestAnimationFrame, chaque triangle tournant à une vitesse proportionnelle à sa taille. -
05
Interpolations de couleur
Dégradé linéaire entre deux couleurs calculé par interpolation RGB sur l'ensemble des triangles, avec randomisation des couleurs de départ à chaque génération.
-
06
Export haute résolution
Export PNG au format A4 ou A3 en haute résolution via un canvas de rendu séparé, incluant le footer avec titre, nom et classe — téléchargement automatique au clic.
Process
-
01
Architecture du framework
Conception des classes
Canvas,PosteretPanelen modules ES6 — séparation claire entre la gestion du canvas, la logique de poster et l'interface de contrôle. -
02
Exploration visuelle
Recherche du concept génératif : triangles équilatéraux concentriques avec rotation différentielle — hypnose visuelle obtenue par la combinaison des vitesses et de l'interpolation de couleur.
-
03
Paramétrage & animation
Intégration de Tweakpane pour exposer les variables clés, mise en place de la boucle d'animation avec gestion du stagger et des opacités progressives par triangle.
-
04
Export & finitions
Implémentation de l'export PNG A4/A3 haute résolution avec canvas de rendu dédié, footer typographique en Clash Display et téléchargement automatique nommé.