Introducció a l'scratch

Podeu navegar per la web d'Scratch i executar qualsevol d'aquests projectes compartits. Podeu també veure com està fet i si teniu alguna idea per ampliar-lo podeu fer-ne una versió, que formarà part de l'arbre de reinvencions del programa original.

Quan accedim a l'espai de treball, veiem que té aquest aspecte:

Podem distingir diferents zones en funció del color amb que estan marcades:

Carbassa: Les diferents categories de les instruccions. Cadascuna de les categories està identificada amb un color.
Verd clar: Les instruccions corresponents a la categoria seleccionada. Les instruccions de cada categoria mantenen el seu color.
Verd fosc: Zona dels personatges.
Blau fosc: Botons per crear nous personatges o nous fons de l'escenari.
Morat: Zona de programació.
Rosa: Botons per engegar i aturar l'execució del programa.
Vermell: Escenari on s'executaran els nostres programes.
Groc: Botons per manipular els personatges de l'escenari
Blau cel: Zona de menús del programa.

Els personatges

A la zona verd fosc hi ha els diferents personatges que estem utilitzant. Si fem clic a la "i" d'un personatge en concret veurem totes les seves propietats:

Podem veure i modificar diferent característiques del personatge, algunes de les quals es poden modificar també en mode execució. Si anem variant la direcció, veurem com afecta al personatge. Si combinem la variació de la direcció amb l'estil de rotació veurem també com afecta la combinació d'ambdues propietats. Per canviar aquestes propietats en mode execució tenim aquestes instruccions:

Fixeu-vos que la direcció no és com el sistema de coordenades al que estem acostumats:

90 és a la dreta.
-90 és a l'esquerra.
0 és amunt.
180 és avall.

I, òbviament, podem posar qualsevol valor entre -180 i 180 per a indicar una direcció concreta, on els valors positius assenyalen a la dreta i els negatius a l'esquerra:

Duplicar, eliminar, i canviar la mida dels personatges

Els personatges que veiem a l'escenari (zona vermella) els podem manipular directament amb els botons que tenim a la zona groga.

Aquests quatre botons permeten:

Tampó: Duplica el personatge de l'escenari on s'aplica el tampó, de manera que crea un nou personatge a la zona verd fosc.
Tisores: Elimina el personatge de l'escenari on s'apliquen les tisores, de manera que elimina el personatge de la zona verd fosc.
Engrandir: Augmenta la mida del personatge de l'escenari on s'aplica (botó amb les fletxes enfora).
Empetitir: Disminueix la mida del personatge de l'escenari on s'aplica (botó amb les fletxes endins).

Crear nous personatges

Per afegir un nou personatge al nostre projecte tenim quatre opcions diferents, com podem veure a la zona emmarcada en color blau fosc:

Triar un personatge de la galeria d'Scratch.
Dibuixar-lo nosaltres.
Pujar una imatge.
Fer una foto amb la càmera de l'ordinador per incorporar-la com a nou personatge.

L'escenari

La zona emmarcada en vermell és l'escenari, on els personatges executaran les accions que haguem programat.

L'escenari té 480 píxels d'amplada per 360 píxels d'alçada i al centre mateix de l'escenari hi ha el punt (0,0). Per tant, la coordenada x tindrà valors situats entre -240 i 240, i la coordenada y entre -180 i 180.

Podem veure com varien els valors de les coordenades del ratolí i d'un personatge quan els movem per l'escenari. Cal fixar-se que les coordenades del ratolí estan just a sota de l'escenari, mentre que les coordenades del personatge estan sota de la seva imatge a la part superior dreta de la zona de programació (de color morat). De fet, en el personatge, el que indiquen aquestes coordenades és la posició del "centre" del personatge (el seu centre de rotació).

Dibuixar amb els personatges

Totes els personatges d'Scrath tenen associat un llapis, que podem activar amb la instrucció 'baixa el llapis' de la categoria 'Llapis' i desactivar amb la instrucció puja el llapis. Quan està actiu, quan es mou el personatge el llapis va dibuixant la seva trajectòria, la qual cosa ens permet fer dibuixos. Aquests dibuixos es fan sobre una capa que és comuna a tots els personatges, per això la instrucció 'neteja', de la mateixa categoria 'Llapis' no esborra solament els dibuixos fets per un personatge, sinó tots els dibuixos que es trobin en la capa de dibuix. Cal tenir en compte que la 'punta' del llapis està situada al centre de rotació del personatge. Aquest llapis té associat un color, una intensitat i un gruix que podem canviar de forma dinàmica amb les instruccions corresponents.

