Android Processing

DESARROLLO DE APLICACIONES
ANDROID
con Processing
Android
Sistema Operativo principalmente
usado para dispositivos móviles
como teléfonos y tabletas.
Android es el sistema operativo
más popular a nivel mundial
Aplicaciones
El desarrollo de las
aplicaciones ha tenido un
auge en los últimos años,
las personas utilizan su
teléfono para muchas de
sus actividades.
¿Cómo crear
aplicaciones para
Android?
De la misma manera que con
Processing y Arduino, existen
lenguajes de programación que
nos permiten dar instrucciones a
nuestro teléfono
¿Qué tipo de
instrucciones
podemos darle a
nuestro teléfono?
Los smartphones a diferencia de
las computadoras tienen muchas
más capacidades, tienen
diferentes sensores y actuadores.
Sensores, Actuadores y Sistemas
de comunicación
• Celular • Cámara
GSM/3G/4G • GPS
• WiFi • Vibrador
• Acelerómetro • NFC
• Giroscopio • Magnetómetro
• Pantalla
• Sensor Touch
Processing para
Android
El entorno de desarrollo de
Processing puede ser utilizado
para programar aplicaciones de
Android. La mayoría de las
instrucciones utilizadas son
compatibles, con el agregado de
poder utilizar las nuevas
funciones de un teléfono.
Requisitos
• Teléfono Android con Android
4.4 o superior.
• Cable micro USB
• Computadora con Windows 7
o superior | Mac OS X
Instalación y Configuración
del entorno de desarrollo
1. Instalar JDK (Java SE 8u101)
2. Instalar la última versión de
Processing
3. Instalar Android Mode
4. Instalar el SDK de Android
5. Activar Modo Depuración en el
teléfono
Entorno de desarrollo y lenguaje
Las diferencias respecto
a la programación de
aplicaciones para
computadora de
Processing son mínimas,
la mayoría de las
funciones siguen siendo
compatibles.
Diferencias del IDE: Barra de Herramientas
La Barra de
Herramientas se
simplifica en la última
versión de Processing.
Ahora sólo tiene 3
botones:
• Iniciar Aplicación
• Detener Aplicación
• Elección de Lenguaje
Diferencias del IDE: Barra de Herramientas
En el botón desplegable
debemos elegir Android
para poder programar
aplicaciones para
Android
Diferencias del IDE: Editor y Monitor
El editor sólo recibe
cambios estéticos.
El monitor ahora tiene

