lunes, 27 de febrero de 2012

Encuesta 1 usavi

jueves, 23 de febrero de 2012

Instalación de Android SDK

Lo primero que debemos tener obviamente es el SDK de Android que podemos descargar aqui:

http://developer.android.com/sdk

Debes descomprimir el archivo zip en un directorio y abrir el directorio "tools" y ejecutar el archivo ejecutable "Android" que abrirá el AVD Manager tal y como se muestra aqui:

Aqui necesitaremos añadir el repositorio de Android e instalar todos sus componentes. Para eso, debemos hacer click sobre la izquierda en "Available Packages" y marcar la opción central que aparece en pantalla. El manager conectará con el repositorio de android y mostrará los componentes disponibles para descargar:

Aqui podemos seleccionar todos los elementos para tener el sistema de desarrollo completo. Una vez instalado, necesitamos instalar una versión especial para Android de Processing.

Instalar Processing para Android

Podemos descargarlo aqui:

http://wiki.processing.org/w/Android

Una vez descargado, copialo en un directorio y ejecuta Processing.

Hello World para Android con Processing

Lo primero que debemos hacer en una aplicación básica para probar el funcionamiento general. Ésta en concreto dibuja un circulo en medio de la pantalla. Aqui el código:

view plaincopy to clipboardprint?
void setup() {  
   size(480,800);  
  
   smooth();  
   noStroke();  
   fill(255);  
   rectMode(CENTER);     //This sets all rectangles to draw from the center point  
};  
  
void draw() {  
   background(#FF9900);  
   rect(width/2, height/2, 150, 150);  
};  

Si pulsamos el boton "Run" (Ejecutar) Processing compilará nuestro programa en un archivo Applet temporal de Java que se ejecutará en una ventana individual. Para los que ya conocen Processing, es la forma habitual de trabajo. Para compilarlo para Android, debemos selecionar "Android Mode" en el menu y podremos ver la plicación en el emulador al pulsar como "Run":

NOTA: La primera ver que ejecutes el emulador, se mostrará un mensaje indicando que Android SDK no ha sido instalada. Pulsa "Yes" y selecciona el directorio de los archivos del SDK que previamente has copiado en un directorio. Una vez hecho, ejecuta tu programa otra vez.

Ten en cuenta que el emulador tarda su tiempo en inicializarse y ejecutar el programa por lo que ten paciencia :)

Tenemos ya todo el sistema funcionando y es por supuesto muy emocionante, pero aqui falta algo no? Vamos ejecutar nuestro programa en un dispositivo Android real!

Ejecutar el programa en un dispositivo Android

Para que funcione, es importante que tu dispositivo android tenga la opción "USB debugging" activada". Puedes activarla en Configuración -> Aplicaciones -> Desarrollo. Si utilizas Windows, consulta ésta guíasi tienes problemas para conectar.

Ahora conecta tu dispositivo por USB y selecciona Sketch -> Present desde el menu:

Si todo va bien, debes ver tu aplicación funcionando en tu dispositivo! Emocionante verdad? :) Dado que es una aplicación básica, es emocionante hasta cierto punto asi que vamos a darlo un toque interactivo haciendo que la aplicación responda a interacciones del usuario:

view plaincopy to clipboardprint?
/* 
 
World's simplest Android App! 
blprnt@blprnt.com 
Sept 25, 2010 
 
*/  
  
//Build a container to hold the current rotation of the box  
float boxRotation = 0;  
  
void setup() {  
  //Set the size of the screen (this is not really necessary in Android mode, but we'll do it anyway)  
  size(480,800);  
  //Turn on smoothing to make everything pretty.  
  smooth();  
  //Set the fill and stroke colour for the box and circle  
  fill(255);  
  stroke(255);  
  //Tell the rectangles to draw from the center point (the default is the TL corner)  
  rectMode(CENTER);  
  
};  
  
