Ce site regroupe l’ensemble des cours de creative coding destinée au 1ère années de Bachelor Games & Animation de e-art sup Paris.


Introduction

Le « creative coding » est une branche de la programmation dont le but est la création de programme « expressive » à l’inverse de la programmation traditionnel se voulant plus fonctionnel.  Cette discipline, grandement présente dans les métiers des arts graphiques, est utilisée dans la création de visuels dédiés à l’animation, aux jeux vidéo ou encore au design interactif.

— https://en.wikipedia.org/wiki/Creative_coding

Objectifs

Le cours s’adressant à des étudiants dans un contexte de formation au Game Design et Animation et sera s’orienté autour de la découverte de la programmation comme outils d’expression et de prototypage.

À la fin du cycle, les étudiants devront être en mesure de comprendre l’intérêt du creative coding dans la production audiovisuelle et game design mais également avoir une approche autodidacte autour de la programmation. Chaque étudiant devra être capable de comprendre les bases de la programmation et des algorithmes quelques soient les langages de programmation. Les objectifs sont :

  1. Découvrir de la programmation comme outil d’expression visuelle fixe, animée ou interactive
  2. Découvrir la programmation comme outils de prototypage rapide
  3. (Re) Découvrir des bases de la programmation : variables, fonctions, conditions, itérations, récursions, input/output
  4. Découvrir la mise en application dans les domaines du design interactif, game design et animation :
    1. Génération
    2. Simulation
    3. Manipulation
    4. Interaction clavier, souris, devices

L’objectif pédagogique principale est également d’apprendre au étudiants à apprendre. À la fin de ce cycle de cours les étudiants devront être en mesure de :

  1. Être disposé à apprendre de manière autodidacte et en continue
  2. Savoir identifier un problème pour en chercher la solution
  3. Être en mesure de lire et comprendre les solutions proposés par une large communauté de développeurs/créatifs/graphistes
  4. Disposer de diverses ressources créative tel que :
    1. Listing de sites d’apprentissages multi-language
    2. Listing de sites de références artistique et graphique
    3. Bibliographie technique, visuelle et conceptuelle

Une approche de la programmation multi-langage

Le creative coding est une approche de la programmation de manière expressive. En ce sens ce domaine ne cherche pas à réaliser le projet le plus optimisé ou fonctionnel, dont le but serait de répondre à une problématique, mais de s’exprimer par l’utilisation de la programmation. Dans ce but, la maîtrise d’un langage n’est pas une nécessité et pourrait même enfermer l’étudiant dans un outil.

Afin de faire comprendre aux étudiants la programmation au sens algorithmique du terme il est alors plus intéressant d’aborder le sujet à travers une approche multilanguage permettant chacun de s’exprimer à travers différents outils comme l’on choisit son crayon, fusain ou pastel en illustration. Cette approche a pour objectif de faire apparaître la notion d’algorithme sous-jacente à l’ensemble des langages. Elle permet également à chaque étudiant d’apprendre à traduire un algorithme d’un langage à l’autre de sorte à être capable de trouver la solution à leur problème par une approche de l’algorithme et non du langage.

Parmi l’ensemble des langages de programmation abordé il semble important de s’intéresser au langage proche du jeu vidéo tel que :

  1. C++
  2. C# (Unity 3D)
  3. Java (Processing)
  4. Javascript (P5.JS)
  5. GLSL/HSLS shader

Tous ces langages ne sont cependant pas simples à aborder en un cycle restreint, il convient alors de faire un tri parmi ces derniers mais surtout de les mettre en pratique dans des cas concret d’utilisation à travers des exercices visuels et animés apportant un résultat rapide aux étudiants. Les langages abordés seront les suivant :

  1. Java via Processing — une approche plus simple de la programmation graphique sans interface
  2. Javascript — une approche de la programmation dédié au web et partageable facilement
  3. GLSL — une approche de génération d’images par pixel, de la création de texture et manipulation image côté GPU

Nous noterons l’absence de C# à ce programme. En effet l’objectif principal de ce cours est l’exploration visuelle et interactive par la programmation. Aussi, sortir le C# du programme (dans un environnement Unity3D) nous permet de sortir de la nomenclature visuelle du jeux vidéo (interface, moteur physique 2D/3D…) afin de se concentrer sur la compréhension du creative coding.

Une approche expressive et appliquée de la programmation

Ce cours a pour objectif la découverte de la programmation comme moyen d’expression. Afin de faire découvrir l’intérêt de la programmation et faire naître et désire de tests, d’itérations et de recherches le cycle de cours s’oriente autour de 4 problématiques récurrentes dans le milieu du jeu vidéo et du creative coding :

  1. La génération : 
    Il s’agit ici de s’intéresser à la génération d’élément sur scène qu’il soit fixe ou animé dans un système de coordonnées cartésien ou polaire 2D (Aggregation, Aléatoire, Sinusoïdale, Grilles….)
  2. La simulation :
    Il s’agit ici de simuler le mouvement d’un élément et son comportement (déplacement, rebond, métamorphose…)
  3. La manipulation :
    Il s’agit ici de manipuler un objet (image) dans le but de le déformer, changer, mixer…

Tout au long d’exercices abordant ces problématiques les étudiants seront amenés à (ré)découvrir les notions de base de la programmation telle que :

  1. Les variables
  2. Les tableaux
  3. Les iterations (loop, while…)
  4. Les conditions (if, if else, if else if, switch…)
  5. Les recursions
  6. Les function (void, set, get…)

Chaque session abordera également l’importance de l’itération et de la recherche graphique par le code.

Un sujet global sur l’ensemble du cycle

