Voici une portion de code processing (v1.5 et/ou v2) que l’on retrouve dans ma carte de vœux 2012, une étape nécessaire avant l’assemblage de « mes briques de code ».
Deux notions de maths sont utiles, le calcul de distances entre deux points et l’équation paramétrique d’un cercle mais pas besoin de comprendre rigoureusement pour s’amuser avec ces formules :)

float x, y; //position du point
float a; // une sorte de rayon
int tx, ty; // target du point

void setup() {
  size(640, 360);
  background(250);
  smooth();
  frameRate(500);
  x=400;
  y=200;
  tx=320;
  ty=180;

  strokeWeight(2);
  a=sqrt(sq(x-tx)+sq(y-ty)); // distance entre deux points (pythagore)
}

void draw()
{
  fill(0, 10); //effet trace (motion trail)
  noStroke();
  rect(0, 0, 640, 360);
  stroke(255);
  point(x, y);

  // calcul de la position
  float angle=radians(frameCount*4); // à chaque image on bouge de 4°
  if (a>1) {
    x=cos(angle)*a+tx; // équation d'un cercle de rayon a et centre tx
    y=sin(angle)*a+ty; //
    a=a-0.05; // réduction du rayon
  } else {
    x=tx;
    y=ty;
  }
}

On peut faire pas mal d’opérations sur les Array dans Processing mais pour supprimer un élément, j’ai rien vu, de plus subset compte de 1 à n les éléments de la liste (=array) !
Voici une function _remove pour les listes de chiffres, à adapter selon vos besoins.

int[] s= { 1, 2, 3, 4};

int[] _remove(int[] s, int r) {
  return concat(subset(s, 0, r), subset(s, r+1, s.length-r-1));
}

void setup() {
  println("s="+join(nf(s, 0), ", "));
  s=_remove(s, 1); //on compte comme dans l'array à partir de 0
  println("s="+join(nf(s, 0), ", "));
}

Comme la manipulation sur les tableaux en 2D n’est pas simple (enfin il faut juste mettre un type devant), voici la version 2D

int[][] _remove(int[][] s,int r){
 return (int[][]) concat((int[][]) subset(s,0,r),(int[][]) subset(s,r+1,s.length-r-1));
}

Aujourd’hui, je vais vous présenter une petite librairie pour Processing, SQLibrary.
Cette librairie permet de connecter Processing et MySQL, je détaille peu, il s’agit d’un retour d’expérience personnelle que je partage pour les utilisateurs francophones.

Lancer MAMP :)
Premier exemple,ajouter dans une BDD.

import de.bezier.data.sql.*;

MySQL msql;
String nom,prenom;
int age;

/* dans phpMyAdmin :
CREATE TABLE IF NOT EXISTS `stu` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nom` varchar(255) NOT NULL,
  `prenom` varchar(255) NOT NULL,
  `age` int(11) NOT NULL,
  PRIMARY KEY (`id`)
)
*/

void setup() {
  msql = new MySQL( this, "localhost:8889", "esad", "root", "root" );

  if ( msql.connect() )
  {
    nom="bond";
    prenom="james";
    age=17;
    msql.execute("INSERT INTO stu (nom,prenom,age) VALUES ('"+nom+"','"+prenom+"',"+age+")");
  }
}

Ce second exemple permet d’avoir le prochain ID (auto-incrementé) :

import de.bezier.data.sql.*;

MySQL msql;

void setup() {
  msql = new MySQL( this, "localhost:8889", "esad", "root", "root" );

  if ( msql.connect() )
  {
    msql.query( "SHOW TABLE STATUS LIKE 'students'" );
    msql.next();
    println(msql.getInt("Auto_increment"));
  }
}

en php

$query 		= "SHOW TABLE STATUS LIKE '$tablename'";
$result 	= mysql_query($query) ;

$row = mysql_fetch_assoc($result);
echo $row['Auto_increment'];

Voilà pour ce court épisode du jour, d’autres exemples sont fournis avec la librairie.

La magie de la vérité, des mensonges… et des iPods.

Si quelqu’un connaît Monsieur Mamp…

Host localhost
Port 3306 // je veux bien mais c’est 8889 dans les préférences
User root
Password root

Et dans le php.ini

display_errors = Off

