Introduction au code créatif avec p5.js

1 Introduction

1.1 Qui suis-je ?

• mon parcours
  • sciences de l'ingénieur et calcul numérique
• mes projets
  • performances et installations audiovisuelles
  • fabrication numérique

1.1.1 Concrètement…

• vidéo interactive
• art visuel génératif
• synthèse sonore
• visualisation de données interactive
• électronique et robotique
• conception assistée par ordinateur
• machines de fabrication à commande numérique

1.2 Art numérique et code créatif ?

• Art numérique ?
  • qui utilisent des ordinateur ? qui utilise des nombres ?
  • des techniques traditionnelles qui utilisent des ordinateurs (art vidéo, art interactif, musique électronique)
  • art génératif
• Code créatif ?
  • Le code comme moyen d'expression
  • rendu interactif et en temps réel ?
• Des projets en vrac :
  • Graffiti Markup Language
  • eyewriter
  • Memo Akten
  • openprocessing
  • Net art, archéologie des médias numériques

1.3 Processing et p5.js

• Processing
  • écrit en java
  • Ben Fry et Casey Reas (MIT 2001)
  • Après "Design by numbers" John Maeda
• p5.js
  • réécriture de Processing en javascript
  • Lauren McCarty
  • réécriture de processing pour le web

1.4 autres environnements ?

• autres frameworks
  • programmation graphique : pure-data (+ max-msp / vvvv)
  • Framework C++ : Openframeworks / Cinder
• autres librairies js
  • paper.js, d3.js…

1.5 Objectifs

• Découvrir le code informatique comme un moyen d'expression
• S'amuser avec le code

1.6 Programme des trois jours

• Contenu théorique
  • mardi : Introduction au code informatique (fonctions, variables)
  • mercredi : conditionnels et boucles, outils
  • jeudi : aller plus loin ?
• En continu
  • développer une "machine à dessiner" ?
• Chaque jour
  • quelques notions plus générales sur le code informatique
  • quelques références d'artistes ou d'œuvres numériques ou génératives

2 p5.js

2.1 Pourquoi p5.js ?

• introduction aux technologies du web
• bien foutu pour apprendre / transmettre (documentation interactive)
• exemple de l'intéret d'un projet open-source et communautaire
• Les atouts de p5.js
  • simplicité de mise en œuvre
  • publication facile
  • utilisation des standarts du web
• Les limites de p5.js
  • Limité au navigateur (accès aux ressources ? aux périphériques ?)
  • un projet encore jeune
  • trop simple pour apprendre les bonnes pratiques ?

2.2 p5.js et le javascript

p5.js est une librairie (ou une bibliothèque) javascript

= une "brique" logicielle ajoutée à un navigateur web

• Quelques mots sur le javascript et les technologies web
• Un petit test dans le navigateur

$('h2').each(function(d){$(this).animate({transform:'rotate(-180deg)'});})

2.3 Mise en œuvre

• Environnement de développement intégré (IDE)
  • à télécharger ici
  • completion, debuggage, bouton "lecture"
• Environnement de développement classique
• Publication / déploiement

2.4 Ressources

