💾 Archived View for gamifi.cat › blog › 2016-09-12_BJC_2 › index.html captured on 2024-03-21 at 16:05:46.

View Raw

More Information

⬅️ Previous capture (2024-02-05)

➡️ Next capture (2024-06-16)

-=-=-=-=-=-=-

<!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" 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" 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&amp;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>
     &hearts; Fet amb paciència i tecnologies lliures &hearts;
  </footer>
</body>
</html>