dos secciones:
• Consola: Muestra
mensajes
• Errores: Muestra
errores
Tamaño del canvas
Las aplicaciones de escritorio tenían un
tamaño definido en pixeles, ahora las
aplicaciones serán ejecutadas en pantalla
completa.
Antes:
size(500,500);
Ahora:
fullScreen();
Botón del Mouse Presionado
Los teléfonos no utilizan un Mouse para
controlarse, ahora utilizan el sensor touch,
en Processing se identificará el toque de la
pantalla con la misma instrucción.
mousePressed
Hola mundo Android
Objetivo
Crear una aplicación que se encargue de dibujar en la
pantalla del teléfono
Hola mundo Android
void setup(){
fullScreen();
background(0,0,150);
fill(255);
stroke(255);
}
void draw(){
if(mousePressed){
ellipse(mouseX,mouseY,25,25);
}
}
Ejecución de aplicación
Para ejecutar una aplicación se puede hacer desde la
aplicación de Processing conectando tu celular o
enviando el APK al celular e instalandolo manualmente
Conectando el
celular a
Processing
Primero debemos tener
activado el modo
Depuración USB. Luego
conectamos el celular a la
computadora y lo elegimos
en la interfaz:
>Android
>Select device
> Modelo de
teléfono
Ejecutando
aplicación en
el celular
Una vez elegido el
dispositivo ejecutamos la
aplicación:
>Sketch
>Run on Device
Exportando
aplicación
También podemos
ejecutar la aplicación en
nuestro celular instalando
el archivo APK, para
generarlo debemos elegir
la opción:
>Archivo
>Export Signed
Package
Exportando
aplicación
La Keystore password es
una contraseña que
debemos escribir y
recordar porque nos la
pedirá siempre que se
haga una nueva
aplicación.
Llenamos los datos y
damos click en OK.
Exportando
aplicación
Se generarán varios archivos y
entre ellos estará el APK en
diferentes versiones, la versión
que debes instalar en el celular
es la release-signed-aligned.
Este archivo se encuentra en la
carpeta dónde se guardó la
aplicación:
>HolaMundo
>android
>bin
Círculos de colores
Objetivo
Aplicación que dibuja círculos de
colores aleatorios y de tamaños
aleatorios.
Círculos de colores
int diametro;
int colorR, colorG, colorB;
void setup(){
fullScreen();
background(255,255,255);
fill(255);
stroke(255);
}
void draw(){
if(mousePressed){
diametro = int(random(10, 100));
colorR = int(random(0,255));
colorG = int(random(0,255));
colorB = int(random(0,255));
fill(colorR,colorG,colorB,80);
stroke(colorR,colorG,colorB,80);
ellipse(mouseX,mouseY,diametro,diametro);
}
}
ANDROID
con Processing
Coordenadas en Android
Al igual que en Processing para escritorio,
se define la pantalla del teléfono en
Pixeles, la cantidad de pixeles dependerá
de la resolución de la pantalla.
Ejemplos:
Full-HD: 1080 x 1920 pixeles
HD: 720 x 1280 pixeles
El origen se encuentra en la esquina superior
izquierda, el eje X va de izquierda a derecha
y de arriba hacia abajo.
Puedes utilizar las siguientes variables para
definir el límite de la pantalla:
height : Altura de la pantalla
width : Ancho de la pantalla
En una pantalla HD:
width = 720
height = 1280
Algo importante es que aunque los teléfonos
tienen diferentes tamaños en pixeles casi
todos comparten la misma relación de ancho
y alto, la relación es 16:9.
Esto quiere que las pantallas pueden ser
divididas en cuadros del mismo tamaño y,
que tendrían 16 cuadros de altura y 9
cuadros de ancho
En una pantalla HD (720 x 1280) los cuadros
miden 80 píxeles (720/9 ó 1280/16).
Cuadrícula de Colores
Objetivo
Crear una aplicación que
dibuje una cuadrícula de
colores aleatorios que
cambian constantemente.
Primero definir dos variables que van a definir el
tamaño de la cuadrícula, se utilizará la relación
de la pantalla para que en todos los teléfonos se
generen la misma cantidad de cuadrados:
ancho = width/9;
alto = height/16;
Luego para dibujar los cuadrados se utilizan ciclos for,
que recorrerán toda la pantalla dibujando los cuadros.
Un ciclo de 9 repeticiones para dibujar un renglón, y un
ciclo de 16 repeticiones para dibujar los 16 renglones.
for(j=0;j<16;j++){
for(i=0;i<9;i++){
rect(i*ancho,j*alto,ancho,alto);
}
}
int i = 0; void draw(){
int j = 0; for(j=0;j<16;j++){
int ancho; for(i=0;i<9;i++){
int alto; rect(i*ancho,j*alto,ancho,alto);
int r = 0; r = int(random(0,255));
int g = 0; g = int(random(0,255));
int b = 0; b = int(random(0,255));
void setup(){ fill(r,g,b);
fullScreen(); stroke(r,g,b);
ancho = width/9; }
alto = height/16; }
frameRate(10); }
}
Flappy Spaceship
Objetivo
Crear un videojuego estilo
Flappy Bird, en la que una
nave tenga que evitar chocar
meteoros que aparecen
aleatoriamente, de tamaños
aleatorios.
La aplicación se desarrollará
en tres partes.
Pelota Flotante
Objetivo
dibuje una esfera que se
eleve cuando presionas la
pantalla.
Pelota Flotante
Para dibujar un círculo colocado a la
mitad del eje X, con una posición en
el eje Y variable y un diámetro 100 se
hace con las siguientes
instrucciones:
fill(0,0,180);
stroke(0,0,0);
ellipse(width/2,posY,100,100);
Pelota Flotante
Para dibujar un círculo colocado a la
mitad del eje X, con una posición en
el eje Y variable y un diámetro 100 se
hace con las siguientes
instrucciones:
fill(0,0,180);
stroke(0,0,0);
Pelota Flotante
Para hacer que se mueva el círculo
hacia abajo tenemos que aumentar
el valor de la variable posY.
posY = posY + 20;

Pelota Flotante
Para hacer que se mueva el círculo
hacia arriba cuando tocamos la
pantalla utilizamos mousePressed y
tenemos que disminuir el valor de la
variable posY.
if(mousePressed){
posY = posY - 40;
}
Pelota Flotante
Para evitar que el círculo salga de la
pantalla se utilizarán las siguientes
instrucciones, para el límite superior
y para el inferior.
if(posY > height - 50)

