jaiunblog.com | j'ai un blog - graphisme, design, programmation » tutorials

processing #8 : SQLibrary

ben — Thu, 22 Sep 2011 15:12:26 +0000

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.

processing #7 : proControll

ben — Mon, 12 Sep 2011 12:51:08 +0000

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 !

5 ans

ben — Sun, 04 Sep 2011 15:57:17 +0000

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.

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.

'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
}
?>

premiers pas en processing #6

ben — Thu, 26 May 2011 15:09:46 +0000

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.

premiers pas en processing #5

ben — Thu, 26 May 2011 11:46:59 +0000

à 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);
  }
}

premiers pas en processing #4

ben — Wed, 25 May 2011 19:47:23 +0000

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();
}

premiers pas en processing #3

ben — Tue, 24 May 2011 17:18:13 +0000

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.

premiers pas en processing #2

ben — Mon, 23 May 2011 12:24:08 +0000

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

Ça manque de couleurs ?

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

premiers pas en processing #1

ben — Sat, 21 May 2011 12:48:21 +0000

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 :)

Voici une humble contribution en support de mes cours.

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.

mon premier bookmarklet

ben — Thu, 09 Sep 2010 20:50:44 +0000

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

mootools + css + highlight

ben — Thu, 08 Apr 2010 19:35:45 +0000

Petit script bonbon du jour : highlight !

Prérequis :
faire un xhtml
ajouter une ligne pour charger mootools (lastMoo.js dans mon exemple)





high

1re étape :
Remplir de blocs carrés notre page.
Un peu de maths : je veux n carrés de 50 px de large dans une window (une page) de 1005 px de large.
20 blocs, ça passe, 21 ça dépasse (1050 px)…
Techniquement en xhtml/css on laissera donc déborder le 21e bloc en ajoutant un conteneur de 1050 px de large pour nos n blocs et en masquant l’overflow (les barres de scrolling).

Tout ça c’est bien mais on va le faire automatiquement pour la largueur et la hauteur et pour n’importe quelle largeur de window.
Pour les débutants on pourrait copier/coller 500 fois «

mais ce n’est pas beaucoup plus difficile de le faire via Mootools.
En CSS ceci suffit :

Pour le javascript

var squareSize=50;
var winx=((window.getSize().x)/squareSize).toInt()+1;
var winy=((window.getSize().y)/squareSize).toInt()+1;

La première ligne définit la taille de mon bloc (ici 50 sur 50 px).
La deuxième calcule le nombre de bloc qui rentre + 1
en détaillant
(la largueur de mon navigateur / taille du bloc)
.toInt( ) pour arrondir en dessous (20,9).toInt()=20 et j’ajoute 1.
La troisième s’occupe de la hauteur.

Pour continuer, il faut créer un conteneur pour mettre mes N blocs, celui-ci sera plus large que ma page mais l’overflow du body est masqué. Je le nomme full

Je continue mon javascript :)
Je vais mettre ma div full à la taille calculée :

var squareSize=40;
var winx=((window.getSize().x)/squareSize).toInt()+1;
var winy=((window.getSize().y)/squareSize).toInt()+1;

$('full').setStyle('width',winx*squareSize);
$('full').setStyle('height',winy*squareSize);

J’ai besoin d’injecter mon bloc dans full

new Element('div', {
	'class':'bloc',
	'styles': {
        'width':squareSize+'px',
        'height':squareSize+'px'
    }
}).inject($('full'));

et de le faire plusieurs fois (exactement, le nombre de bloc par ligne x le nombre par colonne)

for(var i=0;i<(winx*winy);i++){
new Element('div', {
	'class':'bloc',
	'styles': {
        'width':squareSize+'px',
        'height':squareSize+'px'
    }
}).inject($('full'));
}

voici maintenant l’étape Frankestein, via motools l’effet highlight tient en une ligne

$('.bloc').highlight('#aaa','#fff');

