J'ai un blog

FLW Light Study 2 from Rob Seward on Vimeo.

Je suis fan, de l’objet, de la vidéo, des acteurs, des costumes, de la musique, du montage et des sketchs.
C’était très intéressant !

Et si on sauvegardait en png nos images ?

void setup(){
  size(400,400);
}

void draw(){
  background(random(255),random(15),0);
  noLoop();
  save("image.png");
}

C’est honteux que ça soit si simple ! Pire, en étant sur la fenêtre de l’éditeur faites pomme + k (ça ouvre le dossier de la sauvegarde) !

void setup(){
  size(400,400);
}

void draw(){
  background(random(255),random(15),0);
  saveFrame("anim-####.png");
}

Encore plus honteux ? non ?

Un photomaton ?
On n’a pas vu comment afficher une webcam mais voici la doc :
http://processing.org/reference/libraries/video/Capture.html
Remarque : cette fonction est dans la partie librairie de la documentation (il s’agit d’extension), d’ailleurs dans l’exemple la première ligne s’occupe de charger cette librairie.

import processing.video.*;
Capture myCapture;

void setup()
{
  size(200, 200);

  // The name of the capture device is dependent those
  // plugged into the computer. To get a list of the
  // choices, uncomment the following line
  // println(Capture.list());
  // And to specify the camera, replace "Camera Name"
  // in the next line with one from Capture.list()
  // myCapture = new Capture(this, width, height, "Camera Name", 30);

  // This code will try to use the last device used
  // by a QuickTime program
  myCapture = new Capture(this, width, height, 30);
}

void captureEvent(Capture myCapture) {
  myCapture.read();
}

void draw() {
  image(myCapture, 0, 0);
}

Je fais ma sauce :

import processing.video.*;
Capture myCapture;

void setup()
{
  size(400, 300);
  myCapture = new Capture(this, width, height, 30);
}

void captureEvent(Capture myCapture) {
  myCapture.read();
}

void draw() {
  image(myCapture, 0, 0);
}

void mouseClicked(){
  save("capture.png");
}

C’est quoi les void setup, draw, captureEvent, mousePressed ?
Le setup et le draw, on connait.
Le captureEvent c’est pour lire la webcam, le programme « écoute » les informations envoyées par celle-ci.
et enfin le mouseClicked lui écoute l’état du clic.

Flottille est composé d’une série de 15 séquences vidéos montrant des micro-pliages en papier argenté s’ouvrir et se refermer lentement à la surface de l’eau. Ces formes de quelques centimètres de coté proviennent de figures géométriques découpées par une machine pilotée par ordinateur. Elles ont une courte durée de vie. Les forces qui les animent ne répondent pas aux lois de la gravité mais à des phénomènes plus imperceptibles comme la capillarité et la tension superficielle qui s’exerce entre le liquide et le papier.

http://www.ordigami.net/flottille

à l’aventure !
- Avoir une idée (c’est bien)
Je voudrais simuler une grille magnétique de 10 pixels (magnétisme de la grille ou snap to grid dans Illustrator).
- Comprendre
Quand je clique sur un point avec pour coordonnées (6,17), sur une grille de 10 px ça donne (10,20).
- Traduire
Deux stratégies :
1/ utiliser ses connaissances

int monX;

void draw(){
 if(mouseX<10){
    monX=0;
}
if(mouseX<20){
    monX=10;
}
if(mouseX<30){
    monX=20;
}

println(monX);

}

Ça marche ! oui ça marche, mais ça renvoie toujours 20, un truc cloche…
Je vais encadrer entre deux valeurs ;
si le mouseX est supérieur ou égal à 0 ET plus petit que 10 alors monX = 0…

int monX;

void draw(){
 if(mouseX>=0 && mouseX<10){
    monX=0;
}
if(mouseX>=10 && mouseX<20){
    monX=10;
}
if(mouseX>=20 && mouseX<30){
    monX=20;
}
if(mouseX>=30 && mouseX<40){
    monX=30;
}
if(mouseX>=40 && mouseX<50){
    monX=40;
}
println(monX);

}

Voilà, un bon début mais c’est fastidieux (ou fast idiot), une pratique courante chez les débutants.

2/ approfondir ses connaissances
Via la documentation : http://processing.org/reference/ (pas simple)… ou via des exemples à disséquer.
Remettre le problème à plat en pensant à ses cours de mathématiques.
Ici, l’astuce est dans la fonction round() pour arrondir.

println(round(1.6));

Ceci affiche 2.
Dans mon idée, nous aurions 16 et nous voudrions 20.
Alors 16 – je divise par 10 -> 1.6 – je round( ) -> 2 – je multiplie par 10 -> 20 ! bingo !
En code, ça donne ceci :

round(mouseX/10)*10;

Première utilisation :

