Processing es la herramienta perfecta para desarrolladores interactivos. He desarollado experimentos con este IDE pero siento que aún tengo algunas cosas que explicar. Hace más de dos años hablé sobre processing y su versión para javascript pero creo que fue muy ligera dicha explicación, por lo que ahora vengo hablar de manera categórica sobre este Modo.
Han cambiado muchas cosas y todo esto para bien. Aquí escribo algunas mejoras.
Processing ahora introduce tres versiones (java, android y javascript) Con este último solo tenemos que comenzar a programar como usualmente hacemos, es decir, como si pensáramos para java pero en esta ocasión se exporta en una web que aparecerá en tu IP. El trabajo practicamente es el mismo pero tiene diferencias muy importantes: el hecho de exportar en web nos permite saltar fronteras y evitar trabajos extras.
Javascript está más fuerte que nunca y lógicamente orientado hacia el HTML5. Hace 2 años pensaba que el html5 iba avanzar más de lo que ahora es, pero sin restarle importancia, el hecho de programar visualizaciones artísticas o interactivas y plasmarlas a la web nos permite presentar a todo el mundo nuestros trabajos. Lamentablemente, mi esperanza era que con processingjs pudiera exportar realidad aumentada. Algún día!
Pasamos a hacer un breve ejemplo y también a presentar el plugin para wordpress 🙂
Orb orb;
Vect2D velocity;
float gravity = .105, damping = 0.8;
int segments = 55;
Ground[] ground = new Ground[segments];
float[] peakHeights = new float[segments+1];void setup(){
size(400, 400);
smooth();
orb = new Orb(150, 50, 3);
velocity = new Vect2D(2.5, 0);// calculate ground peak heights
for (int i=0; i<peakHeights.length; i++){
peakHeights[i] = random(height-80, height-30);
}/* float value required for segment width (segs)
calculations so the ground spans the entire
display window, regardless of segment number. */
float segs = segments;
for (int i=0; i<segments; i++){
ground[i] = new Ground(width/segs*i, peakHeights[i],
width/segs*(i+1), peakHeights[i+1]);
}
}void draw(){
// background
noStroke();
fill(10, 15);
rect(0, 0, width, height);// move orb
orb.x += velocity.vx;
velocity.vy += gravity;
orb.y += velocity.vy;// draw ground
fill(127);
beginShape();
for (int i=0; i<segments; i++){
vertex(ground[i].x1, ground[i].y1);
vertex(ground[i].x2, ground[i].y2);
}
vertex(ground[segments-1].x2, height);
vertex(ground[0].x1, height);
endShape(CLOSE);// draw orb
noStroke();
fill(200);
ellipse(orb.x, orb.y, orb.r*2, orb.r*2);// collision detection
checkWallCollision();
for (int i=0; i<segments; i++){ checkGroundCollision(ground[i]); } } void checkWallCollision(){ if (orb.x > width-orb.r){
orb.x = width-orb.r;
velocity.vx *= -1;
velocity.vx *= damping;
}
else if (orb.x < orb.r){ orb.x = orb.r; velocity.vx *= -1; velocity.vx *= damping; } } void checkGroundCollision(Ground groundSegment) { // get difference between orb and ground float deltaX = orb.x – groundSegment.x; float deltaY = orb.y – groundSegment.y; // precalculate trig values float cosine = cos(groundSegment.rot); float sine = sin(groundSegment.rot); /* rotate ground and velocity to allow orthogonal collision calculations */ float groundXTemp = cosine * deltaX + sine * deltaY; float groundYTemp = cosine * deltaY – sine * deltaX; float velocityXTemp = cosine * velocity.vx + sine * velocity.vy; float velocityYTemp = cosine * velocity.vy – sine * velocity.vx; /* ground collision – check for surface collision and also that orb is within left/rights bounds of ground segment */ if (groundYTemp > -orb.r &&
orb.x > groundSegment.x1 &&
orb.x < groundSegment.x2 ){
// keep orb from going into ground
groundYTemp = -orb.r;
// bounce and slow down orb
velocityYTemp *= -1.0;
velocityYTemp *= damping;
}// reset ground, velocity and orb
deltaX = cosine * groundXTemp – sine * groundYTemp;
deltaY = cosine * groundYTemp + sine * groundXTemp;
velocity.vx = cosine * velocityXTemp – sine * velocityYTemp;
velocity.vy = cosine * velocityYTemp + sine * velocityXTemp;
orb.x = groundSegment.x + deltaX;
orb.y = groundSegment.y + deltaY;
}class Ground {
float x1, y1, x2, y2;
float x, y, len, rot;// default constructor
Ground(){
}// constructor
Ground(float x1, float y1, float x2, float y2) {
this.x1 = x1;
this.y1 = y1;
this.x2 = x2;
this.y2 = y2;
x = (x1+x2)/2;
y = (y1+y2)/2;
len = dist(x1, y1, x2, y2);
rot = atan2((y2-y1), (x2-x1));
}
}class Orb{
float x, y, r;// default constructor
Orb() {
}Orb(float x, float y, float r) {
this.x = x;
this.y = y;
this.r = r;
}
}class Vect2D{
float vx, vy;// default constructor
Vect2D() {
}Vect2D(float vx, float vy) {
this.vx = vx;
this.vy = vy;
}
}
Y lo que deberíamos ver es lo siguiente:
¿No sabías que se podía insertar tu sketch en tu wordpress?
Pues yo tampoco lo sabía hasta hace unas semanas. Es genial poder insertar sin tener que subir por ftp u otro sistema nuestro código y archivos html.
¿Cómo lo hice?
Utilicé un plugin especial llamado Processing JS WordPress Plugin y aunque esté desactualizado, la verdad que sirve de mucho. Para descargar el plugin puedes entrar a su web
