Explicació del codi de la pràctica de Processing de l'assignatura Integració Digital de Continguts, Grau Multimèdia, UOC. Pràctica completa en Racó Vermell de Paquita Ribas http://bit.ly/1cTxuIU

1. 1

2. ÍNDEX
INTRODUCCIÓ
3
ESTRUCTURA BÀSICA
4
ENCENDRE EL GPS
6
BOTÓ MENÚ
9
CARREGAR MAPES
11
CARREGAR TRACKS
14
BOTÓ POSICIÓ
18
DESPLAÇAR-SE PEL MAPA
19
COMENÇAR L’EXCURSIÓ
21
BOTÓ ZOOM
25
FUNCIÓ DE RADAR METEOROLÒGIC
28
BOTÓ DE CONTRAST
32
BOTÓ DE MODE NIT
35
2

3. INTRODUCCIÓ
La finalitat d’aquesta pràctica és la de dissenyar amb Processing un simulador de GPS amb una
sèrie de funcionalitats:
-
-
-
Encendre / apagar el GPS. Cal poder simular l’arrencada del dispositiu amb el logotip de
l’empresa.
Botó “menú” que donarà accés a un menú en pantalla per a seleccionar les diferents
opcions que tindrem disponibles.
Al carregar un mapa ens senyalarà la posició.
Càrrega de mapes (dos mapes)
o Una vegada carregat qualsevol dels mapes, podrem activar el menú “Radar” que
indicarà amb icones meteorològiques el temps sobre el nostre mapa.
o La tempesta es mou sobre el mapa.
o Si la posició s’apropa a la icona, sonarà un soroll de tempesta.
Càrrega de tracks (dos tracks)
o Al carregar el track i iniciar una excursió, l’indicador de la nostra posició inicial es
trobarà situat en el principi del camí. Si ens allunyem del camí correcte sonarà una
alarma.
Botons de control que permetran moure’s pels menús, desplaçar el mapa, etc.
Botó que modifica el contrast del mapa.
Botó que activa / desactiva el mode nit.
3

4. ESTRUCTURA BÀSICA
 Les primeres línies de codi s’utilitzen per a importar les llibreries
La llibreria dels botons:
// Definim la variable que contindrà la interfície del GPS
Les llibreries del so:
Les llibreries de so
 A continuació se declararan les variables globals. Una vegada declarades s’executarà el
4
És una de les funcions principals del Processing que s’executa al principi i una sola vegada. Dintre
d’aquesta funció hi escriurem la mida de la finestra on apareixerà el nostre GPS, el color de fons i
de traç d’aquesta, les coordenades necessàries per a col·locar les imatges dintre de la finestra,
com s’inicien els comptadors i el
de les variables; així com carregarem totes les
imatges i els sons que necessitarà el gps per a funcionar.
També designarem les ubicacions destinades als diferents botons utilitzant la llibreria de botons:
 A continuació s’executarà el
Que és on s’ubiquen totes les funcions que s’executaran repetidament.

5. El funcionament bàsic del GPS és el d’una màquina d’estats. Utilitzarem una variable
ens indicarà l’estat actual, amb una estructura de control condicional
.
que
// OFF – Ens indica que el GPS està apagat
// POWERING ON – Ens indica que el GPS s'està engegant (està fent el procés)
// ON – Ens indica que el GPS està totalment engegat
// MENÚ - Ens obre el menú d'opcions per a carregar mapes o tracks
// CARREGAR MAPES – Permet carregar el menú mapes
// CARREGAR TRACKS – Permet carregar el menú tracks
5
// CARREGAR TRACK 1 – Permet carregar el track 1
// CARREGAR TRACK 2 – Permet carregar el track 2
// POWERING OFF - Apaga el dispositiu

6. ENCENDRE EL GPS
El GPS s’engega i s’apaga amb el següent botó, que quan s’està engegant s’il·lumina:
El GPS es pot apagar en qualsevol dels estats del programa.
Des d’un primer moment
// El gps es troba apagat
// I s’inicia amb l'estat 0
Com el GPS es troba apagat, només es mostra la imatge de l’aparell
6

7.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge del GPS.
// Defineix la posició del botó
// Defineix la mida del botó
// Una vegada pitjat el botó, passarà a l’estat 1
 El botó del power només s’activarà en qualsevol dels estats que es troben dintre del
función
.
de la
// Si l'estat és 0 passarem a l'estat 1
7
// En qualsevol altra estat, l'aparell es podrà apagar, és a dir, passar a l'estat 0
 Quan s’engega el GPS es posen en marxa diferents funcions que permetran més tard realitzar
