1

Programació amb l’Scratch

Nom: Data:

2

Introducció Aquesta aplicació ens permet fer animacions o jocs d’una manera fàcil i estructurada sent la forma més senzilla d’introduir-se en el món de la programació. Scratch és un llenguatge de programació base que ens facilita la creació d’històries interactives. Aquests jocs, des de l’Scratch, discorren per un o varis nivells que anomenarem escenaris. Els hem de crear, són plans i poden contenir tot tipus d’elements i objectes. Per confeccionar-los només hem de dibuixar-los o important-los com a fons doncs, un quadre buit, només és això: un espai en blanc per emplenar situat a la part superior dreta de l’aplicació que farà de nivell pel joc Per començar hem de veure que la majoria de coses que corren per una pantalla necessiten d’un suport gràfic, és a dir, d’una imatge. Aquí en direm actors i, per començar, apuntarem que es tracta d’un arxiu gràfic que pot contenir una o més imatges que són mostrades en forma de vestit. Un actor, en aquest cas, és un element al qual l’hi succeeixen coses anomenades programes que es creen arrossegant amb el ratolí des de la zona del magatzem diverses instruccions que es classifiquen en els grups: Movimiento, Apariencia, Sonido, Lápiz, Control, Sensores, Números, Variables. Una pantalla d’Scratch té aquest aspecte:

A la mateixa, a la part superior, hi ha la barra de menús.

A l’esquerra hi és el magatzem de les instruccions per construir els diferents programes. Quan fem clic a sobre del nom del grup d’instruccions apareixen totes les que hi pertanyen al requadre, des d’on les podem arrossegar al requadre central dels escenaris.

3

Al centre de la pantalla hi ha l’espai a on es mostren els escenaris. Té tres pestanyes: Programas, Fondos y Sonidos. Si estem editant un actor la pestanya del mig serà Disfraces.

Al requadre dret, a la part superior, es pot veure l’escenari, tan de forma estàtica com en moviment, quan s’executa el programa. A la cantonada superior dreta hi ha una bandera verda que permet posar en marxa l’animació i un cercle vermell que l’atura.

4

Quan fem clic sobre l’icona de crear un objecte nou se’ns obre un editor gràfic que ens permet dibuixar-lo o importar un dibuix des d’un arxiu. D’aquesta manera creem un actor que podrà tenir més d’un vestit.

L’editor gràfic que s’obre té aquest aspecte i també ens permet importar un arxiu d’imatge.

Una vegada creat l’actor (Objeto) apareix a l’espai a on es mostren els diferents escenaris i actors de l’animació.

5

Si fem clic sobre un dels actors (En aquest cas Objeto1) al requadre central que permet editar els escenaris i els actors podrem editar i crear nous vestits per aquest actor. Per afegir un nou vestit podem fer-ho de tres maneres: afegint un de semblant a un anterior per després poder editar-lo i modificar-lo amb el botó Copiar, important un des d’un arxiu i creant-lo des de zero amb l’editor gràfic.

Si seleccionem un escenari també podrem afegir un de nou o modificar un dels existents. Per defecte, sempre hi ha un escenari en blanc (fondo1).

Exercici 1 (Fem que es mogui el gat) Agafarem com a actor el gat de l’Scratch i el programa següent.

6

Aquest programa fa que el gat es mogui des del centre de la pantalla fins a la dreta i allà es queda. Si quan s’està executant estirem del gat amb el ratolí podem fer que es torni a moure cap a la dreta. Guarda aquesta animació amb el nom de gatenmoviment01.

Exercici 2 (El gat que va i ve) A aquesta animació l’actor Objeto1 tindrà dos vestits. Un serà el gat original de l’Scratch i el segon la seva imatge reflectida en horitzontal, tal com es veu a continuació. Es pot transformar la imatge amb l’editor gràfic del mateix programa.

A l’editor de vestits es veu d’aquesta manera.

