💾 Archived View for gamifi.cat › blog › 2016-09-12_BJC_2 captured on 2023-05-24 at 18:22:55. Gemini links have been rewritten to link to archived content
⬅️ Previous capture (2023-03-20)
-=-=-=-=-=-=-
Aquesta setmana, al curs d’introducció a la computació de la Berkeley, crearem una primera aplicació, dissenyarem procediments per dibuixar, crear música, animar objectes, etc. Com a tècniques, farem ús de la repetició (loops) i, en general, explorarem conceptes matemà tics i de computació: lògica, atzar, etc. I trastejarem el fòrum.
A més del laboratori, hi ha el fòrum. Haig de dir que no sóc molt fan dels fòrums dels MOOCs… En aquest hi ha 10.000 persones i només de pensar-hi, ja m’atabalo. Sembla que ens endrecen en petits grups però encara ho hi tinc accés: no sé per què però és una eina externa al MOOC, i un s’ha d’esperar 24h des de que es registra perquè hi ha gestió humana.
No em molesta esperar-me 24h per temes de gestió però sà rebre un mail cada 4 hores… I em diuen que ho puc canviar a l’Account Settings però allà no trobo l’opció. Hi ha alguna cosa que no dec haver entès… Total, que aquesta setmana hi ha un parell d’activitats de fòrum: respondre a una pregunta de tres que proposen i comentar la resposta d’algú altre. Sense voler, les he contestat totes tres ;) Opinar és gratis i els humans som opinòlegs per naturalesa…
(com el del cotxe d’en Brian). El primer que m’ha vingut al cap ha estat una recepta de cuina: tot i els processos quĂmics que se succeeixen a nivell culinari, quan cuinem no pensem en termes de quĂmica sinĂł en termes de sabors, olors, combinaciĂł d’aliments. Això sĂ, si no som molt intuĂŻtius, fem mates per mesurar quantitats. TambĂ© se m’ha ocorregut que endreçar la nevera Ă©s tambĂ© potser un acte d’abstracciĂł: per tal que hi cĂ piga tot i en plan Tetris, primer posem els objectes mĂ©s grans (essència) i, desprĂ©s, els mĂ©s petits (detall) pels forats que queda (i no al revĂ©s). I això sempre em recorda a allò del pot de vidre, les pedres i la sorra. Si en un pot de vidre poses primer la sorra, no t’hi cabran les pedres. Hi cabran si les poses primer i, desprĂ©s, afegeixes la sorra, que s’escolarĂ entre les pedres. Hi ha una versiĂł “catxonda” de la historieta que diu que, desprĂ©s de posar pedres i sorra, al pot s’hi vessa una cervesa perquè sempre hi ha d’haver lloc per prendre alguna cosa ;)
En quin moment es passa de l’essència al detall? Bona pregunta: ni idea. Penso en els meus processos creatius i no sabria explicar certes coses que surten naturalment… Aviam si me’n surto. Faré servir d’exemple un joc de cartes sobre fonts vuitcentistes de Barcelona. A mode de nuvolosa interestel·lar, primer m’apareix una idea estructural del tema (fonts vuitcentistes) i de la tipologia del joc (cartes). El tema em determina el contingut i la tipologia, els elements i la mecà nica del joc. Si el dibuixets de les cartes són aixà o aixà no és massa rellevant en un primer moment. Mentre el creo, no em calen els dibuixos definitius. De fet, si vull posar 4 fonts al joc, només em caldria assignar-els-hi un número o un dibuix abstracte a cadascuna per seguir dissenyant el joc. Crec que passo al detall en el moment que el joc té la mecà nica assentada…
Ha sigut llegir això i pensar en el Sherlock, jeje. Ell fa ús dels detalls per resoldre els casos. Suposo que és cosa de mètode de raonament. En Sherlock fa servir un mètode inductiu i troba un tot (resol el cas) a partir de certs detalls (pistes).
Primer se’ns indica com crear un compte d’usuari a Snap! i com entrar al nostre compte. Una de les coses xules d’Snap! i que no explica el curs és que, amb el mateix compte d’Snap!, pots fer servir dos programes més -molt vius, per cert-, que s’estan desenvolupant paral·lelament: Snap4Arduino (un software per programar enginys robòtics) i Beetleblocks (un altre software per dissenyar en 3D). De res, folks ;)
També se’ns ensenya a com desar, obrir i compartir un projecte, i se’ns mostra una mica com funciona el botó de play i stop de l’entorn grà fic.
Al primer exercici ens fan treballar en parelles (pair programming) per animar l’Alonzo, que no és que estigui deprimit… L’Alonzo és la mascota d’Snap!, com el gat Scratch ho és del llenguatge de programació Scratch, d’on surt el codi d’Snap!, per cert… “El zoo de computación” és el millor article que he llegit per entendre l’evolució dels llenguatges de programació visual. No em canso de recomanar-lo: grà cies de nou per escriure’l, Bernat!
Zoo de computaciĂłn, Bernat Romagosa
Doncs això, que hem d’animar l’Alonzo… Jo és que em vaig passar dies i dies publicant un tuto que havia de ser petit i que no ho és tant. En fi, que mola animar l’Alonzo per començar a trastejar el Ferrari però, per fer-ho, també podem animar un ratpenat volador i fer-lo interactiu en un tres i no-res ;) Per cert, si treballem per parelles és convenient canviar de rol. Normalment un compi controla el ratolà i, l’altre, la situació. Se’ns recomana un article de l’Stuart Wray titulat “How Pair Programming Really Works“.
Al segon exercici se’ns anima a fer servir un bloc d’operadors “el bloc d’atzar” i el bloc de moviment “Mou-te passes”. Al tuto que no és petit, he dedicat una entrada a la paleta de blocs. La grà cia de l’exercici que se’ns planteja és el fet de programar un objecte, en aquest cas l’Alonzo, de manera que, cada cop que el cliquem, es posicioni a un lloc diferent de la pantalla. Amb això, a més del moviment i de l’operador, se’ns explica com funcionen les coordenades de l’escenari per tal de posicionar-hi els objectes dels nostres jocs o animacions.
M’agrada molt que els exercicis estiguin integrats. Al mateix temari, hi ha un requadre que simula l’entorn d’Snap! Des d’allà , podem localitzar i utilitzar els blocs que necessitem per l’exercici i, un cop hem acabat, podem clicar el botó de “Get Feedback” per comprovar si la nostra nostra resposta és correcta. He hagut d’inventar-me un PseudoAlonzo perquè no em deixava carregar els personatges des de la galeria predeterminada:
Com a deures, hem de programar un joc/app que consisteix en que:
Per fer tot això, sens anima a fer ús de bloc de control com “esperar segons” o “per sempre” i blocs d’aparença per canviar l’efecte de la imatge. Primer, però, entrem al nostre compte d’Snap! i creem un projecte nou per aquest exercici.
Per fer un pas més enllà , un cop creat el projecte, el publiquem/compartim i juguem des del telèfon a través de la URL que ens dóna la publicació/compartició. Bé, jo no tinc catxarro operatiu, aixà que m’hauré de buscar un/a Beta Tester ;) Qui s’anima? Aquà el link del projecte de l’Alonzo “cul d’angúnies”, jeje. Aviam si enllaça bé perquè ja m’ha passat que clico l’enllaç però no arribo al projecte sinó a la pà gina principal d’un projecte buit.
Ens fan trastejar blocs de control, moviment i llapis per dibuixar un quadrat de 100 pĂxels de llarg. Fins aquĂ, tot controlat. Ara, la conya marinera Ă©s que hem de dibuixar una circumferència dins del quadrat que, per cert, he vist que es deia “circumferència inscrita” (de fet, es diu aixĂ a totes les circumferències que es troben dins un polĂgon).
Ara, tenim la missió de programar dos objectes-personatges o sprites. Un objecte es mourà amb el ratolà i, l’altre, perseguirà el primer. Quan es trobin, tindran una petita conversa. Jo he posat un gos perseguint un gat: si el gos atrapa al gat, li diu: “Game Over”.
Aviam, que m’adono que no ho he fet bé… Els animalons han de tenir una conversa i el meu gos fa un monòleg… Ho canvio: els farĂ© explicar l’acudit del .gif i el .png, hehe. El gos dirĂ : “Què li diu un .gif a un .png?” I el gat dirĂ : “Doncs no ho sé…” I el gos respondrĂ : “Vinga, anima’t!“. El gat riurĂ en catalĂ : “Hahaha!, Ă©s bonĂssim!“. I el gos, tot cofoi, dirĂ : “GrĂ cies, gatet!, tu sĂ que m’animes!“. No sĂ© com traduir aquest acudit, sorry folks…
Per cert, Ă©s magnĂfic el bloc-bucle de control “tell sprite” que trobem a les eines addicionals: s’ha de clicar a la icona del document i desprĂ©s a “Importa eines”. Pots fer parlar els personatges sense enviar missatges, que Ă©s com ho feia fins ara… Fi de l’actualitzaciĂł de l’11 de setembre de 2016.
Els animalons els he agafat de la llibreria predeterminada i, sense Ă nim d’ofendre, no sĂłn molt llustrosos, pel meu gust. Tant de bo Snap! tinguĂ©s padrins com Scratch en aquest sentit…Amb Scratch col·labora la Cartoon Network i trobo que Ă©s un WIN-WIN… Estaria bĂ© alguna col·laboraciĂł amb dissenyadors grĂ fics / il·lustradors per tenir personatges i Ătems bĂ sics en vector… El software Ă©s la canya però, en quant a l’entorn grĂ fic, Scratch li dĂłna cent voltes… Personalment, dibuixo abans amb Inkscape (que tambĂ© Ă©s programari lliure) i desprĂ©s pujo les imatges al programa… L’editor d’Snap! no em fa prou el pes, encara… TambĂ© manca una galeria però sembla que estĂ de camĂ, quan reciclin la de Beetleblocks ;)
Després, hem de crear triangles amb nius de bucles de repetició, és a dir, posar bucle dins bucle i canviar la mida del triangle a cada cop… Sense dir-nos-ho encara, estem treballant la recursivitat. I aquà un altre acudit: per entendre la recursivitat hem d’entendre primer la recursivitat, hehe.
Com fem aquest dibuix amb Snap!? Primer hem de crear un triangle vermell de 100 (repeteix 3 vegades mou-te 100 i gira dreta 120 graus), després un de blau de la meitat que el vermell i, finalment, un de verd, la meitat del blau. Per aconseguir aquesta figura, haurem de posar el bloc del triangle blau entre el bloc de passos i el de graus del triangle vermell; i, amb el mateix sistema, el verd anirà dins el blau. Apali! A dibuixar!
Si ja ho has provat tot i no te’n surts gens gens, aquà deixo la solució ;) Fi de l’actualització del 12 de setembre de 2016.
![BJC feedback [IMG]](/kennedy.gemi.dev/archive/cached?url=gemini%3a%2f%2fgamifi.cat%2fimg%2fsnap%2fbjc-feedback.png&t=638205493750000000&raw=False){kind=link}
![BJC triangles [IMG]](/kennedy.gemi.dev/archive/cached?url=gemini%3a%2f%2fgamifi.cat%2fimg%2fsnap%2fbjc-triangles.png&t=638205493750000000&raw=False){kind=link}