3. Llapis i geometria

Introducció

En aquest càpitol veurem l'ús que podem fer de les instruccions de l’apartat llapis. Hem de saber que totes les animacions de Scrath tenen associat un objecte al que anomenem llapis. Aquest pot estar actiu (baixar llapis) o no (pujar llapis); quan està actiu i en moure l’objecte, el llàpis va dibuixant la trajectòria de l´objecte i això ens permet fer dibuixos. Aquests dibuixos es fan sobre una capa que és comuna a tots els objectes, per això, la instrucció esborrar no esborra solament els dibuixos fets per un objecte sinó tots els dibuixos que es trobin en la capa de dibuix. També hem de saber que la “punta” del llapis està situada al centre de rotació de l´objecte. El joc d´instruccions que es poden aplicar al llapis són les que veiem a la imatge següent.

Les tres primeras instruccions ja les hem comentades, les altres fan el que el seu nom indica, i no les comentarem ara, sinó que les veurem tot utilizat-les en els exercicis següents.

Pràctica 3.1

Ara només ens fixarem en l´última de la llista estampar, que el que fa és dibuixar el propi objecte sobre la capa de dibuix; així, si movem l´objecte hi estampem diverses vegades i obtenim una successió de dibuixos de l´objecte. Combinant aquesta instrucció amb les instruccions de l´apartat aparença, podem obtenir múltiples efectes.

Veiem tot això amb uns petits exemples, obrim el programa i creem una animació qualsevol i li afegim el codi següent

En executar aquest codi l´objecte traça una linea d´esquerra a dreta.

Desa l'arxiu com M3pintaliniaNomiCognom.sb

Modifiquem aquest codi afegint-hi un parell d´instruccions com les que es mostren a la següent imatge.

Veiem el resultat.

Ara combinarem instrucciones de llapis amb instrucciones d'aparença, modificant alguns valors del codi anterior.

Veiem el resultat.

Desa l'arxiu com M3papallonaNomiCognom.sb

Pràctiques

Practica 3.2

QUADRATS, POLÍGONS I ESPIRALS

Volem fer un programa que dibuixi quadrats i polígons regulars de qualsevol nombre de costats. Obrim Scratch i seleccionem un nou projecte, creem una animació que serà la que anirà dibuixant les figures. Anem a la carpeta d´objectes que es troba a la part inferior de l´àrea de treball, en fer clic se´ns obrirà una nova finestra on seleccionem la carpeta “things”; fem doble clic per obrir-la i apareixerà una col·lecció d´objectes, busquem entre ells un llapis, el seleccionem i acceptem amb el botó inferior. Si a l´àrea de treball encara hi és el gatet, l'eliminem tallant-lo amb les estisores; el llapis apareixerà amb un programa associat, l'eliminem arrossegant-lo fora de l´àrea de programa.

Si no apareix el llapis a la zona de treball, arrosseguem una instrucció “anar a x: 0 y: 0” a la zona de programa i fem doble clic a sobre d'ella; desprès ajustem la mida del llapis amb la comanda reduir, aproximadament cóm es mostra en la imatge

Combinant les instruccions moure i girar, anem a dibuixar un quadrat: escrivim un codi com el que apareix a continuació, les instruccions que dibuixen el quadrat són les que es troben dins del bucle repetir.

Si encertem el codi obtindrem la següent imatge.

Desa l'arxiu com M3pintaquadratNomiCognom.sb

Desa l'arxiu com M3pintahexagonNomiCognom.sb

Ara anem a fer extensible aquesta solució a qualsevol polígon regular. L´únic que necessitem es substituir el número 6 per una variable que vagi adquirint el valor dels costats del polígon que volem dibuixar. Anem al menú variables, fem clic amb el botó “nova variable” i ens apareixerà un nou menú per a la creació de variables, ens demana el nom per la variable i li donem el nom costats.