posY = height -50;
if(posY < 50)
posY = 50;
Pelota Flotante
int posY = height - 50;
void setup(){
fullScreen();
}
void draw(){
background(255);
fill(0,0,180);
stroke(0,0,0);
if(mousePressed){
posY = posY - 40;
}
posY = posY + 20;
posY = height -50;
if(posY < 50)
posY = 50;
}
Flappy Ball
Objetivo
agregue obstáculos a la
aplicaión de pelota flotante, se
debe detectar el impacto con
los obstáculos.
La posición del obstáculo debe
ser aleatoria, moviéndose de
derecha a izquierda.
El tamaño y el color del
obstáculo también deben ser
aleatorios.
Flappy Ball
Primero definimos como variables los
parámetros de los obstáculos que
estarán cambiando constantemente.
int obstaculoX = 0;
int obstaculoY = 0;
int diametroObstaculo;
Flappy Ball
Primero se generará un valor aleatorio para el
diámetro del obstáculo y los colores del obstáculo:
diametroObstaculo = int(random(100,300));
Flappy Ball
Cada vez que aparezca un nuevo enemigo
deberá aparecer en el lado derecho,
utilizando la variable width se identificará su
posición, aumentando también el valor del
tamaño del obstáculo. Para la posición en Y
se elegirá un valor aleatorio.
obstaculoX = width + diametroObstaculo;
obstaculoY = int(random(0,height));
Flappy Ball
Luego debemos definir un evento de
creación de obstáculo, este evento se
ejecutará cuando una variables
booleana sea verdadera.
boolean crearObstaculo;
Flappy Ball
Creación del obstáculo, resumen de las
instrucciones anteriores:
if(crearObstaculo == true){
crearObstaculo = false;
}
Flappy Ball
Creación del obstáculo, resumen de las
instrucciones anteriores:
}
Flappy Ball
Una vez definidos los parámetros del obstáculo
se hace el dibujado, el borde del obstáculo será
de un color ligeramente más obscuro:
fill(colorR,colorG,colorB);
stroke(colorR-50,colorG-50,colorB-50);
strokeWeight(10);
ellipse(obstaculoX,obstaculoY,diametroObstaculo,diametroObstaculo);
Flappy Ball
Luego para hacer que se mueva el obstáculo
simplemente disminuiremos el valor de la
posición en X para hacer un movimiento de
derecha a izquierda. Cuando el obstáculo haya
llegado al lado izquierdo entonces se pedirá la
creación de un nuevo obstáculo.
obstaculoX = obstaculoX - 10;
if(obstaculoX <= -diametroObstaculo)
crearObstaculo = true;
Flappy Ball
Para detectar el obstáculo se debe revisar que coincidan
las coordenadas del obstáculo con las de la pelota. Si
hay colisión se terminará el juego.
Para dar un margen de colisión, se comprobará que la
distancia entre ambas posiciones es menor que 100px.
Eso se hace con la siguiente operación:
|x1 – x2| < 100
if(abs((width/2)-obstaculoX)<100 && abs(posY-obstaculoY)<100){

gameOver = true;
}
Flappy Ball: Código Parte 1
int obstaculoX = 0;
int obstaculoY = 0;
boolean crearObstaculo=true;
boolean gameOver=false;
void setup(){
fullScreen();
}
void draw(){
if(gameOver == false){
background(255);
fill(0,0,180);
stroke(0,0,0);
if(mousePressed){
posY = posY - 40;
}
posY = posY + 20;
posY = height -50;
if(posY < 50)
posY = 50;
Flappy Ball: Código Parte 2
obstaculoX = width;
}
strokeWeight(10);
if(obstaculoX < -diametroObstaculo)
crearObstaculo = true; // Detección del Obstáculo
gameOver = true;
}
}
}
Flappy Spaceship
Las aplicaciones anteriores
permitieron crear la dinámica
esencial del juego, ahora se
agregarán detalles para hacerlo
más divertido:
• Pantalla de Game Over
• Puntaje
• Cambio de pelota a nave
• Fondo con imagen de
espacio
Flappy Spaceship
Primero simplificar el código utilizando funciones para seguir
trabajando más cómodamente. Se tomarán las siguientes
funciones:
DibujarNave();
MoverNave();
IniciarObstaculo();
DibujarObstaculo();
MoverObstaculo();
DetectarObstaculo();
Flappy Spaceship
int posY = height - 50; void draw(){
int obstaculoX = 0; if(gameOver == false){
int obstaculoY = 0; DibujarNave();
int diametroObstaculo; MoverNave();
int colorR, colorG, colorB; if(crearObstaculo == true){
boolean crearObstaculo = true; IniciarObstaculo();
boolean gameOver=false; }
void setup(){ DibujarObstaculo();
fullScreen(); MoverObstaculo();
} DetectarObstaculo();
}
}
Flappy Spaceship
void DibujarNave(){
background(255);
fill(0,0,180);
stroke(0,0,0);
}
Flappy Spaceship
void MoverNave(){
if(mousePressed){
posY = posY - 40;
}
posY = posY + 20;
posY = height -50;
if(posY < 50)
posY = 50;
}
Flappy Spaceship
void DibujarObstaculo(){
strokeWeight(10);
}
void MoverObstaculo(){
}
Flappy Spaceship
void IniciarObstaculo(){
obstaculoX = width;
}
Flappy Spaceship
void DetectarObstaculo(){
gameOver = true;
}
}
Flappy Spaceship
Las funciones se deben escribir al final de nuestro código,
después del bloque void draw(), de modo que ahora el
programa principal quedaría simplificado al utilizar las
funciones
Flappy Spaceship
Para agregar un fondo de aplicación
diferente y una nave espacial se agregan
imágenes, se aceptan imágenes en
formato JPG y PNG
Agregando
Imágenes
Para agregar imágenes
primero debes crear una
carpeta con el nombre data,
esta carpeta debe estar dentro
de tu carpeta donde esté
guardado tu proyecto.
Agregando
Imágenes
Una vez creada la carpeta
copia las imágenes que
deseas utilizar en la aplicación.
En este caso:
FlappyShip.png
FondoFlappyShip.jpg
Imágenes
Para agregar una imagen en el código primero
debes crear un objeto del tipo PImage:
PImage nave;
Luego debes indicar el nombre de la imagen