C’est pas sympa pour les newbies ;¬) on basculera en display_errors = On (pomme + s, relancer Mamp)

Aujourd’hui, je vais aborder une extension librairie qui offre pas mal de possibilités : procontroll.
Pour installer cette librairie, le plus simple est de la dézipper dans

utilisateurs > benoît > documents > processing > librairies

selon vos préférences de Processing :

À quoi sert cette librairie ?
Elle permet de brancher plusieurs périphériques de type joypad, joystick, souris et de récupérer les événements liés.
Premier point : débrancher les périphériques exotiques des ports USB (paradoxalement ma souris Logitech sans fil est incompatible).
Un exemple est livré, celui affiche dans la console les périphériques disponibles :

import procontroll.*;
import java.io.*;

ControllIO controll;

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

  controll = ControllIO.getInstance(this);
  controll.printDevices();

  for(int i = 0; i < controll.getNumberOfDevices(); i++){
    ControllDevice device = controll.getDevice(i);

    println(device.getName()+" has:");
    println(" " + device.getNumberOfSliders() + " sliders");
    println(" " + device.getNumberOfButtons() + " buttons");
    println(" " + device.getNumberOfSticks() + " sticks");

    device.printSliders();
    device.printButtons();
    device.printSticks();
  }
}

Si ma souris Logitech est branchée, ça coince :

Failed to enumerate device: Device open failed: -536870203
<<< available proCONTROLL devices: >>>

en la débranchant (sans relancer Processing juste stop -> play), on découvre que je suis sur un Mac ;¬)

0
0

<<< available proCONTROLL devices: >>>

0: Apple Internal Keyboard / Trackpad
1: Apple Internal Keyboard / Trackpad

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Apple Internal Keyboard / Trackpad has:
0 sliders
180 buttons
0 sticks

<<< available Apple Internal Keyboard / Trackpad buttons: >>>

0: Left Control
1: Left Shift
2: Left Alt
3: Left Windows
4: Right Control
5: Right Shift
6: Right Alt
7: Right Windows
8: Unknown
9: Unknown
10: Unknown
11: A
12: B
13: C
14: D
15: E
16: F
17: G
18: H
19: I
20: J
21: K
22: L
23: M
24: N
25: O
26: P
27: Q
28: R
29: S
30: T
31: U
32: V
33: W
34: X
35: Y
36: Z
37: 1
38: 2
39: 3
40: 4
41: 5
42: 6
43: 7
44: 8
45: 9
46: 0
47: Return
48: Escape
49: Back
50: Tab
51:
52: -
53: =
54: [
55: ]
56: \
57: .
58: ;
59: ‘
60: ~
61: ,
62: .
63: /
64: Caps Lock
65: F1
66: F2
67: F3
68: F4
69: F5
70: F6
71: F7
72: F8
73: F9
74: F10
75: F11
76: F12
77: SysRq
78: Scroll Lock
79: Pause
80: Insert
81: Home
82: Pg Up
83: Delete
84: End
85: Pg Down
86: Right
87: Left
88: Down
89: Up
90: Num Lock
91: Num /
92: Unknown
93: Num -
94: Num +
95: Num Enter
96: Num 1
97: Num 2
98: Num 3
99: Num 4
100: Num 5
101: Num 6
102: Num 7
103: Num 8
104: Num 9
105: Num 0
106: Num .
107: \
108: Apps
109: Power
110: Num =
111: F13
112: F14
113: F15
114: Unknown
115: Unknown
116: Unknown
117: Unknown
118: Unknown
119: Unknown
120: Unknown
121: Unknown
122: Unknown
123: Unknown
124: Unknown
125: Unknown
126: Unknown
127: Stop
128: Unknown
129: Unknown
130: Unknown
131: Unknown
132: Unknown
133: Unknown
134: Unknown
135: Unknown
136: Unknown
137: Caps Lock
138: Num Lock
139: Scroll Lock
140: ,
141: Unknown
142: Unknown
143: Unknown
144: Unknown
145: Unknown
146: Unknown
147: Unknown
148: Unknown
149: Unknown
150: Unknown
151: Unknown
152: Unknown
153: Unknown
154: Unknown
155: Unknown
156: Unknown
157: Unknown
158: Unknown
159: Unknown
160: Unknown
161: SysRq
162: Unknown
163: Unknown
164: Pg Up
165: Return
166: Unknown
167: Unknown
168: Unknown
169: Unknown
170: Unknown
171: Unknown
172: Left Control
173: Left Shift
174: Left Alt
175: Left Windows
176: Right Control
177: Right Shift
178: Right Alt
179: Right Windows

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Apple Internal Keyboard / Trackpad has:
2 sliders
3 buttons
1 sticks

