jueves, 23 de febrero de 2012

Processing para Android


Instalación de Android SDK

Lo primero que debemos tener obviamente es el SDK de Android que podemos descargar aqui:
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:
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:
  1. void setup() {  
  2.    size(480,800);  
  3.   
  4.    smooth();  
  5.    noStroke();  
  6.    fill(255);  
  7.    rectMode(CENTER);     //This sets all rectangles to draw from the center point  
  8. };  
  9.   
  10. void draw() {  
  11.    background(#FF9900);  
  12.    rect(width/2, height/2, 150, 150);  
  13. };  
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:
  1. /* 
  2.  
  3. World's simplest Android App! 
  4. blprnt@blprnt.com 
  5. Sept 25, 2010 
  6.  
  7. */  
  8.   
  9. //Build a container to hold the current rotation of the box  
  10. float boxRotation = 0;  
  11.   
  12. void setup() {  
  13.   //Set the size of the screen (this is not really necessary in Android mode, but we'll do it anyway)  
  14.   size(480,800);  
  15.   //Turn on smoothing to make everything pretty.  
  16.   smooth();  
  17.   //Set the fill and stroke colour for the box and circle  
  18.   fill(255);  
  19.   stroke(255);  
  20.   //Tell the rectangles to draw from the center point (the default is the TL corner)  
  21.   rectMode(CENTER);  
  22.   
  23. };  
  24.   
  25. void draw() {  
  26.   //Set the background colour, which gets more red as we move our finger down the screen.  
  27.   background(mouseY * (255.0/800), 100, 0);  
  28.   //Chane our box rotation depending on how our finger has moved right-to-left  
  29.   boxRotation += (float) (pmouseX - mouseX)/100;  
  30.   
  31.   //Draw the ball-and-stick  
  32.   line(width/2, height/2, mouseX, mouseY);  
  33.   ellipse(mouseX, mouseY, 40, 40);  
  34.   
  35.   //Draw the box  
  36.   pushMatrix();  
  37.     translate(width/2, height/2);  
  38.     rotate(boxRotation);  
  39.     rect(0,0, 150, 150);  
  40.   popMatrix();  
  41. };  
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 mouseLocthe 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();
 

Para más detallada información acerca de vectores de dibujos, ver los ejemplos 
Form de Processing, la referencia de formas de Processing.

Tutorial de processing


Un paseo por la interfaz   

La siguiente imagen fue sacada de www.processing.org. Para verla en contexto pinchaReference y luego Environment.

ide

Probablemente estás pensando: “Jo, qué simple esta interfaz. ¿Cómo puede ser tan potente como Director o Flash?” Ambos, Director y Flash, poseen todo tipo de interfases de importación y edición de medios, basados en funciones comunes de multimedia comercial. En Processing todo esto se hace o usando otro programa o programando en Java. Por ejemplo, Flash tiene su propio mini Ilustrator, mientras Director viene con su propio mini Photoshop. En consecuencia, un largo trozo del trabajo realizado en ambos programas ha asemejado las restricciones de sus editores integrados. En Processing (y en Java), tu provees tu propia lista de gráficas vectoriales o archivos GIF, y los interpretas usando programación. Eres libre para usar tus propias formas y estructuras, usando el lenguaje para controlar los píxeles en la pantalla más directamente. Para aquellos que gustan de experimentar y desean producir nuevas formas de manera independiente o delante del status quo y sus herramientas de automatización, Processing puede ser más conveniente.

Aquí hay una introducción de seis botones del costado izquierdo de la ventana.

El botón de reproducir (play) es el mismo que en Director y Flash. Cliquéalo para ver tu código ejecutado como un programa.
El botón de parar (stop) es el mismo que en Director o Flash. Cliquéalo para detener tu programa.
Crea un nuevo (new) archivo. Processing los llama sketches (bosquejos). los puedes llamar también Applets, programas o piezas interactivas. Director y Flash los llamanmovies ( películas).
Abre (open) un sketch preexistente. Un menú aparecerá y podrás  elegir dentro de tu propia colección, guardada en la carpeta  especial de Processing que te enseñaré más adelante. También puedes elegir dentro de una amplia gama de ejemplos de sketches realizados por famosos diseñadores/artistas de nuevos medios, para aprender de ellos y usarlos como código de referencia.
Guarda (save) en sketch actual dentro de la carpeta de sketches de Processing. Si quieres darle un nombre distinto vete a guardar como (save as) en el menú de archivo (File).
Exporta (export) el sketch a la carpeta de sketch de Processing, esta vez como un Applet de java, completo con su propio archivo html. Esta propiedad será tratada con más profundidad más adelante.
Para mayor y más detallada información acerca del entorno de Processing, ver la referencia de Entorno de Processing.


 
Manipulación de medios a bajo nivel   

En Director, uno importa o crea medios dentro de un reparto, luego lo arrastra hacia un escenario donde existirá como un actor. En Flash, uno también importa o crea medios dentro de una librería y luego los instancia como clips de películas a un escenario similar. En Processing (y en Java) esta importación de medias está realizada en código, de manera similar como trabaja HTML. Adicionalmente, cualquier medio personalizado que tu inventas (sistema de vectores, datos DNA, muestras de colores de una película) todos pueden ser insertados como parte del código Java. De hecho, no estás restringido a tener cualquier imagen externa o sonidos si quieres mantener todo en un archivo ordenado, porque el píxel de tu imagen también puede convertirse para ser parte de tu código, y los datos de sonidos también pueden ser almacenados como un largo array de datos. El beneficio de una librería o reparto es para tener mayor control sobre el formato, para ahorrar espacio en el disco / memoria, y también para agregar características apuntables&cliqueables hacia un metafórico sistema de archivo común. El beneficio del actor o de la película es que un objeto visible y tangible puede estar en la pantalla y ser una manera fácil para que la gente cree botones, video juegos, caracteres, elementos individuales gráficos y otros elementos visuales y controlables de espacio positivo. De todas maneras, creando grupos de cooperación de elementos y objetos que no son ni de espacio negativo ni positivo, esta metáfora se ha convertido en carga para algunos. En Processing, esta complicada capa no existe; hay solo teclado, ratón y una serie de eventos en conjunción con rutinas básicas de dibujo. Uno se ocupa de redibujar la escena repetidas veces para introducir cambios y tiempo. En esta materia, es tu responsabilidad el escribir tu propio sistema de actor o película, pero no te lo requerirán. Inventa otra metáfora que será más útil para ti como artista. También contribuirás para diversificar con profundidad la estética de aquellos trabajos en cuales usualmente vemos la influencia de Macromedia.

En las siguientes secciones de esta guía, introduciré métodos para renderizar la imaginería a la pantalla. Luego introduciré una animación. Finalmente, te mostrare como agregar animación con el ratón, teclado y el puerto serial. Estos son los pilares básicos para cualquier cosa que quieras hacer con las herramientas de mayor nivel. Serás capaz de hacerlos en Java si te focalizas en construirlos tu mismo.


 
Estructura sintáctica   

Para los que usan Flash MX esto es un repaso. Lo siguente se llama StatementsCommentsen los ejemplos.
// Statements & Comments
// by REAS

// Statements are the elements that make up programs.
// The ";" is used to end statements. It is called the "statement terminator."
// Comments are used for making notes to help people better understand programs.
// A comment begins with two forward slashes ("//").

// Created 1 September 2002
// The size function is a statement that tells the computer
// how large to make the window.
// Each function statement has zero or more parameters.
// Parameters are data passed into the method
// and used as values for specifying what the computer will do.
size(200, 200);

// The background function is a statement that tells the computer
// which color to make the background of the window
background(102);
Y las variables de Java son como a continuación:

int x = 0;
println(x);
x=x+1;
println(x);
x=x+1;
println(x);
Pincha reproducir (play) y ves eso:
0
1
2
3
Personas que usen Flash: No hay nada como var. Para mayor información de variables, consultar la guía oficial de lenguaje Java.
Aquí está la parte de la variables.

Qué ocurre con if-then? 

int a = 1;
int b = 2;

if(a==b){
   println("same");
}else{
   println("different");
}
Pincha reproducir (play) y ves eso:
different
Las cosas son un poco diferentes a Lingo si hay que comparar. El programador usa un sólo “=” para asignar a una variable un valor. Uno usa “==” (doble igual) cuando intenta determinar que si un número es igual a otro número o no. “No igual a “ no es más “<>”, ahora es “!=” y los demás son los mismos ("<" , ">" , ">=" , y "<="). Para información en condicionales, consulte a la autoridad.

¿Y repetir bucles?

for(int i=0 ; i<5 i++){
    println(i);
}
Pincha reproducir (play) y ves eso:
0
1
2
3
4
Usuarios de Lingo, esto es los mismos que “repeat with i=0 to 4”. Dentro de estos paréntesis hay tres declaraciones separadas por dos punto y coma. La primera declaración crea una variable temporal. La segunda declaración especifica la condición que permite al bucle continuar su repetición. A penas i no es más menor que 5, el bucle se detendrá. La tercera declaración te dará la posibilidad de incrementar i  como desees. “i++” es la abreviación de “i = i+1”. Sun podrá contarte más acerca de los bucles.

Mientras los bucles son similares a la estructura de un if-then.

while(6!=2){
    println("muhuhaha!");
}
No ejecutes este programa!
:)
Si estás curioso de saber más de la sintaxis de control de flujos, aquí hay un link del manual de lenguaje de Java. La parte de control de flujos.

