H.C.A

Introduction

HTML & CSS avancé

Introduction

2024 - 2025

Dossier HTML-CSS

L'aléatoire

ou Random

Générer un
nombre aléatoire

JS

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

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

P5JS

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

// Retourne un nombre décimal entre 0 et 10
consts randomNumber2 = random( 0, 10 );
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.

JS

Math.floor( 10.50 ); // 10
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

P5JS

floor( 10.50 ); // 10
floor( -3.65 ); // -4

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

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

Lisiblité & variables

Pour le moment le code est simple et lisible, cela ne durera pas longtemps. Pensez à stocker vos valeurs calculées (random, round, etc.) dans des variables: en plus d'assurer le lisibilté, vous pourrez facilement les modifier et garder votre code propre.

var let const

Condition
vrai-faux

En combinant random et round on peut facilement créer une condition vrai ou faux. En code 0 sera considéré comme false et 1 comme true.

if…else

JS

const isTrue = Math.round( Math.random() ); // Retourne 0 ou 1

// Si la variable isTrue est vrai (ou égale à 1 )
if( isTrue ) {
  // lance le bloc de code qui sera entre crochet

// Si non
} else{
 // Une autre logique
}

P5JS

const isTrue = round( random() ); // Retourne 0 ou 1

// Si la variable isTrue est vrai (ou égale à 1 )
if( isTrue ) {
  // lance le bloc de code qui sera entre crochet

// Si non
} else{
 // Une autre logique
}

Plus de
particules

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
}
for P5JS exemples

Élément aléatoire dans un tableau

JS

const games = [ 'Dead Space', 'Sea of Stars', 'Marvel Rivals' ];

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

const randomElement = getRandomElement( games );

P5JS

const games = [ 'Dead Space', 'Sea of Stars', 'Marvel Rivals' ];
const randomElement = random( games );

Pour la
démocratie

Tweakpane

Première partie
🪦💐 dat.GUI
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();
Tweakpane - 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' );

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:

// Défini la propriété width = 100
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:

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

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

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: #000000):

// Défini la propriété width = 100
// Défini la propriété color = '#FF204E'
const values = {
  width: 100,
  color: '#FF204E'
};

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

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. 
// Défini la propriété width = 100
// Défini la propriété color = '#FF204E'
// Défini la propriété isRounded = false
const values = {
  width: 100,
  color: '#FF204E',
  isRounded: false
};

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

Again !