du 2 mars au 9 mai 2023
✍️ https://editor.p5js.org/v3ga/collections/0chtGIgKA
✍️ https://docs.google.com/spreadsheets/d/1o2iodrZ1eRMqgRZ5F2kOGk0EFqyRkUmMwBsui-VPnLk/
🕵️♂️ https://v3ga.net/p5LearnableProgramming/index_U2_L2_lines.php
C'est un projet expérimental pour montrer l'exécution pas à pas d'un programme sur quelques commandes de dessin. Utilisez la liste pour accéder aux différents exemples.
Au croisement du design graphique et de la programmation, ces cours proposeront d’utiliser l'environnement Processing dans sa version web p5.js pour créer, générer des formes géométriques afin de les imprimer à l’aide d’un robot traceur dans la lignée des pionniers de l'art génératif. Le projet final de ces cours mettra en œuvre ces techniques de programmation et l'utilisation du traceur pour produire des cartes de visites génératives.
- découverte de l'histoire de l'art génératif et plus largement du design génératif, évolutions des années 60 à nous jours.
- découverte de la programmation interactive temps réel, productions de visuels animés réagissant à des stimuli : mouvement(s), voix, ...
- apprendre et maîtriser les concepts fondamentaux de la programmation : variables, boucles, branchements, fonctions.
- apprendre à développer ses propres outils de création, création d'interface (UI) pour configurer et explorer les potentialités d'algorithmes de créations de formes graphiques.
- insérer ses productions de formes dans un workflow plus général : print, site web, installations interactives.
Le cours sera consacré au deux tiers à l'étude théorique de concepts de programmation créative avec des références graphiques artistiques et l'autre tiers à la pratique par la réalisation d'un exercice « à chaud » utilisant les notions vues.
Pour les exercices que je vous donne, le barême est le suivant (sur 10)
- rendu en temps et en heure 👉 1 point.
- respect de la consigne 👉 3 points. Le sketch doit être sauvegardé sur votre compte en ligne, l'addresse (URL) doit être insérée dans la colonne correspondante dans le document Google Sheet.
- créativité 👉 6 points. J'entends par créativité une recherche graphique personelle et/ou interactive qui peut se faire à partir de sketches vus en classe ou de références que vous trouvez en ligne.
Jeudi 2 mars 2023
- Présentation du travail de Julien Gachadoat.
- Présentation de l'environnement Processing et de son « écosystème » (notamment p5.js)
- Présentation de l'environnement de développement et premières commandes de dessin dans l'éditeur en ligne editor.p5js.org/
- repère de dessin, espace de dessin p5js / createCanvas
- dessin de formes géométriques : point, line, ellipse, rect.
- dessin de formes géométriques « composées » : beginShape / vertex / endShape
- gestion des couleurs (color) et des options de dessin(stroke, noStroke, fill, noFill, strokeWeight)
- exporter / faire une capture d'écran avec la fonction p5js / save
- A Modern Prometheus — The history of Processing by C.Reas & B.Fry
- Welcome to Processing, vidéo en anglais par Dan Shiffman pour la fondation Processing.
- Design by Numbers de John Maeda
- Ben Fry and Casey Reas
- Rune Madsen / Computational color
Choisir une des œuvres « Homages to the square » de Josef Albers pour le récréer avec du code.
Jeudi 9 mars 2023
- retour sur les notions vus au cours 01 avec le dessin d'un visage de Bruno Munari. Nous introduirons à ce sujet la notion de variable que nous reverrons dans le cours 03.
Bruno Munari est un artiste plasticien italien. Peintre, sculpteur, dessinateur, designer, il est également auteur et illustrateur de livres pour enfants (source : wikipedia)
- Animer :
- avec une fonction génératrice de nombre aléatoires : random
- avec la variable de temps frameCount et la fonction millis()
- avec les variables mouseX et mouseY pour capter la position de la souris dans le canvas.
Créez un visage dans le style de Bruno Munari en utilisant des formes géométriques. Ajouter un élément d’interactivité en utilisant la position de la souris ou la fonction random. Le visage se dessinera sur un canvas de dimensions (500,500) pixels, les couleurs à utiliser sont le noir et le blanc uniquement.
L'exercice sera à rendre pour le jeudi 23 mars au plus tard, l'addresse du sketch est à placer dans la colonne correspondante sur le document en ligne Google Sheets
mardi 11 avril 2023
Introduction à la notion de variable
- variables prédéfinies vues dans les cours précédents : mouseX / mouseY, width / height, frameCount.
- création / utilisation d'une variable dans un sketch simple.
- Variable pour la gestion d'un media :
- Chargement et affichage d'une image, gestionnaire preload()
- Utiliser la fonction imageMode() pour changer l'origine du dessin de l'image.
- utilisation des informations de couleurs pour générer une composition : effet de « pointillisme ».
Structure de branchement if-else
- exemple avec affichage d’un objet en fonction de la position de la souris.
- Modélisation d'un objet (bille), rebond sur les bords de l'écran.
- reprendre le sketch de dessin avec la souris ( https://editor.p5js.org/v3ga/sketches/-TrdeNAX9 )
- remplacer le dessin du cercle par le dessin d'un motif de votre composition. Plusieurs opérations à faire :
- dupliquer le sketch d'exemple pour le sauver dans votre sketchbook.
- créer la variable associée à l'image.
- charger l'image dans en utilisant le gestionnaire preload().
jeudi 4 mai 2023
Révision de la structure if-else
- exemple de partition de l'espace et opérateurs logiques.
Introduction à la notion de boucle
- répétition d’un élément graphique de façon « naïve ».
- utilisation d'une boucle pour réaliser le même sketch.
- création d'une double boucles imbriquées : pavage de du canvas avec un motif, modulation de la taille des motifs en fonction de la souris et du temps.
- Utilisation de cette grille pour reprogrammer une œuvre de Vera Molnar : Quatre éléments ditribués au hasard (1959)
- préparation du sketch pour l'impression avec plotter d'une carte de visite au format 80 x 55 mm
- Grilles de truchet (images)
- Jean-Noël Lafargue - L'improvisateur de tissus (1871)
Le 28 juillet 1871, face à l’Académie d’Amiens, l’ingénieur textile Édouard Gand a présenté ses travaux sur ce que l’on peut considérer comme un des tout premiers exemples — sinon le premier exemple véritable — de design génératif mécanique. - Guillaume Pelletier-Auger - Les pavages de Truchet
Errances dans les mathématiques françaises du XVIIIe siècle.
mardi 9 mai
Nous allons travailler aujourd'hui avec un canvas dont la taille est proportionnelle à la taille de la carte de visite que nous allons imprimer ( 80 x 50 mm ). Nous allons travailler avec une bibliothèque externe qui va nous permettre d'exporter notre dessin non plus à un format image mais à un format vectoriel ( format SVG ). Nous allons utiliser deux variable widthCard et heightCard qui vont respectivement représenter la largeur et la hauteur de notre carte. Comme nous travaillons en pixels, nous devons mettre à l'échelle pour que les dimensions à l'écran ne soient pas trop petites. Pour cela nous utilisons la variable s (pour scale = mise à l'échelle)
createCanvas(widthCard*s,heightCard*s,SVG); // notez le troisième paramètre SVGÀ partir de ce cours, vous travaillerez en dupliquant ce sketch : https://editor.p5js.org/v3ga/sketches/dLcxRCEFe
✍️ https://editor.p5js.org/v3ga/sketches/2aliwVF_y
✍️ https://editor.p5js.org/v3ga/sketches/Sh0OgoeS5
✍️ https://editor.p5js.org/v3ga/sketches/ormNS3fC9
Nous allons apprendre à générer des formes composées à partir d’une forme simple qui sera dupliquée et transformée. Pour cela nous allons exploiter les fonctions de transformations du repère (translate, rotate, scale), combinées avec la structure de boucle que nous avons vus la semaine passée. Nous en profiterons pour revoir les boucles pour combiner répétitions et transformations.
Nous apprendrons aussi à relier une variable à un élément d'interface graphique (UI = user interface) pour explorer plus facilement les potentialités de notre algorithme en modifiant la valeur de variables grâce à des sliders ou en déclanchant des actions avec des boutons
mercredi 17 mai
Nous allons consacrer la journée à la préparation des motifs / patterns pour l'impression avec le traceur axidraw. L'objectif sera d'avoir imprimé en fin de journée au moins deux cartes de visite pour chacun, je ferai la découpe pour la semaine prochaine. Attention, il va falloir rajouter ce bout de code pour exporter à la bonne taille physique de 80x50mm.
// ------------------------------------
function beginExport()
{
let svg = document.getElementsByTagName("svg")[0];
svg.setAttribute("width", `${widthCard}mm`);
svg.setAttribute("height", `${heightCard}mm`);
}
// ------------------------------------
function endExport()
{
let svg = document.getElementsByTagName("svg")[0];
svg.setAttribute("width", `${width}`);
svg.setAttribute("height", `${height}`);
}Et modifier en conséquence notre fonction exporter() comme suit :
function exporter()
{
beginExport();
save(`carte_grille_80x55mm_${name}.svg`);
endExport();
}Nous allons utiliser la fonte "Relief-SingleLine" pour utiliser du texte avec le traceur :
Vous devez installer la fonte outline_otf/ReliefSingleLineOutline-Regular.otf.
L'idée est de créer le recto pour afficher vos informations, au minimum le nom et le prénom et un moyen de vous contacter (numéro de téléphone, e-mail ou site web par exemple)
Sur Illustrator, vous pouvez créer un document de dimensions 80x55mm. Au moment de l'export au format SVG, il est impératif d'utiliser "Vectoriser" pour la police de caractères.
Pour chaque étudiant, vous allez créer un dossier à votre nom dans le Google Drive suivant : https://drive.google.com/drive/folders/1dWlHaBuwxas3eshLDDHliGDtOY2ftTlj?usp=sharing
Et placer les deux fichiers qui correspondent :
- au motif à imprimer avec le nom formaté comme suit carte_grille_80x55mm_Gachadoat_Julien.svg
- aux informations à imprimer avec le nom formaté carte_informations_Gachadoat_Julien.svg
Mardi 30 mai
- Révision sur le système de particules de la semaine dernière, et notamment la notion de tableaux.
- Modification pour supprimer les particules qui sont détectées hors de l'écran, au lieu de les faire rebondir.
- Gestion du flux vidéo, cas pratique avec la détection de visage issue des librairies ml5.js, notamment Facemesh.
- Intégration de notre système de particules : émission de particules lorsque l'utilisateur ouvre la bouche.
À préparer pour le mercredi 17 mai impérativement. Le travail est à faire par binôme ou seul. Pour les binômes, merci de colorer les cellules correspondant à vos noms dans le document Google Sheet. Partir du sketch https://editor.p5js.org/v3ga/sketches/ormNS3fC9 et imaginer au moins quatre motifs qui se combinent en utilisant uniquement des dessins avec des "lignes" (line, arc, bezier, triangle, etc ... avec noFill())