Creative Coding

Creative
Coding

Introduction CSS + JS

2025 - 2026

Creative
Coding ?

Idea

[image or embed]

— Mario Carrillo (@marioecg.bsky.social) September 10, 2025 at 9:55 AM

Le projet

Le deal

Avant de vous lancer dans le code, je vous demande de constituer un dossier d’inspirations:

  • Rassemblez des images, vidéos, extraits artistiques ou références visuelles qui vous inspirent.
  • Ce dossier servira à orienter vos choix créatifs (formes, couleurs, mouvements, ambiance, etc.).

C'est non

  • particles.js
  • Une librairie qui le fait a votre place
  • IA (dans une certaine mesure)

Nos outils

JS 101

Concepts basiques

Créer un
élement HTML

Générer un nombre aléatoire

// Retourne un nombre décimal entre 0 et 0.99999…
let randomNumber1 = Math.random();

// Retourne un nombre décimal entre 0 et 9.99999…
let randomNumber2 = Math.random() * 10;
Math.random

Arrondir un nombre

Avoir un nombre décimal nous permet entre autre d'être précis. Dans certains cas il sera nécessaire d'avoir des nombres entiers.

Ex: accéder aux éléments d'un tableau, éviter les demi-pixels, améliorer les performances, etc. 
Math.floor( 10.50 );
Math.floor( -3.65 ); // -4

Math.ceil( 10.50 );  // 11
Math.ceil( -3.65 );  // -3

Math.round( 10.50 ); // 11
Math.round( -3.50 ); // -3
Math.round( -3.65 ); // -4
Math.floor Math.ceil Math.round

Position aléatoire

Les template literals permettent d'insérer du code dans une chaîne de caractères

Taille aléatoire

Boucle simple

for( let i = 0; i < 3; i++ ) {
  console.log( i );
  // 0 pour la première itération
  // 1 pour la seconde
  // 2 pour la dernière
}

Plus de particules

Récupérer un élément aléatoire dans un tableau

const getRandomElement = ( array ) => {
  const randomIndex = Math.floor( Math.random() * array.length );
  return array[ randomIndex ];
}

Plus de couleurs

CSS Keyframes



@keyframes toRight {
  from {
    transform: translate( 0%, 0% );
  }
  to {
    transform: translate( 0, 100% );
  }
}
.myElement{
  animation: toRight .32s ease;
}

Animer les particules

Délais aléatoire

CSS Custom properties

Syntaxe

// Crée les variables de manière globale
:root{
  --background: red;
}
 
.myElement{
  background: var(--background);
}
CSS custom properties

En pratique

Récupération &
modification

Pointer custom

Normaliser un nombre

Cela permet de retranscrire un nombre entre 0 et 1, basé sur une valeur maximale. L'avantage est de pouvoir travailler avec n'importe quelle unité par la suite, que ce soit en pixel, en pourcentage, etc.

const mouseX = 643,
      windowWidth = 1440;
const normalizedMouseX = mouseX / windowWidth;
// Retourne 0.446527777777778

You,
now

1/9

1/1