<<< available Apple Internal Keyboard / Trackpad sliders: >>>

0: x relative
1: y relative

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available Apple Internal Keyboard / Trackpad buttons: >>>

0: Left
1: Right
2: Middle

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available Apple Internal Keyboard / Trackpad sticks: >>>

0: y x

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Et si je branche un joypad (l’affreux de la freebox v6)

0
0
0
0

<<< available proCONTROLL devices: >>>

0: Apple Internal Keyboard / Trackpad
1: Apple Internal Keyboard / Trackpad
2: Apple Internal Keyboard / Trackpad
3: Generic USB Joystick

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Apple Internal Keyboard / Trackpad has:
0 sliders
180 buttons
0 sticks

<<< available Apple Internal Keyboard / Trackpad buttons: >>>

0: Left Control
(…)
179: Right Windows

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Apple Internal Keyboard / Trackpad has:
2 sliders
1 buttons
1 sticks

<<< available Apple Internal Keyboard / Trackpad sliders: >>>

0: x relative
1: y relative

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available Apple Internal Keyboard / Trackpad buttons: >>>

0: Left

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available Apple Internal Keyboard / Trackpad sticks: >>>

0: y x

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Apple Internal Keyboard / Trackpad has:
2 sliders
3 buttons
1 sticks

<<< available Apple Internal Keyboard / Trackpad sliders: >>>

0: x relative
1: y relative

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available Apple Internal Keyboard / Trackpad buttons: >>>

0: Left
1: Right
2: Middle

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available Apple Internal Keyboard / Trackpad sticks: >>>

0: y x

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Generic USB Joystick has:
5 sliders
13 buttons
0 sticks

<<< available Generic USB Joystick sliders: >>>

0: x absolute
1: y absolute
2: z absolute
3: z absolute
4: rz absolute

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available Generic USB Joystick buttons: >>>

0: 0
1: 1
2: 2
3: 3
4: 4
5: 5
6: 6
7: 7
8: 8
9: 9
10: 10
11: 11
12: cooliehat: pov

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

Un autre modèle :

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
USB GAMEPAD 8116 has:
5 sliders
11 buttons
0 sticks

<<< available USB GAMEPAD 8116 sliders: >>>

0: z absolute
1: rz absolute
2: x absolute
3: y absolute
4: slider absolute

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

<<< available USB GAMEPAD 8116 buttons: >>>

0: 0
1: 1
2: 2
3: 3
4: 4
5: 5
6: 6
7: 7
8: 8
9: 9
10: cooliehat: pov

<<< >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

On connait le nom du périphérique
il suffit de régler cette ligne selon votre nom de périphérique comme ci-dessous
à la ligne 26 : device = controll.getDevice(« USB GAMEPAD 8116″);

import procontroll.*;
import java.io.*;

ControllIO controll;
ControllDevice device;
ControllSlider sliderX; //selon votre sauce
ControllSlider sliderY; //idem
ControllButton b0,b1,b2,b3,b4,b5,b6,b7,b8,b9; //idem

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

  controll = ControllIO.getInstance(this);
  for (int i = 0; i < controll.getNumberOfDevices(); i++) {
    ControllDevice device = controll.getDevice(i);

    println(device.getName()+" has:");
    println(" " + device.getNumberOfSliders() + " sliders");
    println(" " + device.getNumberOfButtons() + " buttons");
    println(" " + device.getNumberOfSticks() + " sticks");

    device.printSliders();
    device.printButtons();
    device.printSticks();
  }
  device = controll.getDevice("USB GAMEPAD 8116");
  device.setTolerance(0.05f);
  device.rumble(100,1);
  sliderX = device.getSlider(2);
  sliderY = device.getSlider(3);

  b0 = device.getButton(0);
  b1 = device.getButton(1);
  b2 = device.getButton(2);
  b3 = device.getButton(3);
  b4 = device.getButton(4);
  b5 = device.getButton(5);
  b6 = device.getButton(6);
  b7 = device.getButton(7);
  b8 = device.getButton(8);
  b9 = device.getButton(9);

  fill(0);
  rectMode(CENTER);

}