int a,b,c,d;

void draw() {
  a=round(pmouseX/10)*10;
  b=round(pmouseY/10)*10;
  c=round(mouseX/10)*10;
  d=round(mouseY/10)*10;
  line(a, b, c, d);
}

Variante :

int a, b, grille;

void setup() {
  size(360, 360);
  noStroke();
  grille=40;
  background(255);
}
void draw() {
  if (mousePressed) {
    a=round(mouseX/grille)*grille;
    b=round(mouseY/grille)*grille;
    fill(random(200)+55, 0, random(200)+55);
    rect(a+5, b+5, grille-10, grille-10);
  }
}

Aujourd’hui, on ajoute le « if » (une condition), ce qui permet d’améliorer avec deux lignes les scripts précédents et on aborde la notion de variable.
Nos outils de dessin sont « amusants » mais, premier problème, la souris dessine en permanence, on ne peut pas lever le crayon…

Gribouillis :

void setup(){
 size(400,400);
}

void draw(){
    line(pmouseX,pmouseY,mouseX,mouseY);
}

Gribouillis amélioré :

void setup(){
 size(400,400);
}

void draw(){
  if(mousePressed){
    line(pmouseX,pmouseY,mouseX,mouseY);
  }
}

Explication : on a toujours notre draw en boucle mais si (if) la souris est cliqué (mousePressed) il dessine sinon il n’a pas de consigne donc il ne fait rien.
variante :

void setup(){
 size(400,400);
 smooth();
}

void draw(){
  if(mousePressed){
    stroke(random(0,155));
    line(pmouseX+random(-10,10),
    pmouseY+random(-10,10),
    mouseX,
    mouseY);
  }
}

La fonction random(a,b) donne un chiffre (à virgule) entre a et b.

Les variables :
On reviendra sur les variables mais voici une première approche :

void setup(){
 size(400,400);
 background(255);
}

void draw(){
  if(mousePressed){
    a=pmouseX;
    b=pmouseY;
    c=mouseX;
    d=mouseY;
    line(a,b,c,d);
  }
}

Ceci marche dans pas mal de langage (javascript, actionscript, php…) mais ici on a une erreur :
« Cannot find anything named « a » »
correction :

void setup(){
 size(400,400);
 background(255);
}

void draw(){
  if(mousePressed){
    int a=pmouseX;
    int b=pmouseY;
    int c=mouseX;
    int d=mouseY;
    line(a,b,c,d);
  }
}

presque pareil :

int a,b,c,d;

void setup(){
 size(400,400);
 background(255);
}

void draw(){
  if(mousePressed){
    a=pmouseX;
    b=pmouseY;
    c=mouseX;
    d=mouseY;
    line(a,b,c,d);
  }
}

C’est quoi « int a » ?
int comme integer,
a est le nom de la variable (a n’est pas un nom pratique pour savoir ce qu’elle contient, mais ici c’est pour faire un raccourci temporaire)
« int a » sera une variable qui stocke un chiffre entier.
C’est quoi int a,b,c,d; ?
c’est la version courte de
int a;
int b;
int c;
int d;

Les deux derniers exemples affichent la même chose, l’un déclare les variables au début, l’autre dans le draw.
comparatif :

int age,taille; //je déclare age et taille

void setup(){
 age=25;
 int taille=180; // je déclare la taille
 println("il mesure "+taille+" cm"); // ça marche
}

void draw(){
  println("et il a "+age+" ans."); //ça marche
  println("il mesure "+taille+" cm"); // taille = 0

  noLoop();
}

à tester :

int age; //je déclare age

void setup(){
 age=25;
 int taille=180; // je déclare la taille
 println("il mesure "+taille+" cm"); // ça marche
}

void draw(){
  println("et il a "+age+" ans."); //ça marche
  println("il mesure "+taille+" cm"); // ça plante

  noLoop();
}

Il est parfois nécessaire de faire des tests, println() permet d’afficher du texte et des variables dans la console de Processing (cadre du bas).
à retenir : si les variables sont déclarées dans des fonctions (draw, setup, autres), elles sont lisibles que dans leurs fonctions (on parle de visibilité des variables) ;
si elles sont déclarées hors fonction (à la racine ou au début par convention), elles sont lisibles dans toutes les fonctions (draw, setup…).

une autre possibilité :

int age=25;

void setup(){
  println("il a "+age+" ans.");
}

void draw(){
  println("il a "+age+" ans.");
  noLoop();
}

Suite des notions de Processing, avec aujourd’hui des exemples assez simples.
mouseX et mouseY :
mouseX et mouseY donnent la position de la souris dans la fenêtre de l’application.

void setup(){
  size(800,600); //taille
  background(255); //fond
}