• Site officiel
  • Référence
  • Exemples (également accessibles depuis l'IDE)
  • Tutoriels (en anglais)
• Chaine youtube de Daniel Shiffman : Coding train

3 Quatre concepts fondamentaux

3.1 Références

• Cours de Processing de l'École Supérieur d'Art d'Aix-en-Provence
• Le coding train de Daniel Shiffman

3.2 Quatre concepts fondamentaux

• Fonctions
• Variables
• Conditionnel / bifurcation
• Boucles

3.3 Au delà de ces quatre concepts

• Apprendre à apprendre en réutilisant / en détournant l'existant
• Éditer du texte
• Debugger

4 Fonctions

4.1 Définition d'une fonction

function setup(){
  // le code exécuté par la fonction est entre deux accolades
  // les lignes qui commencent par deux "//" sont des commentaires
}

Remarque :

• syntaxe et coloration syntaxique
• mise en forme du code (bonne pratique de "formatage") ?
• vive les commentaires !

4.2 Les fonctions de base de p5.js

function setup(){
  // executé une fois au lancement de l'application
  createCanvas(700, 200);
}

function draw(){
 // executé en boucle tant que l'application tourne
}

4.3 La fonction createCanvas()

function setup(){
 // executé une fois au lancement de l'application
 createCanvas(700, 200);
}

function draw(){
 // executé en boucle tant que l'application tourne
 background(100);
}

4.4 Le canvas

Un lien openprocessing pour tester

4.5 Les fonctions de dessins et leurs arguments

function draw(){
  background();
  rect(50, 25, 100, 150); 
  ellipse(250, 100, 75, 75);
}

Cette fois, on exécute des fonctions qui ont été définies ailleurs.

4.6 La couleur

4.6.1 Utilisation simple

setup = function() {
  createCanvas(1100, 200);
};

draw = function() {

  background(255, 100, 0);

  // rectangle
  noStroke();
  fill(0, 255, 0);
  rect(50, 25, 100, 150); 

  // cercle
  fill(0, 100, 255); 
  stroke(255, 255, 0);
  strokeWeight(5);
  ellipse(350, 100, 75, 75);
};

4.6.2 Utilisation plus avancée

draw = function() {

  background(255, 100, 0);

  // rectangle
  noStroke();
  fill(0, 255, 0);
  rect(50, 25, 100, 150); 

  // cercle
  fill(0, 100, 255); 
  stroke(255, 255, 0);   // <- trois paramètres
  strokeWeight(5);
  ellipse(350, 100, 75, 75);

  // niveaux de gris
  fill(100)              // <- un seul paramètre = niveau de gris
  stroke(255);           // <- un seul paramètre
  strokeWeight(5);
  ellipse(600, 100, 75, 75);

  // transparence 
  fill(255, 0, 150, 150) // <- quatre paramètres = opacité
  noStroke();
  ellipse(850, 100, 100, 100);

  fill(0, 255, 150, 150) // <- quatre paramètres
  ellipse(890, 120, 100, 100);
};

4.6.3 Le mode de couleur

4.6.4 Le mode de couleur en pratique

function setup() {
  createCanvas(900, 100);
  colorMode(HSB, 100);
};

function draw() {
  background(50);
  noStroke();
  for (var i = 0 ; i<10 ; i++){
    fill(i*10, 100, 100);
    ellipse(100 + i*75, 50, 75, 75);
  }
};

4.7 Beaucoup d'autres fonctions à décrouvrir…

Dans le document Reference de p5.js

5 Variables

5.1 Ajouter des interactions avec mouseX et mouseY

setup = function() {
  createCanvas(1100, 200);
  background(100);
};

draw = function() {
  ellipse(mouseX, mouseY, 20, 20);
};

mousePressed = function() { // nouvelle fonction à déclarer !
  background(250,0,0);
};

mouseReleased = function() { // nouvelle fonction à déclarer !
  background(100);
};

5.2 Déclaration de variable

• déclarer une variable
  • lui donner un nom (lettres, chiffres et _, sans espace)
  • définir un espace dans la mémoire pour conserver des données
• initialiser une variable = affectation, avec le signe "="
• utiliser une variable

var c;     // déclaration de la variable c

setup = function() {
  createCanvas(1100, 200);
  colorMode(HSB, 100);
  c = 50;  // affectation de la valeur 50
};

draw = function() {
  background(c, 100, 100);
};

mousePressed = function(){
  c = random(0, 100); // <- nouvelle fonction !
}

5.3 À quoi ça sert ?

Garder en mémoire des données pour le réutiliser

5.4 Type des variables et objet javascript

5.4.1 Type des variables

• Le type de variable est lié au type de donnée qu'elle contient, par exemple :
  • un nombre entier
  • une chaine de caractère
  • une structure de données plus complexe…

On ne déclare pas le type des variables en javascript, ce qui ne veut pas dire que ça n'a pas d'importance !

5.4.2 Objet javascript

• En javascript :
  • il n'est pas nécessaire de définir le type d'une variable
  • toutes les variables sont des objets (et les fonctions aussi…)
  • On peut facilement créer ses propres objets avec la syntaxe suivante :

var cercle = {x: 550,
              y: 100,
              rayon: 50}

setup = function() {
  createCanvas(1100, 200);
  background(100);
};

draw = function() {
  ellipse(cercle.x, cercle.y, cercle.rayon);
};

5.5 Exercice

Faire se dépacer un objet

6 Instructions conditionnelles

6.1 Vrai ou faux : la logique conditionnelle

• Expression booléenne : vrai ou faux, true or false, 0 + 1
• Exemple : comparaison de deux valeurs

var a = 10;
var b = 5;

if (a > b){
  // le code ici est exécuté si a est supérieur à b
}

6.2 Égalité

Ne pas confondre

• l'opération d'affectation d'une variable -> "="

var a = 0;

• l'instruction booléenne "est égale à" -> "=="

if (a == 50){

}

qu'on appelle l'"opérateur de test d'égalité"

• et son inverse : l'"opérateur de test de non égalité" : "!="

if (a != 50){

}

6.3 If, else if, else

var a = random(0,10);

if (a > 70){
 // faire un truc
}else if (a < 30){
 // faire un autre truc
}else{ // <- si a est compris entre 30 et 70
 // faire encore un autre truc
}

6.4 Exercice

Faire rebondir une balle

7 Boucles

7.1 De "if" à "while"

7.2 de "while" à "for"

8 Aller plus loin

8.1 Aller plus loin avec javascript

• les listes et les tableaux (="Array")
• définition de fonction
• programmation orienté objet

8.2 Aller plus loin avec p5.js

• mettre en ligne son application
• ajouter des controles
• utiliser des librairies :
  • son
  • vidéo
  • …
• récupérer des données (utiliser des APIs, par exemple celles de wikipedia, twitter…)

8.3 Des trucs à essayer

• machine à dessiner
• fractale
• glitch
• vision par ordinateur (= computer vision)
• string art (modulo)

8.4 Des trucs à la mode

• machine learning