Introduction

  • Creative Coding
  • PRJG
  • 2627
  • Dekens Antoine

Version Alpha

Creative Coding ?

Idea

[image or embed]

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

Le cours

Nos objectifs

Le but du cours est de nous familiariser avec des techniques permettant de donner vie à nos idées créatives, au travers de plusieurs compétences et techniques en HTML, CSS et particulièrement en JavaScript. Voici quelques sujets qui seront abordés :

  • Manipulation des nombres
  • Events
  • Canvas API
  • RequestAnimationFrame
  • three.js (+ workshop AR)
  • Web Audio API (Selon notre avancement)
Pour plus d'aura : JavaScript, pas Java. Ce sont 2 langages différents ;)

Le projet

Pour l'examen, je vous demanderai de coder une expérience sur base des notions vues aux cours au travers d'un template fourni. En plus de ceci, une version imprimée et un dossier de production construit et alimenté tout au long de votre travail pour justifier de vos choix graphiques et techniques devront être présentés.

L'évaluation se fera sur base de votre remise et d'une présentation orale.

Le briefing final arrive bientôt avec des informations précises

C'est non

  • particles.js et d'autres librairies qui le font à votre place
  • S'approprier le travail d'un autre (y compris copier/coller un tutoriel)
  • IA (sauf recherches, corrections orthographiques, aide à la résolution d'erreurs et aide à la compréhension)
Tout code produit à l'aide de l'IA doit être documenté, compris et pouvoir être expliqué.

Exemples

Outils & ressources

Première mission : créer un compte gratuit sur Codepen.

  • VS code
  • Codepen
  • MDN Documenting CSS, HTML, and JavaScript, since 2005.

Révisions

Afficher un message dans la console

const message = 'Que la puissance céleste soit avec vous';

// Demande d'afficher la valeur
// de notre variable 'message' dans la console.
console.log( message );
Pensez à l'utilisez régulièrement dans l'avancement de votre projet. Cela peut rapidement vous aidez à déceler des erreurs dans votre code.
console.log()

Concaténation vs
Template literals

Dans certains cas, on aura besoin d'ajouter des informations à une string avec des données dynamiques. Commençons par une phrase simple: 

const sentence = "Un pokemon sauvage apparaît !";

Concaténation

La concaténation permet de fusionner une string et une variable. Pour cela nous utilisons l'opérateur + entre ce que nous voulons voir concaténer: 

const pokemon = "Mystherbe"
const sentence = "Un " + pokemon + " sauvage apparaît !";
// Retourne "Un Mystherbe sauvage apparaît !";

Template literals

Il existe une manière plus propre pour arriver à ce résultat, les templates literals. Le plus dur est de trouver sur votre clavier comment faire des backtick ` (ou accent grave en français). Ces symboles remplacent les habituels guillemets pour entourer une string, mais permettent de rajouter des expressions en javascript directement dans notre string via ${value}: 

const pokemon = "Mystherbe"
const sentence = `Un ${ pokemon } sauvage apparaît !`;
// Retourne "Un Mystherbe sauvage apparaît !";
Template literals

Récuperer un élément HTML

document.querySelector() retourne le premier élément du document qui correspond au sélecteur CSS spécifié entre parenthèse : 

<span class="particle"></span>

// Récupère le premier élément dans le document
// qui contient 'particle' dans l'attribut 'class'
const particle = document.querySelector( '.particle' );
querySelector()

Récuperer plusieurs éléments HTML

document.querySelectorAll() retourne sous forme de NodeList (± un tableau) tous les élément du document qui correspond au sélecteur CSS spécifié entre parenthèse : 

<span class="particle"></span>
<span class="particle"></span>

// Récupère tous les éléments dans le document
// qui contiennent 'particle' dans l'attribut 'class'
const particles = document.querySelectorAll( '.particle' );
Cela retourne un NodeList (qui ressemble à un tableau)
querySelectorAll()

Modifier le style d'un élément

Une fois un élément récupéré en javascript, nous aurons accès à plusieurs propriétés, comme style qui permet de changer la valeur d'une propriété CSS.

Nous pouvons aussi récupérer une propriété si elle est présente dans l'attribut style de l'élément.
Propriété style 
<span class="particle" style="background: yellow;"></span>

const particle = document.querySelector( '.particle' );

const textSize = 18;
// Modifie la propriété "fontSize" de notre texte 
// en utilisant les template literals pour ajouter
// la valeur numérique à l'unité "px";
particule.style.fontSize = `${textSize}px`;

// Retourne "yellow" dans la console
console.log( particule.style.background );

Récupérer la taille de l'écran

// Largeur totale de votre fenêtre
const screenWidth = window.innerWidth;

// Hauteur totale de votre fenêtre
const screenHeight = window.innerHeight;
window.innerWidth window.innerHeight

Récupérer la taille d'un élément

<section class="wrapper"></section>

const wrapper = document.querySelector( '.wrapper' );

// Largeur totale de notre élément section.wrapper
const wrapperWidth = wrapper.clientWidth;

// Hauteur totale de notre élément section.wrapper
const wrapperHeight = wrapper.clientHeight;
Element: clientWidth Element: clientHeight

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
}
Boucle for

JS 101

Concepts basiques

Notre première particule

createElement

Pour créer un élément en HTML on peut utiliser la fonction createElement() depuis l'objet document. Cette méthode prend un paramètre sous forme de string et doit être le nom d'une balise.

document.createElement

Générer un nombre aléatoire

Il existe l'outil Math qui permet d'accèder à plusieurs méthodes, dont random() qui va nous générer un nombre compris entre 0 et 1 exclu (0.99999…) : 

// 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

Taille aléatoire

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

<div class="myElement"></div>

@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

<div class="myElement"></div>

/* 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

Your turn

Bonus round

Les exercices ci-dessous seront hors notions vues aux cours. Le but est de vous challenger sur une ou plusieurs techniques en autonomie.

Ouais, c'est ça aussi le creative coding
clip-path

Pour le prochain cours

La demande

Trouver 2 sources d'inspirations lié au Creative Coding, cela peut être un post sur un réseau social, un livre, une photo, une vidéo, etc. Tant qu'il y a quelque chose de visuel c'est bon. Dans une google sheet (lien ci-dessous), chaque étudiant indiquera son nom, prénom et les 2 liens vers leurs sources. L'idée est de nourrir votre imaginaire et commencer à vous inspirer.

Nous parcourons vos trouvailles tous ensemble, pensez à pouvoir expliquer en quoi cela vous a touché particulièrement.

No stress, c'est juste un échange entre nous
Google sheet