Como ustedes saben los trabajos de Processing pueden ser exportados en forma de applets para web, pero si se dan cuenta un applet se percibe pesado al momento de cargar las páginas y mostrar el trabajo realizado en el sketch de processing. Por eso el grupo de processing de la mano del creador de Jquery sacaron PROCESSINGJS.
Esto quiere decir que Processing logra acomplarse del Javascript, ideal para páginas webs. El proyecto aún está en fase alpha por lo que algunas funciones comunes de processing no son aplicables.
Ya el simple hecho de dar un paso adelante a la implementación de processing en la web es gratificante. Ademas processingjs avanza a medida que HTML5 y su poderosa función canvas adquieren más uso en los programadores actuales.
Les presento dos ejemplos 🙂 Hagan click para interactuar con los ejemplos
Processingjs – Processing
Les enseñaré un poco como usar el sketch dentro de un editor de html. En este caso dreamweaver:
- Descarga Processingjs
- Abre un documento nuevo html e incorpora los javascript que están en la carpeta de processingjs
<html>
<head>
<title>Processing.js – Basic Example</title>
<script language=»javascript» src=»processing.init.js»></script>
<script language=»javascript» src=»processing.js»></script>
</head>
<body>
<script type=»application/processing»>
- Incorpora tu sketch compatible con las limitaciones de processingjs
/*
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 = 10;
// Setup the Processing Canvas
void setup(){
size( 400, 400 );
strokeWeight( 12 );
frameRate( 30 );
X = width / 2;
Y = width / 2;
nX = X;
nY = Y;
}
// Main draw loop
void draw(){
radius = radius + sin( frameCount / 14 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 2,90,100.18 );
// Set fill-color to blue
fill( 200, 11, 184 );
// Set stroke-color white
stroke(21);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle’s next destination
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
// Adjust radius based on cursor position
void mouseDragged(){
radius = dist( X, Y, mouseX, mouseY ) * 2;
}
// Move circle to cursor position
void mousePressed(){
X = mouseX;
Y = mouseY;
}
- Cierra el script
</script><canvas width=»400px» height=»400px»></canvas>
- Cierra el html
</body>
</html>
Eso es todo espero que les haya gustado y entren más al mundo de processing 🙂
Deja un comentario