El programa que permet fer l’animació té tres blocs. El primer permet posar en marxa l’animació i fer que el gat vagi a la dreta.

7

A continuació te un bucle (por siempre) amb un condicional (si tocando borde) i una instrucció que fa avançar el gat 3 passos a cada cicle del programa. Si el gat toca la vora de l’escenari crida al subprograma esquerra i atura aquest subprograma d’inici. El subprograma esquerra és el següent.

A dins del bucle que obliga a repetir les mateixes operacions de forma indefinida hi ha dues instruccions i un condicional. La primera instrucció li canvia el vestit al nostre actor (El gat) per disfraz2. Després li fem retrocedir 3 passos. El condicional determina que si el gat toca la vora anem al subprograma esquerra i aturem el subprograma dreta. El subprograma dreta és el següent.

A dins del bucle que obliga a repetir les mateixes operacions de forma indefinida hi ha dues instruccions i un condicional. La primera instrucció li canvia el vestit al nostre actor (El gat) per disfraz1. Després li fem avançar 3 passos. El condicional determina que si el gat toca la vora anem al subprograma dreta i aturem el subprograma esquerra. Mentre que no l’aturem amb la rodona vermella, anirem del subprograma dreta a l’esquerra de forma indefinida i el gat anirà de dreta a esquerra i d’esquerra a dreta sense parar. Guarda aquesta animació amb el nom de gatenmoviment02.

8

Exercici 3 (El gat que es passeja per tota la pantalla) Aquesta animació té un programa molt senzill. A dins d’un bucle (por siempre) hi ha un condicional que fa girar l’actor si aquest toca la vora. A continuació el fa avançar. Modificant els valor de gir i d’avançament el gat es comportarà de forma diferent. Guarda aquesta animació amb el nom de gatenmoviment03.

Exercici 4 (El gat que va cap a la dreta i torna a fer-ho) Aquesta animació porta un bucle (por siempre) que a dins té un condicional que fa que el gat torni a la posició de sortida (x: -200 y: 0) si arriba a tocar la vora dreta. Fins que no arriba va avançant de 10 en 10 passos. Guarda aquesta animació amb el nom de gatenmoviment04.

Exercici 5 (El gat que cau des de dalt i torna a fer-ho) Aquesta animació fa caure al gat contínuament des de dalt de la pantalla. Per començar es fa girar el gat per que miri cap a baix i se’l col·loca al punt de sortida (x: 0 y: 140). Igual que a l’exercici anterior el programa continua amb un bucle (por siempre) que a dins té un condicional que fa que el gat torni a la posició de sortida (x: 0 y: 140) si arriba a tocar la vora inferior. Fins que no arriba va avançant de 10 en 10 passos. Guarda aquesta animació amb el nom de gatenmoviment05.

9

Exercici 6 (Bomba que cau des de dalt des d’una posició aleatòria en horitzontal) Per començar dibuixarem aquest actor (Objeto1) a l’editor gràfic.

Per començar es fa girar la bomba per que miri cap a baix i se la col·loca al punt de sortida (x: 0 y: 140). Igual que a l’exercici anterior el programa continua amb un bucle (por siempre) que a dins té un condicional que fa que el gat torni a la posició de sortida (x: número a l’atzar entre -220 i 220 y: 140) si arriba a tocar la vora inferior. Fins que no arriba va avançant de 10 en 10 passos. Guarda aquesta animació amb el nom de bombaquecau01.

10

Exercici 7 (Dues bombes que cauen des de dalt) Podem fer que dos actors actuïn simultàniament amb els seus programes corresponents. Afegirem una altra bomba de color verd i li farem un programa molt semblant al de la bomba vermella.

Al programa de la bomba verda només li hem afegit un retard d’un segon, per tal que no caiguin a la vegada. Guarda aquesta animació amb el nom de bombaquecau02.