On programarem?

Les instruccions estan categoritzades segons el que fan. Teniu un marc amb un botó per categoria. Si premeu qualsevol botó d'aquests obtindreu, a la zona de sota, les instruccions corresponents a aquesta categoria.

Les instruccions de cada categoria vénen amb el mateix color que el botó de la categoria: Blau pel moviment, lila per l'aspecte, etc. Aquí teniu un dels punts forts d'Scratch: les instruccions són blocs!, i amb els blocs construirem (literalment!!) programes.

La zona (fins ara) buida és el lloc on posarem els nostres programes. Fixeu-vos que aquesta regió està vinculada estretament al personatge seleccionat a l'escenari que podeu veure remarcat a la zona dels personatges. Quan posem el programa en aquesta regió, aquest serà un programa associat a un personatge específic. A la figura podeu veure que tenim seleccionat el gatet rosa, per tant si féssim un programa, aquest seria un programa associat a aquest gatet.

Programem!

Un programa és una llista organitzada d'instruccions que, en executar-se, fan que l'ordinador es comporti d'una manera determinada. Programar serà, per tant, partir d'una tasca concreta i intentar proporcionar unes instruccions a l'ordinador per a que faci el que nosaltres volem.

Com es fa això a Scratch? Comencem des de zero. El primer de tot és fer que el gatet faci coses senzilles.

Per afegir instruccions a un programa, les arrossegarem de la zona d'instruccions a la zona de programació amb el ratolí (farem clic a sobre de la instrucció i, sense deixar anar el botó del ratolí, mourem la instrucció allà on volem). A la figura hem agafat i arrossegat tres instruccions diferents cap a la zona de programació:

Feu doble-clic a sobre de cadascuna de les tres instruccions a la zona de programació i fixeu-vos en el gatet de l'escenari. Si feu doble-clic sobre la instrucció de moure, veurem el gatet movent-se 10 passos endavant (en la direcció que té associada). Si feu doble-clic sobre la instrucció de girar, veurem com canvia la direcció del gatet, i si feu doble-clic sobre la instrucció d'anar, el gat torna a l'origen.

Aquests espais en blanc amb nombres dins de cada instrucció-bloc són editables. Provem de canviar el 10 de la instrucció de moure per un 100 i feu doble-clic a sobre de la instrucció. Què veieu? Que el gat es mou 100 passos en lloc de 10.

De fet, el que tenim ara són tres programets (cadascun d'una sola instrucció) que afecten al mateix gatet. Els executem (executar és dur a terme la instrucció o instruccions d'un programa) fent doble-clic a sobre.