diferents tasques sobre l’aparell.
// Apareix la paraula "GPS" durant 1,5 segons
// Apareix el logo "Racó Vermell" durant 7 segons
// Carreguem el logo GPS
// Permet que la imatge es vagi carregant des de transparent

8. // Carreguem el logo "Racó Vermell"
// Permet que la imatge es vagi carregant des de transparent
//Una vegada s'ha engegat el dispositiu, ens trobem en l'estat 2
// Aquesta funció serveix per a donar 100% d'opacitat a la imatge
// Carreguem la imatge de la carcassa de l'aparell
// Carreguem la imatge del botó il·luminat
 Per a apagar el GPS utilitzarem el mateix botó i ho podrem fer des de qualsevol pantalla
// Tan sols es mostrarà la carcassa del GPS
8

9. BOTÓ MENÚ
9
El menú permet carregar els mapes i els tracks.
Accionarem el menú amb aquest botó:

10.  En processin definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge del GPS.
// Botó principal del menú
// Defineix la posició del botó
// Defineix la mida del botó
 El botó del menú només s’activarà en qualsevol dels estats que es troben dintre del
función
D’altra manera no funcionarà
de la
// Quan s'acciona el botó del menú, apagaran tots els sons, el de l'alarma i el de la tempesta
en el cas que estiguin funcionant
10
// La pantalla de menú és l'estat 4

11. CARREGAR MAPES
11
 Des del botó del menú accedim a una pantalla on es poden carregar els mapes i els tracks. La
pantalla de carregar els mapes permet carregar un mapa d’Eivissa i un de Formentera.

12.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge Phosohop del GPS.
// Botó per a carregar la pàgina de mapes
// Defineix la posició del botó
// Defineix la mida del botó
// Botó per a carregar mapa d'Eivissa
// Defineix la posició del botó
// Defineix la mida del botó
// Botó per a carregar mapa de
// Defineix la posició del botó
// Defineix la mida del botó
 En el
del switch es crida a la funció
carregar les imatges per a poder visualitzar la pantalla de carregar mapes
que el que fa es
12
// Pantalla carregar mapes
// Barra de menús
// Imatge principal del GPS
 Per a accionar els botons definirem el
.
//CARREGAR MAPA EIVISSA
// Només ha de funcionar des de la pantalla de carregar mapes
// Carrega la imatge d’Eivissa
// Reduirem el mapa en un terç

13. // El nivell de zoom és el 2
//CARREGAR MAPA FORMENTERA
// Només ha de funcionar des de la pantalla de carregar mapes
// Carrega la imatge de
Formentera
// Reduirem el mapa en un terç
13
// El nivell de zoom és el 2

14. CARREGAR TRACKS
14
 La pantalla de carregar els mapes permet carregar dos tracks diferents, un d’Eivissa i un de
Formentera.

15.  En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge Phosohop del GPS.
//Botó per a carregar tracks
// Defineix la posició del botó
// Defineix la mida del botó
//Botó per a carregar el track 1
// Defineix la posició del botó
// Defineix la mida del botó
//Botó per a carregar el track 2
// Defineix la posició del botó
// Defineix la mida del botó
 En el
del switch es crida a la funció
que el que fa es
carregar les imatges per a poder visualitzar la pantalla de carregar mapes, el
carregarà el track d’Eivissa i el
carregarà el track de Formentera
// CASE 6 - Funció per a carregar tracks
// Pantalla carregar tracks
// Barra de menús
// Imatge principal del GPS
//CASE 10 - Funció que carrega el track 1 - Eivissa
// Carrega el track color blau d'Eivissa
// Mapa actiu, coordenades de posició, amplada i alçada
// Carrega el track color vermell d'Eivissa
// Barra de menús
// Imatge principal del GPS
15

16. // CASE 11 - Funció que carrega el track 2 - Formentera
// Carrega el track color blau de Formentera
// Mapa actiu, coordenades de posició, amplada i alçada
// Carrega el track color vermell de Formentera
// Barra de menús
// Imatge principal del GPS
 Per a accionar els botons i carregar els tracks, definirem el
.
// Carregar track 1
// Només ha de funcionar des de la pantalla de carregar tracks, que és l’estat 6
// Carreguem el mapa d’Eivissa
16
// Aquest és la posició ubicada just el punt inicial de la ruta per a començar l’excursió
// El nivell de zoom és el 2
// El track 1 és l'estat 10
// Només ha de funcionar des de la pantalla de carregar tracks, que és l’estat 6
//Carrega el mapa de Formentera

