Arxiu de la categoria: Conceptes

Codi

Introducció

Al llarg d’aquesta primera setmana faràs una serp vermella interactiva, un rellotge amb Post-it i un joc inspirat en Newton. Aprendràs programació bàsica així com alguns aspectes de la teoria que hi ha darrere els gràfics a les pantalles. Aquesta segona part és important perquè, encara que aquest curs sigui sobre programació, l’objectiu és sempre crear quelcom útil i divertit. Per fer ús de la pantalla als teus projectes és bo saber com funciona. Quan hàgim acabat, estarem encantats de veure quins altres jocs o projectes interactius seràs capaç de crear.

 

Processing

pde-128

Els codis de programació són ordres comprensibles pels humans. El codi es transforma en els programes que entenen els ordinadors. En realitat, els ordinadors només entenen zeros i uns, per la qual cosa necessitem una manera de traduir el nostre codi humà al codi dels ordinadors. Per aquest motiu, escrivim el codi en un editor de text amb propietats especials. Aquest editor és el software de desenvolupament anomenat Entorn de Desenvolupament Integrat, abreujat IDE per les seves sigles en anglès (Integrated Development Environment), que és capaç de traduir el codi al llenguatge màquina. Quan l’IDE transforma el nostre codi al llenguatge màquina, ho anomenem compilar.

Tos els ordinadors, smartphones, servidors d’Internet, ascensors, forns… –és a dir, actualment, qualsevol dispositiu amb intel·ligència digital– tenen distintes capacitats i, per tant, requereixen un llenguatge màquina una mica diferent de la resta. Existeix un llenguatge de programació anomenat Java que, un cop compilat, pot ser utilitzat fàcilment en diferents dispositius. Hi ha moltes maneres diferents de programar en Java IDE, però nosaltres ens centrarem en l’ús de Processing.

Processing és codi obert i software lliure; això vol dir que es pot descarregar d’Internet, instal·lar-lo gratuïtament i modificar el seu codi. Processing funciona en qualsevol tipus d’ordinador de sobretaula o portàtil amb els sistemes operatius: Windows, Mac OSX i Linux.

L’IDE de Processing és molt senzill. Hi ha una barra d’eines que pots utilitzar per:
 Executar un programa
 Aturar un programa
 Crear un nou programa
 Obrir un programa
 Emmagatzemar el programa al disc dur de l’ordinador
 Exportar el programa

Processing crea programes que s’executen directament dins el teu ordinador. També els pots exportar i enviar-los als ordinadors d’altres persones. Un cop exportats en codi màquina, els programes s’anomenen aplicacions. Pots exportar el mateix programa perquè s’executi en un ordinador, un telèfon o un web.

Per fer els teus programes només necessites saber com s’utilitza un teclat i com funciona la pantalla de l’ordinador. Això et serà útil quan escriguis els teus propis programes interactius.

Pantalles i píxels

Les pantalles s’utilitzen per representar imatges. Aquestes imatges poden ser dinàmiques, com a les pel·lícules, o estàtiques, com a les fotografies. D’altra banda, es pot incloure text, com als documents, o només gràfics. El més habitual és que les imatges a la pantalla siguin una barreja de moltes coses: inclouen animacions, textos, estadístiques, etc.

Píxels – Resolució

Les pantalles estan fetes de punts que anomenem píxels. En general, com més píxels tingui una pantalla, millor serà. Per això expressem la qualitat de la pantalla en funció de la quantitat de píxels: és el que anomenem resolució. Normalment, quan parlem d’una pantalla ens referim a la seva amplada i alçada. Per exemple, molts projectors tenen una resolució de 1024×768 píxels. Això significa que té 1024 píxels d’amplada i 768 píxels d’altura.

Colors

Cada píxel es pot il·luminar amb molts colors diferents. De nou, quants més siguin els colors amb què es pugui pintar el píxel, millor serà la pantalla. A la pantalla de l’ordinador, els colors s’expressen com una combinació de tres components de color diferents: vermell (R), verd (G) i blau (B). Qualsevol color que vulguis representar en una pantalla es pot fer barrejant els components RGB en diferents quantitats. La quantitat de color per cada component s’expressa amb un número entre 0 i 255. 0 representa el valor mínim d’un color: per exemple, si un color té 0 del component vermell, significa que no conté vermell. En canvi, si en té 255 significa que està saturat de color vermell. Si les coordenades són (255,255,255), els píxels produiran blanc. Si els valors RGB són (0,0,0), els píxels mostraran negre. Si gradualment canvies els valors RGB en la mateixa proporció des de (255,255,255) a (0,0,0), veuràs que el color canvia de blanc a negre. La següent imatge mostra com el color d’un píxel es fon de blanc a negre i com canvien els valors de RGB:

