Comme dans n'importe quel dessin, l'ordre des opérations est important pour déterminer le rendu final. Ce principe s'applique même en dehors de Processing: « S'habiller, sortir, aller au travail » ne donnera pas le même résultat que « sortir, aller au travail, s'habiller ». (Floss Manuals, Processing)
Der Lauf Der Dinge
Peter Fischli & David Weiss
Le code?
- Les objectifs du workshop
- le déroulement de la journée
- Qu'entend-t-on par 'code' ?
- [[Pourquoi différent langages? Un rapide panorama des principaux langages dont vous entendrez parler: HTML, CSS, Javascript, PHP, Python.. mais aussi Graphviz (.dot), Markdown, MediaWiki...|Hello world]];
- Code et création visuelle: quelques cas et exemples
- Sol Le witt, Baldessari, Morellet.. (6 répartitions aléatoires de 4 carrés noirs et blanc d'après les chiffres pairs et impairs du nombre PI)+ Allan McCollum- The Shapes project+ ceci
- Concrètement: Les outils du workshop
- page web, memo
- Les outils, éditeurs etc.
- Les ressources (Référence Processing, Floss Manuals, Daniel Shiffman..)
- Showcase (Prototyp-o + ici, MIT id, Fragmanted memory, Fluid Leaves, Ball droppings, COP15, Rafael Rozendaal,Etc..+ Particles..)
- Les bibliothèques
- References, [[ressources]] et documentation. Floss, Open Processing, Learning Processing
- Mise en place (téléchargement, interface, référence, ressources...).Processing 3.0 .
Design by numbers
Processing
Introduction
- Processing et P5js, une filiation.. (Processing), P5js, Arduino (Genuino)..) Paul Rand / Ikko Tanaka > John Maeda (Design by numbers) > Ben Fry & Casey Reas (Processing) > Lauren McCarthy (P5js)
- Qu'est-ce que Processing?
- Installer Processing (+ versions)
- Principes de base
- L'interface (programme, console, canevas..)
- Structure d’un programme (Setup et draw)
- La syntaxe et les commentaires
- Les coordonnées
//Déclaration des variables
void setup() {
//Initialisation du programme. Se joue une seule fois.
}
void draw() {
//Boucle du programme. Se joue en boucle.
}
Ou, un peu plus complexe:
// Déclaration des variables
int largeur;
int hauteur;
//Initialise le programme
void setup() {
size(600,400);
// Assignation de valeurs aux variables
largeur = 50;
hauteur = 25;
noStroke();
}
// Boucle du programme
void draw() {
rectMode(CENTER);
rect(width/2, height/2, largeur, hauteur);
if (keyPressed) {
largeur += 1;
hauteur += 1;
} else if (mousePressed) {
largeur -= 1;
hauteur -= 1;
}
}
Formes simples
- Le système de coordonnées
- Formes simples et premières variables (line, rect, ellipse..) + Shapes
- Courbes de Bezier
- La console (print, println)
void setup() {
size(600,400);
fill(0);
}
void draw() {
//println("Position : "+mouseX+", "+mouseY);
text(mouseX+", "+mouseY,mouseX, mouseY);
}
Couleur
- Couleurs (rgba, stroke, fill, srokeWeight, smooth)
- La transparence
- Random
Affichez une forme, sans contour, remplie de couleur juste dans le setup()
Exercice: [[Formes simples]] + [[Export et sauvegarde de vos travaux]]
Variables, conditions, opérateurs logiques (Introduction)
- Les variables (déclaration, assignation, variables natives, PImage..) - int, float, color, string...
- Les conditions et opérateurs logiques
- keyPressed, Save (save("nomPrenom-option.png");)
Exercice: [[Damier]] + Variations