SlideShare une entreprise Scribd logo
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
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?
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
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
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
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)
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
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
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 :
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
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
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
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
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

Contenu connexe

Tendances

01 02 web_expérientiel _ le mobile
01 02 web_expérientiel _ le mobile01 02 web_expérientiel _ le mobile
01 02 web_expérientiel _ le mobile
Alexandre Rivaux
 
01 03 web_expérientiel _ designer un site web
01 03 web_expérientiel _ designer un site web01 03 web_expérientiel _ designer un site web
01 03 web_expérientiel _ designer un site web
Alexandre Rivaux
 
02 00 application et services _ introduction
02 00 application et services _ introduction02 00 application et services _ introduction
02 00 application et services _ introduction
Alexandre Rivaux
 
Presentation sketch App
Presentation sketch AppPresentation sketch App
Presentation sketch App
Chloe Pellen
 
Flat design mode ou tendance passagère
Flat design mode ou tendance passagèreFlat design mode ou tendance passagère
Flat design mode ou tendance passagère
Jean-Philippe Cabaroc
 
Alphorm.com Formation Autodesk Maya 2018: L'essentiel
Alphorm.com Formation Autodesk Maya 2018: L'essentielAlphorm.com Formation Autodesk Maya 2018: L'essentiel
Alphorm.com Formation Autodesk Maya 2018: L'essentiel
Alphorm
 
Alphorm.com Formation SolidWorks 2020 : Perfectionnement
Alphorm.com Formation SolidWorks 2020 : PerfectionnementAlphorm.com Formation SolidWorks 2020 : Perfectionnement
Alphorm.com Formation SolidWorks 2020 : Perfectionnement
Alphorm
 
Alphorm.com Formation Fusion 360: Perfectionnement
Alphorm.com Formation Fusion 360: PerfectionnementAlphorm.com Formation Fusion 360: Perfectionnement
Alphorm.com Formation Fusion 360: Perfectionnement
Alphorm
 
Presentation volumes cgjp (1)
Presentation volumes cgjp (1)Presentation volumes cgjp (1)
Presentation volumes cgjp (1)Openbricks.io
 
Alphorm.com Formation Autodesk Revit 2019: Structure
Alphorm.com Formation Autodesk Revit 2019: StructureAlphorm.com Formation Autodesk Revit 2019: Structure
Alphorm.com Formation Autodesk Revit 2019: Structure
Alphorm
 
Alphorm.com Formation ArchiCAD 20 - Perfectionnement
Alphorm.com Formation ArchiCAD 20 - PerfectionnementAlphorm.com Formation ArchiCAD 20 - Perfectionnement
Alphorm.com Formation ArchiCAD 20 - Perfectionnement
Alphorm
 
Olivier TONGIO | CV 2022
Olivier TONGIO | CV 2022Olivier TONGIO | CV 2022
Olivier TONGIO | CV 2022
Olivier TONGIO
 
Olivier TONGIO | CV 2022 | Designer Graphique & Formateur PAO
Olivier TONGIO | CV 2022 | Designer Graphique & Formateur PAOOlivier TONGIO | CV 2022 | Designer Graphique & Formateur PAO
Olivier TONGIO | CV 2022 | Designer Graphique & Formateur PAO
Olivier TONGIO
 

Tendances (13)

01 02 web_expérientiel _ le mobile
01 02 web_expérientiel _ le mobile01 02 web_expérientiel _ le mobile
01 02 web_expérientiel _ le mobile
 
01 03 web_expérientiel _ designer un site web
01 03 web_expérientiel _ designer un site web01 03 web_expérientiel _ designer un site web
01 03 web_expérientiel _ designer un site web
 
02 00 application et services _ introduction
02 00 application et services _ introduction02 00 application et services _ introduction
02 00 application et services _ introduction
 
Presentation sketch App
Presentation sketch AppPresentation sketch App
Presentation sketch App
 
Flat design mode ou tendance passagère
Flat design mode ou tendance passagèreFlat design mode ou tendance passagère
Flat design mode ou tendance passagère
 
Alphorm.com Formation Autodesk Maya 2018: L'essentiel
Alphorm.com Formation Autodesk Maya 2018: L'essentielAlphorm.com Formation Autodesk Maya 2018: L'essentiel
Alphorm.com Formation Autodesk Maya 2018: L'essentiel
 
Alphorm.com Formation SolidWorks 2020 : Perfectionnement
Alphorm.com Formation SolidWorks 2020 : PerfectionnementAlphorm.com Formation SolidWorks 2020 : Perfectionnement
Alphorm.com Formation SolidWorks 2020 : Perfectionnement
 