que quieres vincular al objeto que ya creaste:
nave = loadImage("FlappyShip.png");
Imágenes
Opcionalmente también puedes cambiar el
tamaño de la imagen
nave.resize(200,200);
Y para mostrar la imagen se usa la siguiente

función:
image(nave,x,y);
El primer argumento indica el nombre del objeto
PImage y, el segundo y tercer argumento son las
coordenadas en el eje X y Y respectivamente.
Imagénes
Para colocar la imagen de la nave utilizaremos
las siguientes instrucciones:
PImage nave;
image(nave,width/2 - 50,posY);
Imágenes
Para colocar la imagen de fondo espacial se
utilizarán las siguientes instrucciones:
PImage fondo;
fondo = loadImage("FondoFlappyShip.jpg");
fondo.resize(width,height);
image(fondo, 0, 0);
Flappy Spaceship: Código Parte 1
int obstaculoX = 0;
int obstaculoY = 0;
boolean crearObstaculo = true;
PImage fondo;
PImage nave;
int retardo = 0;
void setup(){
fullScreen();
image(fondo, 0, 0);
}
void draw(){
retardo = 0;
DibujarNave();
MoverNave();
IniciarObstaculo();
}
DibujarObstaculo();
MoverObstaculo();
}
}
void DibujarNave(){
image(fondo, 0, 0);
}
void MoverNave(){
if(mousePressed){
posY = posY - 40;
}
posY = posY + 20;
posY = height -50;
if(posY < 50)
posY = 50;
}
strokeWeight(10);
}
}
obstaculoX = width;
}
gameOver = true;
}
}
GAME OVER
Al perder una partida la pantalla se pondrá en
negro y saldrá de esa pantalla al tocar
cualquier parte de la pantalla.
background(0);
if(mousePressed) {
gameOver = false;
}
Tipografías
Las tipografías pueden ser agregadas de la misma manera
que en la aplicación de escritorio:
GAME OVER
Agregando
Tipografías
En la carpeta data, la misma
carpeta dónde están las
imágenes se coloca el archivo
de la tipografía, acepta
formatos TTF.
En este caso la tipografía se
llama:
Changa-Bold.ttf
Tipografías
Para utilizar la tipografía se utilizarán las siguientes
instrucciones:
PFont fuente;
fuente = createFont("Changa-Bold.ttf", 16);
textFont(fuente);
textSize(128);
text("GAME",(width/2)-150,(height/2)-170);
text("OVER",(width/2)-145,(height/2)-64);
Puntaje
Para llevar el puntaje se tendrá una variable que aumentará
constantemente, cuando se detecte el Game Over se
detendrá y se mostrará el mensaje en la pantalla. Para ello se
utilizarán dos variables:
int puntos = 0;
int puntosLogrados = 0;
int obstaculoX = 0;
int obstaculoY = 0;
PImage fondo;
PImage nave;
PFont fuente;
int retardo = 0;
int puntos = 0;
void setup(){
fullScreen();
image(fondo, 0, 0);
textFont(fuente);
}
void draw(){
puntos++;
retardo = 0;
DibujarNave();
fill(255);
textSize(64);
text(puntos,(width)-200,height-64);
MoverNave();
IniciarObstaculo();
}
DibujarObstaculo();
MoverObstaculo();
}
else{
GameOver();
}
}
void DibujarNave(){
image(fondo, 0, 0);
}
void MoverNave(){
if(mousePressed){
posY = posY - 40;
}
posY = posY + 20;
posY = height -50;
if(posY < 50)
posY = 50;
}
strokeWeight(10);
}
}
obstaculoX = width;
}
gameOver = true;
puntosLogrados = puntos;
}
}
void GameOver(){
background(0);
textSize(128);
textSize(82);
text(puntosLogrados,(width/2)-80,(height/2)+64);
puntos = 0;
if(mousePressed){
gameOver = false;
}
}
Botón de inicio de juego
Finalmente se arreglará un error puesto que
no es muy fácil ver la pantalla de Game
Over, desaparece demasiado rápido al
tocar por error la pantalla inmediatamente
después de perder.
Para ello se agregará un botón para iniciar
un nuevo juego
Para agregar un botón se debe dibujar un
rectángulo, con un texto dentro de él.
fill(200,0,0);
stroke(100,0,0);
rectMode(CENTER);
rect(width/2,height-200,400,150,20);
fill(255);
text("Iniciar",(width/2)-120,height-170);
Luego se debe agregar la detección por tocar el botón, eso se hace
utilizando las variables mouseX y mouseY, estas variables te dan la
posición en la que se está tocando la pantalla.
if(mousePressed){
if(abs((width/2)-mouseX)<400 && abs((height-200)-mouseY)<100)
gameOver = false;
}
Flappy Spaceship
Agregando el botón a la
función de Game Over el
código del juego se habrá
finalizado, a continuación se
pone todo el código
terminado.
Respecto a la última función
sólo fue modificada la función
de Game Over.
int obstaculoX = 0;
int obstaculoY = 0;
PImage fondo;
PImage nave;
PFont fuente;
int retardo = 0;
int puntos = 0;
void setup(){
fullScreen();
image(fondo, 0, 0);
textFont(fuente);
}
void draw(){
puntos++;
retardo = 0;
DibujarNave();
fill(255);
textSize(64);
MoverNave();
IniciarObstaculo();
}
DibujarObstaculo();
MoverObstaculo();
}
else{
GameOver();
}
}
void DibujarNave(){
image(fondo, 0, 0);
}
void MoverNave(){
if(mousePressed){
posY = posY - 40;
}
posY = posY + 20;
posY = height -50;
if(posY < 50)
posY = 50;
}
strokeWeight(10);
}
}
obstaculoX = width;
}
gameOver = true;
}
}
void GameOver(){
background(0);
fill(200,0,0);
stroke(100,0,0);
textSize(128);
textSize(82);
puntos = 0;
fill(200,0,0);
stroke(100,0,0);
rectMode(CENTER);
rect(width/2,height - 200,400,150,20);
fill(255);
text("Iniciar",(width/2)-120,height - 170);
if(mousePressed){
if(abs((width/2)-mouseX)<400 && abs((height-200)-
mouseY)<100)
gameOver = false;
}
}
Flappy Spaceship - Extras
En equipos agreguen las
siguientes funciones al juego:
• Aumentar la velocidad de
los obstáculos.
• Aumenta el tamaño de los
obstáculos.
• El puntaje dependa del
número de obstáculos
superados.
Velocidad aumentada
La velocidad se modifica en la función de
mover obstáculo. El número diez es la
cantidad de pixeles que se mueve, si se
aumenta ese número entonces se moverá
más rápido.
}
Tamaño del Obstáculo
El tamaño del obstáculo se modifica en la
función IniciarObstáculo, modificando el rango
de valores aleatorios se puede aumentar el
diámetro del obstáculo
obstaculoX = width;
}
Modalidad de puntaje
El aumento en el puntaje se hace en el
programa principal, y siempre está
aumentando:
void draw(){
puntos++;
retardo = 0;
DibujarNave();
fill(255);
textSize(64);
MoverNave();
Modalidad de puntaje
Si se cambia de lugar la instrucción de aumento
de puntaje a la función IniciaObstaculo entonces
ahora el puntaje dependerá de la cantidad de
obstáculos.
puntos++;
obstaculoX = width;
}
ANDROID
con Processing
Sensores
Los teléfonos llevan una gran cantidad de
sensores, es posible hacer uso de los sensores
para las aplicaciones de nuestro teléfono,
utilizaremos una librería para hacer uso los
sensores, la librería se llama Ketai.
Agregando
librería a
Processing
Es posible agregar la librería
Ketai desde el IDE, elige la
opción:
>Sketch
>Importar biblioteca…
> Añadir
biblioteca
Agregando
librería a
Processing
Buscar la librería Ketai
en la lista y dar click en
Install
Agregando
librería a
Processing
Una vez instalado
simplemente cerrados
la ventana y estamos
listos para usarlas.
Ahora en el código se
agregan instrucciones
para usar la librería
Acelerómetro
El acelerómetro es un sensor que
permite medir la aceleración [m/s2], de
modo que puede detectar la aceleración
con la que se mueve, cuando el celular
no se mueve detectará sólo la
aceleración de la gravedad.
Este sensor es utilizado para medir la
inclinación del celular, tomando como
referencia la aceleración de la
gravedad.
Acelerómetro
Para usar el acelerómetro primero
debemos agregar la librería Ketai y
crear un objeto del tipo KetaiSensor
import ketai.sensors.*;
KetaiSensor sensor;
Acelerómetro
Luego agregaremos la inicialización de
nuestro sensor en el setup().
sensor = new KetaiSensor(this);

