💾 Archived View for gamifi.cat › blog › 2016-09-24_BJC_5 › index.html captured on 2023-03-20 at 19:27:53.
➡️ Next capture (2024-02-05)
-=-=-=-=-=-=-
<!doctype html>
<html lang="ca">
<head>
<meta charset="utf-8">
<meta name="keywords" content="blog, cultura lliure, internet, programari lliure, snap, gemini, fediverse, llengua catalana, catala" />
<title>Curs BJC 3: Condicions i variables - Gamifica't!</title>
<link rel="stylesheet" href="../../static/style.css">
<link rel="shortcurt icon" type="image/svg" href="../../img/favicon.svg" />
</head>
<body>
<header class="header">
<a href="#main" class="skip">Salt al contingut</a>
<a href="../../" class="logo" ><img src="../../img/logo.svg" width="300" heigh="60" alt="Logo Gamifica't"></a>
<nav class="header-right">
<a href="../">Blog</a>
<a href="../../projectes/">Projectes</a>
<a href="../../glossari/">Glossari</a>
<a href="../../contacte/">Contacte</a>
<a href="../../blog.xml" class="logo" ><img src="../../img/rss.png" width="32" heigh="32" alt="RSS Gamifica't"></a>
</nav>
</header>
<main id="main">
<div class="page">
<div class="blog-post">
<h1>Curs BJC 3: Condicions i variables</h1>
<p class="meta">2016-09-24</p>
<p>Aquesta tercera setmana del curs The Beauty and Joy of Computing trastegem condicionals i variables :) Crearem cercles amb graus, llistes amb vocals i blocs per conjugar plurals en anglès. Quin repte, tu!</p>
<p>Després de rememorar temes d’abstracció i continuar amb la lectura del Blown to Bits (que és molt interessant però aquesta setmana són 50 pà gines!), ens endinsem als exercicis, que molen molt però que requereixen cert temps i esforç: això del “hard fun” anava de debò.</p>
<p><a href="../2016-09-10_BJC/index.html">Continguts del curs BJC</a></p>
<h2>DirecciĂł i posiciĂł</h2>
<p>Se’ns demana primer construir i trastejar alguns blocs. Entre ells s’assemblen molt perquè tots tenen un bloc de “per sempre” (forever) i un bloc de condició “si sinó” (if else). Dels quatre blocs a construir, tres dibuixen un cercle, però els tres el dibuixen diferent perquè es juga amb els valors de la direcció (en graus) per aconseguir efectes diferents.</p>
<p>Després de trastejar els blocs que se’n donen, se’ns demana un primer exercici: aconseguir dibuixar aquests quatre cercles modificant els que ja tenim, com el que es mostra a la imatge, que és el quart bloc d’exemple a construir. Haurem de jugar amb les direccions, els colors i els gruixos del llapis per aconseguir el que se’ns demana :)</p>
<p><img src="../../img/snap/bjc-cercles.png" alt="bjc-cercles" /></p>
<p>Un dels blocs a construir, el primer i l’únic dels quatre, no juga amb la direcciĂł sinĂł amb la posiciĂł del ratolĂ. El projecte fa moure l’objecte allĂ on es mou el ratolĂ, amb el que podem dibuixar o escriure el que vulguem. En funciĂł de la posiciĂł del ratolĂ, el color serĂ un o un altre. Podem canviar els valors de la posiciĂł per entendre millor què fa el projecte.</p>
<p>La cosa Ă©s que ens queda una mena d’app on podem escriure o dibuixar en dos colors amb el cursor del ratolĂ. Però la lletra surt lligada… Un altre exercici que se’ns comenta de fer si volem Ă©s aconseguir que es pugui escriure amb lletra de pal: jo no me’n surto i com no tinc molt de temps… He intentat jugar amb un bloc “si sinó” (if else), un “no ratolĂ clicat” (not -operador+mouse down -sensor) i un “pen up” (puja el llapis) però no em surt… Aviam si hi arribo algun dia :) Però si algĂş s’anima i ho aconsegueix que m’ho expliqui, porfi :)</p>
<h2>Predicats i plurals</h2>
<p>Se’ns comenta que, per millorar el nostre tres en ratlla, podem fer ús dels predicats per controlar quina acció passa i en quin moment. Per començar a practicar amb els predicats i exercitar l’abstracció, comencem amb un projecte de plurals: l’objectiu final, serà crear un bloc d’operadors rodó titulat “a or an with” (a o an amb) que tindrà un foradet (variable) per text.</p>
<p>Al foradet hi podrem escriure qualsevol paraula i el valor que reportarà serà la norma gramatical: en anglès, les paraules que comencen per vocal, tenen l’article indefinit començat per “an” (an elephant, un elefant). Les que comencen per consonant, porten l’article “a” (a lion, un lleó). Amb la conya, aprenc gramà tica anglesa, hehe. Abans, però, de crear el nostre nou bloc “a or an with” haurem de fer uns exercicis d’abstracció :)</p>
<p><img src="../../img/snap/bjc-divisions.png" alt="bjc-divisions" /></p>
<p>Primer de tot, se’ns anima a jugar amb el bloc d’operadors “mod”, que com és rodó, indica que és un bloc tipus “reporter” i reportarà un valor. El bloc té dos foradets rodons, és a dir, numèrics. El que fa aquest bloc és indicar el residu d’una divisió.</p>
<p>En els casos d’exemple: 100 i 25 són dividend; 2,3,4 i 5 són divisors; respectivament 50, 33, 6 i 5 són quocients; i, finalment, indicats en gris, tenim els residus. Recordar l’enginyeria inversa de les mates, hehe, això de saber si hem dividit bé multiplicant el quocient pel divisor i sumar-li el residu ;)</p>
<p>En fi, que si posem “100 mod 2” o “25 mod 5”, com que el residu és 0, el mod serà 0. Però a “100 mod 3” i a “25 mod 4” el residu és 1, aixà que reportarà 1.</p>
<p>Un primer exercici és crear un bloc nou que accepti un input numèric, és a dir, que tingui un foradet rodó. Si escrivim un número al foradet, el bloc ens dirà si és un nombre divisible per dos o no. Per fer-ho, haurem de crear un bloc nou anomenat “even?” que haurà de ser punxegut (predicat) i verd (operador). Dins, haurem d’especificar que reporti “cert” quan el número que l’usuari escrigui sigui divisible per 2.</p>
<p><img src="../../img/snap/bjc-a-an.png" alt="bjc-a-an" /></p>
<p>Se’ns fa jugar primer amb això perquè, desprĂ©s, la cosa Ă©s complica afegint-hi condicionals i direccions per continuar exercitant les circumferències que havĂem estat fent a l’exercici anterior… Una cosa que m’ha sortit Ă©s fer coincidir el pinzell mĂ©s gruixut amb les hores d’un rellotge. Ara, això de posar que digui cada hora a cada punt no em surt… Imagino que necessitem un bloc “for i 1 to 12” però no sĂ© com manegar-lo.</p>
<h2>“a” 0 “an”</h2>
<p>Per construir el bloc de “a or an with (word)” haurem de construir primer un bloc per les vocals. Recordem que si una paraula comença per vocal, s’ha de posar “an” i sinó “a”. Aixà doncs, crearem primer el nostre bloc de predicat: “vocal? (lletra)”. Quan escrivim una lletra dins, si és una vocal, ens dirà que és cert (clicant el bloc). Si no és una vocal, ens dirà que és fals. Hi ha diverses maneres de fer això, unes més eficients que les altres… Jo n’he trobat tres i em quedo amb la segona “vowel?2”.</p>
<p>Per construir el nostre bloc “vocal? (lletra)” hem de crear un nou bloc predicat d’operadors que porti una ranura de text, que és quadrada. Dins del bloc programarem unes condicions, tot indicant que si es posa una “a” reporti cert; que si es posa una “e” reporti cert; que si es posa una “i” reporti cert; que si es posa una “o” reporti cert i que si es posa una “u” reporti cert. Si ho poso aixà és per indicar que cada vocal ha de tenir una condició. Al final de totes les vocals, haurem d’indicar un “reporta fals”. Això és necessari perquè, si no es troba cap vocal (és a dir, que haurem escrit una consonant a la ranura de text), es pugui reportar fals.</p>
<p>Primerament, doncs, creem un bloc per distingir entre vocals i consonants i, quan el tinguem, ja podem crear el bloc objectiu: “a or an with (word)”. Per fer-ho, haurem de jugar amb dos blocs mĂ©s d’operadors: “letter 1 of” i “join”. El primer, inspeccionarĂ la primera lletra de la paraula, i si Ă©s una vocal, haurĂ de reportar “an”. Farem Ăşs del “join” per afegir “a” o “an” a la paraula que s’hagi introduĂŻt. Posarem: “join “an”+ (word)” dins del condicional de si Ă©s una vocal la primera lletra i, just a sota del condicional, reportarem “join “a”+(word)”, aixĂ, si la primera lletra de la paraula no Ă©s una vocal, afegirà “a” a la paraula en qĂĽestiĂł.</p>
<h2>Llistes</h2>
<p>Això de posar cada condició per a cada vocal (si la lletra és igual a “a”, si la lletra és igual a “e”, etc.) és una mica rotllo. Per fer-ho més rà pidament, podem fer servir una llista de vocals. Si anem a la paleta de variables, trobarem un bloc rodó que diu “llista” o “list” que presenta unes fletxetes. Si cliquem la de la dreta, crea una altra ranura per afegir inputs, si cliquem la de l’esquerra, s’esborra una ranura.</p>
<p>Ara haurem de modificar el bloc que em creat per a “vocal? (lletra)”. Fem una llista amb totes les vocals i substituïm tota la pila de condicions per una de sola: reportar “llista vocals contains (letter)”. Trobarem el bloc del “contains” (conté) als blocs de llista. A la part esquerra del “contains” haurem de posar la llista de vocals i, a la part dreta, la variable de la lletra.</p>
<h2>MĂşltiples condicions</h2>
<p>Per trastejar els blocs de condicions ens fan fer alguns exercicis mĂ©s. Primer haurem de crear un bloc de comanda d’operadors que es digui “state of water (input numèric)”. Quan posem la temperatura de l’aigua al bloc, ens diu si estĂ en estat lĂquid, gas o sòlid. Perquè ens digui això, l’haurem de programar.</p>
<p>Al nostre nou bloc, li hem de determinar les temperatures (jo ho he fet en graus centĂgrads: quan l’aigua tĂ© una temperatura de menys d’1 grau, ha de reportar “sòlid” perquè s’ha congelat; quan reporta “gas” Ă©s perquè la temperatura que se li ha indicat a l’input Ă©s de mĂ©s de 99 graus (bull a 100). I si no Ă©s gas ni sòlid, l’estat de l’aigua serĂ lĂquid, amb el que voldrĂ dir que l’input Ă©s mĂ©s de 0 graus i menys de 100.</p>
<p>Un altre bloc que se’ns anima a programar és el d’un semà for. I aquà posarem tres vestits al nostre objecte per canviar el semà for en funció de si està vermell, verd o groc. El nou bloc “semà for” és un bloc de comanda d’operadors i té un input de text. Si escrivim a la ranura “green” (verd), el nostre objecte programat canvia de vestit al semà for verd. I fa el mateix amb els altres colors: vermell i groc, cada input de text fa canviar el semà for de color. Haurem de jugar amb els condicionals i els blocs d’aparença “canvia de vestit a”.</p>
<h2>Plural general</h2>
<p>En un exercici anterior, havĂem creat un bloc que posava “a” o “an” davant dels noms anglesos en funciĂł de si la paraula començava amb vocal o consonant, com indica la norma gramatical. Ara, aprendrem altres normes i acabarem construint un bloc per a determinar el plural de qualsevol paraula amb un bloc d’operador reporter anomenat “plural” que tindrĂ una ranura per un input de text.</p>
<p>Abans de construir el bloc final, jugarem de nou amb l’abstracció: haurem de construir primer diversos blocs amb les normes principals i les excepcions. I després, integrar tots aquests blocs en un de sol.</p>
<p>Normativa: si una paraula acaba en “s” es fa plural amb “es” (kisses); si una paraula acaba en “x” es fa plural amb “s” (boxs) si una paraula acaba en “h”, si abans de la “h” hi ha una “c” (crutch) o una “s” (bush), es fa el plural amb “es” (crutches / bushes) i sinó en “s” (month – months). Amb la “y” també tenim marro: si abans de la “y” hi ha una vocal, fem plural amb “s” (boy – boys) i sinó, en “ies” (lady – ladies). Després hi ha paraules boges que són una excepció (child – children, man – men, woman – women, teeth – tooth, foot – feet, person – people, mouse – mice…) En general, però, si la paraula acaba en vocal, fem plural amb “s” i sinó en “es”.</p>
<h2>Mondrianades</h2>
<p>Ara toca fer l’artista i no me’n surto gens… Canviar de color el pinzell, vale, però com carai es deu fer per omplir només un rectangle i no tota la pantalla? El bloc “fill” (omple) em porta de cap… També em porta de cap l’script variables, que em sembla que no ho he entès prou bé… En fi, que no sé com fer que, el nou bloc de moviment que NO TÉ RANURES anomenat “draw outer frame” i que dibuixa un rectangle:</p>
<ul>
<li>Posi la mida d’ample i llarg al meu gust…</li>
<li>Es posi en color només el rectangle…</li>
</ul>
<h2>Unicode i factorials</h2>
<p>Després del meu Mondrian fallit, se’ns demana tratejar els blocs “unicode (input text) of” i “unicode (input numèric) of letter” per veure com funcionen. Encara no m’hi he entretingut prou però hem de crear un parell de blocs d’operadors que reportin informació, és a dir, que seran verds i rodons. El primer es dirà “encode” i servirà per xifrar missatges; el segon es dirà “decode” i servirà per desxifrar-los.</p>
<p>Després se’ns anima a crear operacions amb factors, que són multiplicacions seqüencials: el factor de 5 (5!) multiplica tota la seqüència de números que el precedeixen, ell inclòs: 5, 4, 3, 2 i 1, és a dir, que 5! és 120 (5x4x3x2x1=120). Si posem un bloc divisor amb dos factors, ens ha de donar la resposta correcta dividint un factor per un altre.</p>
<p>Per exemple: 5! dividit per 4! = 5 perquè el factor de 5! és 120 (5x4x3x2x1) i el de 4! és 24 (4x3x2x1). Si dividim 120 entre 24 ens donarà 5. Doncs això, el factor de 5! dividit entre el factor de 4! dóna com a resultat el número 5. Per dividir els factors, però, haurem de crear primer un bloc amb input numèric que pot ser “input numèric + !”. Si escrivim un número dins el bloc, ens reportarà la informació del factor del número posat. Si posem 5!, ens haurà de dir 120 i si posem 4!, ens haurà de dir 24.</p>
<p>La teoria la tinc clarĂssima, ara, com li dic jo a Snap! que faci això? Suposo que, per temes d’abstracciĂł, haurĂ© de crear primer un bloc que reconegui nĂşmeros positius (amb negatius, res) I el 0!=1, aixĂ que 0 Ă©s especialet… Suposo que desprĂ©s de crear aquest primer bloc es podrĂ crear el segĂĽent del factor… O què? Jo intueixo que es necessita un bloc especial “for i = 1 to 10” i que on posa 1 haurem de posar “n” i on posa 10 haurem de posar un “1” (aixĂ farĂ compte enrere des del nĂşmero que es posi fins a 1… Però no em surt… Quin fracĂ s de setmana :_(</p>
<p><a href="../2016-12-08_BJC_7/index.html">Snap!Lab – Mur, endevinar número i tauler</a></p>
</div>
</div>
</main>
<footer>
Internets duals: gemini://gamifi.cat</br>
<a href="../../llicencies/">Diverses llicències</a> / <a href="../../kukis/">PolĂtica de Kukis</a></br>
♥ Fet amb paciència i tecnologies lliures ♥
</footer>
</body>
</html>