Com funciona Scratch?

Finalment, en fer doble-clic sobre la icona del gatet se'ns ha d'obrir el programa Scratch que, si tot ha anat bé, tindrà aquest aspecte:

Si el programa no us surt en català, cap problema! Aneu a la icona del món i trieu el Català.

Ara ja es conserva el llenguatge triat, fins que el torneu a canviar.

Un cop tenim el programa obert, ja heu vist l'aspecte que té, podem distingir diverses parts. A grans trets són:

Podem distingir en funció del color amb que hem envoltat cada zona:

• Taronja: Les diferents categories de les instruccions.
• Verd clar: Les instruccions corresponents a la categoria seleccionada
• Granat: Botons amb diferents opcions
• Vermell: Escenari on tindran lloc les nostres animacions
• Marró: Botons per manipular els objectes de l'escenari
• Verd fosc: Zona d'objectes i fons de l'escenari
• Blau cel: Característiques de l'objecte triat a la zona d'objectes
• Blau fosc: Botons diversos (pantalla completa, editor de dibuixos, etc.)
• Blanc: Zona de programació
• Rosa: Botons per engegar i aturar l'execució del programa.

No patiu que anirem veient cada una d'aquestes zones amb detall a mida que anem avançant. Aquest resum l'hem fet perquè l'entorn us resulti una mica menys misteriós.

Un cop tenim el programa obert, ja heu vist l'aspecte que té, podem distingir diverses parts. A grans trets són:

Fixeu-vos un moment en totes les regions en les que abans hem posat èmfasi, quin aspecte tenen ara que hi ha un programa carregat? Les categories de les instruccions i les instruccions no són pas diferents, però a la zona de programació hi ha un, o més, programes; a la figura veiem un tros del programa associat al comecocos, seleccionat a la zona d'objectes. També cal destacar com el fons de l'escenari no és blanc (podem posar-hi allò que volguem!) i tot el joc es desenvolupa a l'escenari. Això serà sempre així. Els nostres programes manipularan objectes que tindran com a espai d'actuació l'escenari. Allà podran interaccionar amb altres objectes.

Evidentment no volem que entengueu això ara mateix!!. Això ha estat un tast del que sereu capaços de fer un cop hagueu acabat el curs. El límit? La vostra imaginació…

Obrirem el programa Scratch i, si no us surt el gatet taronja sobre un fons blanc, farem clic sobre del botó Nou. Si demana desar els canvis, respondrem que no. Ara ja tenim l'entorn buit, preparat per a les nostres exploracions.

A la pràctica anterior us hem fet cinc cèntims de l'entorn d'Scratch. Si us en recordeu, podem dividir Scratch en diferents regions:

• Taronja: Les diferents categories de les instruccions.
• Verd clar: Les instruccions corresponents a la categoria seleccionada
• Granat: Botons amb diferents opcions
• Vermell: Escenari on tindran lloc les nostres animacions
• Marró: Botons per manipular els objectes de l'escenari
• Verd fosc: Zona d'objectes i fons de l'escenari
• Blau cel: Característiques de l'objecte triat a la zona d'objectes
• Blau fosc: Botons diversos (pantalla completa, editor de dibuixos, etc.)
• Blanc: Zona de programació
• Rosa: Botons per engegar i aturar l'execució del programa.

Ara ens fixarem en els botons d'utilitat, i deixarem les zones de programació (taronja, verd clar i blanc) per a la pràctica següent.

La part emmarcada en vermell és l'escenari on les nostres animacions faran el que presumiblement voldrem que facin. Fixeu-vos que podeu capturar (fer click sobre) el gatet amb el ratolí i (sense deixar de prémer el botó del ratolí) moure'l allà on vulgueu. Mentre feu aquest moviment, fixeu-vos tant en la zona blau cel com en la zona blau fosc. Veieu que els nombres associats a 'x' i a 'y' van canviant, igual que els nombres associats a 'ratolí x' i a 'ratolí y'

Cada objecte que aparegui a l'escenari està en una posició determinada, que ve donada per les seves coordenades (de fet, les coordenades del seu centre; en parlarem més endavant). On és l'origen? doncs ben bé al mig de l'escenari. Al centre mateix de l'escenari hi ha el punt (0,0), i l'escenari té 480 píxels d'amplada per 360 píxels d'alçada. Per tant, la coordenada x prendrà valors que van des de -240 fins a +240, i la coordenada y des de -180 fins a +180. Mireu els valors de les coordenades del ratolí quan el moveu sobre de l'escenari i proveu de posar-lo en els seus valors límit.

A més d'una posició, cada objecte dins de l'escenari té una direcció. Tornem a posar el ratolí a sobre del gatet i aquest cop farem clic a sobre mantenint la tecla de majúscules premuda. Si movem el ratolí, aquest gira sobre el seu centre de rotació i l'apartat 'direcció' de la zona blau cel va canviant de valor:

La direcció de l'objecte, el gatet en el nostre cas, pot prendre valors entre -180 i +180. Ens indicaran els graus des de la vertical, positius en el sentit de les agulles del rellotge i negatius en sentit contrari.

Tots els objectes que apareguin a l'escenari tindran una posició i una direcció.

Els objectes de l'escenari poden ser manipulats fàcilment amb els botons que a la primera figura emmarcàvem amb el color marró.

Aquests quatre botons permeten:

• Tampó Permet duplicar l'objecte de l'escenari a sobre del qual apliquem el tampó. A la figura veiem què passa si l'apliquem sis vegades. Fixem-nos que a la zona dels objectes (emmarcada en verd fosc a la primera figura d'aquesta pràctica) n'apareixen de nous a mida que anem creant-ne.

• Tisores Permeten eliminar un objecte de l'escenari. Cal seleccionar el botó i posicionar-se sobre de l'objecte tot fent clic.

• Engrandir El botó amb les fletxes sortint cap a fora de la icona permet fer l'objecte més gran.
• Fer més petit El botó amb les fletxes entrant dins de la icona permet fer els objectes més petits.

El que nosaltres hem anomenat 'objectes' Scratch els anomena 'Animacions'. Tant és, el cas és que no només podem treballar amb el gatet!

Els tres botons  ens permeten obtenir nous objectes de maneres diferents.

•  permet obrir l'eina de dibuix per crear un objecte nosaltres mateixos. Aquest editor de dibuixos funciona com altres editors de dibuixos que segurament ja coneixeu (per exemple el Paint de Windows). Sobre la marxa anirem veient aquells aspectes no estàndard de l'eina.

•  permet agafar un dels objectes que ja venen amb l'Scratch (n'hi ha molts!). Si feu clic a sobre, podreu triar entre les diferents carpetes que agrupen els objectes per temes.

•  permet obtenir un objecte a l'atzar, triat entre els que ja venen amb l'Scratch (capsa sorpresa). Proveu de fer clic sobre de la icona de la capsa sorpresa. Veureu com a l'escenari van apareixent objectes diferents. Ja sabeu com manipular-los, no? Vegeu la secció anterior.

Ara ja teniu un cert domini sobre la manipulació dels objectes dins de l'escenari. Sabeu esborrar-los (tisores), duplicar-los (tampó), crear-ne de nous (editor de dibuixos), etc.

Però Scratch és un entorn per aprendre a programar i això és el que hauríem de començar a fer sense més preàmbuls.

En aquesta pràctica provarem d'explicar aquelles parts de l'entorn que ens serviran per programar, i també començarem a fer alguns programets senzills.

• 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 de 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 a l'objecte sel·leccionat en el llenç que podeu veure remarcat a la zona d'objectes. Quan posem el programa en aquesta regió, aquest serà un programa associat a un objecte específic del llenç. A la figura podeu veure que tenim sel·leccionat el gatet rosa, per tant si féssim un programa, aquest seria un programa associat a aquest gatet.

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.

Penseu que de programar se n'aprèn programant. No hi ha dreceres. L'única manera de ser competents programant és practicant molt. Això vol dir, equivocant-vos molt. Que ningú es decebi per fer errors en els seus programes, aquest és el procés habitual. De fet, aquesta és una de les parts més divertides de programar. Possiblement estareu gran part del vostre temps jugant a detectius, o resolent trencaclosques, activitats equivalents a trobar errors en els vostres programes.

Com es fa això a Scratch? Comencem des de zero (recordeu de triar l'opció 'Nou' sota el menú 'Fitxer' per reinicialitzar l'estat del vostre entorn). 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 (cada un 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 (si voleu 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. Més endavant ens serà molt útil.

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

1. 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).
2. Desprès moure el gatet en la direcció corresponent (90 si no l'hem tocat), 10 passos
3. 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 ara que el nostre gatet farà el mateix d'abans, quan premíem la bandera verda.

Tenim vuit categories d'instruccions, i a cada categoria d'instruccions hi podem trobar un bon grapat d'instruccions que podem utilitzar en els nostres programes. No ens dedicarem a explicar d'una en una totes les instruccions que posa a la nostra disposició Scratch. Això seria força avorrit. El que farem és il·lustrar amb exemples les possibilitats d'Scratch i, a mida que necessitem diferents instruccions, les anirem utilitzant i explicant, si cal.

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 objectes 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è?). Aquest canvi de vestits serà la base de les animacions fetes amb Scratch. Encara ens queda, però, una mica de camí per endavant.

Si ara volguéssiu no haver de fer clic a la bandera verda per repetir l'acció, com ho faríeu? No podríeu fer-ho encara. Hi ha certes estructures de programació que encara no hem vist. A la propera pràctica veurem construccions bàsiques que ens permetran fer programes més sofisticats.

Per cert, queda un petit detall. 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.

En aquesta pràctica començarem a explicar les estructures fonamentals de la programació que ens queden per veure desprès d'haver treballat l'estructura seqüencial a la pràctica anterior.

Repetir és una de les accions que els ordinadors fan millor. Són incansables! A més, és completament necessari poder repetir per poder fer programes. Sense l'habilitat de fer repeticions hi hauria problemes que els ordinadors no podrien resoldre!

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.

Tornem al programa que fèiem servir a la pràctica 3. 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…

…sí, sí, ja ho sé. De què estem parlant? expressions lògiques? forats de contorns angulars? quan ho hem vist això? Doncs encara no ho hem vist. Precisament per això caldrà que fem un petit parèntesi.

No tot el que està categoritzat amb els botons

són pròpiament instruccions. No hem fet aquesta distinció fins ara per simplificar, però ara convé entrar-hi una mica més en detall.

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 de l'objecte al que pertany el programa del que l'expressió forma part, a un altre objecte 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 l'objecte 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.

Fixem-nos en l'operació lògica i (conjunció). De la mateixa manera disposem a Scratch de les operacions de disjunció (o) i negació (no)³⁾.

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'.

I posarem fi a aquest parèntesi…

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ò:

Per finalitzar aquesta pràctica, 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'