Però normalment voldrem combinar instruccions per fer programes més llargs i sofisticats. A Scratch, combinarem les instruccions enganxant-les, una a sota de l'altra, de manera que s'executaran primer les que estan més amunt (per ser rigorosos, d'això en direm estructura seqüencial). Com a exemple ara podem combinar les tres instruccions que hem posat fa una estona dins la zona de programació:

Enganxem les instruccions senzillament arrossegant una instrucció fins a posar-la sota de la instrucció que ha d'executar-se abans. A la figura ja hem enganxat la instrucció de moure a la instrucció d'anar, i estem a punt d'enganxar (esquerra) la instrucció de girar. A la dreta veiem el resultat final. Quan estem a punt d'enganxar una instrucció ens apareixerà una ratlla blanca indicant on s'enganxarà la instrucció que estem arrossegant.

Ara ja tenim un programa amb tres instruccions. S'executarà de la següent manera:

Primer moure el centre de coordenades del gatet a la posició amb coordenada x igual a 0 i coordenada y igual a 0 (el centre de l'escenari).
Després moure el gatet en la direcció corresponent (90 si no l'hem tocat), 10 passes.
Finalment girarà el gatet 15 graus en sentit contrari a les agulles del rellotge (girar un nombre positiu de graus voldrà dir girar en el sentit contrari a les agulles del rellotge).

I l'executarem fent doble-clic a sobre del programa (els tres blocs enganxats).

Tot i això, és més habitual en Scratch executar els programes prement la bandera verda (a dalt a la dreta). És molt fàcil fer-ho, ja que només hem de posar-hi la instrucció corresponent. Fem clic sobre el botó de la categoria d'instruccions 'control' (encerclat vermell a la figura) i arrosseguem a la zona de programes la instrucció 'al prémer la bandera verda' (encerclat verd). Després, arrosseguem el programa a sota de la instrucció que acabem d'afegir (encerclat blau)

El resultat final és el programa:

Fixem-nos que ara, en prémer la bandera verda, el nostre gatet farà el mateix que feia abans.

Tenim deu categories d'instruccions, i a cada categoria d'instruccions hi podem trobar un bon grapat d'instruccions que podem utilitzar en els nostres programes.

Continuem amb el programet que hem començat a fer. Imaginem ara que volem que el gatet faci alguna mena de soroll. Podem triar la categoria 'Sons' i afegir la instrucció-bloc 'tocar so' (triant 'gat' en el desplegable del bloc) al programa.

Ara, quan premeu la bandera verda veureu que el gat fa el que ja sabem i, a més, miola.

Els personatges poden tenir diferents vestits. Sense sortir del programet senzill amb el que estem treballant, trieu la pestanya 'Vestits'.

Fixeu-vos que el gatet té dos vestits, anomenats 'vestit1' i 'vestit2'

Si tornem a la pestanya 'Programes' i fem clic sobre el botó de la categoria 'Aspecte', podem afegir (arrosseguem des de la llista d'instruccions de la categoria 'Aspecte') al nostre programet la instrucció 'següent vestit'. Fem-ho i veiem què passa:

Premem la bandera verda vàries vegades i fixem-nos que els vestits del gatet s'alternen en cada clic a la bandera verda (i encara va girant cada vegada, ja sabeu el per què?).

Si volem eliminar de la zona de programació qualsevol instrucció, l'arrossegarem cap a la zona d'instruccions i, sigui quina sigui la categoria seleccionada, desapareixerà! Exactament el mateix podem fer amb un conjunt d'instruccions enganxades.

Estructura Iterativa (I)

Començarem per la repetició més senzilla:

Les estructures de control a Scratch tenen aquesta forma de contenidor obert. En aquest cas, la repetició 'per sempre', el nom és prou informatiu. Els programes que posarem dins del 'per sempre' es repetiran sense fi.

Anem a posar-ho tot, excepte la instrucció inicial de començar amb la bandera verda, dins d'un 'per sempre' i desprès ho tornem a enganxar en començar amb la bandereta verda. A la figura veiem el procés amb tots els detalls:

Així doncs el programa que tenim és aquest

que el que fa és… premeu la bandereta verda! Veieu que fa el mateix que feia, però ho fa sempre. Això és perquè les instruccions que estan a dins del 'per sempre' s'executen sense parar… per sempre! Ho podeu aturar prement el botó vermell al costat de la bandera verda (el botó d'stop).

No cal, però, repetir per sempre. Podem dir a Scratch que volem repetir només un nombre determinat de vegades. Arrossegant i canviant de lloc les instruccions com hem vist en el cas del 'per sempre', podem utilitzar el 'repetir 10' un cert nombre (10 en aquest cas) de vegades. Aquest 10 el podem canviar. A la figura hem acabat posant 25.

El programa queda així:

És força clar què farà el programa. Ara tindrem les accions dins del 'repetir' executades 25 vegades en prémer la bandera verda.

Però pot ser que vulguem repetir només si passa alguna cosa relacionada amb el nostre programa. És a dir, pot ser que la condició per deixar de repetir depengui del que està passant mentre s'executa el programa, i per tant no puguem saber, abans d'executar el programa quantes vegades s'ha de repetir.

Veiem un exemple. El 'repetir fins' té un forat de contorns angulars al costat, per tant, espera que hi posem una expressió lògica…

Expressions

Mireu les categories 'Operadors' o 'Sensors'. Trobareu uns blocs de forma diferent als blocs que hem vist fins ara. Compareu les instruccions com 'moure', les estructures de control com el 'per sempre' i les expressions.

Les expressions es caracteritzen per retornar valors. D'una expressió s'espera que calculi o mesuri alguna cosa i retorni el resultat. No són instruccions, sinó que s'han d'utilitzar en llocs molt determinats, que n'imposen la utilització. Fixeu-vos que hi ha expressions-bloc amb contorns rodons i expressions-bloc amb contorns angulars. Les primeres, les dels contorns rodons, són expressions numèriques, és a dir, han de retornar un valor numèric. En canvi, les altres, de contorns angulars, són expressions lògiques amb dos possibles valors: 'cert' o 'fals'.

A la figura veiem l'expressió de sumar dos nombres, amb un lloc a cada costat del '+' per posar-hi els nombres, i l'expressió 'distància a menú', que ens diu la distància del personatge al que pertany el programa del que l'expressió forma part, a un altre personatge triat del petit menú desplegable que hi veiem.

En canvi la comparació entre dos nombres '<' o la pregunta 'ratolí premut?' es respondran amb valors 'cert' o 'fals'

Aquestes expressions van a llocs especialment preparats per col·locar-hi aquests blocs. Els blocs de contorns rodons poden anar a forats amb contorns rodons. Per exemple, els paràmetres de la instrucció moure estan preparats per posar-hi una expressió numèrica, però els mateixos paràmetres de les operacions aritmètiques (com el '+' que ja hem vist) també estan preparats per posar-hi altres expressions numèriques. Així podem composar les operacions. Per tant, podem composar expressions

per poder construir instruccions més sofisticades

per moure el personatge un nombre de passos entre 21 i 25, triat a l'atzar.

Igualment, els forats amb contorns angulars estan preparats per encabir-hi expressions lògiques, és a dir, expressions que tenen com a possible resposta només dos valors: 'cert' o 'fals'. I també podem composar operacions de la mateixa manera que ho hem fet amb les expressions numèriques. Fins i tot podem composar els dos tipus d'expressions, si el bloc ens ho permet. Veiem-ne alguns exemples:

Aquesta, és una expressió lògica que ens dirà si el doble de l'arrel quadrada de 10 és més petit que 7 sumat a un nombre a l'atzar entre 1 i 10 (i el resultat, 'cert' o 'fals', dependrà del nombre a l'atzar que surti, és clar!)

Aquesta expressió ens dirà si tenim el ratolí premut i la tecla espai premuda.

Així doncs, resumint, els forats de contorns arrodonits esperen que hi posem expressions numèriques (que poden ser tan senzilles com un sol número, o tan sofisticades com vulguem) i els forats de contorns angulars esperen que hi posem una expressió lògica (de valor 'cert' o 'fals'). Tenim diversos blocs-expressió per construir expressions. Estan essencialment a les categories 'Operadors' i 'Sensors'.

Estructura Iterativa (II)

Dèiem que hi ha estructures iteratives que repetiran les instruccions que hi ha dintre seu en funció del que passi mentre s'executa el programa. Ara ja podem intuir que això passarà en funció del resultat d'una expressió lògica. Aquesta és la raó que s'anomenin repeticions condicionals

Veiem un exemple. Suposem que volem un programa que faci el mateix que el programa que estem fent servir en aquesta pràctica, és a dir, que mogui el gatet 10 passos, el giri 15 graus, mioli i alterni vestits, però volem que ho faci fins que l'usuari premi la tecla espai.

Ara ja sabem com manipular els blocs per construir el programa, de manera que ja no cal detallar-ho tant com abans. El programa que tindrem és

Fixem-nos que per fer-ho més divertit hem decidit introduir una mica d'aleatorietat al programa. Ara, a cada repetició, es mourà un nombre de passos a l'atzar entre 1 i 10 i girarà un angle entre -30 i 30 graus, també a l'atzar. Executeu-lo i estigueu segurs d'entendre bé què està passant.

Oi que quan arriba a les vores queda el gatet ocult? Ho podem resoldre demanant a cada repetició que reboti si toca una vora. Hi ha una instrucció que fa precisament això:

Estructura Condicional

Per finalitzar aquest apartat, estudiarem la darrera estructura bàsica que ens queda per veure: l'estructura condicional. En aquest cas tenim una estructura de control que serveix per decidir si un cert conjunt d'instruccions s'executa, o no, en funció d'una condició (és a dir, d'una expressió lògica).

Aquestes són les estructures 'si' i 'si…si no'. Les trobareu categoritzades a 'Control'

La idea és que si l'expressió lògica (fixeu-vos en els forats de contorns angulars) és 'cert', executarem les instruccions dins del 'si', si aquesta expressió és 'fals', no executarem res en el cas del 'si', i les instruccions dins del 'si no' en el cas del 'si…si no'.

Suposem ara que volem que el gatet comenci des de l'origen de coordenades i que es mogui i giri a l'atzar com hem vist abans, però volem que mioli només quan pitgem la tecla 'm'. Per a això farem servir una estructura condicional 'si'