Alphorm.com Formation Fusion 360: Perfectionnement
Alphorm.com Formation Fusion 360: PerfectionnementAlphorm.com Formation Fusion 360: Perfectionnement
Alphorm.com Formation Fusion 360: Perfectionnement
 
Presentation volumes cgjp (1)
Presentation volumes cgjp (1)Presentation volumes cgjp (1)
Presentation volumes cgjp (1)
 
Alphorm.com Formation Autodesk Revit 2019: Structure
Alphorm.com Formation Autodesk Revit 2019: StructureAlphorm.com Formation Autodesk Revit 2019: Structure
Alphorm.com Formation Autodesk Revit 2019: Structure
 
Alphorm.com Formation ArchiCAD 20 - Perfectionnement
Alphorm.com Formation ArchiCAD 20 - PerfectionnementAlphorm.com Formation ArchiCAD 20 - Perfectionnement
Alphorm.com Formation ArchiCAD 20 - Perfectionnement
 
Olivier TONGIO | CV 2022
Olivier TONGIO | CV 2022Olivier TONGIO | CV 2022
Olivier TONGIO | CV 2022
 
Olivier TONGIO | CV 2022 | Designer Graphique & Formateur PAO
Olivier TONGIO | CV 2022 | Designer Graphique & Formateur PAOOlivier TONGIO | CV 2022 | Designer Graphique & Formateur PAO
Olivier TONGIO | CV 2022 | Designer Graphique & Formateur PAO
 

En vedette

Tâche 5
Tâche 5Tâche 5
Tâche 5
maritrigo95
 
Enseigner-apprendre le français langue globale(isée)
Enseigner-apprendre le français langue globale(isée)Enseigner-apprendre le français langue globale(isée)
Enseigner-apprendre le français langue globale(isée)
jornadaslinguas
 
Built for Man Look Book
Built for Man Look BookBuilt for Man Look Book
Built for Man Look Book
Microsoft
 
Annual report 2015 2016
Annual report 2015 2016Annual report 2015 2016
Annual report 2015 2016
wsittenfield
 
What happens if obama was born in india
What happens if obama was born in indiaWhat happens if obama was born in india
What happens if obama was born in india
DayanaWesly
 
Land Securities Ac Energy Examples
Land Securities Ac Energy ExamplesLand Securities Ac Energy Examples
Land Securities Ac Energy Examples
billwilkinson
 
Estadisticas Torrelaguna FS 10/11
Estadisticas Torrelaguna FS 10/11Estadisticas Torrelaguna FS 10/11
Estadisticas Torrelaguna FS 10/11
Alfredo Recio Làzaro
 
Klout nuevo-2 test
Klout nuevo-2 testKlout nuevo-2 test
Klout nuevo-2 test
Juan Manuel Hernandez
 
Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015
NordicClick Interactive
 
Commandos in a Police State
Commandos in a Police StateCommandos in a Police State
Commandos in a Police State
Joe Kleinwaechter
 
Osterman Research: The need for third party security, compliance and other ca...
Osterman Research: The need for third party security, compliance and other ca...Osterman Research: The need for third party security, compliance and other ca...
Osterman Research: The need for third party security, compliance and other ca...
proutley
 
An open letter to Workers, Trade Unionists and Socialists from the Communist ...
An open letter to Workers, Trade Unionists and Socialists from the Communist ...An open letter to Workers, Trade Unionists and Socialists from the Communist ...
An open letter to Workers, Trade Unionists and Socialists from the Communist ...
Omar Mintoff
 
72 slides in 40 minutes
72 slides in 40 minutes72 slides in 40 minutes
72 slides in 40 minutes
rexmasterson
 
Lead Generation: Inexpensive Tactics
Lead Generation: Inexpensive Tactics Lead Generation: Inexpensive Tactics
Lead Generation: Inexpensive Tactics
NordicClick Interactive
 
Innerlijk opruimen voor meer succes
Innerlijk opruimen voor meer succesInnerlijk opruimen voor meer succes
Innerlijk opruimen voor meer succes
CanDo Coaching
 
Installation interactive conférence
Installation interactive   conférenceInstallation interactive   conférence
Installation interactive conférence
Alexandre Rivaux
 
Zelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succesZelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succesCanDo Coaching
 
MVA student and instructor profiles
MVA student and instructor profilesMVA student and instructor profiles
MVA student and instructor profiles
Microsoft
 