En el menú de variables ens apareixen noves instruccions que podem utilitzar en la creació de codi, són les que veiem amb la imatge següent. La instrucció fixar serveix per assignar un valor a la variable, la instrucció canviar incrementa la variable amb la quantitat que li indiquem. També ens apareixerà una peça costats, amb una casella que si està activada farà que el valor de la variable aparegui a la zona de representació gràfica i també apareixeran instruccions per permetre, mitjançant codi, activar i desactivar aquesta representació “amagar i mostrar variable”. Si fem clic amb el botó dret del ratolí sobre la representació de la variable, ens apareixerà un menú com el de la següent imatge. Escollint l´opció “lliscador”, la imatge de la variable canvia d´aspecte, ara podem canviar el valor de la variable movent el lliscador, si tornem a fer clic amb el botó dret apareixerà un nou menú com el que es mostra a la imatge següent. Triar l´opció “defineix el mínim i màxim del lliscador”, amb això podrem acotar els valors que pot prendre la variable.

Creem una altra variable a la que anomenarem passos, que ens servirà per controlar la longitud del costat del polígon. Afegim aquestes variables al codi i ens quedarà com la imatge següent. Amb aquest codi, variant el nombre de costats i la seva longitud podem dibuixar qualsevol polígon regular convex.

En començar el capítol no sabíem dibuixar una sola línia i ara, amb molt poc codi podem dibuixar tots els polígons. Vegem el que passa amb una petita modificació com la que fem en el codi següent.

Desa l'arxiu com M3P2NomiCognom.sb

Pràctica 3.3

continuació de la pràctica 1)

En arribar a aquest punt, reorganitzarem el codi perquè cada funció quedi en un bloc separat i construirem els següents blocs: un per inicialitzar el programa, un altre per les funcions que posarem en marxa des del teclat i uns altres per a cada tipus de figura que vulguem dibuixar (quadrats, polígons, espirals). Així aconseguirem tenir un codi més clar i llegible. A la nostra dreta tenim al bloc d'inici, en el qual es fixen els paràmetres inicials: longitud dels costats, posició inicial, color del llapis etc. La penúltima instrucció és la que enllaça amb el bloc següent. Aquesta instrucció la trobarem a l'apartat de control (color groc). Clicant a la petita fletxa que hi ha a la dreta s'obrirà un petit menú, seleccionem nou i s'obrirà una finestra on escriurem inici, com a nom del missatge

Aquest missatge posarà en marxa tots els blocs que tinguin com a primera instrucció en rebre inici com el que tenim a la nostra dreta. Analitzem que fa aquest bloc; després de la instrucció d'inici ve una instrucció per sempre, que engloba totes les altres instruccions, això significa que aquestes instruccions es repetiran de forma indefinida i el que aconseguirem amb això és que el programa estigui sempre pendent de si polsem alguna de les tecles que hem escollit per controlar el programa. També hem posat una instrucció esperar 0,1 segons, això ho fem per tal que la repetició continuada del bloc no bloquegi el programa i per evitar la doble pulsació de les tecles.

Dins del per sempre hi trobem una serie d'instruccions condicionals, és a dir que només s'executaran si es compleix una condició, en aquest cas, si una determinada tecla és premuda. La instrucció que s'executa en cadascun dels casos és la d'enviar un missatge que posa en marxa diferents blocs de codi. En aquest exemple els diferents blocs es troben en el mateix objecte, però no sempre és així, perquè podríem estar en altres objectes i ser utilitzats per enviar-se missatges de l'un a l'altre i així concatenar un seguit d'accions. En aquest cas els missatges són quadrat, polígon, espiral que posaran en funcionament els corresponents blocs que executen aquestes accions. Aquest tipus d'estructures són útils per enviar ordres des del teclat i veureu que es repeteixen en diferents exemples, amb petites variacions. Veiem ara com queden els diferents blocs que executen aquestes accions.

Aquests dos primers blocs que dibuixen les formes elementals i el seu codi es dedueixen directament del que s'ha explicat anteriorment, ara escriurem el codi d'un bloc que dibuixa formes més complexes; per això, primer crearem dues noves variables, angle i increment. La primera guardarà l'angle de gir del llapis i la segona servirà per augmentar la variable passos a cada repetició. Veiem el codi i, a continuació, analitzem com funciona.

