Generative Design

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:

javascript Copier

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.

javascript Copier

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

Object

Les nombres

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

javascript Copier

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

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

javascript Copier

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

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

Les changements de la propriété width ne sont pas encore visible car on ne met pas à jour les styles de notre particule. Pour se faire, on va rajouter un évènement via la méthode on( ) pour écouter le changemetn de valeur :

Events

javascript Copier

pane.addBinding( values, "width" )

  // On ajoute un évènement via '.on()' qui écoute le changement
  // de valeur de cette propriété 'width'
  // Attention ceci est une méthode enchaînée,
  // donc on mettra le ';' à la toute fin.
  .on( 'change', ( event ) => {

      // Affiche la nouvelle valeur de 'width' 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

javascript Copier

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: 24,
  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

javascript Copier

const values = {
  width: 100
};

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

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

javascript Copier

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

// pane.addBinding( values, 'widt…

// On ajoute un nouveau addBinding sur notre couleur
pane.addBinding( values, 'backgroundColor' );

Ajouter un évènement global

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

javascript Copier

pane.on( 'change', (e) => {
  // On fait quelque chose dès qu'une des valeurs ajoutées
  // via la méthode addBinding change.
} );

Exercices