Me meteré en funciones en un momento. Entrego estás instrucciones básicas de sintaxis no para ser cuidadoso sino para que comprendas las instrucciones que vienen a continuación.

Para una mayor introducción a las estructuras, mira la Comparación de Lenguaje Processingy los Ejemplos de Estructura de Processing.

lunes, 6 de febrero de 2012

programando android

Android es una pila de software para dispositivos móviles que incluye un sistema operativo, aplicaciones esenciales y middleware. El SDK de Android proporciona las herramientas y las API necesarias para empezar a desarrollar aplicaciones que se puedan ejecutar en dispositivos con la tecnología de Android. 



Este sitio proporciona información sobre los proyectos de Google basados en la plataforma de Android como, por ejemplo, las bibliotecas externas que amplían la plataforma de Android, las aplicaciones de Android, los servicios y las API alojados y el Concurso de desarrolladores de Android, entre otros. Google ha proporcionado todo el contenido de esta página en beneficio de los desarrolladores de Android. 





Complemento para las API de Google 


El complemento para las API de Google es una ampliación del entorno de desarrollo del SDK de Android que proporciona a tus aplicaciones de Android un acceso sencillo a los servicios y a los datos de Google. La función principal del complemento es la biblioteca externa de Google Maps, que permite añadir funciones de asignación potentes a tu aplicación de Android

