Generative Design

Generative Design

Particules++

2526 · INMI · Dekens Antoine

Inspirations

Arrondir un nombre

const numberA = Math.round( 10.5 );   // 11
const numberB = Math.round( 10.732 ); // 11
const numberC = Math.round( 10.34 );  // 10

const numberD = Math.ceil( 10.5 );    // 11
const numberE = Math.ceil( 10.732 );  // 11
const numberF = Math.ceil( 10.34 );   // 11

const numberG = Math.floor( 10.5 );   // 10
const numberH = Math.floor( 10.732 ); // 10
const numberI = Math.floor( 10.34 );  // 10
math.round( ) math.ceil( ) math.floor( )

Les tableaux

Les bases

Définition

Les tableaux (ou array) permettent de stocker sous forme de liste des valeurs de tout types.

array

Création

On peut créer un tableau vide ou déjà rempli d'autres éléments, dans les 2 cas il faudra utiliser des crochets [ ]. Les éléments d'un tableau doivent toujours être séparées par des virgules :

Il est possible d'avoir des valeurs de différents types dans un même tableau, mais cela est a éviter. 
// Création d'un tableau vide
const pokedexA = [];

// Création d'un tableau avec différentes valeurs
const pokedexB = [ 'pikachu', 'carapuce', 'onix' ];

Ajouter un élément

La méthode push( ) des tableaux permet d'ajouter un ou plusieurs élement à la suite des autres.

Si plusieurs élément sont ajoutés, ils sont séparés par des virgules.
push 
// Création d'un tableau
const pokedex = [ 'pikachu' ];

// On ajoute deux valeurs de type 'string'
// "bulbizarre" et "margicarpe"
pokedex.push( 'bulbizarre', 'magicarpe' );

// Affiche [ 'pikachu', 'bulbizarre', 'magicarpe' ]
console.log( pokedex );

Retirer un élément

La méthode pop( ) des tableaux permet de retirer le dernier élément :

Ceci modifie la longueur de notre tableau.
pop 
// Création d'un tableau
const pokedex = [ 'pikachu', 'bulbizarre', 'magicarpe' ];

// Retire le dernière élément de notre tableau => 'magicarpe'
pokedex.pop();

// Affiche [ 'pikachu', 'bulbizarre' ]
console.log( pokedex );

Cibler un élément

Pour cibler un élement précis d'un tableau, nous devons préciser entre crochets sa position : on parle d'indice. Une fois ciblé, on peut lire ou modifier la valeur de cet élément.

On commence toujours à compter à partir de 0.
Ciblage 
// Indices:       0          1             2
const pokedex = [ 'pikachu', 'bulbizarre', 'magicarpe' ];

console.log( pokedex[ 0 ] ) // affiche 'pikachu'
console.log( pokedex[ 2 ] ) // affiche 'magicarpe'

// Modifie la valeur de l'indice 1 pour 'carapuce'
pokedex[ 1 ] = 'carapuce';

Longueur d'un tableau

Il est possible de récupérer la longueur de notre tableau via sa propriété length :

Length 
// Indices:       0          1             2
const pokedex = [ 'pikachu', 'bulbizarre', 'magicarpe' ];

// Stocke la longueur de notre tableau
const length = pokedex.length;

// Affiche 3
console.log( length );

Parcourir un tableau

Dans de nombreux cas, nous voudrons réaliser des opérations sur chaque élément de notre tableau. Nous allons découvrir un nouveau type de boucle, la for…of :

for…of 
const pokedex = [ 'pikachu', 'bulbizarre', 'onix' ];

// "Pour chaque pokemon de mon tableau pokedex
//  éxécute le code entre accolade"

// La constante pokemon contiendra la valeur
// de chacun des élements de notre tableau
// jusqu'à atteindre le dernier élement.
for( const pokemon of pokedex ){

  // Affiche d'abord "pikachu", ensuite "bulbizarre" et enfin "onix"
  console.log(pokemon);
}

Les fonctions

Introduction

Définition