Exercici 8 (Movem el gat amb el teclat) Ara mourem el gat sobre la pantalla amb les quatre fletxes del teclat. El programa inclou un bucle (por siempre) i a dins té quatre condicionals, un per cada fletxa de direcció. Quan es prem la tecla de la fletxa corresponent es fan dues coses, primerament es situa el gat en posició amb la instrucció que permet girar l’actor de 90º en 90º (apuntar en dirección) i després se’l fa avançar 10 passos. Guarda aquesta animació amb el nom de gatenmoviment06.

11

Exercici 9 (Movem el gat amb el teclat per un laberint) Primer de tot modificarem l’escenari per tal de fer un laberint de parets vermelles i una meta de color groc.

12

El gat també l’hem modificat, per tal de fer-lo més petit. Quan comenci l’animació si el gat toca la línia vermella haurem perdut i si aconseguim que toqui la meta groga haurem guanyat. Hem de modificar l’escenari per que tingui altres dos aspectes (Fondos) a un d’ells (fondo2) ha de dir “Fora de joc” i a l’altre (fondo3) “Has guanyat”.

Al programa corresponent a l’escenari hi haurà.

Al iniciar-se l’animació posa fondo1, és a dir, el laberint. El subprograma vermell ens diu “Fora de joc” i el subprograma groc ens diu “Has guanyat” i aturen tots els programes de l’animació.

13

Al programa corresponent al gat s’han afegit algunes instruccions al programa de l’exercici anterior per tal de situar el gat a la posició de sortida. Al començament es dona l’ordre de que es vegi (mostrar), ja que el final de l’animació l’amaga.

Al final del programa també s’han afegit dos condicionals. Si el gat toca el color vermell amaga el gat i crida al subprograma vermell de l’escenari. Si el gat toca el color groc amaga el gat i crida al subprograma groc de l’escenari.

Guarda aquesta animació amb el nom de gatallaberint.

Exercici 10 (Movem el gat amb el ratolí per un laberint) Si a l’animació de l’exercici anterior li canviem el programa del gat per tal de que s’orienti i avanci cap al ratolí, podrem dirigir-lo pel laberint amb aquest. El programa es mostra a continuació.

14

Guarda aquesta animació amb el nom de gatallaberint01.

Exercici 11 (Si és simple és millor) Amb aquest senzill programa podem fer gairebé el mateix que a l’exercici 2.

Guarda aquesta animació amb el nom de gatenmoviment07.

Exercici 12 (Amb un clic del ratolí el gat es mou) Aquesta animació es semblant a la de l’exercici anterior, però el gat només es mourà si fem clic amb el ratolí. El programa es mostra a continuació.

15

Guarda aquesta animació amb el nom de gatenmoviment08.

Exercici 13 (Amb un clic del ratolí el gat es mou pel laberint) Ara modificarem l’animació de l’exercici 10. Al bucle (por siempre si) la condició serà que fem clic amb el ratolí.

Guarda aquesta animació amb el nom de gatallaberint02.

Exercici 14 (Un bacteri al laberint) Per aquesta animació hem de dibuixar un actor que als extrems tingui uns colors determinats, però només als extrems. També hem de fer un escenari amb un laberint de color vermell (O qualsevol altre). El bacteri ha de ser prou petit per ficar-se pel camí irregular fent girs.

16

L’aspecte de l’escenari (fondo1) és aquest.

El programa del bacteri comença situant l’actor (El bacteri) amb una orientació (90) i amb unes coordenades (x: -160 y: 120). A dins d’un bucle es situen dues condicionals encadenades, una dins de l’altre, de forma que no actuïn a la vegada. La primera fa girar el bacteri a la dreta i avançar un pas si el seu extrem negre entra a dins de la vora vermella, fins que surti. Si l’extrem negre no està sobre la vora vermella passa a la segona condicional que fa girar el bacteri a l’esquerra i avançar un pas si el seu extrem verd està a sobre de la vora vermella. Si cap dels dos extrems està sobre la vora vermella el bacteri només avança. Guarda aquesta animació amb el nom de bacteri.

17

