Animations et Interactivité avec p5.js

Animations CSS

• Transitions CSS : position simple, suivre la souris, position aléatoire
• Fonctions de timing : linear, ease, ease-in, ease-out, steps…, Cubic bezier, exemple
• Animations par keyframes : cycle de couleurs, gradient animé
• Déclencher une animation au scroll avec Intersection Observer : exemple

Canvas API et p5.js — Contexte

• Contextes de rendu : Canvas API (cercle suivant la souris, même chose avec p5.js), WebGL, WebGPU
• Autres outils : ShaderToy, Shader Park, The Book of Shaders, TouchDesigner
• Concepts mathématiques : Algèbre linéaire, Infographie temps réel
• p5.js : site, éditeur en ligne, référence, primitives 2D, sketches d'exemple
• Algorithmes de creative coding

p5.js — Concepts et exemples

• Structure de base : setup(), draw(), createCanvas(), windowWidth / windowHeight, windowResized()
• Primitives graphiques : rect(), circle(), ellipse(), line(), point(), triangle(), arc() — exemples
• Couleurs et styles : background(), fill(), stroke(), noFill(), noStroke(), strokeWeight(), colorMode(HSB)
• Texte : text(), textSize(), textAlign(LEFT | CENTER | RIGHT, TOP | CENTER | BOTTOM)
• Interaction : mouseX / mouseY, mousePressed(), keyPressed(), key — exemple
• Hasard et bruit de Perlin : random(min, max), noise(x, y, z)
• Correspondance de valeurs : map(val, min1, max1, min2, max2), constrain(val, min, max)
• Interpolation : lerp(start, end, t) — graphique en barres avec transition au clic
• Fonctions trigonométriques et easing : sin(), cos(), TWO_PI — Graphtoy, shaping functions, fonctions d'easing
• Opérateur modulo % — cycler dans un tableau, grilles, rythmes — cycle de couleurs
• Données 1D en grille 2D : row major (col = i % COLS, row = floor(i / COLS)), col major (row = i % ROWS, col = floor(i / ROWS))
• Transformations d'espace : push() / pop(), translate(), rotate(), scale() — système solaire
• Formes personnalisées et courbes : beginShape(), vertex(), curveVertex(), endShape(CLOSE) — construction d'un cercle, formes animées avec noise
• Mouvement sans vecteurs — variables x, y, vx, vy : rebond, wrap, pong
• Vecteurs 2D : createVector(x, y), .add(), .sub(), .mult(), .div(), .mag(), .normalize(), .setMag(), p5.Vector.dist(), .heading(), .lerp() — exemple steering vers la souris
• Steering et forces — pattern de base : p5.Vector.sub(target, pos).normalize().mult(speed), puis vel.lerp(desired, t)

Références

• kiel.d.m
• Rafael Rozendaal — Internet Works
• Nature of Code
• Coding Train
• Matt DesLauriers
• Etienne Jacob : site, instagram
• Julian Hespenheide
• Andreas Gysin

Exercice (en binômes)

• Trouver un article existant dans l'une de ces sources : actualités EPFL, blog MeteoSuisse, ou les actualités d'une autre université technique ou institution scientifique. Choisir un article dont le sujet se prête à une mise en scène graphique animée.
• Créer une proposition graphique animée en s'inspirant du contenu de l'article — soit un sketch p5.js, soit une page scroll-based avec des transitions déclenchées au scroll. Si une seule animation est trop monotone, enchaîner plusieurs séquences graphiques.
• Les animations doivent se mouvoir par elles-mêmes. L'interactivité est encouragée mais pas obligatoire.
• Le focus est sur la qualité graphique et le mouvement, pas sur la lisibilité des données.
• Pour les données météo, l'API Open-Meteo est disponible (latitude=46.2044&longitude=6.1432 pour Genève) — les données peuvent aussi être fictives.