17. // Aquest és la posició ubicada just el punt inicial de la ruta per a començar l’excursió
// El nivell de zoom és el 2
// El track 2 és l'estat 11
17

18. BOTÓ POSICIÓ
Amb el botó “posició” es pot visualitzar o ocultar la posició que es té en el mapa
 El punt central s’inicialitza a
per a que es vegi sempre en els mapes
.
 En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge del GPS.
// Defineix la posició del botó
// Defineix la mida del botó
 Per a accionar fer el botó definirem el
18

19. DESPLAÇAR-SE PEL MAPA
 Per a poder desplaçar-se pels mapes el GPS disposa d’uns botons de desplaçament
 En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge del GPS.
//Botó per a pujar mapa
// Defineix la posició del botó
// Defineix la mida del botó
//Botó per a desplaçar a l'esquerra el mapa
// Defineix la posició del botó
// Defineix la mida del botó
//Botó per a desplaçar a la dreta el mapa
// Defineix la posició del botó
// Defineix la mida del botó
//Botó per a baixar el mapa
// Defineix la posició del botó
// Defineix la mida del botó
 Per a accionar fer el botó definirem el públic void
// Desplaçarem el mapa cap amunt
// Límit del marc per baix
19

20. // Desplaçarem el mapa cap avall
// Límit del marc per dalt
// Desplaçarem el mapa cap a l'esquerra
// Límit del marc per la dreta
20
// Desplaçarem el mapa cap a la dreta
// Límit del marc per l’esquerra

21. COMENÇAR L’EXCURSIÓ
 En el moment que la posició surt fora de la ruta del track, sonarà una alarma.
 Sota el track vermell tenim un track igual però molt més gruixut. Aquest és el que llegeix el
programa per a saber si la posició està sobre el track o no. El track ha de ser més gruixut per a
poder tenir un espai al voltant del track que no soni l’alarma.
 Quan comencem l’excursió trobem dos “chivatos” en la part de dalt que ens indiquen:
porció de la ruta per on està passant
la posició en aquest moment
Color de píxel que s’està llegint en aquest moment.
Si és blau no sonarà l’alarma, si és transparent sonarà l’alarma
21

22. // Funció principal que mostra el mapa
// Si l'estat és 10 carregarem el mapa d'Eivissa
// Contrast
// Visió nocturna
// Color del píxel de la imatge on està el track en blau del fons en x,y
// Per a la posició x, y de la imatge del fons, on està el track en blau, es retalla un quadrat de
100x100
22
// Crida la funció de l'alarma
// Carga la imatge test en la coordenada 5,5
// Reomple un rectangle de color de la variable b. Si llegeix el track, el color serà blau
// Creació d'un rectangle que contindrà el color que llegeix de píxel. La posició és de 150,
15 i la mida de 50x50 píxels
// Si l'estat és 11 carregarem el mapa de Formentera
// Funció pel contrast
// Funció per visió nocturna

23. // Color del píxel de la imatge on està el track en blau del fons en x,y
// Per a la posició x, y de la imatge del fons, on està el track en blau, es retalla un quadrat
de 100x100
// Crida la funció de l'alarma
// Carga la imatge test en la coordenada 5,5
// Reomple un rectangle de color de la variable b. Si llegeix el track, el color serà blau
// Creació d'un rectangle que contindrà el color que llegeix de píxel. La posició és de 150, 15 i la
mida de 50x50 píxels
// Radar
23

24.  Funció que fa sonar l’alarma:
// Si el píxel llegit és blau, l'alarma no sona
// Si el píxel llegit no és blau, l'alarma sonarà
24

25. BOTÓ ZOOM
25
Amb el botó de zoom podem ampliar i reduir els mapes o els tracks fins a quatre posicions.
Ho fem pitjant aquest botó en el GPS:
 Primerament definirem les variables del zoom
// Comptador de desplaçament, per a corregir el zoom
// Comptador de desplaçament, per a corregir el zoom

26.  Definirem el nivell del zoom per a controlar que no s'allunyi o s'apropi massa, i controlar les
vores.
 En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge del GPS.
//Botó del zoom "+" (ampliar)
// Defineix la posició del botó
// Defineix la mida del botó
//Botó del zoom "-" (reduir)
// Defineix la posició del botó
// Defineix la mida del botó
 Aquestes funcions activen el zoom. El zoom +, funcionarà sempre que el mapa es trobi actiu i