void draw() {
  background(255);

  if (b0.pressed()) {
    fill(255, 0, 0);
    println("b0");
  }
  else if (b1.pressed()) {
    fill(0, 255, 0);
    println("b0");
  }
  else if (b2.pressed()) {
    fill(0, 0,255);
    println("b2");
  }
  else if (b3.pressed()) {
    fill(255,255, 0);
    println("b3");
  }
  else if (b4.pressed()) {
    fill(0,255, 255);
    println("b4");
  }
   else if (b5.pressed()) {
    fill(255, 0, 255);
    println("b5");
  }
  else if (b6.pressed()) {
    fill(255, 255, 255);
    println("b6");
  }
   else if (b7.pressed()) {
    fill(127, 0, 255);
    println("b7");
  }
  else if (b8.pressed()) {
    fill(255, 0, 255);
    println("b8");
  }
  else if (b9.pressed()) {
    fill(255, 0, 255);
    println("b9");
  }
  else {
    fill(0);
  }

  float x = sliderX.getTotalValue() + width/2;
  float y = sliderY.getTotalValue() + height/2;

  if (x > width + 20 || x < - 20 || y > height + 20 || y < - 20) {
    sliderX.reset();
    sliderY.reset();
  }

  rect(x, y, 20, 20);
}

Je vous laisse décortiquer tout ça :)
Have fun !

Très bien résumé et c’est sous-titré en français via le menu cc sur la version youtube : http://www.youtube.com/watch?v=9hIQjrMHTv4

Aujourd’hui, je peux dire que j’ai un blog depuis le 4 septembre 2006, les meilleurs en maths auront calculé l’âge du capitaine !

En attendant de poster et archiver des choses passionnantes, j’en profite pour mettre cette astuce WordPress.

Comme je suis graphiste et que j’aime la typo, la version française de l’administration de WordPress m’irrite avec sa césure douteuse.
L’affreux
« Tableau de
bord »

On peut le modifier dans les fichiers .po et .mo mais la moindre mise à jour du moteur annulera le changement.
Pour le renommer avec un nom plus court ;¬) on peut ajouter dans le « dossier de votre thème/functions.php » (le créer si nécessaire) ces quelques lignes.

<?php
add_filter( 'gettext', 'dash' );
add_filter( 'ngettext', 'dash' );

function dash( $translated )
{
    $translated = str_ireplace( 'Tableau de bord', 'Home', $translated );
    return $translated;
}
?>

D’autres modifications de l’administration de WordPress chez six revisions
Une « classe » php pour aller plus loin, plus vite, plus fort, plus haut.
wp-admin-menu-classes.php
Mode d’emploi :
Copier wp-admin-menu-classes.php dans votre thème, puis ajouter selon vos besoins les codes suivants dans functions.php.

<?php
require_once('wp-admin-menu-classes.php');
add_action('admin_menu','my_admin_menu');
function my_admin_menu() {
  swap_admin_menu_sections('Pages','Posts');              // Swap location of Posts Section with Pages Section
  rename_admin_menu_section('Media','Photos & Video');    // Rename Media Section to "Photos & Video"
  delete_admin_menu_section('Links');                     // Get rid of Links Section
  $movie_tags_item_array = get_admin_menu_item_array('Movies','Movie Tags');  // Save off the Movie Tags Menu
  update_admin_menu_section('Movies',array(               // Rename two Movie Menu Items and Delete the Movie Tags Item
    array('rename-item','item'=>'Movies','new_title'=>'List Movies'),
    array('rename-item','item'=>'Add New','new_title'=>'Add Movie'),
    array('delete-item','item'=>'Movie Tags'),
  ));
  copy_admin_menu_item('Movies',array('Actors','Add New')); // Copy the 'Add New' over from Actors
  renamed_admin_menu_item('Movies','Add New','Add Actor');  // Rename copied Actor 'Add New' to 'Add Actor
  add_admin_menu_item('Movies',array(                       // (Another way to get a 'Add Actor' Link to a section.)
    'title' => 'Alt Add Actor ',
    'slug' => 'post-new.php?post_type=actor',
  ), array(// Add Back the Movie Tags at the end.
    'where'=>'end'
  ));
  add_admin_menu_item('Movies', $movie_tags_item_array, array(// Add Back the Movie Tags at the end.
    'where'=>'end'
  ));
  delete_admin_menu_section('Actors');                      // Finally just get rid of the actors section
}
?>

