00 gx d - introduction

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