ici je l’applique au premier bloc en classe ‘.bloc’ et il nous manque une technique pour lui dire à quel moment ou comment doit-il se déclencher, sinon il sera en highlight dès le lancement.
On peut ajouter un paramètre en mouseover

el=$('.bloc');
el.addEvent('mouseover', function () {
	var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
	el.highlight(color1,'#fff');
	});

ci-dessus, j’ai ajouté une variable el mais ça ne change pas beaucoup et color1, qui nous donnera une couleur en hexa aléatoire (#——–) avec très peu de vert via $random(0,5).
Il manque une technique pour le faire sur tous les blocs !

$$('.bloc').each(function (el) {
	el.addEvent('mouseover', function () {
	var color1=('rgb('+$random(0,255)+','+$random(0,5)+','+$random(0,255)+')').rgbToHex();
	el.highlight(color1,'#fff');
	});
});

ce n’est pas forcement clair pour les débutants mais ça donne une idée ?
Dernière ligne mais qui sera notre début, on charge tous ça à la fin du chargement du dom html :

window.addEvent('domready', function(){
/* notre script */
)};

Version complète





high

ci besoin :
mon lastmoo mootools.js
ou ici : http://mootools.net/download

désactiver un plugin wordpress sur une page

ben — Sun, 28 Feb 2010 16:37:11 +0000

Problématique du jour, j’ai installé un plugin pour mettre automatiquement les vidéos de youtube, vimeo et autres à la largueur de mon site : http://wordpress.org/extend/plugins/flash-video-resizer/.
Mais voilà malgré les options proposées dans l’administration du plugin, impossible de spécifier la suppression du resize sur une page précise…
Dans le monde merveilleux de wordpress, il existe les filtres !
Le plugin ci-dessus applique un filter au content, dans les sources de celui-ci on lira

add_filter('the_content', 'fvr_resizeMarkup');

il suffit donc de faire l’inverse !
L’avantage c’est qu’on garde les autres filters !





// la boucle + le pied (...)

comment bloquer un visiteur sur votre site

ben — Thu, 25 Feb 2010 23:15:55 +0000

Pré-requis, sur internet ou dans un réseau chaque machine possède une ip, une sorte de plaque d’immatriculation de votre connexion qui ressemble à ceci 234.232.264.129 ; quatre chiffres entre 0 et 255.
La votre actuellement est http://www.mon-ip.com/ (en rouge sur ce site).

Si je connais votre IP et que je n’ai pas envi de vous sur mon site, je peux vous bannir en créant un fichier .htaccess à la racine de mon site, avec ceci dedans — le nom commence par un point ce qui complique un peu l’opération…
On fera un htaccess.txt puis on le renommera avec le logiciel de FTP .htacces [facile ?].

RewriteEngine on
RewriteCond %{REMOTE_ADDR} ^90.xxx.xxx.xxx
RewriteRule .*    http://www.perdu.com/

Ici je bloque 90.xxx.xxx.xxx à vous de mettre l’IP à bloquer 90.123.123.123 par exemple ou 123.90.123.123.

Bonus, si vous voulez bloquer un ~~ami~~ ~~crétin~~ boulet…
Avec un message de son email vous pouvez retrouver son IP !
Sur hotmail -> clic droit sur l’email dans la boite aux lettres -> afficher la source du message -> puis chercher
X-Originating-IP: [xxx.xxx.xxx.xxx]
Sur Thunderbird ctrl + U ou pomme + U et chercher :
Received: from xxx.xxx.xxx.xxx

construisez votre thème wordpress

ben — Tue, 02 Feb 2010 14:51:54 +0000

Ambiance chic et classe façon altaya ou del prado !
Cette semaine le n°1, ses fichiers php, son png et sa feuille de style, pour moins de 2 euros comme chez carglass !

L’objectif de ce tutorial est de faire un thème portfolio imitant la simplicité et l’ergonomie des indexhibit afin de comprendre les bases de la création de thème pour WordPress.
Petite précision : je ne connais pas l’interface d’administration d’indexhibit et j’ai aucun avis sur celle-ci :¬) mais j’aime beaucoup de le travail de Daniel Eatock.