sensor.start();
Acelerómetro
Finalmente agregaremos una función que será ejecutada
automáticamente cada vez que haya una nueva lectura, en esa
función debemos guardar los valores de la lectura.
void onAccelerometerEvent(float x, float y, float z) {

aceleracionX = x;
aceleracionY = y;
aceleracionZ = z;
}
Acelerómetro
Usando el acelerómetro crear una
aplicación que dibuje un círculo que se
mueva de acuerdo a la aceleración en X
y en Y
Acelerómetro
KetaiSensor sensor;
float aceleracionX, aceleracionY, aceleracionZ;
void setup(){
fullScreen();
sensor.start();
fill(200,0,0);
stroke(100,0,0);
}
void draw(){
background(255);
ellipse(width/2-aceleracionX*30,height/2+aceleracionY*50,80,80);
}
aceleracionX = x;
aceleracionY = y;
aceleracionZ = z;
}
Bolf
Crea una aplicación que tenga como
objetivo hacer mover una pelota y
alcanzar los hoyos que aparecerán
aleatoriamente
Bolf
A diferencia de la aplicación anterior en este
caso se deben colocar Hoyos en lugares
aleatorios:
if(colocarHoyo){
hoyoX = int(random(100,width - 100));
hoyoY = int(random(100,height - 100));
colocarHoyo = false;
}
Bolf
KetaiSensor sensor;
float accelerometerX;
float accelerometerY;
float accelerometerZ;
boolean colocarHoyo;
int pelotaX;
int pelotaY;
int hoyoX;
int hoyoY;
void setup(){
fullScreen();
sensor.start();
strokeWeight(10);
colocarHoyo = true;
}
void draw(){
background(255);
fill(0);
stroke(0);
ellipse(hoyoX,hoyoY,200,200);
fill(200,0,0);
stroke(100,0,0);
pelotaX = int(width/2-accelerometerX*30);
pelotaY = int(height/2+accelerometerY*50);
ellipse(pelotaX,pelotaY,80,80);
if(abs(hoyoX-pelotaX)<50 && abs(hoyoY-pelotaY)<50){
colocarHoyo = true;
}
if(colocarHoyo){
}
}
accelerometerX = x;
accelerometerY = y;
accelerometerZ = z;
}
Actividad: Bolf PRO
Agrega las siguientes características
al videojuego anterior:
• Contador hoyos alcanzados.
• Cuenta regresiva, pierdes si
tardas más de 5 segundos en
alcanzar el círculo negro.
Actividad: Bolf PRO
La sección de Game Over puede ser
reutilizada de la aplicación anterior con
ligeras modificaciones.
Hay que reiniciar los parámetros de la
aplicación en la función de GameOver:
temporizador = 0;
colocarHoyo = true;
puntos = 0;
void GameOver(){
temporizador = 0;
colocarHoyo = true;
background(0);
fill(200,0,0);
stroke(100,0,0);
textSize(128);
textSize(82);
puntos = 0;
fill(200,0,0);
stroke(100,0,0);
rectMode(CENTER);
fill(255);
if(mousePressed){
gameOver = false;
}
}
Actividad: Bolf PRO
La condición de Game Over se logra
contando hasta 4 segundos, esto se logra
en con dos pasos, primero creamos una
variable que llevará el conteo del tiempo:
int temporizador = 0;
Y ajustaremos la aplicación a que ejecute 15