Exercici 15 (Ara el bacteri es menja altres microorganismes) Ara farem tres actors més de la mateixa forma rodona i blava. Els posarem a dins del laberint i quan arribi el bacteri se’ls menjarà.

18

El programa corresponent a cadascun dels microorganismes és aquest.

Quan comença l’animació el microorganisme es situa al punt que li correspon amb les seves coordenades. De fet, el programa dels tres microorganismes només es diferencia en aquestes coordenades. Quan li toca el bacteri (Objeto2) el microorganisme s’amaga. Guarda aquesta animació amb el nom de bacteri01.

Exercici 16 (Fer més gran i més petit) Per fer aquesta animació amb l’editor gràfic fem unes inicials tals com aquestes.

El programa té un bucle i a dins dos bucles més per repetir 50 vegades, primer una disminució i després un augment de la mida de les lletres. D’aquesta manera quan s’inicia l’animació sembla que les lletres s’allunyin i s’apropin de forma indefinida. Guarda aquesta animació amb el nom de lletres.

19

Exercici 17 (Encendre un llum) Per fer aquesta animació necessitem l’escenari amb un sol aspecte (Fondos) i quatre actors, un d’ells amb dos vestits diferents (L’interruptor – Objeto1). L’escenari només porta dibuixat el cable per fer el circuit elèctric, al qual incorporem l’interruptor (Objeto1), la bombeta (Objeto2) i la pila (Objeto3). La llum (Objeto4) es situa a la mateixa posició de la bombeta, per darrera. Només l’interruptor i la llum tenen programa associat, els altres dos actors no en tenen. L’interruptor, a més, també disposa d’un so que se sent cada vegada que fem clic a sobre del mateix perquè s’encengui o s’apagui la bombeta.

L’aspecte de l’escenari es mostra a la figura següent.

20

Aquests són els dos vestits de l’interruptor, un per quan està tancat i un altre per quan és obert.

A més farem servir el so “Zoop”.

21

El programa de l’interruptor té dues parts, una es posa en marxa quan comença l’animació i reinicia el valor de la variable “clic”, donant-li el valor 0. L’altre dona l’ordre de apagar i encendre el llum.

Quan fem clic a sobre de l’interruptor se sent el so “Zoop”, es canvia el vestit (Disfraz) de l’interruptor, s’augmenta en una unitat el valor de la variable “clic” (cambiar clic por 1), si “clic” val 1 s’inicia el subprograma “encen”, si no s’inicia el subprograma “apaga” i si “clic” val 2 se’l posa a 0. Per definir la variable “clic” hem de crear una “Nueva variable” i posar-li nom. A partir d’aquí ja podré treballar amb ella i fer que es mostri a la pantalla.

22

El programa de la llum (Objeto4) quan s’inicia l’animació redueix la se va imatge al 30%, perquè quan fem clic a sobre de l’interruptor per encendre la bombeta pugui anar augmentant. El subprograma “encen” fa augmentar la seva mida 30 vegades de dos en dos. El subprograma “apaga” fa reduir la seva mida 30 vegades de dos en dos.

Aquí es pot veure el circuit obert i la bombeta apagada.

23

I ara el circuit tancat i la bombeta encesa.

Guarda aquesta animació amb el nom de llum.

Exercici 18 (Anem a dibuixar) Per fer aquesta animació dibuixem un llapis i farem que la seva punta escrigui quan fem clic amb el ratolí i a més pressionem la barra d’espai.

24

El resultat és aquest.

Guarda aquesta animació amb el nom de llapis.

Exercici 19 (Fem girar mecanismes) Per fer aquesta animació dibuixarem 4 actors. Dos d’ells (Objeto1 i Objeto2) són el mateix dibuix, però com que han de fer coses diferents han de ser actors diferents. Es tracta de les dues rodes dentades. Objeto3 es la palanca que acciona el mecanisme que té dos vestits, que mostren les dues posicions de la palanca. Objeto4 es un actor que no es mou i que s’utilitza de fons de l’escenari amb les indicacions del funcionament de l’animació. Quan es prem la tecla fletxa dreta es canvia el sentit de gir dels engranatges i quan es prem la tecla fletxa esquerra s’atura l’animació.

