2017

18 octobre 2017 | graphisme, liens, programmation, tutorials | 0 commentaire

Le retour !
Après une longue pénurie de code voici le retour du blog… en https !
Beaucoup de liens morts, de vidéos supprimées… un nettoyage des 1500 articles serait nécessaire.
En attendant, les didacticiels pour apprendre le html, css et plus sont publiés sur https://jenseign.com .

accordeur avec processing

27 avril 2012 | programmation, tutorials | 0 commentaire


Avec la librairie Minim de Processing, il est possible d’analyser le son en temps réel. Voici quelques lignes de code pour obtenir la fréquence « la plus présente » dans votre source sonore.
La méthode d’initialisation n’est pas simple à retenir, avec minim.getLineIn on peut régler le « input », le buffer et la qualité (un gros buffer donnera un résultat précis mais des performances moindres).

Pour résumer, ce script prend un échantillon du son et balaie toutes les fréquences de 0 à 20000 Hz pour mémoriser le pic. On pourrait réduire le spectre analysé ou tester que les fréquences « justes » avec getFreq pour un usage autre.

Les musiciens pourront se reporter à cette page pour avoir les fréquences des notes (avec le La3 à 440 hz).

Vous pouvez tester avec des fichiers mp3 via google ou ici.

import ddf.minim.*;
import ddf.minim.analysis.*;

Minim minim;
AudioInput in;
FFT fft;
float highestAmp=0;
int frequency;
float amplitude;

void setup(){
        size(512, 200);
        background(0);
        
        // initialize Minim and catching the output
        minim = new Minim(this);
        in = minim.getLineIn(Minim.MONO, 4096*8, 44100); // better result with *8
        fft = new FFT(in.left.size(), 44100);
}


void draw() {
      highestAmp=0;
      amplitude=0;
      frequency = 0;
      fft.forward(in.left);

      //searching from 0Hz to 20000Hz. getting the band, and from the band the frequency
     for(int i = 0; i < 20000; i++) {
            amplitude = fft.getFreq(i);
            if (amplitude > highestAmp){
                highestAmp = amplitude;
                frequency = i;
            }
          }
          //write the frequency on the screen
          fill(255);
          background(0);
          text(frequency,200,100);
}

base du code via processing Forum.

processing 2.05a + webcam

8 avril 2012 | programmation, tutorials | 0 commentaire

Une nouvelle version de Processing 2 est disponible en version Alpha depuis quelques jours (ici).

La capture vidéo (webcam) a changé depuis la v2, voici la nouvelle méthode (avec start()) :

import processing.video.*;
Capture video;

void setup() {
  size(320, 240);
  video = new Capture(this, 320, 240);
  video.start();
  background(0);
}

void draw() {
  if (video.available()) {
    video.read();
    image(video,0,0);
  }
}

L’ancienne méthode pour processing 1.5x est disponible ici.

processing #8 : SQLibrary

22 septembre 2011 | programmation, tutorials | 0 commentaire

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

12 septembre 2011 | programmation, tutorials | 3 commentaires


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

4 septembre 2011 | programmation, tutorials | 2 commentaires

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

premiers pas en processing #6

26 mai 2011 | graphisme, programmation, tutorials | 0 commentaire


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

26 mai 2011 | graphisme, programmation, tutorials | 0 commentaire


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