Simulações com Processing.js

via Blog do Thadeu Penna blog:entradas by tjpp on 28/07/09

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:

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>

física, linux, ensino

Things you can do from here:

Subscribe to Blog do Thadeu Penna blog:entradas using Google Reader
Get started using Google Reader to easily keep up with all your favourite sites

Nenhum comentário:

Postar um comentário

quarta-feira, julho 29, 2009