Coordenades

Pots escriure programes que canviïn els píxels de la pantalla. Fins i tot pots canviar un sol píxel. L’acció d’accedir a un sol píxel a la pantalla és el que anomenem direccionar un píxel. La ubicació d’un píxel es determina mitjançant coordenades. Cada píxel té 2 coordenades:

  • La coordenada horitzontal és la que anomenem coordenada X (amplada, o en anglès width).
  • La coordenada vertical és la que anomenem coordenada Y (alçada, o en anglès height).

Si recordes el que vas aprendre a classe de matemàtiques i física, pots dibuixar gràfics, punts, línies i corbes utilitzant coordenades. Aquesta mateixa idea s’aplica a la pantalla de l’ordinador. L’única diferència és que el que s’anomena origen de coordenades és la cantonada superior esquerra de la pantalla de l’ordinador.

Línia

La millor manera d’aprendre programació és escrivint els teus propis programes. Començarem fent el programa més curt possible utilitzant Processing. Serà un programa per dibuixar una línia que t’ajudarà a entendre com funciona la programació.

Obre l’IDE i clica la icona  per crear un nou programa. Això et mostrarà un nou programa buit. Escriu el següent codi:

line(0, 0, 100, 100);

 

Només utilitzem una única ordre aquí:

  • line(x1, y1, x2, y2): Dibuixa una línia des de la coordenada (x1,y1) fins la (x2,y2). En aquest exemple: des de (0,0) (cantonada superior esquerra) fins (100,100) (cantonada inferior dreta), ja que la finestra és de 100×100 píxels.

També necessites saber el següent:

  • Has d’acabar cada línia de codi amb punt i coma: ‘;’. Si te n’oblides, el codi no podrà ser compilat ni executat.
  • Per defecte, les finestres de Processing són de 100×100 píxels amb un fons gris. El color per dibuixar és el negre. Evidentment, però, tot això es pot canviar.

Escriguem un programa que dibuixi dues línies de diferents colors sobre un fons blanc:

background(255);
line(0, 0, 100, 100);
stroke(0, 0, 255);
line(0, 100, 100, 0);
  • background(gray): Estableix el color de fons des de 0 (negre) fins a 255 (blanc). També pots utilitzar backround(red, green, blue) per establir el color que tu vulguis.
  • stroke(red, green, blue): Estableix el color de la línia. Cada valor de color pot ser des de 0 fins a 255. En aquest cas, la línia és de color blau, ja que red=0, green=0 i blue=255.

Quan executis el programa, el que hauries de veure a la pantalla és:

Els teus programes s’executaran sempre de dalt a baix línia per línia. Aquest programa comença establint el blanc com a color de fons. Després, dibuixa la línia negra com en l’exemple anterior, des de la coordenada (0,0) fins la (100,100). En tercer lloc, estableix el blau com a color de línia, just abans de dibuixar aquesta segona línia des de la (0,100) (cantonada inferior esquerra) fins la (100,0) (cantonada superior dreta).

 No oblidis guardar el teu programa al disc dur o en una memòria USB si vols endur-te’l a casa.

Continua experimentant!

  • Afegeix més línies de diferents colors i canvia el color de fons.
  • Canvia la seqüència del programa. Què passa si, per exemple, modifiques el color de fons al final?

Setup i Draw

Els tipus de programes que hem fet fins ara són els anomenats programes estàtics. Això significa que mai canvien. S’executen una sola vegada i, quan arriben a l’última línia del codi, s’aturen. Si volem que un programa sigui interactiu, hem d’habilitar l’entrada continua de dades mentre el programa s’executa. Això només és possible si l’execució és contínua.

Amb Processing pots crear programes que s’executin contínuament utilitzant la funció draw(). Aquesta funció repetirà el bloc de codi una vegada i una altra fins que el programa s’aturi. Tanmateix, no tot el codi escrit necessita ser repetit contínuament. Per al codi que només necessita ser executat una única vegada, has d’utilitzar la funció anomenada setup().

Escriguem de nou un programa que dibuixi una línia, però aquesta vegada utilitzant les noves funcions:

void setup() {
size(300, 300);
}

void draw() {
line(0 ,0, width, height);
}
  • setup(): El codi entre parèntesi s’executa una única vegada quan el programa comença. Només necessitem establir la mida de la finestra una vegada, al principi del programa.
  • draw(): El codi entre parèntesi s’executa un cop rere un altre. S’executa línia per línia, de dalt a baix fins a l’última línia, on torna a començar des del principi.

