Creative
Coding

Particules

2025 - 2026

Inspirations

Tweakpane

Première partie

Documentation

Pourquoi ?

Tweakpane permet de modifier des valeurs directement depuis un menu accessible directement sur votre site, ce qui permet de visualiser différents résultats.

Types de valeurs

Number
String
Boolean
Color
Point (vector)

Mise en place

Une fois la librairie chargée (import, CDN, local, etc.), on peut créer une variable pane:


											const pane = new Pane();

Getting started

Javascript object

Avant de pouvoir manipuler des valeurs, il faut créer une variable de type objet qui contiendra les valeurs à modifier pour notre pane.


											// Un objet vide.
const values = {};

Object

Notre exemple

Mettons en place un rectangle carré de 100 sur 100 au centre de notre canvas:

Les nombres

On va ajouter une valeur (ou propriété) de type Number, qui représentera la largeur de notre rectangle:


												// Défini la propriété width = 100
  const values = {
    width: 100
  };

  // Pour accéder à une propriété d'un objet
  // on écrit le nom de la variable suivi d'un point
  // puis du nom de la propriété.
  console.log( values.width );

Lier une propriété

Maintenant il faut dire à Tweakpane via la méthode addBinding( ) qu'on veut modifier la propiété width de notre objet values:

addBinding( )


												// Défini la propriété width = 100
  const values = {
    width: 100
  };

  // addBinding prend 2 paramètres:
  // L'objet qui contient nos proprétés
  // et le nom de la propriété à lier
  // sous forme de string (entre guillements)
  pane.addBinding( values, 'width' );

Ajouter un évènement ciblé

Notre fonction draw( ) n'est appelé qu'une seule fois pour le moment, ce qui empêche de visualiser les changements de valeurs de notre objet. On va rajouter un évènement via la méthode on( ) sur notre propriété width:

Events


											pane.addBinding( values, "width" )
  // On ajoute un évènement via '.on()'
  // Attention ceci est une méthode en chaine,
  // donc on mettra le ';' à la fin.
  .on( 'change', ( event ) => {
    // Vérifie que c'est le dernier
    // changement de notre valeur
    if( event.last ){
      // Affiche la nouvelle valeur
      // dans la console
      console.log(event.value);
    }
  } );

Range - Min & Max

Par défaut les nombres créent des champs simples dans Tweakpane. Parfois on voudra un champ de type range, qui permettra de jouer entre une valeur minimum et maximum:

Range


											const values = {
  width: 100
};

// On passe entre crochets un objet d'options
// avec 2 propriétés, min et max.
pane.addBinding( values, 'width', {
  min: 10,
  max: 200
});

Range - Step

En plus de min & max, on peut définir une propriété step qui défini la valeur d'incrémentation:

Step


											const values = {
  width: 100
};

// On passe la propriété step qui
// défini la valeur d'incrémentation
pane.addBinding( values, 'width', {
  step: 5,
  min: 10,
  max: 200
});

Les couleurs

Pour ajouter une couleur à modifier, le plus simple est définir une propriété avec une valeur de type string en hexadécimal

ex: #6FFFE9

Color


											// Défini la propriété width = 100
// Défini la propriété color = "#6FFFE9"
const values = {
  width: 100,
  color: "#6FFFE9"
};

// On passe la propriété color
pane.addBinding( values, 'color' );

Ajouter un évènement global

On peut aussi ajouter un évènement sur toute nos valeurs:


											pane.addBinding( values, "width",
  {
    min: 10,
    max: 300,
    step: 5
  }
)} );

pane.on( 'change', (e) => {
  // On fait quelque chose
} );

Les booleans

Un boolean est une valeur vrai ou faux. Cela permet d'activer / désactiver un bout de code en vérifiant sa valeur. Deux valeurs possible true ou false sans guillement.

Tweakpane créera un champ de type checkbox.

Boolean


											// Défini la propriété width = 100
// Défini la propriété color = "#6FFFE9"
// Défini la propriété isStroked = false
const values = {
  width: 100,
  color: "#6FFFE9",
  isStroked: false
};

