Generative Design

Generative Design

Particules

2526 · INMI · Dekens Antoine

Inspirations

Créer une particule

Nous savons déplacer aléatoirement une particule déjà présente dans notre HTML. Et si nous voulions la créer depuis le JavaScript ?

createElement

Pour créer un élément en HTML on peut utiliser la fonction createElement( ) depuis l'objet document. Cette méthode prend un paramètre sous forme de string et doit être le nom d'une balise.

document.createElement

Essayons donc de créer une balise span : 

// Crée une balise 'span' et la stocke 
// dans une variable 'particle'
const particle = document.createElement( 'span' );
On crée un span mais jamais on ne l'a ajouté à notre HTML…

append

Heureusement la méthode append( ) permet d'ajouter un élement dans un autre. Nous allons donc cibler notre div.wrapper et ajouter notre span :

append 
<div class="wrapper">
  <!-- <span class="particle"></span> -->
</div>

// Cible et stocke l'élément .wrapper
const wrapper = document.querySelector( '.wrapper' );

// Crée une balise 'span' et la stocke 
// dans une variable 'particle'
const particle = document.createElement( 'span' );

// Ajoute notre balise 'span' dans la balise 'div.wrapper'
wrapper.append( span );
Ne pas oublier de commenter notre span.particle déja présent dans notre HTML.
Il nous manque encore une chose : l'attribut class sur notre span.

className

Cette méthode permet de définir l'attribut class d'un élément en lui passant une chaîne de caractères avec les classes désirées :

Attention que cette méthode efface la valeur précédente de l'attribut class.
className 
const wrapper = document.querySelector( '.wrapper' );
const particle = document.createElement( 'span' );

// Défini la valeur "particle"  pour 
// l'attribut "class" de notre span 
particle.className = "particle";

wrapper.append( span );

Nous avons maintenant une particule créé dynamiquement, rajoutons la partie qui s'occupait de sa position aléatoire :

Exercice A

Créer une deuxième particule, lui appliquer une position aléatoire et l'ajouter dans l'élément .wrapper.

Plus de particules

100 particules

À force de nous répéter, notre code devient redondant, peu lisible et difficilement maintenable. Si nous voulons avoir 100 particules il va falloir trouver une façon d'automatiser cette répétition.

Le principle de boucle

Un concept présent dans presque tous les langages de programmation est celui de la boucle. Cela permet d'éxécuter du code de manière répétée basé sur un certain nombre d'itération.

Boucles et itérations

Boucle for

Une façon d'écrire une boucle passe par le mot-clé for suivi de parenthèses contenant 3 expressions séparées par des ; et une instruction entre accolades. Les 3 expressions sont :

  1. Initialisation : défini un compteur.
  2. Condition : une condition lié à notre compteur. Tant qu'elle n'est pas atteinte, la boucle répète l'instruction.
  3. Expression finale : met à jour la valeur du compteur.
for 
// Une boucle qui initie un compteur "i" à 0.
// Tant que le compteur "i" est strictement plus petit que 3
// cela incrémente la valeur de "i" de 1 et éxécute l'instruction entre accolade.
for( let i = 0; i < 3 ; i++ ){

  // Affiche la valeur de i dans la console.
  console.log( i );
}
Strictement plus petit

Incrémentation (++)

let i = 0;

// incrémente la valeur de i par 1
i++;

// L'équivalent de
i = i + 1;
incrémentation (++)

Maintenant que nous savons comment répéter un bout de code, nous avons la possibilité de créer rapidement 100 particules. Il suffit d'écrire notre boucle avec une condition strictement plus petite que 100 et y ajouter notre logique de création de particule entre accolade :

CSS Keyframes

La règle @keyframes permet de définir une animation complexe en précisant les différentes étapes. Cela permet d'avoir un contrôle plus précis qu'une transition simple en CSS.

Syntaxe

Pour écrire une nouvelle animation, nous devons commencer par @keyframes suivi d'un nom arbitraire et des différentes étapes entre accolades. Ces étapes sont définies par les mots-clés from et to ou par des pourcentages et doivent contenir les propriétés CSS qui doivent être animées.

@keyframes

Mettons en place une animation qui déplace notre particule de gauche à droite :

@keyframes leftToRight {
  from{
    /* Au départ de l'animation, l'élément aura la propriété left: 0%; */
    left: 0%;
  }

  to{
    /* À la fin de l'animation, l'élément aura la propriété left: 100%; */
    left: 100%;
  }
}
Pourquoi ça ne peut pas marcher du premier coup ?

Appliquer @keyframes

@keyframes permet de définir des animations, mais il faut encore les appliquer à un élément dans notre CSS. Cela se fera via la propriété raccourcie animation 

animation 
.particle{
  /* Passe le nom de l'animation, sa durée en seconde et le type d'easing. */
  animation: leftToRight 1s linear;
}

animation-iteration-count

Cette propriété permet de définir le nombre de fois que l'animation sera jouée ou alors de manière infinie avec le mot-clé infinite.

animation-iteration-count 
.particle{
  animation: leftToRight 1s linear;

  /* L'animation se joue de manière infinie*/
  animation-iteration-count: infinite;
}

animation-delay

Cette propriété permet de définir en seconde ou milliseconde un délai avant de lancer l'animation.

Ce délai n'est appliqué qu'une seule fois au lancement de l'animation, et pas entre chaque itération.
animation-delay unité de temps CSS 
.particle{
  animation: leftToRight 1s linear;
  animation-iteration-count: infinite;

  /* Ajoute un delay d'une seconde */
  animation-delay: 1s;
}

animation-direction

Cette propriété permet de définir dans quelle direction l'animation doit se jouer, voici les valeurs possibles :

  • normal : l'animation se joue dans le sens prévu (from -> to)
  • reverse : l'animation se joue de manière inversée (to -> from)
  • alternate : l'animation se joue en ping-pong (from -> to -> from)
  • alternate-reverse : l'animation se joue en ping-pong inversé (to -> from -> to)
animation-direction 
.particle{
  animation: leftToRight 1s linear;
  animation-iteration-count: infinite;
  animation-delay: 1s;

  /* Joue l'animation en ping-pong */
  animation-direction: alternate;
}

Animation de croissance

Créons une nouvelle animation via @keyframes nommée "grow" avec ces propriétés :

@keyframes grow{
  from{
    scale: 0;
  }
  to{
    scale: 1;
  }
}
scale

Exercices

1/6

1/1