cuadros por segundo.
frameRate(15);
Actividad: Bolf PRO
Ahora que sabemos que se ejecutará 15
veces cada segundo y, por lo tanto, 60
veces cada cuatro segundos, lo único
que queda es poner la confición de
GameOver.
temporizador++;
if(temporizador > 60){
gameOver = true;
}
Actividad: Bolf PRO
Para contar los hoyos alcanzados es muy simple, al
igual que en el juego anterior se utiliza una variable
que se incrementará cada vez que se alcanza el
hoyo.
if(colocarHoyo){
hoyoX = int(random(100,width-100));
hoyoY = int(random(100,height-100));
puntos++;
temporizador = 0;
}
Actividad: Bolf PRO Parte 1
KetaiSensor sensor;
float accelerometerX, accelerometerY, accelerometerZ;
boolean colocarHoyo;
int pelotaX;
int pelotaY;
int hoyoX;
int hoyoY;
int puntos = 0;
PFont fuente;
boolean gameOver = false;
int temporizador = 0;
void setup(){
fullScreen();
frameRate(15);
sensor.start();
strokeWeight(10);
colocarHoyo = true;
textFont(fuente);
}
void draw(){
if(!gameOver){
background(255);
fill(0);
stroke(0);
ellipse(hoyoX,hoyoY,200,200);
textSize(64);
fill(200,0,0);
stroke(100,0,0);
pelotaX = int(width/2-accelerometerX*30);
pelotaY = int(height/2+accelerometerY*50);
ellipse(pelotaX,pelotaY,80,80);
if(abs(hoyoX-pelotaX)<50 && abs(hoyoY-pelotaY)<50){
colocarHoyo = true;
}
if(colocarHoyo){
puntos++;
temporizador = 0;
}
temporizador++;
if(temporizador > 60){
gameOver = true;
}
}
else{
GameOver();
}
}
void GameOver(){
temporizador = 0;
colocarHoyo = true;
puntos = 0;
background(0);
fill(200,0,0);
stroke(100,0,0);
textSize(128);
textSize(82);
fill(200,0,0);
stroke(100,0,0);
rectMode(CENTER);
fill(255);
if(mousePressed){
gameOver = false;
}
}
accelerometerX = x;
accelerometerY = y;
accelerometerZ = z;
}
Vibración
También es posible hacer uso del
vibrador a través de la librería de Ketai, el
código es muy simple y la forma de
utilizarlo es muy similar al acelerómetro.
Vibración
Primero agregamos la librería Ketai:
import ketai.ui.*;
Luego creamos un objeto:

KetaiVibrate vibe;
Y se inicializa el objeto en el setup():

vibrador = new KetaiVibrate(this);
Permisos
A diferencia de las aplicaciones anteriores
esta necesita permisos especiales, aunque
el celular tiene acceso a diferentes
herramientas de hardware y sensores no es
posible que las aplicaciones utilicen estas
herramientas sin el consentimiento del
usuario.
Agregando
permisos
especiales
Para que tu aplicación
pueda utilizar el
vibrador debes habilitar
los permisos:
• Android
• Sketch Permissions
Agregando
permisos
especiales
Se mostrará una
ventana con el selector
de permisos, buscamos
la opción VIBRATE, la
seleccionamos y
damos click en OK.
Vibración
Crear una aplicación que simplemente haga
vibrar el teléfono al tocar la pantalla
Vibración
import ketai.ui.*;
KetaiVibrate vibrador;
void setup(){
fullScreen();
background(255);
vibrador = new KetaiVibrate(this);
}
void draw(){
if(mousePressed)
vibrador.vibrate(1000);
}
ANDROID
con Processing
Bluetooth
La comunicación por Bluetooth permite enviar
información entre dos dispositivos, es posible
enviar información a través de una aplicación
entre teléfonos o con algún otro dispositivo
como un mouse, un teclado o incluso Arduino.
Bluetooth
Para comunicarnos con Arduino mediante un
bluetooth HC-05 primero debemos hacer la
vinculación, esto se hace manualmente desde la
Configuración del Sistema.
Para ello debemos conectar el módulo Bluetooth
a voltaje
Bluetooth con Arduino
Bluetooth Arduino
RXD 2
TXD 3
VCC V
GND G
Vinculación de
dispositivo
Bluetooth
Primero se accede a la configuración del
Bluetooth y se buscan los dispositivos
disponibles, se mostrará nuestro módulo
con el nombre que le hayamos puesto
Vinculación de
dispositivo
Bluetooth
Con los pasos anteriores queda
vinculado el dispositivo y se procede a
escribir el código.
Bluetooth
Primero agregamos las librerías necesarias:
import android.content.Intent;
import android.os.Bundle;
import ketai.net.bluetooth.*;
Luego debemos agregar dos objetos, un objeto Bluetooth

y una Lista:
KetaiBluetooth bt;
ArrayList<String> dispositivosEmparejados;
Bluetooth
Además se deben agregar dos funciones que son necesarias para el funcionamiento
correcto del Bluetooth:
void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
bt = new KetaiBluetooth(this);
}
void onActivityResult(int requestCode, int resultCode, Intent data){
bt.onActivityResult(requestCode, resultCode, data);
}
Bluetooth
Luego en el bloque setup() agregamos la inicialización del
Bluetooth
bt.start();
Y creamos una variable tipo boolean que nos permitirá

monitoriar el estado de conexión del Bluetooth
if(!conectado){
}
else{
}
Bluetooth
Para conectar el dispositivo bluetooth, debemos obtener la lista de
nuestros dispositivos vinculados, y de nuestros dispositivos vinculados
elegir el dispositivo al que queremos conectarnos y hacer el intento de
conexión:
if(!conectado){
dispositivosEmparejados = bt.getPairedDeviceNames();
conectado = bt.connectToDeviceByName("ArduinoBT");
}
else{
}
Bluetooth
Una vez conectado el dispositivo se debe enviar el dato
if(!conectado){
}
else{
bt.writeToDeviceName("ArduinoBT", mensaje);
}
Agregando
permisos
para
Bluetooth
En la ventana de
permisos especiales
debemos agregar los
permisos BLUETOOTH
y BLUETOOTH_ADMIN
Ejemplo: Encender LED desde BT
Crear una aplicación para
Android y Arduino que
permita encender un LED
desde el teléfono Android.
KetaiBluetooth bt;
boolean conectado = false;
byte[] mensaje = {“a”} ;
void onCreate(Bundle savedInstanceState) {
}
void onActivityResult(int requestCode, int resultCode, Intent data)
{
}
void setup(){
fullScreen();
bt.start();
background(255);
textSize(48);
rectMode(CENTER);
fill(200,0,0);
stroke(150,0,0);
strokeWeight(5);
rect(width/2,height/2-24,300,100,20);
fill(255);
textAlign(CENTER);
text("Encender",width/2,height/2);
}
void draw(){
if(!conectado){
}
else{
if(mousePressed){
if(abs(mouseX-width/2)<150 && abs(mouseY-height/2)<50){
delay(500);
}
}
}
}
Bluetooth Arduino
RXD 2
TXD 3
VCC V
GND G
#include <SoftwareSerial.h>
int dato = 0;
SoftwareSerial btSerial(3, 2);
Ejemplo: Encender
boolean encendido = false;
LED desde BT
void setup() {
Serial.begin(9600);
btSerial.begin(9600);
pinMode(13,OUTPUT);
}
void loop() {
if (btSerial.available()) {
if(btSerial.read() == 'a'){
if(!encendido){
digitalWrite(13,HIGH);
encendido = true;
}
else{
digitalWrite(13,LOW);
encendido = false;
}
}
}
}
Actividad: Encender LED desde BT
Modificar la aplicación
anterior para que la interfaz
cambie el texto del botón a
apagado cuando el LED se
apaga
Para cambiar el texto primero se