Je vais supposer que l’administration de wordpress n’est plus un mystère (c’est en français et assez ergonomique ?).
Prérequis, wordpress propose d’écrire des pages ou des articles, les articles sont affichés de manière antéchronologique (bizarrement comme un blog) et les pages de manière statique. Ici je détourne un peu l’usage de wordpress mais il s’agit d’un exercice pour simplifier cette première approche, notre thème n’affichera que des pages, sachant qu’on pourra toujours afficher des articles avec quelques modifications supplémentaires.

1re étape Ajouter quelques pages : en principe une page existe déjà sous le nom de « à propos », ci-dessous j’ai quatre pages, idéalement avec une image et un petit texte (lorem ipsum) pour ne pas travailler à l’aveuglette.

2e étape spécifiquement pour ce thème, il faut mettre une page statique en accueil :
Dans Réglages > Lecture (cliquer sur l’image pour zoomer).

Les choses sérieuses commencent :-)
Si vous aimiez ou aimez jouer au Lego© et bien ça n’a rien à voir ! enfin si un peu. Un thème est composé de multiples fichiers, des morceaux de php, une ou plusieurs feuilles de styles, des images et pour être propre un screenshot.png…
selon votre machine les fichiers seront à mettre dans un dossier plus ou moins comme ceci
mac : file:///Applications/MAMP/htdocs/wordpress/wp-content/themes/–le nom de votre thème –/
pc : c:/wamp/www/wordpress/wp-content/themes/–le nom de votre thème –/
ftp : www/wordpress/wp-content/themes/–le nom de votre thème –/

obligatoire : index.php, style.css
obligatoire pour notre exemple : head.php, page.php
Curieusement index.php peut-être vide (ici comme l’accueil est sur une page, notre index.php sera vide) mais son absence empêcherait la validité du thème !
Toutes les informations sur notre thème seront dans l’entête de la feuille de style.

Voici un début pour style.css, j’y ajoute tout de suite un RESET (8 lignes qui améliorent les styles par défaut de nos navigateurs), je n’ai rien inventé le reset css vient d’ici et l’entête est une modification/adaptation de celui par défaut.

/*
Theme Name: PageOnly Alpha Turbo
Theme URI: http://wordpress.org/
Description: Un thème à la indexhibit
Version: II
Author: Ben Jaiunblog
Author URI:http://jaiunblog.com
Tags: 

PageOnly Alpha Turbo II

*/

/* Begin  */
/*  RESET   */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:0}
/* la suite */
/* bientôt */

en image :

La tête dans… la page ? le header.php
Nos pages vont s’afficher grâce au fichier page.php, c’est une moulinette de wordpress qui pour simplifier dit que si on affiche une page statique, celle-ci se construit selon page.php. Page.php commence par une fonction php get_header(); qui va chercher et afficher header.php, on a donc un morceau de tête qui s’intercale…
On pourrait faire un collage rapide copier/coller de tout le header.php dans page.php mais l’intérêt ici est de pouvoir récupérer l’header dans d’autres pages comme dans l’index.php (pour bien comprendre, il faudrait regarder le thème par défaut de wordpress car ici notre thème n’exploite pas cette avantage).
header.php



>

	
	<?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>
	
	
	

>
	
	    
			
			
			

Pages'); ?>

page.php



	
		
		
		
			
				Read the rest of this page »'); ?>
				 'Pages: ', 'after' => '', 'next_or_number' => 'number')); ?>
			
		
		
	', ''); ?>

Dans header.php une ligne php nous intéresse particulièrement :

Pages'); ?>

Le php va produire du html en communicant avec la base de données, ici il va faire une liste des pages que l’on a ajouté dans wordpress avec les liens.

en version simplifiée


page 01
page 02

en version moulinette WordPress avec les options classiques (voir la documentation de wp_list_pages)



Pages

