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.

Processing (livre en français)

22 février 2011 | graphisme, programmation | 3 commentaires

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

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

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

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

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

5 langages

23 mars 2010 | programmation | 3 commentaires

Petit exercice pour la forme, créer* et déplacer un carré rouge avec quelques lignes de code.

Dans mes exemples j’utilise le modulo :
359 modulo 360 = 359
360 modulo 360 = 0
361 modulo 360 = 1

on code avec un signe « % » comme ex : 359%360=359
* sauf pour After Effects

en actionscript 2 :

this.createEmptyMovieClip("square_mc", 1);
square_mc.beginFill(0xFF0000);
square_mc.moveTo(0, 0);
square_mc.lineTo(100, 0);
square_mc.lineTo(100, 100);
square_mc.lineTo(0, 100);
square_mc.lineTo(0, 0);
square_mc.endFill();
square_mc._x=0;
square_mc._y=150;
onEnterFrame=function(){
square_mc._x=square_mc._x%550+10;
}

en actionscript 3 :

var square:Sprite = new Sprite();
addChild(square);
square.graphics.beginFill(0xFF0000);
square.graphics.drawRect(0,0,100,100);
square.graphics.endFill();
square.x = 0;
square.y = stage.stageHeight/2-square.height/2;
square.addEventListener(Event.ENTER_FRAME, bouge);
function bouge(e:Event):void{
square.x=square.x%550+1;
//square.rotation=square.x;
}

en processing :

int x = 0;

void setup(){
  size(500,500);
  background(255);
  smooth();
  frameRate(25);
}

void draw(){
  background(255);
  noStroke();
  x = x%550 + 10;
  rect(x-50,200,100,100);
  fill(255,0,0);
}

en JavaScript avec la librairie Mootools :

<!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>bouge</title>
<script type="text/javascript" src="lastMoo.js"></script>
<!--<script type="text/javascript" src="lastPlug.js"></script>-->
<script type="text/javascript">
window.addEvent('domready', function(){
var monSquare = new Element('div', {
	'id':'square',
    'styles': {
        'position':'absolute',
        'top':'100px',
        'left':'0',
        'width':'100px',
        'height':'100px',
        'background-color':'#f00'
    },
});

monSquare.inject($(document.body));

var i=0;
var begin = function() {
i=i%window.getWidth()+5;
$('square').setStyle('left',i);
}.periodical(1000/25);
})
</script>
<style type="text/css">
<!--
/* rien */
-->
</style>
</head>
<body>
<!-- ici on injecte notre div-->
</body>
</html>

en expression pour After Effects sur la position d’un comp (pour le fun ^-^) :


[(-thisComp.width), (thisComp.height/2)] + [(900*time)%1000,0]

si vous excellez dans un de ces langages, n’hésitez pas à commenter ;¬)

ONull

21 février 2010 | graphisme, programmation | 0 commentaire

Vectorisation + processing = http://onull.net/ pour Mac OS X ou en Java !

typestar : typo & animation

17 décembre 2009 | graphisme, programmation | 0 commentaire

Hier, je lisais cette article chez whatever et aujourd’hui je tombe sur cette vidéo… et non pas une de plus, cette fois c’est la version karaoké propulsé au Processing ! bonus c’est téléchargeable chez son créateur : http://scott.j38.net/interactive/typestar/.

2009

5 janvier 2009 | graphisme, programmation | 3 commentaires

Voilà les premiers vœux numériques (en processing) que j’ai reçu ! bravo jnl ! c’est ici que ça se passe.