Generative Design

Generative Design

Introduction

2526 · INMI · Dekens Antoine

Hello there

Objectifs de l'UE

L'objectif de l'UE est de vous initier en douceur à la conception visuelle et numérique, et surtout de faire de ce projet une première expérience décomplexée avec le code : l'idée est d'oser expérimenter, de voir le code comme un jeu, d'ajouter une nouvelle corde à son arc, et de découvrir qu'elle peut devenir un outil ludique et expressif.

Le projet

Créer un nouveau modèle de visage pour représenter une intelligence artificielle (IA). Cette IA doit avoir des caractéristiques uniques et une personnalité distincte.

Le but est de mettre en place un langage graphique ou direction artistique qui permet la génération d'un visage, chaque visage sera composé de différents éléments anatomiques (bouche, yeux, nez, turbine, vanne, etc.). Le visage ainsi crée sera ensuite traduit en code via la matière vue aux différents cours. Afin de diffuser ce travail et d'en assurer la promotion, une interface web représentant ce visage animé devra être mise en place pour que le public puisse intéragir avec.

Briefing INMI

Notre pote l'IA

C'est ok

  • aide à la résolution d'erreur
  • en vue d'approfondir une notion
  • génération de code sous condition de compréhension et vérification de la production IA

C'est non

  • vibe-coding
  • génération complète de code sans relecture, ni validation

Generative Design ?

Nos outils

Première mission : créer un compte gratuit sur Codepen.

Hello particle

Première particule

Mettons en place une particule en HTML et stylisons là en CSS :

Déplacer la particule

Pour pouvoir déplacer notre particule librement, nous allons utiliser la propriété position: absolute;, qui nous donne accès aux propriétés de placement top, right, bottom, left. Dans un premier temps essyons de placer notre particule dans le coin inférieur droite du .wrapper avec right: 0; bottom: 0; :

position top right bottom left

Problème, notre .particle sort du .wrapper et vient se coller au coin inférieur droit de l'écran. La position absolute fait sortir du flux notre élément, pour régler ça nous pouvons définir une position relative à un élément parent pour le transformer en une ancre. Ajoutons cela sur le .wrapper :

Centrer notre particule

Maintenant que nous sommes sûr que notre .particle à contrainte à se positionner à l'intérieur de notre .wrapper, nous pouvons la centre avec la propriété top et left avec une valeur de 50% :

Les pourcentages dans ce cas-ci représentent soit la hauteur totale (top - bottom) ou la largeur total (left - right).

Décalage

Mauvaise nouvelle : notre .particle n'est toujours pas centrée. Agrandissons la à 200px de côté et désactivons le border-radius pour mieux le visualiser :

Les propriétés top et left ont bien centrées notre .particule mais à partir de son coin supérieur gauche. Il faudrait pouvoir décaler notre particule de moitié moins de sa largeur et de moitié moins de sa hauteur. Heureusement une autre propriété CSS va venir à notre secours : translate.

translate

La propriété translate permet de définir un déplacement pour notre élément sur les axes x et y. Soit avec des valeurs absolues (px, cm, etc.) ou des valeurs relatives (em, %, etc.). Ce qui est intéressant c'est que l'unité de pourcentage ne réprésente plus la largeur ou la hauteur du parent, mais la taille de notre particule. Autrement dit, la solution à notre problème est d'ajouter translate: -50% -50%;

translate
Oui, je sais…

JS 101

Avant de revenir à notre particule, nous devons parler des bases du JavaScript.

C'est quoi le JavaScript ?

Ce langage permet de créer des intéractions avec l'HTML et dynamiser l'expérience web, comme définir une action à réaliser au clique d'un élément ou bien animer des éléments au défilement de la page.

Évitons de raccourcir JavaScript par Java, ce sont 2 langages différents.

Quelques règles

Il est important de garder en tête que le JavaScript en sensible à la casse (majuscule vs minuscule), que le code est interprétré du haut vers le bas ce qui implique que l'ordre de votre code à son importance et que chaque instruction est séparée par des  ; .

Balise script

Pour lier un fichier JavaScript nous avons besoin d'utiliser une balise script que nous allons placer dans la balise head et lui passer 2 attributs :

  • src : qui est le chemin vers notre fichier .js
  • defer : indique à notre script de s'éxécuter une fois le document analysé par le navigateur. 
<script src="/path/to/my/script.js" defer></script>

Déclaration de variables

En JavaScript nous allons manipuler des données et de différents types que nous pouvons stockées dans des variables. Elles se définissent par un mot clé suivi d'un nom arbitraire laissé à notre choix. Il existe 3 mots clés différents : 

var myVariableA;
let myVariableB;
const myVariableC;
var let const

Affectation

Pour le moment nous n'avons fait que déclarer nos variables, elles ne contiennent aucune valeur. Nous pouvons affecter une valeur via le symbole = : 

// Affecte la valeur chiffrée 10 à myVariableA
var myVariableA = 10;

// Affecte la valeur chiffrée 20 à myVariableB
let myVariableB = 20;

// Affecte la valeur chiffrée 30 à myVariableC
const myVariableC = 30;