debe crear una variable que lleve
el registro del estado del LED

Luego se redibuja el botón con un texto y color
diferente cada vez que cambia de estado el
LED:
fill(200,0,0);
stroke(150,0,0);
strokeWeight(5);
rect(width/2,height/2-
24,300,100,20);
fill(255);
text("Apagar",width/2,height/2);
encendido = true;
KetaiBluetooth bt; ArrayList<String> dispositivosEmparejados;
boolean conectado = false;
byte[] mensaje = {‘a’} ;
}
void onActivityResult(int requestCode, int resultCode, Intent data) {
}
void setup(){
fullScreen();
bt.start();
background(255);
textSize(48);
rectMode(CENTER);
fill(0,0,200);
stroke(0,0,150);
strokeWeight(5);
fill(255);
textAlign(CENTER);
}
void draw(){
if(!conectado){
}
else{
if(mousePressed){
if(abs(mouseX-width/2)<150 && abs(mouseY-height/2)<50){
if(encendido){
delay(500);
fill(0,0,200);
stroke(0,0,150);
strokeWeight(5);
fill(255);
encendido = false;
}
else{
delay(500);
fill(200,0,0);
stroke(150,0,0);
strokeWeight(5);
fill(255);
text("Apagar",width/2,height/2);
encendido = true;
}
}
}
}
}
Bluetooth
La recepción de datos se hace a través de una función que se ejecuta
automáticamente cada vez que se recibe un nuevo dato
void onBluetoothDataEvent(String dispostivoBT, byte[] data){

}
En la variable data se almacenan los datos recibidos, para leer hay que
interpretar el dato:
lectura = int(data[0]);
Orientación de pantalla
Para ajustar la pantalla del
teléfono a una orientación se
utiliza la siguiente instrucción:
orientation(LANDSCAPE);
Cómo argumento escribimos la

orientación que buscamos. Esta
función se escribe en el setup()
Portaretrato (PORTRAIT)
Apaisado (LANDSCAPE)
Ejemplo: Graficador Bluetooth

grafique los datos enviados
desde arduino
KetaiBluetooth bt;
boolean conectado = false; int posX = 0;

}
void onActivityResult(int requestCode, int resultCode, Intent data) {
}
void draw(){
if(!conectado){
}
void onBluetoothDataEvent(String dispostivoBT, byte[] data){
posX++;
if(posX >= width){
posX = 0;
background(0);
}
int lectura;
lectura = int(data[0]);
fill(255,255,0);
ellipse(posX,lectura+(height/2),5,5);
}
Bluetooth Arduino
RXD 3
TXD 2
VCC V
GND G
#include <SoftwareSerial.h>
int i = 0;
SoftwareSerial btSerial(3, 2);
void setup() {
Serial.begin(9600);
btSerial.begin(9600);
}
void loop() {
for(i=0;i<256;i++){
btSerial.write(i);
delay(50);
}
for(i=255;i>0;i--){
btSerial.write(i);
delay(50);
}
}

Android Processing

Cargado por

Copyright:

Formatos disponibles

Android Processing

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Android Processing

Cargado por

Copyright:

Formatos disponibles

DESARROLLO DE APLICACIONES

El monitor ahora tiene

posY = posY + 20;

if(posY > height - 50)

if(abs((width/2)-obstaculoX)<100 && abs(posY-obstaculoY)<100){

Luego debes indicar el nombre de la imagen

Y para mostrar la imagen se usa la siguiente

sensor = new KetaiSensor(this);

void onAccelerometerEvent(float x, float y, float z) {

Y ajustaremos la aplicación a que ejecute 15

Luego creamos un objeto:

Y se inicializa el objeto en el setup():

Luego debemos agregar dos objetos, un objeto Bluetooth

Y creamos una variable tipo boolean que nos permitirá

Para cambiar el texto primero se

boolean encendido = false;

void onBluetoothDataEvent(String dispostivoBT, byte[] data){

Cómo argumento escribimos la

Crear una aplicación que

void onCreate(Bundle savedInstanceState) {

También podría gustarte