HIPS Brochure
HIPS BrochureHIPS Brochure
HIPS Brochure
hipspipefabrications
 
Relazione comune Motta d'affermo
Relazione comune Motta d'affermoRelazione comune Motta d'affermo
Relazione comune Motta d'affermocrisba82
 

En vedette (20)

Tâche 5
Tâche 5Tâche 5
Tâche 5
 
Enseigner-apprendre le français langue globale(isée)
Enseigner-apprendre le français langue globale(isée)Enseigner-apprendre le français langue globale(isée)
Enseigner-apprendre le français langue globale(isée)
 
Built for Man Look Book
Built for Man Look BookBuilt for Man Look Book
Built for Man Look Book
 
Annual report 2015 2016
Annual report 2015 2016Annual report 2015 2016
Annual report 2015 2016
 
What happens if obama was born in india
What happens if obama was born in indiaWhat happens if obama was born in india
What happens if obama was born in india
 
Land Securities Ac Energy Examples
Land Securities Ac Energy ExamplesLand Securities Ac Energy Examples
Land Securities Ac Energy Examples
 
Estadisticas Torrelaguna FS 10/11
Estadisticas Torrelaguna FS 10/11Estadisticas Torrelaguna FS 10/11
Estadisticas Torrelaguna FS 10/11
 
Klout nuevo-2 test
Klout nuevo-2 testKlout nuevo-2 test
Klout nuevo-2 test
 
Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015Social Media Measurements - Pubcon Austin 2015
Social Media Measurements - Pubcon Austin 2015
 
Commandos in a Police State
Commandos in a Police StateCommandos in a Police State
Commandos in a Police State
 
Osterman Research: The need for third party security, compliance and other ca...
Osterman Research: The need for third party security, compliance and other ca...Osterman Research: The need for third party security, compliance and other ca...
Osterman Research: The need for third party security, compliance and other ca...
 
An open letter to Workers, Trade Unionists and Socialists from the Communist ...
An open letter to Workers, Trade Unionists and Socialists from the Communist ...An open letter to Workers, Trade Unionists and Socialists from the Communist ...
An open letter to Workers, Trade Unionists and Socialists from the Communist ...
 
72 slides in 40 minutes
72 slides in 40 minutes72 slides in 40 minutes
72 slides in 40 minutes
 
Lead Generation: Inexpensive Tactics
Lead Generation: Inexpensive Tactics Lead Generation: Inexpensive Tactics
Lead Generation: Inexpensive Tactics
 
Innerlijk opruimen voor meer succes
Innerlijk opruimen voor meer succesInnerlijk opruimen voor meer succes
Innerlijk opruimen voor meer succes
 
Installation interactive conférence
Installation interactive   conférenceInstallation interactive   conférence
Installation interactive conférence
 
Zelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succesZelfvertrouwen voor meer succes
Zelfvertrouwen voor meer succes
 
MVA student and instructor profiles
MVA student and instructor profilesMVA student and instructor profiles
MVA student and instructor profiles
 
HIPS Brochure
HIPS BrochureHIPS Brochure
HIPS Brochure
 
Relazione comune Motta d'affermo
Relazione comune Motta d'affermoRelazione comune Motta d'affermo
Relazione comune Motta d'affermo
 

Similaire à 00 gx d - introduction

introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projetlaureno
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
guest6d3f53
 
Guide de projet final
Guide de projet finalGuide de projet final
Guide de projet final
MamadouDIENG15
 
archicad-cours.pptx
archicad-cours.pptxarchicad-cours.pptx
archicad-cours.pptx
NgoloMamadouKone1
 
Exemple-Epi-Trace-avec-un-robot.pptx
Exemple-Epi-Trace-avec-un-robot.pptxExemple-Epi-Trace-avec-un-robot.pptx
Exemple-Epi-Trace-avec-un-robot.pptx
KediViking
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
laureno
 
meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022
Frederic Leger
 
Py osv newsletter-062018
Py osv newsletter-062018Py osv newsletter-062018
Py osv newsletter-062018
FabMob
 
Utiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateformeUtiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateforme
pprem
 
Initiation à la programmation école primaire neuville
Initiation à la programmation   école primaire neuvilleInitiation à la programmation   école primaire neuville
Initiation à la programmation école primaire neuville
Nicolas Piquot
 
Py osv newsletter-032018
Py osv newsletter-032018Py osv newsletter-032018
Py osv newsletter-032018
FabMob
 
