p5js

Je suppose qu'on a expliqué Processing dans ce calendrier là : http://info.pingbase.net/calendrier-2010/p5js

Là on a une version EN LIGNE – java script – tout ici bien sûr http://codelab.fr/processingjs-html5-canvas

// processingjs

http://processingjs.org/  –>  le site officiel du projet processing.js

http://groups.google.com/group/processingjs  –> le forum de processing.js

http://hascanvas.com/ –> un site qui permet de créer en ligne son script pjs et de le partager

// canvas

http://www.canvasdemos.com/

http://dev.opera.com/articles/view/html … he-basics/

// javascript

http://javascript.developpez.com/cours/

http://ejohn.org/apps/learn/ — tutoriel dynamique par le créateur de processingjs

UN EXEMPLE de CODE :

/* 
  PROCESSINGJS.COM - BASIC EXAMPLE  
  Delayed Mouse Tracking
  MIT License - Hyper-Metrix.com/F1LT3R
  Native Processing compatible 
*/  

// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;

// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = width / 2;
  nX = X;
  nY = Y;  
}

// Main draw loop
void draw(){
  
  radius = radius + sin( frameCount / 4 );
  
  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
  
  // Fill canvas grey
  background( 100 );
  
  // Set fill-color to blue
  fill( 0, 121, 184 );
  
  // Set stroke-color white
  stroke(255); 
  
  // Draw circle
  ellipse( X, Y, radius, radius );                  
}


// Set circle's next destination
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}