01
02
03
04

Pour le reste dans page.php, en simplifiant, ça affiche le titre, le contenu de notre page et un bouton « éditer » si la personne qui visite le site est autorisée à modifier la page.

...

...
Read the rest of this page »'); ?>
...
', ''); ?>

Voici le code en html produit par tout ce php :


	
	    
			
			*****
			

			Pages
01
			02
			03
			04
			
		

	
		
		01
			LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM !
		
		Edit this entry.

Fin des choses sérieuses :-) on passe à la suite et donc au CSS… une remarque pertinente serait de constater un peu trop d’emballage de div inutiles qui n’auront pas besoin de CSS, on pourrait les supprimer (libre à vous) sauf si vous voulez mettre plusieurs images en background et faire des sous-blocs… je suis parti du thème par défaut qui emballe beaucoup :-).

En lisant le html et avec un peu d’intuition les blocs à css-ifier sont #page, #header, #col, #content, body, p, ul, li, a…
C’est l’heure de faire un schéma de nos blocs et de leurs places pour éclaircir la situation !

~~Fin de l’épisode 1.~~
En attendant que je peaufine mon CSS, un peu de techniques CSS et gabarits proches de notre résultat.

Les fichiers nécessaires seront ajoutés d’ici peu !
Pour aller plus loin, chez francis : http://www.fran6art.com/wordpress/creez-votre-theme-wordpress-de-a-a-z/

suite et fin
/* fichier css avec le maximum de commentaires ! */

/*
Theme Name: PageOnly Alpha Turbo
Theme URI: http://wordpress.org/
Description: Un thème à page à la indexhibit
Version: II
Author: Ben Jaiunblog
Author URI:http://jaiunblog.com
Tags: 

PageOnly Alpha Turbo II

*/

/* Begin  */
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
q:before,q:after{content:''}
fieldset,img,abbr,acronym{border:0}

/* Start */
/* mise en page */
body {
	font-size:62.5%; /* Resets 1em to 10px */
	font-family:'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Sans-Serif;
	background:#fff url(img/fond.gif) repeat-y top left;
	color:#333;
}

#col {
	width:100px; /*largeur de ma colonne */
	float:left; /* utile pour que #content soit au top */
}

#header {
	width:100px; /* décoration de la page */
	height:100px;
	background:transparent url(img/head.png) no-repeat top left;
}

#content {
	padding:17px 20px; /* blanc tournant */
	margin-left:100px; /* placement à gauche de la colonne de 100 px */
}

/* lien */
a {
	color:#bbbbbb; /*tous les liens du site */
	text-decoration:none;
}

/* lien dans la navigation*/
.pagenav ul {
	margin-right:27px; /* ajustement calage visuel */
	float:right; /* fer du bloc ul à droite */
}

.pagenav a:hover {
	color:black; /* au passage de la souris */
}

.pagenav a {
	padding-left:18px; /* pour l'ajout d'une puce bitmap */
	height:17px; /* fixe la hauteur */
	line-height:17px; /* centre le texte sur la verticale */
	display:block; /* pour fixer la hauteur */
	outline-style:none; /* suppr le cadre */
}

li .current_page_item a,li .page_item .page_item.current_page_item a {
	color:#555;
	background:transparent url(img/puce.png) no-repeat center left; /* une puce sur la page current */
}

/* typo */

h2 {
	/* titre h2 utilisé dans content */
	font-size:2em; /* 2 x 10px = 20px */
	color:#cccccc;
	border-bottom:solid 1px #ddd; /* filet */
	margin-bottom:20px;
}

#content p {
	width:400px; /* largueur maximum des textes */
	margin-bottom:20px; /* à améliorer pour la grille typo */
}

/* typo hors champ */
#col h2 {
	line-height:5px; /* pour gagner quelques pixels */
	text-indent:-9999px;
	border:none;
}

#header h1 {
	text-indent:-9999px;
}

Le résultat :) avec trois images en plus (un dégradé pour l’ombrage, un g entête et une puce).