FaceOSC from Kyle McDonald on Vimeo.

Voilà un projet à suivre de près ! Paper.js est un framework open source de dessin vectoriel pour canvas (html5) compatible Scriptographer. L’ensemble est développé par Jürg Lehni & Jonathan Puckey.
ps : Bravo pour cet exemple !

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.

à 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().

Voici quelques lignes de code pour vous aider à faire vos premiers pas en Processing.
Je vous conseille de wikipedier/googler processing.org ; être étudiant en graphisme et ne pas connaître l’existence et les possibilités de cet outil serait dommage !
Deux ouvrages en français sont sortis cette année et disponibles dans les bonnes librairies (j’ai déjà parlé du premier ou dernier).
Un manuel en français est disponible gratuitement : http://fr.flossmanuals.net/Processing/Introduction.
De très bons cours sont en ligne :
Là : http://www.ecole-art-aix.fr/rubrique81.html
et chez le dernier : http://www.hyperbate.com/dernier/?page_id=2482
Les anglophiles trouveront leur bonheur sur le site officiel !
Et enfin, ceux qui veulent un support vidéo (eng) : http://www.youtube.com/watch?v=rJrh0RipoVo
il y a une dizaine de vidéos :)

INTRODUCTION

En général, on commence par apprendre ses 3 lignes et leur structure.
Comme dans de nombreux langages, // permet de commenter la ligne.
Exemple 1 :

void setup(){
  size(800,600); // pour avoir une fenêtre de 800 par 600 pixels.
}

Sur Mac l’accolade :
alt + ( = {
alt + ) = }

Pour voir le résultat, on compile avec le bouton lecture en haut à gauche.
Première remarque, il ne se passe rien, seconde remarque, c’est gris.
Exemple 2 :

void setup(){
  size(800,600); // pour avoir une fenêtre de 800 par 600 pixels.
  background(0); // fond noir
}