Les fonctions permettent d'éxécuter une tâche précise à un moment précis. Cela permet d'améliorer le lisibilité du code, et de ne pas devoir se répéter.

On parle de méthode quand une fonction est une propriété d'un objet.
ex: Math.random( ), document.querySelector( )
Fonctions

Syntaxe

Nous allons voir comment écrire une fonction fléchée que l'on va stockée dans une constante et ceci pour valeur ( ) => { }. Entre parenthèses peuvent se situer des paramètres, et du code à éxécuter entre les accolades.

Il existe des fonctions nommées.
Fonctions fléchées 
// Une fonction stockée dans la constante 'myFunction'
const myFunction = () => {

  // Affiche dans la console "Un pokemon sauvage apparaît"
  console.log( "Un pokemon sauvage apparaît" );
};

Appeler une fonction

Nous avons défini une fonction, mais elle ne fera rien tant qu'on ne lui aura pas demandé de se lancer. Pour se faire, il suffit de noter son nom de variable directement suivi de parenthèses :

Appeler une fonction 
// Une fonction stockée dans la constante 'myFunction'
const myFunction = () => {

  // Affiche dans la console "Un pokemon sauvage apparaît"
  console.log( "Un pokemon sauvage apparaît" );
};

// Lance notre fonction "myFunction"
myFunction();

// Lance la méthode random() de l'objet Math
Math.random();

Paramètre(s)

Une fonction peut attendre un ou plusieurs paramètres, ce sont des valeurs que l'on passe à notre fonction lors de l'appel pour qu'elle puisse les utiliser ensuite dans le code situé entre ses accolades.

Il faudre prévoir ces paramètres à la définition de la fonction.

Paramètre(s) 
// Une fonction stockée dans la constante 'myFunction'
// qui attend un paramètre "pokemon" 
const myFunction = ( pokemon ) => {

  // On utilise le paramètre dans une concaténation
  // pour dynamiser notre phrase.
  console.log( "Un " + pokemon + " sauvage apparaît" );
};

// Lance notre fonction "myFunction" avec
// un paramètre de type string 'Bulbizarre'

// Affiche "Un Bulbizarre sauvage apparaît"
myFunction( "Bulbizarre" );

// Affiche "Un Pikachu sauvage apparaît"
myFunction( "Pikachu" );

Toolbox

Voici 2 fonctions à copier-coller directement dans vos projets.

Fonction random

Voici une fonction améliorée pour générer des nombres aléatoires, elle attend 3 paramètres :

  1. max : le nombre maximum que vous voulez obtenir ( par défaut 1 )
  2. min : le nombre minimum que vous voulez obtenir ( par défaut 0 )
  3. round : un boolean, s'il est true, alors le nombre sera arrondi (par défaut false)
const rand = ( max = 1, min = 0, round = false ) => {
  const n = Math.random() * ( max - min ) + min;
  return round ? Math.round( n ) : n;
};

// Retourne un nombre décimal entre 0 et 1 exclu, comme Math.random()
const randomNumberA = rand();    

// Retourne un nombre décimal entre 0 et 10 exclu
const randomNumberB = rand( 10 );    

// Retourne un nombre décimal entre 5 et 10 exclu
const randomNumberC = rand( 10, 5 ); 

// Retourne un nombre entier entre 0 et 10
const randomNumberD = rand( 10, 5, true);

Récupérer un élément aléatoire d'un tableau

En multipliant la longueur d'un tableau par un nombre aléatoire entre 0 et 1 exclu et en n'oubliant pas d'arrondir le résultat vers l'entier inférieur, nous pouvons utiliser le résultat comme indice et retouner un élément aléatoire du tableau. La fonction attend le tableau en paramètre :

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

// Un tableau de couleurs nommées
const colors = [ 'crimson', 'yellowgreen', 'dodgerblue'];

// Retourne aléatoirement 'crimson', 'yellowgreen' ou 'dodgerblue'
const randomColor = getRandomElement( colors );

Exercices

Couleurs aléatoires

Définir une palette de couleurs dans un tableau et les utiliser de manières aléatoires pour chacune de nos particules :

coolors.co

1/7

1/1