Code B1

Appearance

Processing et P5js ​

Processing ​

Processing est à la fois un langage et une interface pour éditer votre code. Il s'agit d'un logiciel libre qui doit être installé sur votre machine (il l'est sur toutes celles de l'école). Descendant direct de Design by numbers de John Maeda (dont vous trouverez un très beau livre à la bibliothèque), Processing a vu le jour au MIT, en 2001. Clairement orienté création visuelle, il permet d'aborder les concepts de base de la programmation (variables, boucles, conditions...) de façon relativement simple et autonome.

  1. Téléchargez et installez Processing
  2. Ouvrez le programme
  3. Editez votre code
  4. Testez-le
  5. Sauvez votre travail
java
void setup() {
    size(600,400);
}
void draw() {
    background(220);
    ellipse(mouseX,mouseY,30,30);
}
L'environnement de Processing.
L'environnement de Processing.

Liens utiles (Processing) ​

DBN (Design by numbers, par John Maeda, MIT), à l'origine de Processing

P5js ​

P5js est ce que l'on appelle une bibliothèque (library) javaScript. Les fonctions utilisées sont très proches, dans l'esprit et dans la syntaxe, de Processing. Cela signifie que vos sketchs peuvent s'exécuter directement dans votre navigateur. Bien qu'une connaissance des langages HTML et CSS, ainsi que des notions de base liées au web, soit un plus, P5js propose un éditeur de code en ligne très pratique, qui vous permet de rentrer directement dans le vif du sujet sans connaissance préalable. Une fois un compte créé, il vous est alors possible de sauver vos sketchs en ligne et de les partager directement. Ces fonctions de sauvegarde et de partage en font un outil particulièrement intéressant.

  1. RDV sur https://editor.p5js.org/
  2. Créez un compte en ligne
  3. Editez votre code
  4. Partagez!
javascript
function setup() {
    createCanvas(600,400);
}
function draw() {
    background(200);
    ellipse(mouseX,mouseY,30,30);
}
Le même programme avec P5js. Notez les quelques petites différences de syntaxe.
Le même programme avec P5js. Notez les quelques petites différences de syntaxe.

Liens utiles (P5js) ​

Passer de Processing à P5js ​

Passer un sketch Processing vers P5js est assez simple. Seuls quelques changements sont nécessaire.

Le code ci-dessous montre quelques éléments que vous aurez à traduire pour passer de Processing à javaScript (P5js). Vous pouvez, en guise de bac à sable (et bien plus encore..), utiliser l'éditeur en ligne de P5js.

  1. Remplacer les mots-clés void par le mot function (pour setup et draw)
  2. Remplacer la fonction size(largeur, hauteur) par createCanvas(largeur, hauteur)
  3. Plus besoin de typer les variables (int, float, etc.) : Juste utiliser var pour déclarer une variable.
javascript
var posX;
var diametre = 100;

function setup() {
    createCanvas(windowWidth,windowHeight);
    background(240);
    noStroke();
    posX = -(diametre/2);
}
function draw() {
    background(240);
    fill(255,0,0);
    ellipse(posX,mouseY,diametre,diametre);
    posX+=7;
    if(posX>width+(diametre/2)) {
        posX = -(diametre/2);
    }
}

La liste complète et détaillée est reprise ici:

Étapes démo ​

  • setup
  • background
  • rectangle
  • fill stroke
  • color selector
  • step by step
  • draw
  • mouseX mouseY
  • frameRate
  • variables custom
  • random
  • images