Digital lab brief

1. The World of
Digital Creatures
1. Contexte
2. Brief
3. Les comportements
4. Contraintes
5. Méthodologie & suivi
6. Code et attribution
7. Documenter son code : les commentaires
8. Documenter son code : citer les sources
9. Document et attendus de rendu
10. Planning
11. Grille de notation
12. Références
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education

2. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Digital lab : brief
—
«The World of Digital Creatures» est une expérience interactive,
sonore et visuelle explorant le champs des possibles du creative
coding.
Présentée sous la forme d’une installation interactive exposée dans
les locaux d’e-artsup, l’installation propose de plonger au cœur d’un
environnement peuplé de créatures digitales reactives au son et
interagissant avec son public.
«The World of Digital Creatures» est un exercice de cours inspiré
de l’installation «Communion : Celebration of Life» réalisée par
Field en 2011.

3. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Digital lab : brief
—

4. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Brief :
Il vous est demandé de réaliser chacun une créature digitale pouvant peupler cet environnement réactif au son.
Vos créatures devront respecter les contraintes suivante :
1. Être issue d’une recherche graphique itérative continue tout au long du semestre
2. Posséder 3 comportements propres (ex : sauter, tourner, grossir…)
3. Posseder 3 comportements réagissant au son (ex : changer de couleur, cheveux qui poussent…)
4. Posséder un comportement interagissant avec l’utilisateur. (ex : se dupliquer, changer de forme…)
Digital lab : brief
—

5. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Les comportements :
1. Les 3 comportements propres (ex : sauter, tourner, grossir…)
Les 3 comportements propres sont des 3 façons dont votre créature se comporte au naturel.
Ils peuvent être de natures variées telles que bouger les oreilles, cligner des yeux, se dandiner…
Ces comportements pourront s’effectuer constamment (en boucle), de manière régulière (toute les 4 secondes
par exemple) ou de manière aléatoire (toute les x seconde). Ils pourront s’effectuer ensemble, successivement
ou selon un ordre aléatoire. Vous pourrez choisir de les activer ou non si votre créature réagit ou interagi avec
son environnement ou avec l’utilisateur.
2. Posseder 3 comportements réagissant au son (ex : changer de couleur, cheveux qui poussent…)
Ces 3 comportements sont les manière dont votre créature réagira au son (basse, medium et aigue).
Il peuvent être de natures variées. Vous fixerez vous même les paliers à partir desquels votre créature réagira.
Vous vous appuierez du cours sur la reaction au son et de l’objet d’analyse sonore fourni.
3. Posséder un comportement interagissant avec l’utilisateur. (ex : se dupliquer, changer de forme…)
Il s’agit du comportement que possède votre creature lorsque l'utilisateur interagit avec l’installation.
L’utilisateur pourra interagir de 4 manières différentes, vous en choisirez une à laquelle votre creature réagira.
Les 4 interactions différentes seront définies en cours et avec la classe. Elle pourront être par exemple :
Réagir des tweets, aux mouvement de l’utilisateur, à sa main, à la distance face à l’installation, aux visages...
Digital lab : brief
—

6. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Contraintes:
1. Taille du sketch : 720 × 720 pixels
2. Format du sketch : 2D
3. 8 couleurs maximum, dégradé possible.
4. Votre créature devra posséder une taille responsive sur base de variables largeur hauteur (pas de
hardcoding)
5. Chacune de vos itération sera enregistrer sous le nom suvant : AnneeMoisJour_WDC_NumeroDeIteration.
pde
6. L’ensemble de votre code sera documenté (cf section «documenter son code»)
7. Vous réaliserez vos coquis de recherches sur un carnet de croquis dédié au cours qui sera rendu à la fin
du sujet
8. Vous enregistrerez chacune des itérations réalisées sous un format image .jpg et réaliserez un album
dédié au sujets et à vos experimentations graphique sur Flickr.
Digital lab : brief
—

7. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Méthodologie :
Chaque cours est divisé en 2 partie :
1. Théorie (1h30) :
Cours technique et programmation
2. Découverte (10-15min)
Decouverte de référence sur l’Art Numérique et
le Creative Coding
3. Pratique (1h15)
Tests et application de la théorie par les
étudiants sur le brief en cours
Suivi de projet.
Digital lab : brief
—
Suivi :
La production du sujet suivra le processus suivant lors
des suivis de projet :
1. Présentation rapide des état précédents de la
créature.
2. Présentation des recherches pour l’évolution de
la créature (croquis, inspirations graphiques,
moodboard…)
3. Présentation des itérations tests réalisées
(minimum de 5 itérations).
4. Validation d’une itération.
5. Tests et itérations intégrant les notions vues
durant le cours.

8. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Code et Attribution :
Réutiliser un code est un bon exercice pratique cependant la réutilisation de code sans en avoir citer la source
est considéré comme de la copie et du plagiat.
Le developpement 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 éthique de citer ses
sources.
Tout comme vous citez les sources original dans vos travaux graphiques et écrit, vous devez citer l’ensemble des
source technique afférant à votre projet tel que les auteurs des algorithmes ou outils incorporé à vos projets ou
les documents de recherches et cours utilisée 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
Digital lab : brief
—

9. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Documenter son code : les commentaires
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’autre developpeur ou enseignant 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;
}
Digital lab : brief
—

10. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Documenter son code : citer les sources
Lorsque que vous utilisez une fonction ou un code réalisé par un autre developpeur 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
*
***************************************************************************************/
Digital lab : brief
—

11. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Attendus et document de rendu :
Le rendu du sujet s’effectuera par une présentation devant la classe et sera accompagnée d’un document de
présentation .pdf contenant :
1. Rappel du brief
2. Présentation de la créature et de ses comportements
3. Présentation de chaque étape processus itératif documenté expliquant les choix effectués, leurs raisons,
les difficultés rencontrés et la manière de les résoudres (inspirations graphiques, ressources, sites,
benchmark…)
4. .JPGs HD de la créature
5. Video capture de la créature
6. Sketch processing de la créature
7. Ensemble des sketchs réalisés lors du processus itératif
8. Rendu du carnet de croquis
Digital lab : brief
—

12. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Digital lab : brief
—
Cours 00 : 8/10/15
Présentation Option,
Définition du design génératif et du creative coding,
Processing : découverte
Cours 01 : 15/10/2015
Itérations et Conditions — Coordonées Cartésiennes
(Dessin) : Dessin de la créature
Cours 02 : 22/10/2015
Aléatoire Brownien et Perlin — Coordonnées Polaires
(Dessin) : Dessin de la créature
Cours 03 : 29/10/2015
Déplacement et rotation — Vitesse et sinusoidale
(Animation) : Dessin de la créature & comportements
propres
Cours 04 : 5/11/15
Temps et décompte (Animation) : Dessin de la créature
& comportements propres
Cours 05 : 19/11/2015
Réaction au son (Réaction) : Dessin de la créature &
comportements au son
Cours 06 : 26/11/2015
Réaction au son (Réaction) : Dessin de la créature &
comportements au son
Cours 07 : 3/12/2015
Librairies et Capteurs (Interactions) : Dessin de la créature
& comportement à l’utilisateur
Cours 08 : 10/12/2015
Librairies et Capteurs (Interactions) : Dessin de la créature
& comportement à l’utilisateur
Cours 09 : 7/01/2015
Présentation du rendu (1h30)
Pour aller plus loin (références et autres outils)

13. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Digital lab : brief
—
La grille de notation se compose de la
manière suivante :
1. Présentation orale
2. Concept
3. Design graphique
4. Méthodologie (suivi continu)
5. Recherches individuelles (carnet de croquis)
6. Documentation (flickr + documentation code)
Une notation réalisée de A à E :
1. A : Excellent travail (4 à 5/5)
2. B : Bon travail - continuez comme ça (2.5 à
3/5)
3. C : Bien - poursuivez vos efforts (2 à 2.5/5)
4. D : Manque de Travail (1 à 1.5/5)
5. E : Aucun travail - où étiez vous? (0/5)
6. Total /30 => /1.5 pour un total /20
NB : Pour tout rendu en retard un malus de -10pts
sera appliqué à la note /20

14. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Références

15. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Communion : A celebration
of Life (2011)
Direction Artistique : Matt Pyke (Universal Everything)
Design + Code : Field
Design sonore : Simon Pyke (FreeFarm)
Photographie : James Medcraft
Making of : http://www.field.io/making-of/communion-a-
celebration-of-life/
Digital lab : brief
—

16. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Colorimetry in motion (2014)
Design + Code : Nicolas Menard et Eric-Renaud Houde (la
chose imprimée)
Digital lab : brief
—

17. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Evolved virtual creatures (1994)
Design + Code : Karl Sims
Digital lab : brief
—

18. e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education
Rec All - Puzzle universe (2015)
Design + Code : Romain Cazier
Tuteurs : Alain Bellet, Cyril Diagne, Gael Hugo, Christophe
Guignard et Vincent Jacquier
Assistants : Matthieu Minguet, Laura Perrenoud, Tibor
Udvari
École : ECAL, University of Art and Design, Lausanne,
Suisse
Digital lab : brief
—

19. Bon design
Interactif ;)
Pour toutes questions concernant
la matière, les sujets ou le design;
n’hésitez pas à me contacter.
Alexandre Rivaux
Visual Artist / Interactive Designer @BonjourLab
arivaux@gmail.com
ixd.education
e-art sup | 3A & 3B
Design Interactif
Alexandre Rivaux
arivaux@gmail.com
ixd.education