Les fichiers : exhib.zip

php et programmation

ben — Wed, 20 Jan 2010 01:06:21 +0000

Voici un petit article pour démystifier la programmation et comprendre par l’exemple le php (pas forcement en détail mais au moins donner une idée de son usage et son rôle).
la programmation
Pour simplifier, on peut dire que la programmation sert à fuir les opérations répétitives en demandant à un ordinateur de s’en charger, le but est souvent de trouver une astuce pour faire en 5 minutes plus ou moins intenses une opération qui devrait prendre plus de 5 minutes, la gymnastique intellectuelle étant parfois amusante, on pourra aussi passer plusieurs journées pour finalement gagner que quelques minutes mais tomber sur des erreurs intéressantes (graphiquement). On utilise un ou plusieurs langages qui demandent des connaissances spécifiques selon les environnements, les envies, les contraintes mais dans la plupart des cas on trouvera les ressources indispensables ou utiles sur le net ou dans des livres !

exemple avec le php
Voici un exemple de script php (définition wikipedia) facile à appliquer et pratique (pour les graphistes).
J’ai trouvé ce bout de php ici, il affiche la liste des fichiers php présents dans un dossier

foreach (glob("*.php") as $file) echo "$file\n";

en français ça donnerait : pour chaque élément (de cette liste contenant (« des fichiers php ») tu en prends un) tu affiches « le nom de celui-ci »
en détail il y a trois fonctions :
glob() va chercher la liste des fichiers (comme un spotlight)
foreach ($machin as $truc) décompose $machin en $truc et applique en boucle à un $truc la ligne suivante (si $machin à dix $truc, j’aurais dix boucles)
echo « un truc » affiche un truc
(si c’est trop abstrait google -> glob, foreach, echo)

On va partir de la même base pour en faire une liste d’images, le php s’intègrera dans le html, mais il faut anticiper le résultat voulu, je voudrais avoir ce html :

Première retouche :

foreach (glob("*.png") as $file) echo "$file\n";

ceci affiche les noms des png dans le dossier
Deuxième retouche :

foreach (glob("*.png") as $file) echo "";

ceci affiche les images png.

Version finale avec le xHTML + CSS + reset du CSS + le nom du dossier
J’ai juste copié/collé deux ou trois trucs en plus…

Liste des images jpg

liste des png du dossier :

foreach (glob(« *.png ») as $file)
echo « »;
?>

Je vous laisse le zip du dossier à mettre dans le dossier htdocs ou www pour un test en localhost (en test local on lancera son serveur apache : mamp ou wamp ou lamp ou easyphp).

Télécharger les fichiers sources : list_png.zip avec une petite variante sur un « echo »…

image youtube

ben — Sun, 17 Jan 2010 17:07:09 +0000

Je viens de faire un petit plugin pour wordpress pour mettre les images de youtube dans mon flux (feed) RSS 2 sur ce blog.
C’est pour les articles qui passent dans certains lecteurs sans Flash.
Premier étape savoir que toutes les vidéos youtube ont une image de preview disponible ainsi :
http://www.youtube.com/watch?v=JWIoIOegZHE
à pour image ->
http://img.youtube.com/vi/JWIoIOegZHE/0.jpg

Deuxième étape connaitre le filtre pour le feed :

add_filter(‘the_content_feed’,'ma_fonction’);

Troisième étape l’expression régulière :
on va récupérer le JWIoIOegZHE sur le src après le embed et avant le &

$regex=’|

On finalise :

/*
Plugin Name: YoutubeImg
Plugin URI: http://jaiunblog.com
Description: affiche les images de youtube
Author: Ben
Version: 1.0
Author URI: http://jaiunblog.com
*/

$img= »;
function youtube($content) {
if(strstr($content, »youtube.com/v/ »)){
$regex=’| preg_match_all($regex, $content, $result, PREG_PATTERN_ORDER);
$images = $result[1];
foreach($images AS $image){
$img= $img. » »;
}
$content=$img.$content;
return $content;
}

}
add_filter(‘the_content_feed’,'youtube’);

?>

Ce n’est pas parfait, les images sont au début de l’article mais je vous laisse peaufiner :)

les liens, wordpress et opml

ben — Tue, 29 Sep 2009 10:40:25 +0000

Je viens d’ajouter des liens ! http://jaiunblog.com/liens/
Voici une technique pour ajouter dans votre blog votre marque-page firefox en quelques clics via le format OPML ;¬)

