Pour commencer

Tout d’abord, veillez à avoir mis en place votre espace de travail et créé votre compte sur l’éditeur de P5js.

Ouvrez dans votre navigateur les quelques onglets suivants et gardez-les à portée de main durant la journée:

1. Ce site (peut-être même cette page)
2. L’éditeur de P5js bien sûr
3. La Reference (documentation) et les exemples de P5js.
4. Le fichier partagé où déposer vos sketches (mode Present)
5. Votre moteur de recherche préféré

La section P5*js, dans le menu latéral de ce site, revient sur les différents éléments dont nous parlons en début de matinée et début d’après-midi (structure d’un programme, coordonnées, couleur..). N’hésitez pas à prendre le temps de parcourir ces différentes pages et de tester les différents bouts de code que vous y trouverez.

---

Dessinez!

De façon générale, retenez qu’il vous sera toujours plus facile de travailler avec du code si vous savez ce que vous voulez réaliser. N’hésitez donc pas à commencer par un projet sur papier et à nous interpeller pour évaluer sa faisabilité.

---

Mieux vaut également se donner de petits challenges successifs en montant en complexité, plutôt que de se donner un objectif trop ambitieux dans lequel on risque de se perdre.

Les précieux conseils de Lauren McCarthy, Casey Reas et Ben Fry

Un progresion logique..

Voici une progression logique pour commencer à travailler avec P5js (à ne pas forcément suivre. Vous êtes libres).

• Dessin de formes simples
• Animation de formes simples
• Introduction de valeurs aléatoires
• Interactivité (clavier ou souris)
• Travailler avec des images
• Travailler avec du son
• Travailler avec du texte

N'hésitez pas à commencer par du dessin sur un bout de papier, histoire de pouvoir décomposer votre projet en différentes étapes. Vous pourrez ensuite, petit à petit, monter en complexité et en faire différentes version (animée, interactive, etc.)

Pour tout ceci, vous aurez bien souvent besoin de comprendre:

• Le système de coordonnées
• Comment formuler la couleur
• Comment fonctionnent les variables
• Le principe des conditions
• Eventuellement les boucles for
• Comprendre comment sauvegarder/exporter vos sketchs au formats JPG ou PNG.

Idées de projets concrets:

• Créer un outil de dessin
• Créer un générateur de formes
• Créer un jeu (essayer d’attraper un élément augmenter le score, monter d’un niveau, etc..)
• Créer une horloge
• Exploiter le Slit-scan et la webcam

Vous trouverez d’autres exercices ou idées dans la section Exercices du menu latéral.

Un sketch de base

Voici une base de travail très simple pour, par exemple, créer un outil de dessin personnalisé.

1. Ouvrez l’éditeur de P5*js.
2. Collez-y le code ci-dessous.
3. Sauvez votre document (après vous être connecté)
4. Exécutez votre code en appuyant sur play.
5. Augmentez-le, modifiez-le petit à petit.
6. Sauvez régulièrement votre travail (Cmd+S)

function setup(){
    createCanvas(800,600);
    background(220);
}

function draw() {
    ellipse(mouseX,mouseY,60,60);
}

Ce même code, commenté

// Le code à l'intérieur du bloc setup ne s'excutera qu'une seule fois.
function setup(){
    //Définir la taille de votre sketch (Un peu comme choisir un format pour une feuille de papier)
    createCanvas(800,600);

    //Définir une couleur de fond (pas indispensable mais on le fait souvent)
    background(220,220,220); //peut s'écrire background(220);
}

// Le code à l'intérieur du bloc draw s'excutera en boucle, jusqu'à ce qu'on lui dise de s'arrêter.
function draw() {
    //Inscrire ici (dans le draw) le code qui va tourner en boucle (variables qui évoluent, conditions, etc.)
    ellipse(mouseX,mouseY,60,60);
}

N’hésitez pas non plus à fouiller la section Examples du site de P5js ou https://openprocessing.org/! Vous y trouverez de chouettes bases pour vos projets.