void draw(){

//  draw = en boucle
//  par défaut à 60 FPS

  smooth(); //lissage
  noStroke(); //pas de contour
  fill(random(255),random(5),random(255));
  //une couleur aléatoire avec peu de vert
  ellipse(mouseX,mouseY,200,200);
  // un cercle de 200 px positionné à l'endroit de la souris

//  on remonte à la ligne 6

}

Autre exemple :
On peut aussi ajouter de la transparence sur les couleurs en ajoutant une 4e valeur entre 0 (transparent) et 255 (opaque).

void setup()
{
  size(400,400);
  smooth();
  background(255);
}

void draw()
{
  stroke(random(255),0,random(25)+25,100);
  strokeWeight(50);
  line(200,200,mouseX,mouseY);
}

pmouseX et pmouseY :
Processing offre deux variables systèmes assez pratiques, pmouseX et pmouseY, celle-ci renvoient l’ancienne position de la souris à « l’image » précédente. Les exemples suivants devraient vous aider à comprendre.

void setup()
{
  size(400,400);
  smooth();
  background(255);
  frameRate(3); //3 images par seconde
}

void draw()
{
  //ancienne position
  strokeWeight(5);
  stroke(255,0,0);  //rouge
  point(pmouseX,pmouseY);

  //nouvelle position
  strokeWeight(10);
  stroke(0,0,0); //noir
  point(mouseX,mouseY);
}

Une variante :

void setup()
{
  size(400,400);
  background(255);
  frameRate(3); //3 images par seconde
}

void draw()
{
  //ajout d'une ligne
  noSmooth();
  strokeWeight(1);
  stroke(200); //gris
  line(pmouseX,pmouseY,mouseX,mouseY);

  smooth();

  //ancienne position
  strokeWeight(5);
  stroke(255);  // blanc
  point(pmouseX,pmouseY);

  //nouvelle position
  strokeWeight(10);
  stroke(0); //noir
  point(mouseX,mouseY);

}

Petite remarque, j’ai ajouté noSmooth() pour les lignes, ça enlève le lissage sur les lignes (question de goût ?).

Voilà pour aujourd’hui, demain on affinera ces exemples.

Suite de la découverte de Processing, avec aujourd’hui un peu plus de commandes et de syntaxes (le vocabulaire du langage).

Après avoir vu, la taille, le frameRate, le setup, le draw et le random, voici comment dessiner un rectangle, une ellipse, un point et une ligne.

Un rectangle :

  size(800,600);
  rect(10,10,200,400); // position x,y du coin en haut à gauche - largueur, hauteur

Première remarque, pas besoin de setup et de draw, ça marche directement !
Grosse parenthèse : On pourrait mettre ces deux lignes dans le setup, le résultat serait visuellement le même ; par contre je viens de tester dans le draw() la fonction size() ne marche pas (c’est logique).
La bonne pratique est de mettre se qui définit l’environnement dans le setup(), la taille, la couleur de fond, les chargements d’images…
À tester :

  rect(10,10,200,400);
  rect(10,10,400,200);
  rect(400,300,200,200);

Une ellipse :

  size(800,600);
  ellipse(10,10,200,400); // (x, y, largueur, hauteur)

Remarque : on verra plus tard comment avoir le même mode de positionnement pour le rect et l’ellipse.
À tester :

  ellipse(10,10,200,400);
  ellipse(10,10,400,200);
  ellipse(400,300,200,200);

Le point :

  size(800,600);
  point(10,10);

Il faut avoir l’œil car cette exemple affiche un pixel noir sur fond gris.

   size(800,600);
   strokeWeight(20);
   point(10,10);

Là, c’est mieux ? La commande strokeWeight(20) donne un contour de 20 pixel de diamètre mais c’est un peu cracra du pixel, il manque le lissage.

   size(800,600);
   smooth();
   strokeWeight(20);
   point(10,10);

Remarque : smooth() peut aussi servir sur les ellipses et autres formes.

La ligne :

   size(800,600);
   line(10,10,790,590); //origine x, origine y, arrivée x, arrivée y

  size(800,600);
  background(255); // fond blanc
  fill(255,100,0); //remplissage orange
  stroke(0,0,255); //contour bleu
  rect(10,10,200,400); // position x,y du coin en haut à gauche - largueur, hauteur

let’s go fun :

void setup(){
  size(424,424);
  background(255);
  smooth();
  stroke(255,0,0);
  strokeWeight(20);
  ellipse(212,212,500,500);
  stroke(0,0,255);
  ellipse(212,212,400,400);
  stroke(255,0,0);
  ellipse(212,212,300,300);
  stroke(0,0,255);
  ellipse(212,212,200,200);
  stroke(255,0,0);
  ellipse(212,212,100,100);
}

Remarque : je dessine les cercles du plus grand au plus petit car par défaut ils sont remplis de la couleur blanche, il existe noFill() et noStroke().