// On passe la propriété isStroked
pane.addBinding( values, 'isStroked' );

Les classes JS

Classe ?

Les classes en JS permettent de créer des objets avec des propriétés et des méthodes.

Classes

Objet ?

Un objet permet de stocker et manipuler des données dans une variable. Il est plus facile à gérer que des dizaines de variables directement dans votre code.

Objets


											// Crée une variable "myPokemon" qui contient
// un objet d'informations sur mon pokemon.
const myPokemon = {
  name: "Carapuce",
  canEvolve: true,
  nationalNumber: 007,
  types: [ "eau" ],
  evolution: {
    name: "Carabaffe"
  }
};


											// Pour accéder à nos propriétés, vous utiliser
// le nom de votre variable qui contient votre objet
// suivi d'un point "." et du nom de la propriété qui vous intéresse
// {myObject}.{property}

console.log( myPokemon.name );
// Affiche 'Carapuce' dans la console

console.log( myPokemon.evolution.name );
// Affiche 'Carabaffe' dans la console

Créer une classe

Une classe nous permettra de créer autant d'objets, ou instance, que nous le voulons, sans devoir réécrire tout les données à la main.

Class & contructor

La base d'une classe, c'est de définir la méthode contructor. Elle nous permet de déterminer les données qui doivent être mises en place à la création de notre objet.

Déclaration


											// 'class' est le mot clé pour définir une classe,
// comme 'var', 'let' ou 'const' pour les variables.
class Pokemon{
  constructor(){
  }
}

Propriétés & opérateur new

Notre classe crée un objet vide pour le moment, rajoutons une propriété name.

Opérateur new


											class Pokemon{
    constructor(){
      // 'this' fait référence à notre instance = notre futur objet.
      this.name = 'Carapuce';
    }
  }

  // L'opérateur new permet de créer une nouvelle
  // instance de notre classe.
  const myPokemon = new Pokemon();

  // Affiche 'Carapuce' dans la console
  console.log( myPokemon.name );

Dynamiser avec les paramètres

Pour l'instant, notre classe retourne toujours un pokemon qui a pour nom Carapuce. Rajoutons un paramètre dans notre méthode contructor pour changer cela.

paramètre


											class Pokemon{
// On rajoute un paramètre qu'on peut passer
// avec l'appel du constructor.
  constructor( dynamicName ){
    // dynamicName peut être utilisé
    // pour définir une propriété.
    this.name = dynamicName;
  }
}

// Créeons un 'Salamèche'
const myPokemon = new Pokemon( 'Salamèche');

// Affiche 'Salamèche' dans la console
console.log( myPokemon.name );

Méthodes & opérateur this

Une méthode est une fonction dans un objet. Le côté pratique c'est qu'elle a toujours accès aux propriétés (=contexte) de l'objet dans lequel elle est définie grâce à l'opérateur this. Ajoutons une méthode appear( ):

This


											class Pokemon{
    constructor( dynamicName ){
      this.name = dynamicName;
      this.appear = () => {
        return `Un ${ this.name } sauvage apparaît !`;
      }
    }
  }

  // Créeons un 'Salamèche'
  const myPokemon = new Pokemon( 'Salamèche');

  // Affiche 'Un Salamèche sauvage apparaît !
  console.log( myPokemon.appear() );

Liste d'objets

Maintenant que notre classe fonctionne correctement, nous pouvons créer plusieurs instances facilement:


											class Pokemon{…};

// Crée un tableau vide.
const pokedex = [];

// Rajoute des pokemons (=instance) dans notre pokedex
pokedex.push( new Pokemon( "Pikachu" ) );
pokedex.push( new Pokemon( "Roucool" ) );

Traverser une liste d'objets

Il existe une boucle spécialement faite pour traverser des tableaux: for…of

for…of


											class Pokemon{…};

// Crée un tableau vide.
const pokedex = [];

// Rajoute des pokemons (=instance) dans notre pokedex
pokedex.push( new Pokemon( "Pikachu" ) );
pokedex.push( new Pokemon( "Roucool" ) );

Creative Coding