session 2 ; variables et répétition
partie 2

Variables et répétition

Manipuler les valeurs, puis répéter une instruction en la faisant varier.

Ce qui casse

Changez la taille de votre dernier sketch :

createCanvas(600, 900);   // au lieu de 600, 600 par ex.

Si plus rien n'est calé, il faut remplacer les valeurs absolues par des valeurs relatives (utilisants width et height).

Variables

Documentation : variables & scope

Paramétrer sa composition

Retour sur votre sketch de la session 1.

reprise
  • Centralisez dans le scope global les valeurs répétées ou liées entre elles
  • Donnez-leur des noms explicites
  • Remplacez les positions absolues par des calculs à partir de width et height
  • Faites le test : changer les dimensions de votre canvas

→ 5 minutes

Boucles & tableaux

Documentation : boucles & tableaux

Variation

Documentation : variations

Exercice ; série

contraintes
  • Canvas 600 × 800 (format vertical)
  • Une boucle for
  • Deux paramètres visuels qui varient dans la boucle
  • 2 couleurs uniquement
  • image fixe → ajoutez noLoop() dans votre setup()

Méthode

01

Partir d'une répétition simple.

02

Faire dépendre un seul paramètre de i.

03

Ajouter le second paramètre seulement quand le premier est maîtrisé.

04

Sauvegarder une version qui marche avant de tenter autre chose. N'hésitez pas à dupliquer votre sketch pour tester toutes les variations que vous voulez.

Le système doit être configurable : on doit pouvoir changer le nombre d'éléments et régler les paramètres facilement.



Si vous êtes bloqué·e

→

Isoler

Reproduire la partie qui ne marche pas dans un sketch vide. Si elle marche seule, le problème vient d'ailleurs.

→

Afficher

console.log() sur la valeur concernée.

→

Reformuler

Exprimez en une phrase ce que le système est censé faire avant de continuer à coder.

Exercice ; grille

contraintes
  • Canvas 600 × 600 (format carré)
  • Une grille (deux boucles for)
  • 1 seule primitive 2D (au choix)
  • 2 couleurs uniquement
  • image fixe

Sur les LLMs

N'utilisez pas de LLM pour faire ces expérimentations graphiques. Tout l'intérêt est de vous forcez à réfléchir différement, pour vous ouvrir de nouveaux horizons et pour vous différencier des autres designers. Tout le monde a accès à un LLM, tout le monde n'a pas accès à un apprentissage dédié du creative coding.

Vous devez être en mesure d'expliquer chaque ligne de votre code. Pour le moment, il ne s'agit pas du resultat visuel mais de votre capacité à formuler ce qui fait une image et de faire l'aller retour entre les mots et le code.

Bien entendu, n'hésitez pas à demander de l'aide. Toutes les questions sont légitimes, rien n'est simple ou évident dans ce qu'on fait ici.