Creative Coding

Objectifs & dynamique

Pour nos 5 prochaines rencontres, le but est de vous équiper techniquement afin que vous puissiez donner vie à vos idées pour le projet CMIA. Dans la première moitié nous commençerons en douceur avec des révisions, pour ensuite découvrir des techniques plus avancées qui mélangeront à la fois de l'HTML, du CSS et du Javascript.

Dans la seconde partie, la théorie laissera place à la pratique. Le cours se transformera en mini-ateliers de suivi de projet, où je serai à vos côtés pour vous épauler et vous guider dans vos propres expérimentations.

Mini-ateliers

En vue de préparer les mini-ateliers, voici un lien vers une google sheet qui servira à noter vos idées d'expérimentations que vous souhaiteriez implémenter dans votre projet. Pour chaque idée vous indiquez :

• une explication brève mais précise
• une ou plusieurs références qui l'illustrent (site, video, image, etc.)

Outils

• Visual Studio Code
• Codepen

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

Sélecteurs simples

<section>
  <h1 id="mainTitle">Un titre</h1>
  <p class="text">Un paragraphe</p>
</section>

// Sélection par nom de balise
section{
  background: red;
}

// Sélection par nom de class
.text{
  font-size: 18px; 
}

// Sélection par id
#mainTitle{
  color: slateblue;
}

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 );

Template literals

Les template literals permettent d'interpréter du javascript à l'intérieur d'une chaîne de caractère délimitée entre accents grave. Le javascript se trouvera entre des parenthèses précédées par le symbole $ :

const currentGame = "Wuchang: Fallen Feathers";

// La phrase est complétée avec la variable "currentGame";
const sentence = `En ce moment je joue à ${ currentGame }`;
console.log( sentence );

Récuperer un élément HTML

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
// qui contient 'particle' dans l'attribut 'class'
const particle = document.querySelector( '.particle' );

Modifier le style d'un élément

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.

Récupérer la taille de l'écran

// Largeur totale de votre fenêtre
const screenWidth = window.innerWidth;

// Hauteur totale de votre fenêtre
const screenHeight = window.innerHeight;

Récupérer la taille d'un élément

<section class="wrapper"></section>

const wrapper = document.querySelector( '.wrapper' );

// Largeur totale de notre élément section.wrapper
const wrapperWidth = wrapper.clientWidth;

// Hauteur totale de notre élément section.wrapper
const wrapperHeight = wrapper.clientHeight;

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
}

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

Générer un nombre aléatoire

// 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;

Nombre aléatoire++

const rand = ( max = 1, min = 0, round = false ) => {
  const n = Math.random() * ( max - min ) + min;
  return round ? Math.round( n ) : n;
};

• max est le nombre maximum que vous voulez obtenir ( par défaut 1 )
• min est le nombre minimum que vous voulez obtenir ( par défaut 0 )
• round est un boolean, s'il est true, alors le nombre sera arrondi (par défaut false)

Normaliser un nombre

Cela consiste à ramener un nombre dans une plage comprise entre 0 et 1, basé sur une valeur maximale. L'intérêt est qu’ensuite, on peut réutiliser cette valeur normalisée dans n’importe quelle unité (pixels, pourcentages, etc.), sans dépendre de l'échelle de départ.

Exercices

Sur base du codepen suivant, modifiez uniquement le javascript pour :

1. changer aléatoirement la taille de notre particule.
2. changer aléatoirement la position de la particule sur base des dimensions de l'écran.

Exercice

Sur base du codepen suivant, modifiez uniquement le javascript pour :

1. changer aléatoirement le background de la particule depuis un tableau de couleurs.