1re étape : installer ceci : OPML Support for Firefox
2e étape : menu / marques-pages / organiser… : j’exporte mon bookmark en OPML (sauf astuce ? il faut tout sauvegarder)
3e étape : je charge l’éditeur d’OPML http://editor.opml.org/
4e étape : j’ouvre mon « gros » OPML, je copie/colle les branches souhaitées dans un nouveau fichier OPML, je sauvegarde !
5e étape : j’ouvre avec un éditeur texte (notepad++) et je passe l’encodage en ANSI (utf-8 ne marchait pas chez moi)
6e étape : dans WordPress / Outils / Importer / Liens – faire parcourir – choisir la catégorie – importer
7e étape : tester :-)

scriptographer

ben — Tue, 28 Apr 2009 17:04:47 +0000

Si vous aimez Illustrator et que savez lire, cet article est pour vous ! Je vais y aborder le plugin (ou module en français) assez étrange Scriptographer, celui-ci a la particularité de vous permettre de créer des outils ou des scripts et ainsi d’ouvrir de nouvelles expérimentations.
Si vous êtes ou pensez être incompétents en programmation, il est livré avec des scripts, si vous aimez l’aventure — let’s go !

première étape : télécharger et installer !
http://www.scriptographer.com/Download/
le logiciel est gratuit mac os x et windows, java est nécessaire et la dernière version est toujours la plus performante !
J’utilise celui sous Illustrator CS 2, la version scriptographer 2.0.023.

Une fois installé, on a deux outils dans la palette verticale // et ** (des pinceaux magiques) et des fenêtres en plus, les pinceaux magiques en regardant sur le site vous devriez découvrir leurs usages !

L’aide du site devrait vous aider à surmonter les difficultés d’installation.

On se lance !
Comme on peut le voir sur ma capture, les scripts sont des fichiers textes .js éditables par double clics. En bas de la fenêtre principale « scriptographer » , on trouve des pictos « play », « stop », « rafraichir », « nouveau », « console d’erreur et sortie », « // » et « ** ».
Faites « nouveau » et nommer le « coloriage.js » . Éditer-le (sur pc notepad ou mieux notepad++).

On va faire un script qui applique une liste de couleurs « rouge, violet, jaune , rose, bleu, vert » successivement sur les objets sélectionnés. Ça donne ceci ;¬)

On commence par faire « var sel = activeDocument.getSelectedItems(); » qui récupère la sélection multiple…
Ensuite on définie notre palette de couleurs

var colorz = new Array();
colorz[0]=new RGBColor(0.5,0,1); // violet
colorz[1]=new RGBColor(1,0,0); //rouge
colorz[2]=new RGBColor(0,1,0); // vert
colorz[3]=new RGBColor(0,1,1); // bleu clair
colorz[4]=new RGBColor(1,1,0); // jaune
colorz[5]=new RGBColor(1,0,1); // rose

Les couleurs sont codées en RVB de 0 à 1 par couche et pas de 0 à 255.
J’ajoute un compteur « var count » afin d’appliquer la colorz 0, puis 1,2,3,4,5… puis 0,1,2,3… quand count sera plus grand que le nombre de couleurs dans colorz, il revient à 0.
Puis j’applique la couleur sur mes éléments selectionnés en faisant la différence entre les textes et les autres.
Attention, si la sélection contient des groupes, ça ne marche pas (mais on devrait pouvoir y remédier), on dégroupe le plus possible (crtl + maj + G).

