À propos

Ce site présente les résultats du workshop CodCod mené par Sarah Garcin avec les étudiants de première année, groupe 2 de l'ENSAD. Ce workshop a pour objectif de donner à voir les possibles en matière de numérique dans le champ du design et de l’art. Les étudiants ont utilisé p5js pour créer des programmes générant des images. Ce site présente à la fois les images fixes, capturées par les étudiants ainsi que les programmes ayant permis de les générer.

Déroulé

Introduction à la notion d'algorithme et à son utilisation dans le champ de l'art et du design

Introduction aux notions utiles en programmation

Les bases de p5js: https://editor.p5js.org/sarahgrcn/sketches/TgJUiD5l3

L'aléatoire, les conditions et l'animation dans p5js: https://editor.p5js.org/sarahgrcn/sketches/EJiZxHYh6

Les boucles dans p5js: https://editor.p5js.org/sarahgrcn/sketches/c5hfcQtSH

Utilisation des boucles imbriquées pour faire des grilles dans p5js: https://editor.p5js.org/sarahgrcn/sketches/pC9YMpkNQX

Sujet du workshop

Choisir un ou plusieurs sketches ci-dessous et réaliser des changements dans le code permettant de modifier le rendu de celui-ci. Produire au moins 10 images, chaque image doit être issue d’au moins une modification du code.

Les sketchs proposés

• Dessiner avec des lettres : https://editor.p5js.org/sarahgrcn/sketches/UyjOZs6a6 (dessiner avec la souris dans le sketch)
• Dessiner avec des lignes : https://editor.p5js.org/sarahgrcn/sketches/-jyubmcQ8 (dessiner avec la souris dans le sketch) 
• Dessiner avec des formes : https://editor.p5js.org/sarahgrcn/sketches/8vAi-AasK (bouger la souris et cliquer)
• Grille colorée : https://editor.p5js.org/sarahgrcn/sketches/sUkdARH7Y (recharger la page pour avoir un motif différent) 
• Des formes dans des formes : https://editor.p5js.org/sarahgrcn/sketches/-MyvY-I5Q
• Transformer une image en formes différentes : https://editor.p5js.org/sarahgrcn/sketches/leQlfVCbI
• Animer les pixels d’une image en pointillisme : https://editor.p5js.org/sarahgrcn/sketches/L1jv-2RZo
• Déformer une image, animation : https://editor.p5js.org/sarahgrcn/sketches/haXrAI5HE
• Images multiples / grille d’images : https://editor.p5js.org/sarahgrcn/sketches/x7ZvUfEXm (bouger la souris)
• Agent idiot : https://editor.p5js.org/sarahgrcn/sketches/ikUc8kLm-

Ressources et Références

• des exemples de sketches p5js et Processing
• les tutos de Daniel Shiffman
• The Nature Of Code de Daniel Shiffman, pour apprendre certaines logiques complexes de code (trigonométrie, oscillation, algorithmes génétiques, etc.)
• Generative Gestaltung (coll.), la bible du design génératif
• Référence p5js.org, la documentation de p5.js et la base de tout
• Un cours p5js en français par b2renger
• Des exemples p5js en français
• Des cours p5js en français