premiers pas en processing #4

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

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

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


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

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


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

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


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

9 septembre 2010 | programmation, tutorials | 13 commentaires

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

8 avril 2010 | graphisme, tutorials | 0 commentaire

Petit script bonbon du jour : highlight !

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>high</title>
<script type="text/javascript" src="lastMoo.js"></script>
<script type="text/javascript">
<!-- on va travailler cette partie -->
</script>
<style type="text/css">
<!--
<!-- on va travailler cette partie -->
-->
</style>
</head>
<body>
<!-- on va travailler cette partie -->
</body>
</html>

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 :

<style type="text/css">
<!--
body{
margin:0;
overflow: hidden;
}

.bloc{
float:left;
background: #eee;
}
-->
</style>

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

<body>
<div id="full">
<!-- ici on injectera nos div-->
</div>
</body>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>high</title>
<script type="text/javascript" src="lastMoo.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){

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

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

$$('.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');
	});
});
}) //
</script>
<style type="text/css">
<!--
body{
margin:0;
overflow: hidden;
}

.bloc{
float:left;
background: #eee;
}

-->
</style>
</head>

<body>
<div id="full">
<!-- ici on injecte nos div-->
</div>
</body>
</html>

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

désactiver un plugin wordpress sur une page

28 février 2010 | programmation, tutorials | 0 commentaire

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 !

<?php /*
Template Name: Anti Resize !
*/ ?>

<?php
remove_filter('the_content', 'fvr_resizeMarkup'); // on le désactive !
?>
<?php
get_header(); ?>
// la boucle + le pied (...)

comment bloquer un visiteur sur votre site

26 février 2010 | programmation, tutorials | 0 commentaire

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