¿cómo subir un sketch de Processing a internet?

[pasa el mouse sobre el rectángulo gris, funciomará mejor si lo abres en desktop]

(descargar código)


Cuando uno empieza a aprender Processing la pregunta que casi todo el mundo tiene es bueno, ¿y ahora cómo monto esto en internet?

Entra Processing.js.

¿Qué es? Lo primero que hay que tener claro es que Internet no entiende código hecho en Processing, entonces usamos processing.js, una especie de traductor que pasa ese código hecho en processing a javascript, que bueno, todos sabemos que sí es un lenguaje que entiende perfectamente internet.

Entonces, ¿cómo subir un sketch a internet?

Hay mil quinientos cincuenta mil tutoriales para hacerlo, incluso los que están en la página de processing.js están bastante bien, pero bueno, aquí lo pongo a mi manera y en español, que nunca sobra:

La cosa es relativamente fácil, se hace casi que en cinco pasos (bueno, eso sin considerar problemas que pueda poner la pataforma donde tenga alojado su blog.

Pero bueno, el tema es el siguiente:

1 Haga click aquí para descargar processing.js (la versión que yo estoy usando y la que pongo aquí para descargar es la processing.min.js, que es un poco más ligera que la completa).

2 Guárdela en el directorio de su sitio web.

Alt text

3 Llame el archivo de processing.js en el <head> de su sitio.

<script type="text/javascript" src='/js/processing.min.js'></script>

Alt text

4 Guarde su sketch de processing en el directorio de su sitio web también. Alt text

5 Llame en un elemento canvas el sketch que guardó en su directorio.

<canvas width="100%" height="100%" data-processing-sources="/sketches/rect.pde"> <canvas>

y en el caso dropbox se debería ver algo así: Alt text

Ojo: Esto no aplica para cuando uno tiene librerías incluidas y por otro lado, si uno tiene varias clases en un solo sketch hay que escribirlas así por ejemplo:

Alt text

Espero que a alguien le sirva esto!