Aquest programa estableix la mida de finestra a 300 x 300 píxels i després dibuixa una línia sobre tota la finestra una vegada i una altra. En aquest moment, encara no es pot apreciar que això està passant un cop rere un altre, així que escriguem un altre programa per fer-ho més visible.

void setup() {
size(300,300);
}

void draw() {
line(0, 0, mouseX, mouseY);
}
  • mouseX: La coordenada X del cursor del ratolí.
  • mouseY: La coordenada Y del cursor del ratolí.

Aquest programa et permet interactuar amb la pantalla mentre mous el ratolí, com mostra la següent imatge. Això succeeix perquè cada vegada que el codi dins de draw() s’executa, una nova línia es dibuixa. El segon punt de la línia canvia segons la posició del cursor del ratolí.

Com pots veure, estàs deixant un rastre de línies quan mous el ratolí. Això és perquè mai s’elimina cap línia dibuixada ni res la sobreescriu. Què creus que passarà quan executis el següent programa?

void setup() {
size(300,300);
}

void draw() {
background(255);
line(0, 0, mouseX, mouseY);
}

 

Variable

Les variables són quelcom que uses tota l’estona en programació. Són com un contenidor per diferents tipus de dades. Per cada variable, necessites especificar quin tipus de dades contindrà, quin és el nom de la variable i quin valor se li assigna.

Pensa-hi com si fossin pots. Imagina’t que tens dos pots, un per galetes i l’altre per paraules: això són els tipus de dades. Ara, cal donar un nom a cada pot: cookieJar (pot de galetes) i jarOfWord (pot de paraules). És el moment de decidir què poses a cada pot. Al cookieJar hi poses una galeta de xocolata doble i al jarOfWord hi decideixes posar “Arduino”. Ara cada pot té un valor.

Pots canviar el contingut dels pots (el seu valor) en qualsevol moment, sempre que sigui del mateix tipus. Per exemple, pots canviar la galeta de xocolata doble per una Oreo i “Arduino” per “spaceinvader”.

Per fer-ho més clar, escriguem un programa utilitzant variables. N’escriurem un que dibuixi, de nou, dues línies, però aquesta vegada utilitzarem aquestes variables:

int value1 = 0;
int value2 = 100;
line(value1, value1, value2, value2);
line(value1, value2, value2, value1);
  • int variableName = value: Crea una variable del tipus integer, un nombre enter. Pots escollir qualsevol nom per identificar-la, però per fer-ho més fàcil pel teu futur jo (qui provablement llegirà el codi en el futur i voldrà entendre què va fer en el passat) assegura’t que el nom s’adiu al context en el qual s’utilitza la variable. value és el valor que decideixes donar al contingut de la teva variable.

El que fa el programa és dibuixar una línia des de la coordenada (0,0) fins a la (100,100) i després dibuixa una segona línia des de la coordenada (0,100) fins a la (100,0). Com que value1 conté el valor 0, en qualsevol lloc del codi on escriguem value1 significarà 0. Això implica que si vols canviar la creu que hem dibuixat només cal modificar el valor de la variable, enlloc de canviar el valor als vuit llocs diferents dins de line(). Prova-ho tu mateix i ho veuràs.

Tipus de dades

Els tipus més comuns de dades que utilitzaràs són els següents:

  • int: Nombre enter, p.ex., 2, 99 o 532.
  • float: Nombre decimal, p.ex., 2.76, 8.211 o 900.3.
  • boolean: Pot ser veritable o fals.
  • char: Un caràcter, p.ex. ‘r’, ‘2’ o ‘%’.
  • String: Una seqüència de caràcters, p.ex. “hola”, “M’encanta programar!” o “&%!@¤”.

Processing inclou algunes variables de sistema per fer-les més accessibles dins els teus programes. Un exemple és width i height. Aquestes variables retornen l’amplada (width) i l’alçada (height) de la finestra del teu programa. Aquest n’és un petit exemple:

size(400, 200);
ellipse(width/2, height/2, width, height);
  • size(width, height): Estableix la mida de la finestra en píxels.
  • ellipse(x, y, x diameter, y diameter): dibuixa una el·lipse centrada a les coordenades x i y. La mida s’estableix amb x diameter i y diameter. Quan aquests dos paràmetres són iguals, el resultat és un cercle.
  • width: l’amplada de la finestra de programa.
  • height: l’alçada de la finestra de programa.

Aquest programa comença establint la mida de la finestra. Després, hi dibuixa l’el·lipse al mig. No importa la mida de la finestra: l’el·lipse l’omplirà sempre completament. Intenta canviar la mida de la finestra.