void draw() {  
  //Set the background colour, which gets more red as we move our finger down the screen.  
  background(mouseY * (255.0/800), 100, 0);  
  //Chane our box rotation depending on how our finger has moved right-to-left  
  boxRotation += (float) (pmouseX - mouseX)/100;  
  
  //Draw the ball-and-stick  
  line(width/2, height/2, mouseX, mouseY);  
  ellipse(mouseX, mouseY, 40, 40);  
  
  //Draw the box  
  pushMatrix();  
    translate(width/2, height/2);  
    rotate(boxRotation);  
    rect(0,0, 150, 150);  
  popMatrix();  
};  

Ahora debemos pulsar sobre Sketch -> Present una vez más y veremos la aplicación asi:

Juegos de mouse y teclado para processing

Ratón & teclado

El acceso al ratón y el teclado son similares al modo que lo hacen Flash y Director . En Lingo, el ratón es direccionable con the mouseLoc, the mouseH, y the mouseV. Además hay también manejadores de suceso de ratón como on mouseDown. En Flash, hay onClipEvent (mouseDown), etc. En Processing, la función mousePressed( ) se llama cada vez que el ratón es presionado y el método mouseReleased( ) es llamado cada vez que el ratón es liberado o dejado de presionar. Lo que debes hacer es agregar la función a tu código, así como en draw( ).

void draw( ) {
    background(190);
    rect(mouseX-5, mouseY-5, 10, 10);
}

void mousePressed( ) {
    fill(0);
}
void mouseReleased( ) {
    fill(255);
}

En este sencillo ejemplo, un cuadrado es dibujado por donde el ratón vaya.

Si aprietas el ratón el cuadrado se tornará negro.

Para más información de ratón, mira la referencia del raton de Processing, y no te olvides de revisar estos ejemplos Mouse de Processing.

La entrada del teclado es igual a Flash y Director.

void draw( ) {
    if(keyPressed) {
        fill(102, 0, 0);
    } else {
        fill(204, 102, 0);
    }
    rect(30, 20, 55, 55);
}

En este simple ejemplo el cuadrado cambia a rojo oscuro si cualquier tecla está siendo presionada. No hay necesidad de redibujar de fondo!

La entrada del teclado también puede ser distribuida como un event handling function.

int x = 50;
int y = 50;

void draw( ){
    background(190);
    rect(x,y,10,10);
}

void keyPressed( ){
    if(key=='w'||key=='W'){
        y--;
    }else if(key=='s'||key=='S'){
        y++;
    }else if(key=='a'||key=='A'){
        x--;
    }else if(key=='d'||key=='D'){
        x++;
    }
}

En este ejemplo, las teclas del teclado moverán el cuadrado alrededor.

Figuras en processing

Aquí hay algunos ejemplos de Processing.org

beginShape(LINE_LOOP); vertex(30, 20); vertex(85, 20); vertex(85, 75); vertex(30, 75); endShape( );
beginShape(TRIANGLES); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
noFill( ); beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
noStroke( ); fill(153, 153, 153); beginShape(TRIANGLE_STRIP); vertex(30, 75); vertex(40, 20); vertex(50, 75); vertex(60, 20); vertex(70, 75); vertex(80, 20); vertex(90, 75); endShape( );
noStroke( ); fill(102); beginShape(POLYGON); vertex(38, 23); vertex(46, 23); vertex(46, 31); vertex(54, 31); vertex(54, 38); vertex(61, 38); vertex(61, 46); vertex(69, 46); vertex(69, 54); vertex(61, 54); vertex(61, 61); vertex(54, 61); vertex(54, 69); vertex(46, 69); vertex(46, 77); vertex(38, 77); endShape( );
beginShape(LINE_STRIP); curveVertex(84, 91); curveVertex(68, 19); curveVertex(21, 17); curveVertex(32, 100); endShape( );
beginShape(LINE_STRIP); curveVertex(84, 91); curveVertex(84, 91); curveVertex(68, 19); curveVertex(21, 17); curveVertex(32, 100); curveVertex(32, 100); endShape( );
beginShape(LINE_STRIP); vertex(30, 20); bezierVertex(80, 0, 80, 75, 30, 75); endShape();