Processing en la web

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 🙂

Recibe toda la información necesaria sobre realidad aumentada y el mundo de la innovación. Descarga gratis material especial de nuestra comunidad.

16 Comments

  1. juaningals July 16, 2010
    • emilio vegas ubillus July 16, 2010
  2. Adrianmb July 16, 2010
    • emilio vegas ubillus July 16, 2010
  3. Hapsa August 31, 2010
    • emilio vegas ubillus August 31, 2010
  4. Rimaginacion November 15, 2010
    • emilio vegas ubillus November 16, 2010
  5. Rimaginacion November 17, 2010
    • emilio vegas ubillus November 17, 2010
  6. Cristina Her June 25, 2015
    • Emilio Vegas July 6, 2015
  7. Gustavo October 3, 2017
    • Emiliusvgs - Emilio Vegas October 15, 2017

Leave a Reply