- Calculadora
Bones a tothom. En aquesta entrada del blog farem ús de l'aplicació en la xarxa Scratch per fer-hi un parell d'exemples. Si no coneixeu Scratch, arribeu tot just a parar de taula per endinsar-se en aquesta interessant eina per aprendre a programar emprant blocs, de forma molt similar a com es feia a l'entrada anterior del Blockly Games, però amb diferències notables, com que Scratch ens permet crear amb un objectiu obert i lliure on es disposa d'imatges, sons i moltes més instruccions per facilitar el desenvolupament d'idees. Es recomana fer-se un compte d'usuari perquè quan feu els vostres projectes amb Scratch, els hi podeu compartir. També podeu entrar i donar un cop d'ull a projectes que s'han fet per inspirar-vos, o bé copiar parts del codi que us semblin atractius incloure a quelcom que vulgueu fer, però en cas d'utilitzar codis d'altres persones, recordeu de nomenar a la persona de qui els heu pres. En primer lloc, començaren per una aplicació d'una calculadora amb les operacions de suma, resta, multiplicació i divisió. Serà una aplicació relativament funcional (ja sabeu, «d'estar per casa»), així que no li demaneu que faci coses complicades o una precisió acurada (no la feu anar per resoldre els vostres deures), però ens servirà per començar a donar les primeres passes en Scratch. A sota teniu l'enllaç per a l'aplicació de la calculadora. Entreu i useu-la per tal de veure els elements i el funcionament abans d'explicar com fer-la.
Si us animeu a realitzar aquesta aplicació en primer lloc, s'entrarà dins de Backdrops i posarem un dels fons que hi surten per defecte (veureu que surt el que s'ha utilitzat entre els primers). Seguidament, caldrà dibuixar els operands de la calculadora i el rectangle gris superior amb l'ajuda de les eines de dibuix que surten dins de Costumes (és similar a l'aplicació de Paint de Windows). Podeu triar per dibuixar rectangles, quadrats, etc. i omplir-los dels colors que més us agradin. Un cop els teniu dissenyats al vostre gust, passarem a ubicar-los sobre el fons que s'ha escollit a Backdrops. Si us fixeu, a sota de la pantalla principal de la part superior dreta, apareixen les coordenades de la posició que ocupa cada element que hi poseu. Aquesta informació de les coordenades ens serà útil per fixar a on volem cada dibuix a l'inici del programa, per si accidentalment es mou algun element. Una vegada ja s'ha disposat el bloc gris i els operands (suma, resta, multiplicació i divisió) sobre els fons, caldrà fer el codi (usant els blocs de la columna de l'esquerra) perquè tingui el comportament desitjat d'una calculadora. Comencem amb el codi del signe menys. Volem que quan es premi el botó de menys, ens demani el primer nombre. Per aconseguir això, s'emprarà la icona de «When this sprite is clicked» (més o menys traduïble com: quan s'ha clicat aquest follet) que es troba dins dels blocs de Events, la qual possibilita que la resta de blocs que es pengin a sota seu, s'executin quan es faci clic sobre l'element dibuixat. A continuació per demanar el primer nombre es triarà el bloc de «Ask 'Whats your name?' and wait» (vol dir, preguntar 'quin és el teu nom?' en anglès) dins de la col·lecció de blocs de codi de «Sensing» (sensat en anglès, és a dir, captar quelcom del medi que en aquest cas, és la resposta del teclat). Dins del bloc «Ask 'Whats your name?' and wait», on apareix el text 'Whats your name?' s'escriu el missatge per sol·licitar la introducció del primer nombre («1st number?», és a dir, 'primer nombre?' en anglès). D'aquest forma i amb només aquests dos blocs, quan es premi el dibuix del signe menys, sortirà per la pantalla el diàleg de demanar el primer nombre. La resposta que s'introdueixi pel teclat haurà de ser operada i per poder treballar amb el nombre petjat, es crearà una variable on s'emmagatzemarà aquest. Una variable és quelcom que designem amb un nombre per desar coses i amb Scratch, es generen fent clic al menú «Variables» i seleccionant «Make a variable», per tot seguit introduir el nom que amb el que la hi vulguem batejar («1st_number» en el nostre cas). És recomanable utilitzar noms per les variables que ens siguin útils per identificar-les als programes que es fan, perquè no ens despistem si hi treballem amb moltes o per si passa cert temps d'ençà que es torna a continuar fent un programa. Després de crear la variable, es procedeix a ficar el valor del nombre que s'introdueix pel teclat a dins de la variable, mitjançant el bloc del menú «Variables» anomenat «Set 'my variable' to 1». Aquest bloc té un menú desplegable (fer clic sobre 'my variable'), on s'ha de seleccionar el nom de la variable creada (recordeu,
«1st_number»), perquè tingui lloc l'assignació del nombre petjat a la variable que hem fet. El mateix bloc «Set 'my variable' to 1» permet que es fiqui un valor manualment a la variable a la finestra de color blanc que hi ha a la dreta (on surt el nombre '1') o bé, com farem en aquest programa, deixar que el valor de la variable sigui el del nombre petjat, introduint el bloc «Answer» del menú «Sensing» dins d'aquesta finestreta blanca del bloc «Set 'my variable' to 1» on està escrit el nombre '1'. El següent pas que es pot observar al programa de la calculadora, és que ens demanava un segon nombre i això, de nou ho farem com pel primer nombre, és a dir, amb el bloc «Ask 'Whats your name?' and wait» i escrivint el text de sol·licitar el segon nombre («2nd number?» en anglès) damunt de 'Whats your name?'. Un altre cop es desarà la resposta a una variable que crearem tal qual es va fer amb l'anterior (clic al menú «Variables» i seguidament «Make a variable»). En aquesta ocasió, es designà la variable amb el nom de «2nd_number» (segon nombre en anglès) i també, s'agafà un altre bloc de «Set 'my variable' to 1» on se seleccionà al menú desplegable el nom d'aquesta nova variable i s'introduí el bloc de «Answer» (localitzable al menú «Sensing»), dins de la seva finestreta blanca de la part dreta (on surt el nombre '1'). Fins aquí, amb aquests blocs es fa la seqüència següent quan es fa clic al bloc de restar:
- Demanar el primer nombre.
- Desar la resposta a la variable «1st_number».
- Demanar el segon nombre.
- Desar la resposta a la variable «2nd_number».
Només ens queda fer l'operació de resta. Per operar fer el càlcul n'anirem al menú de «Operators» i triar el bloc que té dues finestres en blanc juntament amb l'operador de resta entre aquestes. A la primera finestra del bloc de la resta (la que es troba més a l'esquerra), es ficarà la primera variable creada «1st_number» (es pot arrossegar des del menú de «Variables» cap on es troben els blocs del programa) i a la finestra de la dreta del bloc de la resta, s'ubicarà la segona variable feta «2nd_number». Per mostrar el resultat per pantalla caldrà fer ús del bloc «Say 'Hello!' for 2 seconds» del menú «Looks» i a la finestra en blanc que té més a l'esquerra (on està escrit 'Hello!'), arrossegarem el bloc de la resta que agrupa a dins seu les dues variables (si el poseu cap a la dreta i per sobre, es ficarà a dins del bloc de «Say 'Hello!' for 2 seconds»). A continuació es tria el temps en segons que es vol visualitzar el resultat de la resta a la pantalla (es va escollir tres segons escrivint '3' on es llegeix '2'). Si heu seguit aquest procediment, ja teniu fet l'operació de la resta de la calculadora i el podreu provar (vegeu els blocs de codi a la següent captura de pantalla).
Si heu observat el comportament de la calculadora, haureu vist que cada cop que es fa clic hi surt el mateix missatge d’introduir el primer i el segon nombre, així que ja us podeu imaginar que tots els botons de la calculadora (suma, resta, multiplicació i divisió) portaran aquest bloc de «When this sprite is clicked», els dos blocs de «Ask ‘Whats your name?’ and wait», els dos blocs de «Set ‘my variable’ to 1» (amb una variable pel primer nombre i altre pel segon, cadascuna assignada a la resposta registrada al bloc «Answer») i finalment un bloc «Say ‘Hello!’ for 2 seconds» per mostrar la resposta, tal com es veu a la imatge superior. L’única diferència serà l’operació a efectuar que s’implementarà amb el bloc corresponent del menú «Operators», on s’introduiran les variables creades i, finalment, la incorporació d’aquest conjunt dins del bloc «Say ‘Hello!’ for 2 seconds» amb el temps que es desitgi veure el resultat a la pantalla. Es deixa les captures dels codis corresponents a la resta d’operacions.
- Suma:
- Multiplicació:
- Divisió:
Com a pauta general, es recomana utilitzar coordenades pels dibuixos que mostrin a la pantalla. Els podeu moure amb el ratolí, veure les coordenades i apuntar-ho per a incloure-ho com requisit a l’inici de l’execució del programa. La icona que es fa servir per executar els blocs de codi sota seu quan s’inicia el programa, és la que surt dins del menú «Events» amb una bandera verda. El bloc per fixar coordenades de posició, és el que hi ha al menú «Motion» amb el nom de «Go to x 0 y 0», on s’escriurà a la finestra blanca de l’esquerra la posició de la coordenada horitzontal (la ‘x’) i a la finestra blanca de la dreta, el valor de la posició vertical (la ‘y’). Vegeu si us plau com es realitzà a la següent captura de pantalla.
- Quadres psicodèlics.
Aquesta és una representació de formes geomètriques que van canviant, es recomana veure-la abans de llegir com fer-ho.
Quan vaig veure executar-se aquest programa per primer cop, em va costar de retenir mentalment tots els canvis que es produeixen i els i vaig apuntar un per un, abans de tractar de reproduir-los. Així que potser serà més senzill explicar com es pot fer cadascun individualment. Començarem pel quadre gran del fons. Es va dibuixar un rectangle amb les eines que hi ha dins de Costumes i es va tractar d'emular els colors que es van veure a l'execució del programa (només vaig ser capaç d'observar un total de quatre colors diferents), modificant dins de Costumes els colors. Un cop es varen obtenir aproximadament els colors desitjats, es va apreciar que amb petites variacions del paràmetre del color, era possible mostrar un total de quatre colors diferents. Llavors es varen cercar els blocs de Scratch que podien ser útils per realitzar l'efecte visual esperat. A l'inici del programa quan s'executi, es voldrà posicionar el rectangle a la posició central de la pantalla. Per fer això, es posa la icona amb la bandera verda «When clicked» del menú «Events» seguida del bloc «Go to x 0 y 0» del menú «Motion». Amb aquests dos blocs, quan es corre el programa petjant la bandera verda, el rectangle es situa al centre de la pantalla. Per canviar el color del rectangle s'utilitzà el bloc «Change 'color' effect by» del menú «Looks», el qual canvia el paràmetre del color en la quantia que s'indiqui a la seva finestreta blanca de la dreta. Es va comprovar que amb una variació de dotze al color, s'obtenia els colors desitjats. Per tal de poder observar els canvis, s'afegí un temps d'espera de dos segons entre cada canvi de color. Es presenten a sota dues versions del codi: una on s'empra un bucle que repeteix quatre cops els canvis de color i l'espera, repetint només aquests dos blocs, i altra versió on es fan els canvis un per un, usant quatre blocs de canvis de color amb els corresponents blocs d'espera (vegis el seu codi a continuació).
A continuació s’escriurà com fer la seqüència del cercle. Aquest cercle té un color fix i va movent-se per les quatre cantonades del rectangle gran anterior. S’ha de quadrar la temporització del desplaçament del cercle amb els canvis del rectangle gran anterior, de forma que cada dues cantonades que es desplaça el cercle, el rectangle té un canvi de color. Això s’aconsegueix fent que el cercle avanci dos cantonades en el mateix temps que hi canviï de color el rectangle, és a dir, dos segons. Si per moure el cercle dues cantonades triga dos segons, per anar fins a una trigarà la meitat, això és un segon. Addicionalment, cal afegir que el cercle dóna tres voltes completes al voltant del rectangle gran i per realitzar-ho, es farà ús d’un bucle que repeteixi tres cops la seqüència donar una volta sencera. Un cop explicat com s’haurà de comportar el cercle, es descriu amb quins blocs es pot dissenyar el codi. Es partirà del bloc anterior d’inici del programa quan s’executi petjant la bandera verda, és a dir, el bloc «When <bandera verda> clicked» del menú «Events». Després s’inclourà el bloc que efectuarà el bucle de repetició, essent aquest «Repeat» del menú «Events». Dins serà convenient donar les coordenades que corresponen a la posició del cercle a cada cantonada del rectangle gran, les quals poden variar en funció de la grandària del rectangle que s’hagi dibuixat (en aquest cas foren: x=-105 y=80 per la cantonada superior esquerra, x=105 y=80 per la cantonada superior dreta, x=105 y=-80 per la cantonada inferior dreta, x=-105 y=-80 per la cantonada inferior esquerra). Entre canvi de cantonades s’ha deixat una temporització d’un segon amb el bloc «Wait» del menú «Control». El codi resultant s’inclou en la següent figura inferior. L’últim bloc pel posicionament fet amb el bloc «Go to x 0 y 0» del menú «Motion» s’ha deixat fora del bucle, perquè si us fixeu el cercle dona tres voltes senceres al voltant del rectangle gran i ha de retornar a la posició inicial (cantonada superior esquerra), però la darrera instrucció de posicionament dins del bucle, el deixa sobre la cantonada inferior esquerra, essent precís una altra instrucció que l’ubiqui a la posició inicial un cop hagi repetit tres cops la seqüència del bucle.
Finalment, es detalla el darrer element que és aproximadament un rectangle de color negre petit. És el que fa més moviments en tota la seqüència i el que més temps d'observació requereix per fer-hi la reproducció dels seus canvis. Fixeu-vos i analitzeu el que veieu. Podríeu descriure els moviments que fa? Inicialment, vaig fer-hi una llista pas a pas de tots els girs i desplaçaments que pren fins a començar a repetir la seqüència pròpia de moviment dins del rectangle gran. Així es va fer una primera versió del codi amb un nombre molt considerable de blocs. Posteriorment, amb un estudi més detallat, es va arribar a la conclusió que es podia simplificar força els moviments que realitza. Parant atenció i reflexionant, s'arribà a la conclusió que el que fa el rectangle negre petit és girar quaranta-cinc graus, es pren una pausa abans d'avançar en la posició que roman disposat, descansa una altra pausa i retrocedeix al punt anterior d'on s'ha mogut. Això es repeteix indefinidament.
Vinga, salutacions a tothom i fins aviat.
Comments