El bloc comença el rebre el missatge espiral, a continuació fixa la variable passos a 0. Ara ve una instrucció nova: repetir fins que es compleixi una condició, en el nostre cas fins que el llapis toqui una vora, d'aquesta manera aconseguim que el dibuix ocupi pràcticament tota la pantalla. La primera instrucció de la repetició és la que mou l'objecte i que determina la longitud del traç, fixeu-vos en que, a la primera repetició, la variable pren per valor zero i que, a cada repetició, el seu valor augmenta el valor de la variable increment. Això fa que la corba tingui forma d'espiral. Feu la prova en un valor per l'angle de 40° i per l'increment 0,4 canvieu ara el angle per 43° després per 61°,119° …. en general, si l'angle escollit correspon a l'angle d'un polígon regular obtindrem una espiral, si és una mica més gran o petit obtindrem figures que es cargolen sobre si mateixes.

Al final de la repetició posem una instrucció que va canviant el color del llapis cada vegada, per tal d'aconseguir una imatge més vistosa .

Desa l'arxiu com M3pintaespiralNomiCognom.sb

Per acabar aquesta pràctica crearem un altre bloc que servirà per esborrar la pantalla i tornar a situar el llapis a la posició d'inici, sense haver de prémer la bandera verda, sinó que ho farem amb la tecla espai.

En la imatge següent es mostra el codi complet d'aquesta pràctica.

Desa l'arxiu com M3P3NomiCognom.sb

Pràctica 4.1

L'ABELLA I LES FLORS

En aquesta pràctica continuarem fent servir les instruccions del llapis, tot afegint-hi alguna instrucció més.

L'objectiu és fer que cada cop que cliquem amb el ratolí aparegui una abella que dibuixi una flor i que cada vegada aquesta flor sigui diferent. El primer objecte que necessitarem serà una abella que importarem del repertori de dibuixos que porta el mateix Scratch. Cliquem sobre el botó que té una carpeta, just sota la finestra de treball. Obrim la carpeta d'animals: seleccionem l'abella i cliquem OK.

Ajustem la mida de l'abella, i escrivim el codi corresponent, primer perquè vagi al punt on cliquem el ratolí i dibuixi la tija de la flor.

Les dues primeres instruccions serviran per desactivar el llapis i esborrar els possibles dibuixos anteriors. A continuació i en la instrucció per sempre farem que el programa repeteixi indefinidament les instruccions que es troben a dins. La primera instrucció que és a dins del per sempre fa que el programa esperi fins que premem el ratolí i, a continuació i en la instrucció següent, fem que l'abella vagi al punt x on tenim el ratolí, i al punt y (-200) que és el que correspon a la part baixa de la pantalla.

Les instruccions següents mostren l'abella, activar el llapis, fixar el seu color a l'atzar, perquè cada vegada dibuixi la tija de un color diferent, i determini el gruix de la línia que dibuixa. Una vegada hem fet això, movem l'abella en direcció vertical perquè en desplaçar-se traci una línia; per fer això utilitzem la instrucció lliscar, que fa que el desplaçament de l'objecte duri un temps determinat. Fem que la longitud desplaçada tingui una llargada variable utilitzant la funció que genera números a l'atzar perquè així totes las tiges tindran mides diferents.

Si el codi està ben escrit obtindrem un resultat com el que es mostra a la imatge superior. A continuació dibuixarem la flor a l'extrem de la tija. Per fer-ho crearem un nou objecte, en forma de pètal: obrim l'editor de dibuixos fent clic al botó de sota la finestra de treball que té dibuixat un pinzell i seleccionem l'eina de fer cercles, triem un color i dibuixem una figura com la que apareix a la imatge següent:

quan tenim dibuixada la forma, cliquem el botó que defineix el centre de rotació i que es troba a la part inferior esquerra de l' editor. Apareixeran dues línies en forma de creu que podem desplaçar amb el ratolí, així definirem el punt sobre el qual rotarà la forma que hem dibuixat quan la fem girar.

