Generative Design

Formes complexes

2526 · INMI · Dekens Antoine

Les objets

C'est quoi ?

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

Traits et formes complexes

Trait simple

Pour faire un simple trait, il faut définir un point de départ et au moins un point d'arrivée.

// Indique que nous commençons une nouvelle forme
ctx.beingPath();

// Le point de départ
ctx.moveTo( x, y );

// Le point d'arrivée
ctx.lineTo( x, y );

// Dessine le trait
ctx.stroke();

ctx.moveTo( ) ctx.lineTo( )

Forme complexe

lineTo( ) peut être appelé plusieurs fois de suite pour connecter plusieurs points les uns à la suite des autres.

	// Indique que nous commençons une nouvelle forme
  ctx.beingPath();

  // Le point de départ
  ctx.moveTo( x, y );

  // Le prochain point à connecter
  ctx.lineTo( x, y );

  // On continue de lier des points ensemble
  ctx.lineTo( x, y );
  ctx.lineTo( x, y );
  ctx.lineTo( x, y );
  …

  ctx.stroke();

Exercices A

Trigonométrie

Coordonnées sur un cercle

Placer un point

On a besoin de 2 informations: le radius du cercle et l'angle (en radian) où le placer. Ensuite on peut récupérer les coordonées x et y via 2 formules:

	// Retourne la coordonnées
  // horizontal sur notre cercle
  const x = Math.cos( angle * Math.PI ) * radius;

  // Retourne la coordonnées
  // vertical sur notre cercle
  const y = Math.sin( angle * Math.PI ) * radius;

Plus de points

Nous allons calculer l'angle qui sépare nos particules pour savoir où les placer en divisant un tour complet (2 * PI) par le nombre de particules.

// Le nombre total de particules à placer
const nParticles = 5;

// L'angle entre nos particules (déjà multiplié par PI)
const angleStep = 2 * PI / nParticules;

Et englobant notre code d'une boucle for et en multipliant l'index avec angleStep, nous aurons nos particules parfaitement espacées autour de notre cercle.

const nParticles = 5;
const angleStep = 2 * PI / nParticules;

for( let i = 0; i < nParticles; i++ ){
  // Mutliplier angleStep par l'index permet
  // de s'assurer d'avoir l'espacement voulu.
  const angle = angleStep * i;
  const x = cos( angle ) * radius;
  const y = sin( angle ) * radius;
}

Connecter les points

Maintenant que nous avons les coordonnées de nos points, nous pouvons les connecter entre eux via les méthodes moveTo et lineTo dans notre boucle.

Une condition if / else sera utile pour détecter le premier point.

Toolbox

Mélanger un tableau

const shuffleArray = ( array ) => {
  array.sort( () => {
    return Math.random() - 0.5;
  } );
};

const pokedex = [ 'Onyx', 'Magicarpe', 'Pikachu', 'Tortank' ];
shuffleArray( pokedex );