Le document présente le cours de design génératif proposé dans le cadre du digital lab, axé sur l'exploration du 'creative coding'. Les étudiants apprendront à maîtriser des langages de programmation comme Processing et p5.js, tout en réalisant des projets graphiques et en documentant leur processus créatif. Le programme inclut des notions théoriques ainsi que des exercices pratiques, avec une attention particulière portée à la citation des sources et à la documentation du code.

1. e-art sup | 3A & 3B
Design Génératif - 2016/2017
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Digital
Lab
Introduction aux cours :
➔ Qu’est ce que le Digital Lab?
➔ Objectifs de la matière
➔ Qu’allons-nous apprendre?
➔ Quels outils allons-nous employer?
➔ Programme du 1er
Semestre
➔ Programme du 2nd
Semestre
➔ Méthodologie de travail
➔ Code et Attribution
➔ Documenter son Code : Commenter
➔ Documenter son Code : Citer ses sources
➔ Modèles et Modules
➔ Grille de notation

2. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
« Le Digital Lab est un atelier de
création numérique par le code,
un laboratoire d’expériences
interactives et visuelles. »
Qu’est ce que le Digital Lab?

3. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Objectifs de la matière
L’objectif principal de l’option Digital Lab est de d’explorer l’étendu du “creative coding” et du design génératif. Il
s’agit de démystifier la “programmation” pour en faire un outils de conception graphique comme les autres.
L’option doit également permettre de préparer à la filière IxD où le “code” n’est qu’un outils comme un autre.
Les notions apprises durant ce cours sont les suivantes :
➔ Appréhender la programmation comme un outils
➔ Réaliser des recherches graphiques de manière itérative
➔ Savoir développer un langage graphique à partir de formes géométriques simples
➔ Appréhender les bases de l’animation (timing & spacing) à travers des comportements simples
➔ Savoir développer un système graphique génératif simple

4. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Qu’allons-nous apprendre?
L’année s’orientera autour de la programmation d’expérimentations visuelles, animées et interactives simples
(souris et clavier)
Les cours ont pour objectifs :
➔ Découvrir le domaine du design génératif
➔ Comprendre les bases de la programmation
◆ Variables
◆ Iterations
◆ Conditions
◆ Input/output
◆ Tableaux
➔ Découvrir l’expérimentation graphique animée
➔ Savoir décomposer un croquis en une série d’instructions
➔ Savoir documenter son processus de recherche et de création

5. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Quels outils allons-nous employer?
L’option Digital Lab s'orientera vers deux langages de programmation différents.
Ce choix de double techno permettra de focaliser l’apprentissage sur la compréhension et la création
algorithmique plutôt que sur un langage précis. L’année sera décomposée de la manière suivante :
➔ Semestre 1 : Processing
➔ Semestre 2 : P5JS

6. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Programme du 1er
Semestre
➔ Cours 1 : Mon Premier Sketch
◆ Découverte de l’environnement
Processing et Hello World
◆ Qu’est ce qu’une variable ?
◆ Mon premier dessin (Formes
primitive et couleurs) et l’espace
Cartésien
➔ Cours 2 : Les conditions
◆ Si, Si Sinon, Si Sinon Si
◆ Et, Ou
➔ Cours 3 : Iterations
◆ La boucle for
◆ La boucle for dans la boucle for
(Aïe)
◆ Mon premier tableau (Re Aïe)
➔ Cours 7 : À la poursuite du temps
◆ Le temps en Frame passé
◆ Le temps en Années, jours,
heures, minute, secondes, millis…
◆ Utiliser un Timer
➔ Cours 8 : Arrêtons de dessiner des
primitives
◆ Les polygons
(beginShape/endShape)
➔ Cours 9 : Mon premier moteur
physique
◆ Vecteur
◆ Bouncing Ball
➔ Cours 10 : Pour aller plus loins,
librairies et autres ressources
Le premier semestre sera dédié à la création sous Processing. Il se compose des cours suivants :
➔ Cours 4 : Aléatoire
◆ Brownien
◆ Perlin
◆ Gaussien
➔ Cours 5 : Ma première
animation
◆ Linéaire
◆ Easing simple
◆ Tween
➔ Cours 6 : Oh mon dieu de la
Trigonométrie et des angles
◆ Effectuer une Rotation
◆ Coordonnées Polaire
◆ Sinus/Cosinus
◆ Trigonométrie et calcul
d’angle ? (Aïe)

7. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Programme du 2nd
Semestre
➔ Cours 1 : Mon premier Sketch
◆ Découverte de P5JS
◆ Mon premier Skecth
◆ Comparaison avec processing
➔ Cours 2 : Interactions simple
◆ Souris
◆ Clavier
➔ Cours 3 : DOM interaction
◆ Slider
◆ Button
◆ Modifier le DOM
➔ Cours 7, 8 et 9 : Réaliser une
expérience web pour son book
◆ Réalisation d’une expérience de
design génératif pour son
portfolio
Le second semestre sera dédié à la création sous P5JS. Il se compose des cours suivants :
➔ Cours 4 : Couleurs
◆ RGB / HSB
◆ Dégradé linéaire et Radial
➔ Cours 5 : Image
◆ Affichage
◆ Mask
◆ Manipulation de Pixels
➔ Cours 6 : Vrai/Faux, 0 ou 1
◆ Boolean

8. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Méthodologie de travail
Chaque session étant des sessions 1h30 une grande partie du cours sera dédiée à l’apprentissage technique et
théorique. Le cours sera décomposé de la manière suivante :
➔ Théorie + Code (de 1h à 1h15)
➔ Q/A (de 15min à 30min)
À chaque fin de cours les étudiants devront réaliser, chez eux, trois programmes documentés reprenant l’ensemble des notions
vue en cours tout au long de l’année.
➔ Chaque étudiant devra tenir un document de recherche associé à la matière. Ce document prendra la forme d’un
document Google Doc permettant de retracer l’ensemble du travail personnel de l’étudiant effectué en cours et en dehors
du cours. Il se présente comme un carnet de bord retraçant par date l’ensemble du travail de réflexion de l’étudiant, ce
document présente les réflexions, les images de référence, les essais graphiques… et tout autre élément relevé lors de ses
exercices et apprentissage. Ce document servira de base de notation personnel par semestre.
➔ L’ensemble des documents produits par les étudiants seront accessible via le Google Drive du cours.
Vous trouverez dans ce drive l’ensemble des assets de production et de cours. L’ensemble sera également accessible sur
ixd.education

9. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Réutiliser un code est un bon exercice pratique cependant la réutilisation de code sans en avoir cité la
source est considéré comme de la copie et du plagiat.
Le développement a toujours impliqué l’utilisation de code provenant d’autres sources et nous avons la chance de profiter
d’une communauté open source. Sans le partage de savoir de cette communauté celle-ci ne grandirait pas et votre travail ne
verrait sans doute pas le jour. C’est la raison pour laquelle il est important de citer ses sources.
Tout comme vous devez citer les sources originales dans vos travaux graphiques et écrit, vous devez citer l’ensemble des
sources techniques afférant à votre projet tel que les auteurs des algorithmes, outils incorporés, documents de recherches et
cours utilisés dans la création de votre projet.
Texte original de Scott Murray, Assistant Professor, Design Department of Art + Architecture, University of San Francisco.
Traduction et adaptation : Alexandre Rivaux
Documenter son code : http://uark.libguides.com/c.php?g=78829&p=506916 - University of Arkansas
Code et Attribution :

10. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Il est important de documenter votre code. Cela vous permet de vous y retrouver plus facilement lorsque
vous devrez vous y replonger mais permettra également à d’autres développeurs ou enseignants de
comprendre votre logique.
Pour documenter votre code vous utiliserez les commentaires /* */ vous permettant de laisser des notes explicatives. L’exemple
suivant montre une fonction documentée permettant d’appliquer une rotation à un vecteur en 3 dimensions autour d’un vecteur
servant d’axe :
PVector computeRodrigueRotation(PVector k, PVector v, float theta)
{
/* Rotation du vecteur v autour du vecteur k selon l’angle theta;
Based on Onlinde-Rodrigue Formula : https://en.wikipedia.org/wiki/Rodrigues'_rotation_formula
Olinde Rodrigues formula : Vrot = v* cos(theta) + (k x v) * sin(theta) + k * (k . v) * (1 - cos(theta));
*/
PVector kcrossv = k.cross(v); //Soit kcrossv le Cross Product (produit vectoriel) des vecteur k et v
float kdotv = k.dot(v); //Soit kdotv le Dot Product (produit scalaire) des vecteur k et v
float x = v.x * cos(theta) + kcrossv.x * sin(theta) + k.x * kdotv * (1 - cos(theta)); //Position x du vecteur V après rotation
float y = v.y * cos(theta) + kcrossv.y * sin(theta) + k.y * kdotv * (1 - cos(theta)); //Position y du vecteur V après rotation
float z = v.z * cos(theta) + kcrossv.z * sin(theta) + k.z * kdotv * (1 - cos(theta)); //Position z du vecteur V après rotation
PVector nv = new PVector(x, y, z); //Vecteur V après rotation
nv.normalize(); //Normalization du vecteur V
return nv;
}
Documenter son code : les commentaires

11. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Lorsque que vous utilisez une fonction ou un code réalisé par un autre développeur vous citerez la source de la
manière suivante avant la fonction ou le code :
/***************************************************************************************
* Titre du programme d’origine : <Titre du programme d’origine>
* Auteur : <auteur>
* Date : <date si disponible>
* Version du code : <version si disponible>
* Lien vers la source : <where it's located>
*
***************************************************************************************/
Exemple :
/***************************************************************************************
* Titre du programme d’origine : OpenGL Rim Shader
* Auteur : Diederick Huijbers
* Date : 2014
* Version du code : 1.0
* Lien vers la source : http://www.roxlu.com/2014/037/opengl-rim-shader
*
***************************************************************************************/
Documenter son code : citer les sources

12. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
Modèles et Modules
Afin de permettre une production plus rapide et efficace vous disposerez de différents assets et modules qui
vous seront présentés lors des cours :
Assets :
➔ Dossier Google Drive du cours et des rendu
➔ Modèle Google Doc de documentation de projet
➔ Lien GitHub regroupant l’ensemble des cours/code du semestre
Modules :
➔ Organiser son travail, réaliser un planning en début de projet
➔ Documenter un projet

13. Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
La grille de notation se compose de la manière
suivante :
1. Documentation /5
2. Exercice (graphique) /5
3. Exercice (technique) /5
4. Méthodologie de Travail (assiduité en cours,
respect des rendus) /5
Une notation réalisée de A à E :
1. A : Excellent travail (16 à 20/20)
2. B : Bon travail - continuez comme ça (14 à 16/5)
3. C : Bien - poursuivez vos efforts (11 à 13/5)
4. D : Manque de Travail (8 à 10/5)
5. E : Aucun travail - où étiez vous? ( <= 7/5)
6. Total /20
NB : Pour tout rendu en retard un malus de -10pts
sera appliqué.
Grille de Notation

14. Bon Design
Génératif ;)
Pour toutes questions concernant
la matière, les sujets ou le design;
n’hésitez pas à me contacter.
arivaux@gmail.com
Alexandre Rivaux
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Génératif - 2016/2017