que sigui més petit de 5.
26

27. El zoom – funcionarà sempre que el mapa es trobi actiu i que sigui més gran d’1.
27

28. FUNCIÓ DE RADAR METEOROLÒGIC
28
Una vegada s’entra dintre d’un mapa se selecciona el botó radar:
El que fa aquest botó és que apareguin unes icones meteorològiques que es mouen sobre el
mapa. Si ens apropem amb el cursor, sonarà un so de tempesta. La funció de radar només serveix
per a els mapes.
 En Processing definirem la zona on es localitza el botó i el farem transparent, ja que el que
figurarà com a botó és la imatge del GPS.
// Defineix la posició del botó
// Defineix la mida del botó

29.  Se inicia amb el radar desactivat
 Per a accionar fer el botó definirem el públic void
 Per a que surtin les icones meteorològiques, s’ha creat un array que conte les quatre icones de
tempesta
29
 Una vegada s’acciona el radar, Processing seleccionarà aleatòriament una de les icones de
l’array “meteo”.
 Per a evitar que les icones apareguin fora del camp de visió les obliguem que apareguin en un
punt “x” aleatori entre 150 i 500 píxels i un punt aleatori “y” entre 150 i 600 píxels.
 Es carregarà la imatges aleatòria de l’array “meteo”
 Es carregarà l'alarma que ha de sonar quan s'apropa a la icona meteorològica

30.  Dintre de la funció
trobarem aquest
que indica que si el radar s'activa
es carregarà aleatòriament una imatge de l'array "meteo"
// Apareixerà dintre de les coordenades del rang que
defineixe “rx” i “ry”
// Aquesta és la funció que fa moure la icona
// Aquesta és la funció que fa saltar el so
 Aquesta funció fa moure la icona meteorològica. Es mourà en diagonal des del lloc on aparegui
fins a 20 píxels.
// Si la imatge es mou, s'anirà desplaçant x, y fins que el comptador arribi a 20
30
// Quan el comptador arribi a 20, es desplaçarà en sentit contrari
// Quan el comptador arribi a 0, tornarà a desplaçar-se com al
principi, fins a 20
// Si ens situem entre rx+15 píxels i ry+15, salta el "chivato" que ens indica que ens apropem al
núvol

31. Aquesta funció fa sonar el so de tempesta:
// Si es detecta que la posició s'ha apropat a la icona meteorològica sonarà l'alarma
// Si no, es pararà
31

32. BOTÓ DE CONTRAST
32
El contrast s’activa amb aquest botó:
Amb el signes “+” i “-“ pujarem o baixarem el contrast del mapa fins a quatre posicions.
El botó contrast funciona quan se carreguen els mapes i els tracks.

33.  Definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a
botó és la imatge del GPS.
// Botó per a pujar el contrast
// Defineix la posició del botó
// Defineix la mida del botó
// Botó per a baixar el contrast
// Defineix la posició del botó
// Defineix la mida del botó
 Al principi del programa, inicialitzarem el contrast a 1 i la brillantor a 0.
 Per a accionar fer funcionar els botons definirem el
Sempre que el contrast no superi 5, anirem augmentant +10 la brillantor
Sempre que el contrast sigui major que 1, anirem baixant brillantor
33

34.  Cridarem la funció
dintre de la funció
Aquesta funció recorre cada píxel del mapa, separant el RGB de cada píxel i modificant el seu valor
34

35. BOTÓ DE MODE NIT
35
El mode nit s’activa amb aquest botó:
Amb cada clic activarem i desactivarem el mode nit.
El botó de mode nit funciona quan se carreguen els mapes i els tracks.
 Quan inicia el programa, el mode nit està desactivat
 Definirem la zona on es localitza el botó i el farem transparent, ja que el que figurarà com a
botó és la imatge del GPS.
// Botó per al mode nit
// Defineix la posició del botó
// Defineix la mida del botó

36.  Per a accionar fer funcionar el botó definirem el
 Dintre de la funció
estats
activarem o desactivarem la visió nocturna en tots els
// Si s'acciona el mode de visió nocturna
// El mapa actiu se tenyirà de vermell
// Torna el color original del mapa
36
PAQUITA RIBAS TUR, 2013
Llicència:
Creative Commons: Reconeixement – No comercial – Sense obra derivada
http://creativecommons.org/licenses/by-nc-nd/3.0/es/