25

A continuació es pot veure el programa del primer engranatge (Objeto1).

Quan s’inicia l’animació es fixa la posició angular de la roda dentada. Desprès hi ha dos subprogrames que comencen fixant el valor de dues variables. Aquests valors s’utilitzen per aturar el subprograma contrari. El subprograma dreta atura el subprograma esquera i a l’inrevés. El subprograma dreta fa girar la roda dentada cap a la dreta. El subprograma esquerra fa girar la roda dentada cap a l’esquerra.

26

A continuació es pot veure el programa del primer engranatge (Objeto2).

Quan s’inicia l’animació es fixa la posició angular de la roda dentada. Desprès hi ha dos subprogrames que comencen fixant el valor de dues variables. Aquests valors s’utilitzen per aturar el subprograma contrari. El subprograma dreta atura el subprograma esquera i a l’inrevés. El subprograma dreta fa girar la roda dentada cap a la dreta. El subprograma esquerra fa girar la roda dentada cap a l’esquerra. Ara els subprogrames esquerra i dreta fan girar la roda dentada en sentit contrari que els subprogrames esquerra i dreta de la roda dentada Objeto1.

27

A continuació es pot veure el programa de la palanca (Objeto3).

Al començar el programa es fixa el valor de la variable “palanca” a 0. Si es prem la tecla fletxa dreta es canvia el vestit de la palanca, perquè es vegi que canvia de posició. Al fer-ho també es canvia el sentit de gir de les rodes dentades. Al final del programa si es prem la tecla fletxa esquerra s’atura l’animació. Guarda aquesta animació amb el nom de rodadentada. L’aspecte de la pantalla és el següent.

28

Exercici 20 (Caça el ratolí) Per fer aquesta animació aprofitem el gat de l’Scratch i fem un nou actor que és un retoli (Objeto2).

El programa del gat es veu de la següent manera. Quan es prem alguna de les quatre fletxes de direcció el gat avança en aquesta direcció.

29

30

El programa del ratolí comença iniciat el valor de la variable “ratoli” i fixa la posició del ratolí. A continuació es fa anar el ratolí per tota la pantalla, xocant contra totes les vores. Si el ratolí es troba al gat, el ratolí desapareix per un temps d’un segon i s’incrementa el valor de la variable “ratoli” en 100 unitats. A cada cicle del programa a la variable “ratoli” se li resta una unitat. D’aquesta manera hem d’intentar caçar molts ratolins per mantenir el marcador en termes positius. A continuació es pot veure la pantalla amb el marcador de punts.

Guarda aquesta animació amb el nom de gatiratoli.

Exercici 21 (Dibuixar funcions) En aquesta animació el gat dibuixa una funció lineal. El programa del gat és el següent.

31

El programa de l’escenari és aquest.

L’animació es veu així a la pantalla.

Guarda aquesta animació amb el nom de funcions.

Recursos La pàgina oficial d’Scratch és: http://scratch.mit.edu/ Per descarregar una versió portable d’Scratch: http://portable-scratch.softonic.com/ Un tutorial d’Scratch: http://famad.wordpress.com/tag/tutories/ Un curs d’Scratch a Youtube es troba a : http://www.youtube.com/watch?v=VgeJbmT90h0&feature=related

32

Els arxius d’Scratch es poden compilar per generar arxius .exe amb un programa anomenat Chirp Compiler. http://chirp.scratchr.org/ http://chirp.scratchr.org/dl/Lists and Files for Scratch.zip

Si es descarreguen els arxius d’aquesta adreça el resultat és el següent:

Lists-IDE és una versió d’Scratch amb la que guardarem les animacions. Lists-Compiler és el programa que transforma els arxius d’Scratch en executables.