Types

Les valeurs que nous stockons dans nos variables ont un type, voyons en 2 :

  • string
  • number
D'autres types existent, mais gardons les choses simples pour le moment.
types

string

Le type string permet d'enregistrer des chaînes de texte. Ce type de valeur est toujours entre simples ou doubles guillemets : 

// pokemonA contient une valeur de type string avec des doubles guillemets.
const pokemonA = "Pikachu";

// pokemonB contient une valeur de type string avec de simples guillemets.
const pokemonB = 'Salamèche';

number

Le type number enregistre des valeurs chiffrées sans guillements. Les nombres peuvent être entiers ou décimaux : 

// pokeballsCount contient le nombre entier 14
const pokeballsCount = 14;

// pokedollars contient le nombre décimal 1250,50 
const pokedollars = 1250.50;

// Attention il possible d'avoir des nombres entre guillemets
// mais le type rete une string.
const pokedollars2 = "1250.50";

Afficher un message dans la console

const message = 'Que la puissance céleste soit avec vous';

// Demande d'afficher la valeur
// de notre variable 'message' dans la console.
console.log( message );
Pensez à l'utilisez régulièrement durant le développement, cela peut rapidement vous aidez à déceler des erreurs dans votre code.
console.log( )

Opérations arithmétiques

Nous pouvons réaliser des opérations mathématiques, il suffit d'utiliser le bon symbole :

  • +  pour une addition entre deux valeurs
  • -  pour une soustraction entre deux valeurs
  • *  pour une multiplication entre deux valeurs
  • /  pour une division entre deux valeurs
opérateurs arithmétiques 
// la variable "a" contient le résulat de l'addition entre 10 et 5 = 15
const a = 10 + 5;

// on réutilise la variable
const b = a + 10;

Dynamiser notre particule

Le but va d'être de changer la position de notre particule de manière aléatoire via le JavaScript en 3 grandes étapes :

  1. Générer une position aléatoire
  2. Récupérer notre élement
  3. Appliquer les positions aléatoires à notre élément

Position aléatoire

Notre particule est un peu triste, quoi qu'il arrive elle est figée dans la position que nous lui avons indiqué en CSS. Et si nous pouvions la déplacer de manière aléatoire à chaque chargement ?

Générer un nombre aléatoire

Il existe l'outil Math qui permet d'accèder à plusieurs méthodes, dont random() qui va nous générer un nombre compris entre 0 et 1 exclu (0.99999…) :

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

Pour le moment notre particule est à 50% en top et left. Notre minimum et maximum sont compris entre de 0 à 100%, essayons donc de générer un nombre dans cette plage :

// Retourne un nombre décimal entre 0 et 99.9999…
const positionTop = Math.random() * 100;
const positionleft = Math.random() * 100;

Cibler notre élement

Nous avons générer des valeurs aléatoires, mais faudait-il encore savoir comment les transmettre à notre particule. Dans un premier temps nous allons devoir cibler notre élément depuis le JavaScript avec la méthode querySelector :

querySelector

document.querySelector() retourne le premier élément du document qui correspond au sélecteur CSS spécifié entre parenthèse :

<span class="particle"></span>
// Récupère le premier élément dans le document (tout notre HTML)
// qui contient 'particle' dans l'attribut 'class'
const particle = document.querySelector( '.particle' );
Cette méthode parcours le DOM (une représentation de notre HTML sous forme d'arbre de nœuds) et retourne un Element.
querySelector( ) DOM Element

Appliquer nos positions aléatoires

Nous avons les 2 premières étapes, ne reste plus qu'à lier nos positions à notre élément. Nous pouvons modifier le CSS depuis le JavaScript, une des manières est de venir changer l'attribut style d'un élément.

Attribut style

Une fois un élément récupéré en javascript, nous aurons accès à plusieurs propriétés, comme style qui permet de changer la valeur d'une propriété CSS.

Nous pouvons aussi récupérer une propriété si elle est présente dans l'attribut style de l'élément.
Propriété style Camel case 
<span class="particle"></span>
const particle = document.querySelector( '.particle' );

// Change la valeur de la propriété font-size.
// Les propriétés contenant un tiret (-) devront
// être écrites en camelCase
particle.style.fontSize = "18px";

Essayons maintenant d'utiliser nos variabels positionTop et positionLeft avec les propriétés top et left de notre .particle :

Cela n'a pas l'air de fonctionner… pourquoi ?
Il nous manque l'unité  %  à notre nombre généré pour que le CSS puisse l'interpréter.

La concaténation

Nous avons un nombre, mais pas d'unité. Heureusement nous pouvons combiner un nombre avec une chaine de caractères pour les fusionner via l'opérateur  +  :

const particle = document.querySelector( '.particle' );
const size = 18;

// Concatène la valeur de notre variable size avec la chaine de caractères "px"
particle.style.fontSize = size + "px";

// Ce qui équivaut à ceci
particle.style.fontSize = "18px";

Exercice

Faire en sorte que notre particule ait une largeur et une hauteur aléatoire.

Sans doute que les propriétés width et height seront utiles…

1/9

1/1