C’est de la folie tout ça ?
La commande background permet de changer la couleur du fond.
À tester :

  background(255);
  background(0);
  background(255/2);
  background(255,0,0);
  background(0,255,0);
  background(100,255,50);
  background(100,100,100);
  background(#ff6600);
  background(red); // ne marche pas
  background(#f60); // ne marche pas

Plutôt simple ?
Non ?
Astuce : Dans le menu File Edit (…) Tools -> Color Selector

On continue avec le setup et le draw.
Exemple 3 :

void setup(){
  size(800,600);
}

void draw(){

}

Exemple inutile servant juste à montrer la syntaxe du draw. Le draw est le rafraichissement d’écran en boucle, comme si vous clignez des yeux. Le setup s’exécute juste une fois en lancement du programme.
Exemple 4 :

void setup(){
  size(800,600);
  frameRate(2); //la cadence en images par seconde ou FPS pour frames per second
}

void draw(){
  background(random(255)); //un gris aléatoire
}

J’ai ralenti la cadence pour nos amis les épileptiques et pour faire le test j’ai utilisé random(unChiffre) qui donne un chiffre (à virgule) entre 0 et 255.
À tester :

void setup(){
  size(800,600);
  frameRate(2); //la cadence en images par seconde ou FPS pour frames per second
}

void draw(){
  background(random(255)); //un gris aléatoire
  background(0); // noir
}

puis

void setup(){
  size(800,600);
  frameRate(2); //la cadence en images par seconde ou FPS pour frames per second
}

void draw(){
  background(0); // noir
  background(random(255)); //un gris aléatoire
}

Voilà, ça fait 5 fruits et légumes notions de processing pour aujourd’hui.

Petite correction typographique française pour les amateurs de WordPress. Ici il s’agit juste de la fonction qui affiche les customs fields (champs personnalisés) avec « nom: valeur », la fonction ajoute une espace insécable devant les deux-points.
À ajouter dans functions.php dans le thème (créer le fichier functions.php ci-besoin) :

add_filter("the_meta_key","deuxpoints");
function deuxpoints($t){
	//$t=str_replace(":"," :",$t); ancienne version
	$t=preg_replace("/(\S):/","$1 :",$t); //Regex mon amour
	return $t;
}

Voilà pour la forme :)

Dancing Phalanges from Andrew Sorensen on Vimeo.

Très étrange, jouer du piano avec un clavier du code !
Je vous invite à lire l’article (fr) chez l’excellentissime Cuarto derecha.

Où voir le programme ici : http://impromptu.moso.com.au/

Tu es créatif ? Tu as un ordinateur (linux, mac os x, ou windows) ? Tu aimes les logiciels Adobe autant que tu les détestes, parfois même tu pestes contre eux…
Pousser par une logique étrange, depuis 10 ans, Adobe s’enfonce dans son monopole. Pour exemple, je ne comprends pas pourquoi l’outil pour faire des spirales sous Illustrator est si incomplet (sur wikipédia on voit 8 sortes de spirale !) et pourquoi un outil à lens flare existe — pour un logiciel de dessin vectoriel, ce genre de priorité m’exaspère !
Même Photoshop est complètement pervers, on peut ouvrir des gif animés en forçant l’ouverture (Fichier > Importation > Images vidéo dans des calques, puis taper le nom du gif ou *.* sur CS4) mais via « ouvrir » c’est bridé (et qu’on accuse pas les chinois !).

Je reviens à mes moutons…
Ami du pixel et de la courbe de Bézier, ton outil ne suit plus ta créativité, tes idées ne sont plus réalisables dans des temps normaux et tu veux t’ouvrir à d’autres horizons !

La programmation va devenir ton ami. Depuis 10 ans, les choses ont évolué ! Processing change la donne, simplifie l’écriture et devient l’outil idéal (avec toujours la possibilité de combiner le rendu avec des logiciels d’images), le potentiel est infini ! Attention, Processing n’est pas un Photshop / Illustrator killer mais pose une vraie question sur l’usage de l’ordinateur dans la création.

Depuis quelques jours, est sorti un livre simple et en français, celui-ci cible par son approche les étudiants en école d’art (et les curieux).
Les débutants devraient comprendre facilement les nombreux exemples pédagogiques ainsi que les notions de programmations abordées, le vocabulaire et la grammaire de processing.
Ceux qui ont des connaissances en code (as, javascript, php…) auront sous la main de quoi basculer rapidement.

Chez Pearson Processing, Le code informatique comme outil de création ou ailleurs.

Amis du code et de la typographie (du code de typographie aussi), voici une modeste contribution.
Souvent je compte à la main le nom de signe par ligne dans un paragraphe de texte, la règle voudrait entre 52 et 78 signes par ligne pour une optimisation de la lecture sur le papier ; à l’écran on pourrait ajuster les lignes un peu plus longues mais vu la qualité du texte dans les navigateurs, on peut appliquer des valeurs identiques.

The optimum line length in legibility terms is 2–3 alphabets, or 52–78 characters with spaces. (via)

En javscript pour compter la sélection, ça donne ceci (tester sur firefox et webkit) :

function getSelectedText(){
if (window.getSelection){
var str = window.getSelection();
}else if (document.getSelection){
var str = document.getSelection();
}else {
var str = document.selection.createRange().text;
}
return str;
}
var sel = getSelectedText();
alert(sel.toString().length);

On teste !
sélectionner un texte puis cliquer ici

Le bookmarklet c’est une version compressée sur une ligne avec une moulinette url Encode.

javascript:function%20getSelectedText(){if(window.getSelection){var%20str=window.getSelection()}else%20if(document.getSelection){var%20str=document.getSelection()}else{var%20str=document.selection.createRange().text}return%20str}var%20sel=getSelectedText();alert(sel.toString().length);

Pour les novices, pour avoir ce script sur une autre page que mon blog, il suffit de glisser/déposer -> compte-signe dans la barre des signets (marque-pages) !
Voilà (j’ai essayer de mettre une icône au signet mais ça me semble difficile).