00 gx d - introduction

e-art sup | 3A & 3BDesign Génératif - 2016/2017

Alexandre [email protected]

ixd.education

Digital LabIntroduction 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

mailto:[email protected]


http://ixd.education



ixd.education


« 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?






ixd.education


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






ixd.education


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






ixd.education


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






ixd.education


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)






ixd.education


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






ixd.education


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








ixd.education


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 :





http://alignedleft.com/

http://arivaux.com/

http://uark.libguides.com/c.php?g=78829&p=506916


ixd.education


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






ixd.education


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






ixd.education


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






ixd.education

e-art sup | 3A & 3BDesign Génératif - 2016/2017e-art sup | 3A & 3BDesign Interactif


ixd.education

La grille de notation se compose de la manière

suivante :

1. Documentation /52. Exercice (graphique) /53. Exercice (technique) /54. 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









Bon Design Génératif ;)

Pour toutes questions concernant la matière, les sujets ou le design; n’hésitez pas à me contacter.

[email protected]


ixd.education






