Android con Processing
Todos conocemos o casi el entorno Processing en parte gracias a Arduino. Es un entorno de programación que sirve para programar una multitud de cosas de forma fácil y rápida sin preocuparnos demasiado por las entrañas del hardware utilizado. Pues la buena noticia es que ahora es posible programar para Android, el sistema operativo para móviles de Google, utilizando Processing.
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
Una vez descargado, copialo en un directorio y ejecuta Processing.
Puedes descargarlo aqui:
Puedes descargarlo aqui:
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. };
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!
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ía si tienes problemas para conectar.
Ahora conecta tu dispositivo por USB y selecciona Sketch -> Present desde el menu:
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:
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:
Ahora podremos rotar el rectangulo con nuestro dedo y fundar las bases para la dominación mundial con nuestras aplicaciones para Android hechas con Processing