El primer conjunt d'instruccions serveix per amagar l'objecte quan comencem a dibuixar, aquest objecte estarà amagat pràcticament sempre i només serà visible mentre l'utilitzem per anar dibuixant els successius pètals de la flor; això ho farem amb la instrucció estampar. Veiem ara què fa el segon conjunt d'instruccions; observem que comença amb una instrucció en rebre flor. Aquesta instrucció la trobarem a les instruccions de control, serveix per posar en marxa trossos de codi que es troben en altres llocs i podem crear tantes instruccions d'aquest tipus com vulguem: clicant a la fletxa que hi ha a l'etiqueta es desplega un menú amb el nom de tots els missatges que tenim creats i amb la possibilitat de crear-ne de nous. Si seleccionem la opció nou, s'obre una finestra per donar nom al nou missatge; escrivim al nom i cliquem OK.

La instrucció que trobem a continuació és anar a animació1. Aquesta instrucció fa que l'objecte es situï al mateix lloc que l'animació1 (el punt que es fa servir de referència per a la posició de cada objecte és el seu centre de rotació). Las dues instruccions que segueixen canvien la mida i el color del pètal perquè cada vegada que dibuixi una flor aquesta sigui diferent. Ara dibuixarem la flor fent servir una repetició: anem estampant la imatge a mida que l'anem girant. Farem això tantes vegades com pètals volem que tingui la flor i girarem cada vegada un nombre de graus igual a 360 partit pel nombre de pètals. Ara només ens cal que l'abella, quan estigui a la punta d'una tija, enviï el missatge flor perquè aquest procés comenci. Afegim aquest codi a l'abella:

Si hem seguit tots els passos correctament, en iniciar el programa clicant a la bandera verda, hauríem d'obtenir un resultat semblant al que es mostra a la imatge següent:

Desa l'arxiu com M3Pràctica4NomiCognom.sb

Pràctica 5

(continuació pràctica 3)

Aquesta és l'estructura bàsica del programa, a partir d'aquí anirem afegint-hi coses i augmentant la seva complexitat. El primer que farem serà dibuixar diferents tipus de flors que apareguin a l'atzar. Per fer-ho, crearem una variable a la que anomenarem flor, tal com hem fet en pràctiques anteriors; serà una variable del tipus "per totes les animacions". Cada vegada que l'abella dibuixi una tija, aquesta variable prendrà per valor un número a l'atzar entre 1 i el nombre de models de flor que tinguem dibuixat. Afegim la línia de codi corresponent al codi de l'abella com es mostra a la imatge següent.

Al mateix temps modificarem el codi de la flor perquè només arrenqui quan la variable tingui un valor determinat. Si volem dibuixar tres tipus de flors diferents farem que el codi de cadascuna arrenqui només quan el valor de la variable flor tingui el valor que li correspongui. Vegem com es fa en el següent codi.

Per cada model de pètal que dibuixem hi afegirem el mateix codi tot canviant la condició d'execució.

.

Podem crear tants models com vulguem, només ens cal fer que la variable flor canviï en un interval que sigui tan gran com el nombre de models. Aquests models es poden exportar com a fitxers independents. Els fitxers contenen tant la imatge com el codi associat. Podem intercanviar aquests objectes entre diferents versions del programa. Cada nen pot dibuixar una flor diferent i intercanviar-la amb els seus companys. Fins ara estem dibuixant flors senzilles per simple rotació d'un objecte; a continuació farem una flor una mica més complicada. Fem que l'objecte tingui dos vestits diferents. com veiem a la següent imatge.

A cada objecte li podem posar tots els vestits que vulguem. També podem jugar en la posició del seu centre de rotació per obtenir diferents dibuixos.

Ara afegirem un fons a l'escenari: seleccionem l'objecte etapa, un cop seleccionat cliquem a la pestanya fons i aquí premen el botó dibuixa i apareixerà l'editor de dibuixos. En el pot de pintura fem un degradat en blau clar que simuli el cel i a la part baixa dibuixem un rectangle marró que simuli la terra. Hauríem d'obtenir una imatge semblant a la que es mostra aquí a baix