Py osv newsletter-032018
Py osv newsletter-032018Py osv newsletter-032018
Py osv newsletter-032018
FabMob
 
Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014
Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014
Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014
Pascal Vangrunderbeeck
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
Horacio Gonzalez
 
15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale
Johanna Rowe Calvi
 
Exemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labviewExemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labviewLuc Desruelle
 
Exemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labviewExemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labviewLuc Desruelle
 
Exemple code oop_labview
Exemple code oop_labviewExemple code oop_labview
Exemple code oop_labviewLuc Desruelle
 
Studio Digital Collaboratif, un environnement multimodal de conception collab...
Studio Digital Collaboratif, un environnement multimodal de conception collab...Studio Digital Collaboratif, un environnement multimodal de conception collab...
Studio Digital Collaboratif, un environnement multimodal de conception collab...
IHM'10
 
Formation de formateurs module 2a
Formation de formateurs module 2aFormation de formateurs module 2a
Formation de formateurs module 2a
SinGuy
 

Similaire à 00 gx d - introduction (20)

introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
Guide de projet final
Guide de projet finalGuide de projet final
Guide de projet final
 
archicad-cours.pptx
archicad-cours.pptxarchicad-cours.pptx
archicad-cours.pptx
 
Exemple-Epi-Trace-avec-un-robot.pptx
Exemple-Epi-Trace-avec-un-robot.pptxExemple-Epi-Trace-avec-un-robot.pptx
Exemple-Epi-Trace-avec-un-robot.pptx
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022meetup devops aix-marseille 27/10/2022
meetup devops aix-marseille 27/10/2022
 
Py osv newsletter-062018
Py osv newsletter-062018Py osv newsletter-062018
Py osv newsletter-062018
 
Utiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateformeUtiliser l'EDI pour développer en multiplateforme
Utiliser l'EDI pour développer en multiplateforme
 
Initiation à la programmation école primaire neuville
Initiation à la programmation   école primaire neuvilleInitiation à la programmation   école primaire neuville
Initiation à la programmation école primaire neuville
 
Py osv newsletter-032018
Py osv newsletter-032018Py osv newsletter-032018
Py osv newsletter-032018
 
Py osv newsletter-032018
Py osv newsletter-032018Py osv newsletter-032018
Py osv newsletter-032018
 
Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014
Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014
Atelier scénarisation - Apprendre aujourd'hui et demain - Awt 16-12-2014
 
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
ENIB 2016 2017 - CAI Web S02E01- Côté navigateur 2/3 - HTML5, CSS3, Twitter B...
 
15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale
 
Exemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labviewExemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labview
 
Exemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labviewExemple de-code-oop-avec-labview
Exemple de-code-oop-avec-labview
 
Exemple code oop_labview
Exemple code oop_labviewExemple code oop_labview
Exemple code oop_labview
 
Studio Digital Collaboratif, un environnement multimodal de conception collab...
Studio Digital Collaboratif, un environnement multimodal de conception collab...Studio Digital Collaboratif, un environnement multimodal de conception collab...
Studio Digital Collaboratif, un environnement multimodal de conception collab...
 
Formation de formateurs module 2a
Formation de formateurs module 2aFormation de formateurs module 2a
Formation de formateurs module 2a
 

Plus de Alexandre Rivaux

02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain
Alexandre Rivaux
 
01 une histoire du di
01 une histoire du di01 une histoire du di
01 une histoire du di
Alexandre Rivaux
 
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
Alexandre Rivaux
 
03 01 application &amp; services
03 01 application &amp; services03 01 application &amp; services
03 01 application &amp; services
Alexandre Rivaux
 
03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction
Alexandre Rivaux
 
Une histoire du di
Une histoire du diUne histoire du di
Une histoire du di
Alexandre Rivaux
 

Plus de Alexandre Rivaux (6)

02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain02 espace réel%2 f_virtuel et corps humain
02 espace réel%2 f_virtuel et corps humain
 
01 une histoire du di
01 une histoire du di01 une histoire du di
01 une histoire du di
 
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels04 00 installations interactives _ le corps et les espaces physiques ou virtuels
04 00 installations interactives _ le corps et les espaces physiques ou virtuels
 
03 01 application &amp; services
03 01 application &amp; services03 01 application &amp; services
03 01 application &amp; services
 
03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction03 00 l'internet des objets - introduction
03 00 l'internet des objets - introduction
 
Une histoire du di
Une histoire du diUne histoire du di
Une histoire du di
 

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