Le cycle de cours sera marqué par un sujet global réunissant l’ensemble des exercices réalisés par les étudiants. Ce sujet globale, orienté graphique, devra permettre au étudiants d’appliquer le savoir acquis en cours dans le cadre d’une production graphique. Les objectifs du sujet sont :

  1. La mise en application des exercices vu en cours dans un cadre de production graphique
  2. Sensibilisation au travail d’itération graphique et de recherche
  3. Sensibilisation à la création graphique par un travail de mise en page, cadrage, recherche couleur
  4. Travail de la typographie et de la mise en page
  5. Travail de plan et rythmique dans le cadre de l’image en mouvement

Programme

 

  1. Cours 1 (1 Mars 2017) : Génération et interactivité (P5)
    1. Découverte de la matière (Programme, notation, creative coding)
    2. Présentation du sujet + QA
    3. Introduction à la programmation : ma première génération : La grille cartésienne et polaire
      1. Variable
      2. Loop (grille)
      3. Condition
      4. Système cartésien / Polaire
      5. Interaction souris/clavier
    4. Suivi du sujet
  2. Cours 2 (8 Mars 2017) : Génération et interactivité (P5)
    1. Génération de système naturel et aléatoire :
      1. Circle packing
      2. FlowField
      3. Gray-Scott Reaction Diffusion
      4. Diffusion Limité Aggregation
    2. Suivi du sujet
  3. Cours 3 (15 Mars 2017) : Simulation et interactivité (JS)
    1. Introduction à P5.JS + DOM
    2. Mise en mouvement :
      1. Déplacement
      2. Vitesse
      3. Rebond
      4. Aléatoire
    3. Suivi du sujet
  4. Cours 4 (5 Avril 2017) : Simulation et interactivité
    1. Moteur Physique et Force :
      1. Vecteurs
      2. Operations Vectorielles
      3. Force (acceleration, repulsion, rebond)
    2. Suivi du sujet
  5. Cours 5 (12 Avril 2017) : Manipulation et interactivité
    1. Introduction à GLSL (fragment shader uniquement)
      1. Variable, syntaxe et gl_FragCoord
      2. Variables uniform
      3. Gradient
    2. Génération
      1. Angle
      2. Rectangle
      3. Cercle
      4. Forme circulaire
      5. Grille
      6. Aléatoire
    3. Suivi du sujet
  6. Cours 6 (19 Avril 2017) : 
    1. Suivi du sujet
  7. Cours 7 (26 Avril 2017) :
    1. Suivi du sujet
  8. Cours 8 (3 Mai 2017) :
    1. Suivi du sujet
  9. Cours 9 (10 Mai 2017) :
    1. Suivi du sujet

Méthodologie de travail

Découpage des cours

Le cycle de cours est divisé en 4 thèmes principaux. Chaque thème est abordé en sessions double, c’est à dire sur deux cours, permettant ainsi d’explorer divers facettes d’un même thème.Pour chaque thème le cours est composé de :

  1. Présentation du thème
  2. Présentation de son utilisation dans le milieu de la création (référence)
  3. Cours technique :
    1. Analyse et décomposition de l’algorithme
    2. Mise en place du programme
  4. Suivi du sujet et mise en pratique

Suivi personnel étudiants

Afin de réaliser un suivi de l’ensemble des étudiants il sera demandé pour chacun d’entre eux :

  1. Disposer d’un compte GitHub permettant de retrouver l’ensemble de leur projets et sources
  2. Disposer d’un compte Medium sur lequel ils écriront leur suivi de cours sous forme de making of permettant ainsi de retracer l’ensemble de leur recherche tout au long du cycle de cours

Outils

Chaque étudiant aura accès au dossier Drive du cours sur lequel il pourra retrouver l’ensemble des sources des cours à savoir :

  1. Modules divers (Principles of design, références graphique, algorithmique…)
  2. Annexes et aide

Les étudiants auront également accès au lien GitHub du cours qui regroupe l’ensemble des code sources ainsi que le blog du cours.

Chaque étudiant disposera également d’un carnet de notes dédié au cours sur lequel il notera les algorithmes vu en cours. En fin de cycle ce carnet recueille l’ensemble des snippets et algorithmes vu en cours et pourra être suivi par l’étudiant durant tout son cursus

Suivi du sujet

Chaque fin de cours sera dédié au suivi du sujet sur 1h à 1h30. Le suivi du sujet permettra de mettre en application le savoir acquis en cours le jours même mais également le travailler le design et storytelling du projet. Chaque suivi se compose de la manière suivante :

  1. Module technique et/ou conceptuel tel que :
    1. Technique
      1. Export image/vidéo depuis un programme
      2. After Effect : Import/Export
      3. After Effect : Compositing simple
      4. Illustrator : Travailler la typographie
    2. Concept
      1. Principles of Design
      2. Couleur
      3. Typographie
      4. Storyboard
      5. Format vidéo
  2. Suivi de l’ensemble des groupe et échange sur le travail réalisé

Notation

La notation se fera par semestre sur la base suivante :

  1. Documentation personnelle et travail de recherche (Blog Medium + GitHub) /10
  2. Suivi du groupe et respect du planning /10
  3. Sujet “Open Title” / 20
    • Film /10
    • Affiches /10
  4. Total /40 →  /2 pour un total /20

Chaque partie de la notation est réalisée sous la forme suivante :

  1. A : Excellent travail (8 à 10/10)
  2. B : Bon travail – continuez comme ça (6 à 8/10)
  3. C : Bien – poursuivez vos efforts (4 à 6/10)
  4. D : Manque de Travail (2 à 4/10)
  5. E : Aucun travail – où étiez vous? (0 à 2/10)

NB : Pour tout rendu en retard un malus de -10pts sera appliqué à la note /20