Bienvenue :)

#PCD2019

I. Une Introduction au design génératif avec p5.js

Objectifs du workshop

Première approche de la programmation

Découvrir le Creative Coding comme moyen d’expression permettant de manipuler le texte pour soutenir la création graphique

Déroulement du workshop

Librairie javascript

Javascript Le langage de programmation du web. Est interprété par le navigateur (firefox, chrome…).

Librairie Ensemble de fonctionnalités mises à disposition par d’autres développeurs

Orienté web

p5js a été conçu pour fonctionner au sein d’une page web, dans un élément html5 spécifique (canvas) qui peut afficher des éléments graphiques.

p5js facilite l’utilisation de canvas, la création dynamique d’éléments html, l’interaction avec l’utilisateur, la manipulation de l’audio et de la vidéo.

II. Concepts de base de la programmation

Syntaxe

Variables

let ma_variable = 10; // déclaration
ma_variable = ma_variable * 10; // assignation
console/log(ma_variable); // affiche 100
            

Tableaux (arrays)

let mon_array = [10,38,76,999];
console.log(mon_array[1]); // affichera 38

// les tableaux peuvent être pratiques pour 
// regrouper une palette de couleurs, par exemple 
let palette = ['#3000D0', '#D0BC00', '#4E19FF'];
            

Structures de contrôle

Conditions

// les conditions sont le résultat d'opérations logiques 
// ou de comparaison retournant une valeur true/false

if(/*condition*/){

}else{

}
            

Répétition (boucles)

for(var i = 0; i < 10; i++){
    // instructions se répéteront 10 fois
    // à chaque itération de la boucle, la variable i aura une valeur entre 0 et 9
}
            

Fonctions

function maFonction(param1, param2){ // les paramètres sont optionnels
    // instructions
    // return *valeur* [optionnel] 
}
            

Objets

let monObjet = {
    nom: "world",
    sayHello : function(){
         console.log("hello "+this.nom);
    }
   
}
monObjet.sayHello(); // affiche "Hello world"
monObjet.nom = "Greg";
monObjet.sayHello(); // affiche "Hello Greg"
            

Bibliothèques (libraries)

Exemples

• la bibliothèque p5.sound
• la bibliothèque p5.dom

III. Découvrir p5js

Structure d'un Sketch

L'éditeur en ligne : https://editor.p5.js.org

Le système de coordonnées

Formes

Primitives 2d

• point(x,y);

• line(x1, y1, x2,y2)

• ellipse(x, y, l, h)

• rect(x, y, l, h)

• triangle(x1,y1, x2, y2, x3, y3)

• quad(x1,y1, x2, y2, x3, y3, x4, y4)

Primitives 2d

Attributs de formes

Couleurs

Variables prédéfinies par p5.js

• width | height
• mouseX | mouseY
• pmouseX | pmouseY
• mouseIsPressed

Animation

Interactions

Afficher du texte avec p5.js

Le texte dans p5.js

Exporter pour le print