A la pestanya de programa hi escrivim el següent codi.

En aquest codi, fem que la zona que representa el terra es deformi i cada vegada que posem en marxa el programa, aquest tindrà un aspecte diferent. El següent pas és fer que la tija de les flors comenci just on acaba la terra i comença el cel. Hem de detectar quan l'abella passa d'un color a un altre; això ho farem utilitzant les instruccions que trobarem a l'apartat sensor, en concret, la que detecta quan un color està a sobre d'un altre.

Primer apugem el llapis perquè no dibuixi; després anem movent l'eix de les y fins que el color negre no estigui a sobre del marró. Aquí tenim una repetició condicional, és a dir, les instruccions de dins del bucle es repetiran fins que es compleixi la condició. Vegeu aquí que la condició està negada; per construir-la hem d'utilitzar una de les peces de l'apartat sensor que detecta si un color està a sobre de l'altre i l' hem negat en una peça de l' apartat nombres. Quan seleccioneu els colors feu servir el comptagotes i agafeu el color exacte des de la mateixa imatge . Teniu en compte que la punta del llapis està en el centre de rotació de l'objecte i ajusteu aquest per aconseguir l'efecte desitjat. Recordeu-vos de baixar el llapis quan hagueu situat l'abella en el lloc adequat. Si heu escrit el codi correctament hauríem d'obtenir un resultat semblant a aquest:

Si mireu l'anterior imatge observareu que les tiges ara tenen fulles, en el vostre codi encara no en tenen. Aquest podria ser un bon exercici.

Desa l'arxiu com M3Pràctica5NomiCognom.sb

Pots consultar http://scratch.mit.edu/projects/2306161/#editor

Exercici 1

Feu que apareguin, als dos costats de la tija, fulles de mides diferents i distints tons de verd.

Suggeriments:

1. Dibuixeu diferents vestits per a l'abella, conjuntament a la instrucció estampar.
2. Dividiu el recorregut en diverses etapes i, en cadascuna dibuixeu una fulla.
3. Escriviu el codi en l' objecte abella, però en un bloc separat del bloc principal i crideu-lo en un enviar a tots.
1. Desa l'arxiu com M3Exercici1NomiCognom.sb

Exercici 2

Construir un programa que dibuixi figures com les que apareixen en les imatges següents, aquesta figura s'anomena “mandala” i consisteix en dibuixar un polígon regular de n costats i totes les seves diagonals.

Pistes:

Primer dibuixarem el polígon regular utilitzant les técniques vistes en els exercicis anteriors. Al mateix temps que dibuixem el polígon haurem d'anar guardant les posicions dels diferents vèrtexs per a poder fer-los servir posteriorment. Per fer-ho fem servir un tipus de variables anomenades “variables llista”. Una variable llista és una variable que conté, no un valor, sinó un conjunt d´ells, com poden ser els noms dels nens d´un curs, per exemple “noms” = (José Juan Laia Jordi). Per referir-nos a un element de la llista farem servir aquest element i un número índex que correspongui a la posició que ocupa aquest element en la llista, així, en el cas anterior tindriem: número 4 = Laia, número 1 = “José”. Quan afegim un element a la llista, podem especificar en la posició que volem que es col·loqui. S´ha d'anar en compte de no escriure un element ja existent. Si volem conservar-lo col·locant-lo en una altra posició, primer farem una copia de l´element, abans de sobre-escriure i després el col.locarem sobre-escrit en una nova posició a partir de la copia guardada.

CONSELLS

Escriure el codi en blocs separats perquè cadascú faci una funció, enllaçant i emmagatzemant les coordenades dels vèrtexs i, finalment, un que dibuixés les diagonals mitjançant missatges. Podríem fer un bloc que inicialitzés les variables, un que calculés la posició inicial del llapis i la hi col.loqués,i un altre que dibuixés el polígon

Pots consultar http://scratch.mit.edu/projects/2980256/#editor una possible solució o una altra a http://scratch.mit.edu/projects/2306164/#editor

Desa l'arxiu com M3Exercici2NomiCognom.sb