Medir a velocidade de navios com o Google Earth e o Gimp »

Simulações com Processing.js

Eu vou dar a disciplina de Física Estatística no segundo semestre. É um curso em que simulações ajudam muito a compreender o que é ensinado. Eu queria deixar umas simulações online, mas não gostaria de usar o Flash da Adobe. Eis que o Valessio Brito postou, na lista do Inkscape-Brasil, um link para o Processing.js. Esta maravilha tem várias funções para gráficos, animações e interações (mouse, teclado,etc.) com uma variedade enorme de exemplos. O BallDroppings é bem divertido: você usa partículas para compor músicas, usando as leis da física (choque e gravidade). Em meia hora consegui fazer a animação abaixo (uma célula fazendo um passeio aleatório com uma imagem de células reais como fundo). Eu baixei os arquivos processing.js e init.js e coloquei no raiz deste site. A animação está aqui:

Processing.js - Basic Example

No Dokuwiki bastou colocar o código entre <html> e </html>. Ah, o Processing é GPL e roda no Firefox e no Chrome, não tenho como testar no IE (nem quero). O código está abaixo (não sei se tem case em JavaScript, portanto o programa é o primeiro de alguém que escreveu nesta linguagem).

<html>
<head>
<title>Processing.js - Basic Example</title>      
<script language="javascript" src="/tjpp/init.js"></script>
<script language="javascript" src="/tjpp/processing.js"></script>
</head>
<body>
 
<script type="application/processing">
 
int X, Y,X0,Y0;
PImage bg;  
 
// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  X = width / 2;
  Y = width / 2;
  steps=50;
  frameRate(20);
  bg=loadImage("cells_bg.jpg");  
}
 
// Main draw loop
void draw(){
  background(bg);
  stroke(#85b3e1);
  X0=X;
  Y0=Y; 
  for  (int i = 1; i < steps; i++){
    X+= random(-1,1);
    Y+= random(-1,1);
    if (X < 0) { X = 0; }
    if (Y < 0) { Y = 0; }
    if (X > 199) { X = 199; }
    if (Y > 199) { Y = 199; }
    line(X0,Y0,X,Y);
  }
}
 
</script><canvas width="200px" height="200px"></canvas><div style="display:none;"><img src='/tjpp/_media/playground/cells_bg.jpg' id='cells_bg.jpg'/></div>
</html>