Introduction au code créatif avec p5.js

Laurent Malys

31 janvier 2017

Created: 2017-01-31 mar. 00:15

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 :

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

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

Sorry, your browser does not support SVG.

Figure 1: Système de coordonnées dans p5.js

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

rgbvshsb.png

Figure 2: RGB vs. HSB

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