Processing en la web
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 🙂
Hola Emilio, usted no deja de sorprenderme Hermano. Definitivamente me motiva mucho leer sus entradas para estudiar Processing…
Siga así hermano, nos aporta a talentos como yo a voltear nuestra mirada hacia esta tecnología….
Saludos desde Colombia.
Amigo Juan. Siempre tan cordial! 🙂
Sus palabras me ayudaron en mis examenes finales 🙂
Qué bueno que te haya gustado este ejempl. Es una interesante aplicación para processing.
Esta genial, ya habia leido acerca de esto, pero aun no he tenido tenido tiempo para experimentar un rato
gracias Adrian! 🙂
Saludos!!!!!
vaya, no me habia dado cuenta de este post… esta bueno…. probando a ver q tal.
Pruebalo. Es muy interesante!
Esto esta de lujo
Hace un rato estoy «jugando» con este de la realidad aumentada, y me he pegado un montón de cabezazos XD. En este momento mi dolor de cabeza se llama «error en linea 19» la de float radius.
Porfa si me ayudas con eso 😛
mmm Si me das más datos podré ayudarte.
Saludos!
Ya lo resolví 🙂
descargué HTML5 de Adobe y se solucionó el problema. = te doy las gracias por compartir tu cerebro 😀
Nos leemos
jajaja Mi cerebro? jeje ok!
Tengo una inquietud. Cómo es eso que descargaste el HTML5 de adobe?
sucede que no me funcaba el ejemplo y pensé que se debía a la naturalización de adobe dreamweaver cs4, googlie un rato y encontré esto:
http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2188522
y funcionó 😀
Qué raro. No conocía de ese pack porque yo lo desarrollé sin él.
Gracias por el link!
Saludos
Hola!
Gracias por el post. Yo he aprendido Processingjs en KhanAcademy, es decir, con el entorno de programación que ellos proveen en su web. Ahora quisiera saber cómo puedo incorporar los proyectos que hice allí en un código html.
Espero haberme explicado. Gracias!!
Con processing y su opción de javascript puede exportarse en html sin problema. He visto el curso de KhanAcademy pero no conozco su forma de exportación.
Processingjs guarda el archivo PDE y exporta para web.
Entro a la pagina pero no se exactamente cual es la opcion de descarga me aparecen muchas opciones
Hola. Gracias por comentar.
El link es el siguiente: http://processingjs.org/download/
El artículo es un poco antiguo. Lo acabo de actualizar.