💾 Archived View for gamifi.cat › blog › 2016-09-12_BJC_2 › index.html captured on 2023-03-20 at 19:28:25.
➡️ 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 1: Exercicis bĂ sics - 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 1: Exercicis bĂ sics</h1> <p class="meta">2016-09-12</p> <p>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.</p> <p><a href="../2016-09-10_BJC/index.html">Continguts del curs BJC</a></p> <h2>Fòrum</h2> <p>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.</p> <p>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…</p> <ul> <li><p>Posar un altre exemple d’abstracciĂł</p> <p>(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 ;)</p> </li> <li><p>Explicar el procĂ©s d’abstracciĂł</p> <p>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…</p> </li> <li><p>Hi ha algun procĂ©s en el que no s’usi l’abstracciĂł i el detall sigui imprescindible?</p> <p>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).</p> </li> </ul> <h2>Entorn Snap!</h2> <p>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 ;)</p> <p>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.</p> <h2>AnimaciĂł, atzar i coordenades</h2> <p>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!</p> <p><a href="http://romagosa.work/files/zoo.pdf">Zoo de computaciĂłn, Bernat Romagosa</a></p> <p>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“.</p> <p>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.</p> <p>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:</p> <p><img src="../../img/snap/bjc-feedback.png" alt="BJC feedback" /></p> <h2>Deure 1: app Alonzo</h2> <p>Com a deures, hem de programar un joc/app que consisteix en que:</p> <ul> <li>Quan comença el joc (hem premut la bandera verda que Ă©s el play), apareix un personatge (l’Alonzo) que ens diu que el cliquem.</li> <li>Quan el cliquem, desapareix el missatge i, a partir de llavors, el personatge canvia de posiciĂł cada 2 segons.</li> <li>Nosaltres hem d’intentar atrapar l’Alonzo, clicant-lo. Si el cliquem, es difumina una mica i torna a veure’s del tot quan ha canviat la posiciĂł de nou.</li> </ul> <p>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.</p> <p>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.</p> <h2>Deures 2: circumferència inscrita</h2> <p>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).</p> <h2>Deures 3: gats, gossos, polĂgons i nius</h2> <p>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”.</p> <p><strong>ActualitzaciĂł de l’11 de setembre de 2016</strong><br /> 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…</p> <p>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.</p> <p>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 ;)</p> <h2>Deures 4: triangles</h2> <p>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.</p> <p><img src="../../img/snap/bjc-triangles.png" alt="BJC triangles" /></p> <p>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!</p> <p><strong>ActualitzaciĂł del 12 de setembre de 2016</strong><br /> 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.</p> <p><a href="https://snap.berkeley.edu/snap/snap.html#present:Username=Gamificat&ProjectName=BJC.x12-w01e04-Triangles-recursivitat">SoluciĂł pels triangles</a></p> <p><a href="../2016-09-16_BJC_3/index.html">Snap!Lab – Exercicis</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>