Add to FacebookAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to TwitterAdd to TechnoratiAdd to Yahoo BuzzAdd to Newsvine

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 🙂

RELATED ARTICLESMORE FROM AUTHOR

17 COMMENTS

  1. 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.

  4. 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 😛

  5. Ya lo resolví 🙂

    descargué HTML5 de Adobe y se solucionó el problema. = te doy las gracias por compartir tu cerebro 😀

    Nos leemos

  6. 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.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.