Para utilizar el complemento, debes instalarlo en tu SDK de Android. Desde ahí, puedes acceder a las clases de la biblioteca de Google Maps y compilar tu aplicación con respecto a ellas. El complemento también incluye una imagen del sistema Android compatible que se ejecuta en el Emulador de Android y que permite depurar, probar y ajustar el rendimiento de tu aplicación antes de publicarla para los usuarios. Cuando estés preparado para publicar tu aplicación, puedes implementarla en cualquier dispositivo con la tecnología de Android que ejecute una versión compatible de la plataforma Android y que también incluya la biblioteca externa de Google Maps. 

El complemento para las API de Google incluye: 

la biblioteca externa de Google Maps para Android 1.5 (nivel de API 3), 
una imagen del sistema Android 1.5 completamente compatible (con la biblioteca de Google Maps insertada), 
una aplicación de Android de ejemplo denominada MapsDemo, 
documentación de clase completa (también disponible en este sitio). 

Para poder empezar a utilizar el complemento para las API de Google... 

http://code.google.com/intl/es/android/add-ons/google-apis/installing.html 


DESCARGA EL SDK DE ANDROID ---> http://developer.android.com/sdk/index.html 

DESCARGA NETBEANS 6.9 ---> http://bits.netbeans.org/netbeans/6.9.1/community/final/bundles/netbeans-6.9.1-ml-windows.exe 

NetBeans es un proyecto exitoso de código abierto con una gran base de usuarios, una comunidad en constante crecimiento, y con cerca de 100 socios (¡y creciendo!) en todo el mundo. Sun MicroSystems fundó el proyecto de código abierto NetBeans en junio 2000 y continúa siendo el patrocinador principal de los proyectos. 

NetBeans IDE es un entorno de desarrollo - una herramienta para que los programadores puedan escribir, compilar, depurar y ejecutar programas. Está escrito en Java - pero puede servir para cualquier otro lenguaje de programación. Existe además un número importante de módulos para extender el NetBeans IDE. NetBeans IDE es un producto libre y gratuito sin restricciones de uso