version complète coloriage.js :

var sel = activeDocument.getSelectedItems();
var colorz = new Array();
colorz[0]=new RGBColor(0.5,0,1); // violet
colorz[1]=new RGBColor(1,0,0); // rouge
colorz[2]=new RGBColor(0,1,0); // vert
colorz[3]=new RGBColor(0,1,1); // bleu clair
colorz[4]=new RGBColor(1,1,0); // jaune
colorz[5]=new RGBColor(1,0,1); // rose

var count = -1;

for (var i = 0; i < sel.length; i++) { // on fait une boucle dans notre sélection
count++; // on gère le compteur
if(count >(colorz.length-1)){
var count = 0;
} //

art = sel[i]; // art est un élément vectoriel
if (art instanceof TextFrame) { // si c’est un texte
art.characterStyle.fill.color= colorz[count]; // on applique la couleur n° 0,1,2,3… selon count
} else { // sinon
art.style.fill.color= colorz[count]; // on applique la couleur n° 0,1,2,3… selon count
} // fin du si c’est un texte
} // fin de la boucle

On sélectionne les objets à colorier (on dégroupe le plus possible) puis « play » en bas de la fenêtre scriptographer !
Done !

comment faire un plugin pour wordpress

ben — Wed, 22 Oct 2008 15:45:44 +0000

Je vais prendre 5 minutes pour contribuer au monde merveilleux de wordpress avec un mini tutorial sur les plugins (ou extensions pour être correcte).
Je passe les détails sur l’installation d’un plugin dans wordpress ;¬) enfin rapidement pour ceux qui découvre, si vous avez accès au ftp de votre blog, les extensions sont dans le dossier /wordpress/wp-content/plugins/ et on les active dans la partie « Extensions » du panneau d’administration.

Pour faire ce merveilleux plugin, il faut avoir quelques notions de php, ici le plus difficile est de comprendre les variables tableaux et la fonction strtr ; si ça semble imbuvable, le site du zéro est assez pédagogique.

À quoi va servir ce plugin ;¬) nous allons faire un mini traducteur des jours en grolandais ! Rien d’utile mais en poussant un peu plus le principe, on peut imaginer des petites fonctions avancées en php et xhtml (pour convertir les liens .mp3 en player flash).

Premiers pas indispensable : L’entête

/* Plugin Name: Grojour Plugin URI: http://jaiunblog.com Description: traducteur grlandais Author: Ben Version: 1.0 Author URI: http://jaiunblog.com */

Il s’agit de commentaire php entre /* et */ c’est la description (seul le Plugin Name est obligatoire).

Deuxième étape La fonction utile

function gJour($text){ $traduction = array( "Lundi" => "Lendi", "Mardi" => "Mordi", "Mercredi" => "Credi", "Jeudi" => "Joudi", "Vendredi" => "Dredi", "Samedi" => "Sadi", "Dimanche" => "Gromanche", "lundi" => "lendi", "mardi" => "mordi", "mercredi" => "credi", "jeudi" => "joudi", "vendredi" => "dredi", "samedi" => "sadi", "dimanche" => "gromanche" ); $text= strtr($text,$traduction); return $text; }

Pour la pédagogie : echo gJour(« On est lundi ? »); // donne : On est lendi ?
Ne pas oublier le « return $variable » sinon le filtre effacera ses cibles.

Pour finir, la magie de wordpress : les filtres

add_filter("the_content","gJour"); add_filter("the_time","gJour");

On cible les « morceaux » qui vont être filtré par notre fonction gJour, ici the_content et the_time, le contenu et la date du billet. À noter, les filtres sont appliqués juste avant l’affichage des pages et si on désactive le plugin, le site redevient comme avant :-)

grojour.zip

Update : deux liens complémentaires
http://blog.site2wouf.fr/2008/08/tutoriel-wordpress-un-plug-in-simple-pour-comprendre.html
http://www.pasunclou.com/2008/09/29/ecrire-un-plugin-wordpress/