maanantai 29. joulukuuta 2014

Koodattuja joulukortteja (7.lk)

Viimeisellä kouluviikolla koodasimme 7. luokan matematiikan ryhmäni kanssa joulukortteja Racket:illa. Käytimme tähän kaksi 45 min oppituntia. Ensimmäisellä tunnilla opettelimme miten piirretään ympyrä, kolmio ja tähti ja miten niille annetaan define:llä nimet. Toisella tunnilla yhdistimme niitä overlay/xy:llä joulukuuseksi, johon sijoiteltiin koristeita. Nopeimmat ehtivät kirjoittaa myös joulutoivotuksensakin "korttiin".

Harjoitus oli mukava ja sopi hyvin sekä geometrian aihepiiriin, että ajankohtaan. Viimeisellä tunnilla luokkaan jäi vielä pari kolme koodaria vaikka kello soikin, tällaista tilannetta ei ole matikan tunnin jälkeen vielä tapahtunutkaan :-)

Näillä ohjeilla mentiin:





Hienoimmissa joulukuusissa oli monta palloa ja tähti. Tärkeintä oli kuitenkin se, että jokainen sai tehtyä jonkinlaisen kuusen. Tässä kolmen oppilaani näkemykset joulukuusesta sekä joulutoivotukset koodattuna Racketillä.


Lielahden koodauskerhon syksy 2014

Vedin tänä syksynä ensimmäistä kertaa elämässäni koodauskerhoa. Kerho kokoontui keskiviikkoisin (2h) ja siellä kävi säännöllisesti noin kymmenen 5.-7.-luokkalaista. Kerholaisista vain kaksi oli ohjelmoinut aikaisemmin, toinen CoolBasic:llä ja toinen Scratch:llä, joten pääsimme lähtemään liikkeelle lähes tyhjältä pöydältä.

Aloitimme ohjelmointiin tutustumisen pelaamalla code.org:in ohjelmointipelejä. Kerholaiset jaksoivat pelata näitä pelijä 1-2 tuntia, mutta sitten kiinnostus lopahti. Seuraavalla kerhokerralla siirryimme tekemään peliä Scratch:llä. Tein koko ryhmälle yhteiset tunnukset Scratch - sivustolle ja jokainen sai ryhtyä suunnittelemaan omaa peliänsä. Näytin aluksi miten Scratch-kissan saa liikkumaan ja kääntymään ja sen miten hahmot lähettävät toisilleen viestejä. Näytin myös miten uusia hahmoja ja taustoja piirretään. Kävimme läpi myös miten hahmon liikkeitä voi animoida vaihtamalla asusteita ja miten huomataan törmääminen esim. jonkin värin kanssa. Kävimme yhdessä läpi myös muuttujien käytön, koska useampi kerholainen halusi tehdä hyppäävän hahmon, jonka hypyn korkeus määräytyi siitä montako kertaa välilyöntiä oli painanut. Myös taustan (tason) vaihtuminen käytiin yhdessä läpi. Näitä asioita opetin useammalla kerhokerralla sitä mukaan, kun niitä peleissä tarvittiin.

Scratch-peleissä vaikeinta taisi olla oman peli-idean löytäminen ja siinä pysyminen. Osa kerholaisista vaihtoi peli-ideaansa useammankin kerran eikä sitten lopulta saanut mitään valmiiksi. Myös toisten tekemiin Scratch-peleihin tutustuminen netissä (=pelaaminen) kiinnosti välillä enemmän kuin oman pelin tekeminen. Parilla kerholaisella ongelmia tuotti myös itse ohjelmointi: haluttiin tehdä heti ensimmäisessä pelissä suhteellisen monimutkaista pelilogiikkaa. En aina itsekään osannut heti neuvoa oppilaita kun ruudulla tapahtui jotain outoa: hahmot putosivat maanpinnan läpi tai  hyppylaskuri kasvoi holtittomasti jne. Huomasin myös, että osalla työ ei edennyt koska hahmojen tarkkaan piirtämiseen käytettiin paljon aikaa jolloin varsinainen ohjelmointi jäi sivuseikaksi.

Tässä erään kerholaisen tekemän Scratch - pelin kaksi tasoa sekä pelihahmot
Lopulta vain 2 oppilasta sai oman Scratch - pelinsä valmiiksi, lopuilla into lopahti joko siksi, että en osannut aina neuvoa heti kun ongelma ilmeni tai pelin loppuun saattaminen olisi vain ollut liian hidasta. Ehkä peli-ideat olivat lopultakin liian vaativia tai lopputuloksen suhteen oltiin liian kriittisiä? Tässä kuitenkin yksi valmistuneista peleistä: bomb boy.

Bomb boy:ssä on monta level:iä
Kun huomasin että Scratch - projekti ei oikein edennyt, ehdotin parille 7. luokkalaiselle ohjelmointia Racket:llä. Annoin heille linkin opettajille pitämäni Racket - pajan materiaaliin ja kävimme sen avulla läpi Racketin piirtofunktioita. Pienen harjoittelun jälkeen he koodasivat autot ja funktion käsitteen selittettyäni myös "maalaa-auto"-funktiot. Lopuksi he pääsivät kokeilemaan myös autolla "ajelua". Autolla ajelu ja mm. auton nopeuden säätö olivat pojista hauskaa mutta toisaalta harjoitusta tehdessämme huomasin, että funktion käsite oli melkoisen vaikea vielä 7.-luokkalaisille. Tältä autolla ajelu "Racket-autolla" näyttää:


Yhdellä kerhokerralla emme päässeet kirjautumaan ollenkaan Scratch - sivustolle, joten koodasimme koko ryhmä Racket:llä. Ihmeekseni myös 5.luokkalaiset ymmärsivät miten lippuja ohjelmoidaan ja kahden tunnin aikana syntyi monen eri maan lippuja! Racket kokeilun jälkeen moni hylkäsi Scratch - projektinsa kokonaan ja jatkoi Racketin kanssa piirtelyä. Osa jatkoi omatoimista koodailua, ja näiden kokeilujen tuloksena syntyi mm. mielikuvitusmaan lippu ja kolmiulotteisuutta mallintavan "Death Star".

Tässä 6.luokkalaisten Racket - koodausnäytteitä: "Death Star" ja lippuja
Osa kerholaisista jatkoi Racketin kanssa, joko maalaa-auto-funktioiden parissa tai ryhtyi opiskelemaan ufon laskeutumislogiikkaa näiden ohjeiden pohjalta. Yksi oppilas pääsi ufonsa kanssa jopa siihen pisteeseen, että hän pystyi ohjailemaan ufon laskeutumista nuolinäppäilillä oikealle ja vasemmalle! Vaikka saimmekin ufon laskeutumaan, huomasin että ohjeet eivät olleet riittävän tarkat jotta kerholaiset olisivat itsenäisesti voineet niitä seurata... Ja tältä ufon laskeutuminen näyttää valmiina:


Marraskuussa kerhomme osallistui myös Majava - kilpailuun. Kilpailu oli itselleni uusi tuttavuus mutta se toimi hienosti ja sopi hyvin toteutettavaksi yhdellä kerhokerralla. Tähän osallistumme myös ensivuonna!

Joulukuuhun mennessä 2D-hommat oli osan mielestä "jo niin nähty", että he halusivat että asennutan koulun koneille 3D-mallinnusohjelman (Blender). Varoittelin kerholaisia etukäteen siitä, että en osaa itse käyttää ko. ohjelmaa (vaikka olen kurssin käynytkin) mutta siitä huolimatta he saivat aikaan 3D - malleja, jopa animoituja sellaisia! Yksi oppilas kokeili myös ohjelmoida Blenderin pelilogiikka-moduulilla. Tässä yhden kerholaisen tekemä Blender-3D-animaatio:


Aivan kaikki eivät Blenderistä innostuneet vaan jatkoivat Racketillä koodaamista. Ennen joulua valmistui vielä pari koodattua joulukorttiakin:


Keväällä jatkamme koodailua ja uutena juttuna aloitamme Lego-robottien rakentamisen ja ohjelmoinnin. Jos saamme jotain valmista aikaan, voisimme yrittää osallistua myös keväällä järjestettävään  RoboCupJunior - kisaan. 

Kerhon vetäminen on ollut mukavaa mutta myös opettavaista. Olen saanut opetella olemaan vähemmän "opettaja" ja enemmän "ohjaaja". Jokainen kerholainen on saanut itse valita mitä tekee, ja olen opetellut ohjaamaan montaa eri juttua yhtäaikaa. Tästä johtuen en ole voinut suunnitella kerhokertoja juurikaan etukäteen. Toisaalta minulla on pitänyt olla takataskussa tasaisin väliajoin joitain "uutta kivaa". Silti kerholaiset yllättivät minut tekemällä sellaisia juttuja Blenderillä, joita en itse osaisi edes tehdä. Sain siis huomata, että vaikka kerhonvetäjän omat taidot ovat toki tärkeitä, kaikkein tärkeintä ovat kerholaisten omat ideat sekä motivaatio ja halu saada jotain toimivaa aikaiseksi. Mistä se motivaatio sitten syntyy, ja miten se pidetään hengissä? Ehkä sekin vielä selviää...

sunnuntai 28. joulukuuta 2014

Koodauksen ABC: 7. oppitunti

Tämä oli viimeinen oppituntimme ennen jakson vaihtumista, joten mitään uutta ja isoa emme olisi ehtineet aloittaa. Ajattelinkin että tässä olisi hyvä tilaisuus antaa oppilaiden tuunata omia pacman-pelejään haluamaansa suuntaan. Ilmeisesti olimme kuitenkin tehneet töitä liian kauan opettajajohtoisesti, että suurin osa oppilaista ei oikein osannut tai edes keksinyt mitä haluaisi pacmaniinsä lisätä. Yritin ehdotella uusia näppäinkomentoja, "Game over" - tekstiä yms. Lopulta yksi oppilaista tarttui "Game over" - tekstiin. Teksti lisätään kirjoittamalla uusi, viimeisen näkymän piirtävän funktio ja antamalla tämä parametrina stop-when:lle.

(define (piirrä-loppu tila)
  (overlay (text "Game Over" TEKSTI-KOKO "black") (piirrä-pacman tila)))


Teksti muutetaan ensin kuvaksi

Pienen mietinnän jälkeen yksi oppilas halusi lisätä pacmanille "syömisliikkeen" mutta hän ei osannut lähteä sitä itse koodaamaan joten ryhdyimme pohtimaan sitä yhdessä. Päädyimme siihen, että pelkät muuttuvat sektorit eivät anna oikeaa "syömisvaikutelmaa" vaan syövä pacman täytyy muodostaa kahdesta liikkuvasta puoliympyrän muotoisesta leuasta. Leukojen muotoiluun (crop, flip-horizontal, overlay/xy) ja niiden liikuttelun suunnittelemiseen hurahtikin sitten loppuaika, emmekä lopulta saaneet syövää pacmania edes valmiiksi. Ideana oli kuitenkin se, että leuat avautuvat vastakkaisiin suuntiin yhtä paljon (rotate). Uudet pacmanit näyttäisivät siis jotakuinkin tältä:

Syövät pacmanit

Keväällä jatkamme tätä kurssia, ja kysyinkin oppilailta että haluavatko he jatkaa pacman-pelin kimpussa vai koodaammeko jotain muuta. Kaikki halusivat jatkaa pacmanin kanssa, joten ilmeisesti keväällä teemme labyrinttejä, syömme namuja ja väistelemme haamuja. Joululomalla harjoittelin pacman-pelin koodaamista ja totesin, että siinä on edessä melkoinen määrä opittavaa sekä opettajalla että oppilailla! Saapa nähdä kuinka hienot pacman pelit saamme kevään aikana kokoon.

Tässä harjoitteluni tulos:






Koodauksen ABC: 6. oppitunti

Tämä oppitunti aloitettiin siirrä-pacman-funktion loppuun kirjoittamisella ja debuggauksella. Tässä vaiheessa monen oppilaan koodissa ilmeni ihmeellisiä asioita mm. yksi pacman lähti yllättäen liikkumaan viistosti ruudun poikki ja pääsimme miettimään sitä miksi päivitämme koodissamme kerrallaan vain x:ää tai y:tä.

Lopulta saimme jokaisen pacmanin liikkumaan ylös, alas, vasemmalle tai oikealle sen mukaan mitä LÄHTÖ-tilassa määrättiin. Tietenkään tämä ei ollut kovin mielenkiintoista, joten lisäsimme vielä näppäinohjauksen pacmanille. Teimme uuden funktion hoida-näppäimet, jossa käytimme taas vanhaa tuttua COND:ia. hoida-näppäimet - funktio lisättiin luonnollisesti myös big-bang:in kohtaan "on-key". Kulloinkin panettu näppäin saadaan big-bang:ltä tilan lisäksi.

;; hoida-näppäimet : sijainti key -> tila
(define (hoida-näppäimet tila n)
    ( .. ))

Painettu näppäin (n) saadaan big-bang:ltä
Tämän funktion implementoinnin ja testaamisen jälkeen pacman olikin jo valmis liikkumaan kaikkiin suuntiin ja "pelaaja" pystyi ohjailemaan pacmania nuolinäppäimillä. Viimeinen silaus pacmanille tehtiin korjaamalla lopetusehto sellaiseksi, että mihin tahansa neljästä reunasta ajautuminen lopettaa pelin (edellisten muutosten ajaksi olimme kommentoineet stop-when-koodin pois käytöstä).

Jotta lopetusehto olisi helpompi kirjoittaa ja lukea, otimme käyttöön lokaalit muuttujat. Tallensimme ensin pacmanin sijainnin paikallisiin muuttujiin x ja y. Sitten kokosimme ehdot pelikentän reunan ylittämiselle liudaksi ehtolauseita, jotka yhdistettiin loogisella operaattorilla or. Samalla muutimme lopetusehto-funktion nimen muotoon "peli-loppui?".
Otamme käyttöön lokaalit muuttujat sekä loogisen operaattorin OR
Lähes kaikki oppilaat saivat koodinsa toimimaan ja tältä se näyttää:

maanantai 24. marraskuuta 2014

Jouluinen koodaushaaste!

Määrittele kuvan mukaiset JOULUKUUSI sekä LUMIUKKO. Kopioi ne sitten tähän koodiin ja kokeile mitä tapahtuu kun painat s - start, a - asento.



tiistai 14. lokakuuta 2014

Innokas: Kiinnostaako koodaus- ja robotiikka? (Oulu)

Olin Innokas-verkoston kouluttajana Kiinnostaako koodaus ja robotiikka - kiertueella Oulussa. Vedin kiertueen "Racketilla kohti uusia ulottuvuuksia" - koodauspajan aamu- ja iltapäiväsessiot. Vaikka Tampereelta Ouluun olikin hieman matkaa ja touhuun kului yksi syyslomapäivä, oli silti todella mukavaa opettaa Racket - ohjelmointia opettajille. 

Kahden tunnin aikana kävimme läpi huiman määrän asioita: peruslaskutoimitukset, kuvioiden piirtäminen, funktion ja muuttujan käsitteet sekä apufunktioiden kirjoittaminen. Tutustuimme nopeasti myös interaktiivisen ohjelman toteuttamiseen Racketillä (big-bang). Aamupäiväryhmän kanssa ehdimme katsoa myös listoja ja funktioita parametrina (map)!

Pajassa tapahtui todella paljon ajattelua, ongelmanratkaisua sekä koettiin onnistumisen riemua. Pajan pitäjää lämmitti kun pajan jälkeen joku totesi, että tämänhän oli ihan ymmärrettävää :-)

Lataa pajan materiaali tästä.

Pajassa koodattiin ohjeen mukaiset maalaa-auto - funktiot (sekä apufunktiot) ja ne kopioitiin osaksi valmista koodia (lataa tästä koodi). Sitten omilla autoilla päästiin kaasuttelemaan ja jarruttelemaan (k = kaasu j = jarru). Tätä hauskaa harjoitusta voit kokeilla oman luokkasi kanssa vapaasti! 
(maalaa-auto "green" "red")

maanantai 13. lokakuuta 2014

Opettajien Racket - kurssi osa 2

Pidin Racket - kurssini toisen osan viime viikolla. Olin positiivisesti yllättynyt siitä kuinka moni oli koodaillut "kotitehtäviä". Tämä osa kurssia käsitteli animaatioiden ja pelien tekemistä Racketillä, joten lähdimme opettelemaan ufon laskeutumista. Kävimme läpi big-bang:in toiminnan, kertasimme funktion ja muuttujan käsiteitä, tutustuimme boolean arvoihin, tietorakenteisiin structin avulla sekä  haarautuvaan koodiin cond:in avulla. Loppuhuipentumana lisäsimme näppäinohjauksen ufolle.

Kurssilla tuli aika paljon asiaa mutta tämän jälkeen kurssin käyneet voivat toteuttaaa yksinkertaisia pelejä Racket - kielellä.

Lataa Racket - kurssi (osa 2) materiaali.

Kaikki kurssilaiset saivat ufon laskeutumaan maanpinnalle
  

lauantai 27. syyskuuta 2014

Opettajien Racket - kurssi osa 1

Lielahden koululle kokoontui viime keskiviikkona 10 innokasta opettajaa eri puolilta Tamperetta. Vietimme 3h Racket:in ihmeellisessä maailmassa. Ennen kurssia olin vähän huolissani siitä, että osa kurssille tulijoista oli jo kokeneita ohjelmoijia ja osa ei ollut koodannut ollenkaan. Kurssi sujui tästä huolimatta erittäin hyvin ja näytti sieltä, että onnistumisen kokemuksia tuli jokaiselle.

Kolmen tunnin aikan kävimme läpi paljon asioita, peruslaskut, piirtotyökalut, funktiot, listat jne. Tässä jakamani materiaali itseopiskeluun, kertaukseen tai vaikkapa luokassa käytettäväksi:

Lataa Racket - kurssi (osa 1) materiaali.

Tämänkin kurssin punainen lanka on koodaushaasteet, kun saa itse keksiä ratkaisun homma tuntuu mielekkäältä.

Kurssin toinen osa on kahden viikon päästä.

Koodasimme kurssilla mm. tällaiset autojonot

sunnuntai 21. syyskuuta 2014

Koodauksen ABC: 5. oppitunti

Nyt kun kaikilla oli yhteen suuntaan liikkuva pacman käsissään, oli helppo lähteä kokeilemaan pacmanin liikuttelua eri suuntiin. Annoin oppilaille tehtäväksi etsiä koodista ne kohdat, jotka pitäisi muuttaa että pacman saataisiin kulkemaan oikealta vasemmalle, ylhäältä alas ja alhaalta ylös. Tämä harjoitus lämmitti matematiikan opettajan sydäntäni, koska tässä tuli niin selväksi käsitteet muuttuja ja vakio. Jos mennään vasemmalta oikealle tai oikealta vasemmalle, x on muuttuja. Jos mennään ylhäältä alas tai alhaalta ylös, y on muuttuja. Nyt piti muuttaa myös big-bang:ille annettavaa lähtötilaa (tähän asti ollut 0). Piti muuttaa myös yhteenlaskuja vähennyslaskuiksi siirrä-pacman - funktiossa. Ja tietysti lopetusehtoakin piti hieman rukata (moni pacman jumiutui vanhalla lopetusehdolla paikoilleen).

Kun pacmanin liikuttelu oli saatu hanskaan, ryhdyimme yhdessä miettimään miten olisi mahdollista tehdä pacman, joka voisi liikkua vapaasti sekä ylös, alas, vasemmalle että oikealle. Nythän se oli mahdollista vain yhteen suuntaan kerrallaan. Mitä tietoja tilaan pitäisi tallentaa x-koordinaatin lisäksi?
Mitä tietoa pitää tallentaa?

Oppilaat löysivät helposti y-koordinaatin, mutta vaikeampaa oli jo tajuta, että myös suunta, johon pacman on liikkumassa pitäisi olla tallessa tilamuuttujana.

Tästä pääsimmekin hyvin siihen, että nämä kolme tietoa pitäisi saada tallennettua yhteen "säiliöön"  joten esittelin heille tietorakenteen nimeltä struct.
Tallensimme tiedot sijainti-nimiseen structiin

Jotta struct:in käsite tulisi oppilaille selväksi, demonstroin sitä luokassa olleella muovilaatikolla ja paperin paloilla. Muovilaatikko oli struct, paperit laatikossa olivat kenttiä. Yksi paperi oli nimeltään x ja siihen kirjoitin (= tallensin) 0 jne.

Aloitimme helpoimmaista päästä. Teimme definellä ensin LÄHTÖ-nimisen structin, johon tallensimme pacmanin lähtötilan.

(define LÄHTÖ (make-sijainti 0 0 OIKEALLE))

Myöskään piirrä-pacman - funktiota ei ollut vaikea muuttaa, muutimme sen ottamaan suunnan, x- ja y-koordinaatin ulos tila - muuttujasta

;; piirrä-pacman : sijainti -> kuva
(define (piirrä-pacman tila)
        (place-image 
              (anna-pacman (sijainti-suunta tila))
              (sijainti-x tila) 
              (sijainti-y tila)
               KENTTÄ))

Suurin työmaa olikin sitten siirrä-pacman - funktion muutoksissa. Vaikka siinä käytettiin "vanhaa tuttua" cond:ia, ehdimme tehdä vain ensimmäisen ehdon kuntoon, ja osalla jäi vielä bugeja koodiin korjattavaksi seuraavalla kerralla.

Pacmanin toimintalogiikka

Onneksi muutama oppilas sai pacmanin kaikesta huolimatta taas liikkeelle. Tämä oppitunti kului siis muutoksiin, jotka eivät sinällään lisänneet mitään näkyvää toiminnallisuutta mutta tekivät jatkon mahdolliseksi. Tätä se usein on koodarin elämä...

Seuraavalla kerralla pääsemme ehkäpä liikuttelemaan pacmania jo nuolinäppäimillä?

Koodauksen ABC: 4. oppitunti

Koska edellisellä oppitunnilla tuli niin paljon uutta asiaa, olin päättänyt että tällä tunnilla vain kertaisimme vanhoja asioita koodaushaasteen avulla. Haaste olisi saada pacman liikkumaan vasemmalta oikealle eli soveltaa edellisen tunnin oppeja ufon laskeutumisesta.

Ja vaikka olin päättänyt, että mitään uutta tällä tunnilla ei tule niin otin kaikesta huolimatta cond - lauseen esiin. cond:ia ei sinänsä olisi tarvittu pacmanin liikuttamiseen mutta ajattelin, että voisi olla hyvä harjoitella vielä funktion kirjoittamista yhden apufunktion avulla. Eli teimme anna-pacman - funktion, joka palauttaa oikeaan suuntaan katsovan pacman-hahmon (kuvan). Parametrina oli tietysti suunta (YLÖS, ALAS, OIKEALLE, VASEMMALLE).

cond - lauseen avulla saadaan tehtyä koodihaaroja
Ehtolauseet olivat yksinkertaisesti (equal? suunta OIKEALLE) ja jos näin oli palautettiin oikealle katsova pacman jne. else - haaraan laitoimme pelkän PÄÄ:n ilman suuta. Tätäkin funktiota testattiin heti eri suunnan arvoilla ennen kuin jatkoimme eteenpäin.

Vaikka tarkoituksena oli tehdä aivan samaa kuin viime kerrallakin, oppilaiden oli vaikea ryhtyä työhön. Selvästikään funktion ja sen paluuarvon käsittettä ei oltu vielä ymmärretty riittävän hyvin. Siksi kysyin oppilailta kysymyksiä heidän koodistaan, missä oppilaat toimivat "funktioina" ja "kutsuin" heitä eri parametreillä. Tällaisia kyselin:
             - mitä annat minulle kun sanon "(piirrä-ufo 100)"?  - kuvan
             - mitä annat minulle kun sanon "(siirrä-ufo 150)"?  - 160 (ASKEL oli 10)
             - mitä annat minulle kun sanon "(maassa? 350)"?   - true (MAANPINTA oli 300)

Tämän kyselykierroksen jälkeen suurin osa tuntui ymmärtävän funktion käsitteen niin hyvin, että funktioiden kirjoittaminen lähti liikkeelle. Teimme siis uudelleen lähes samat funktiot kuin viime kerrallakin nyt vain eri nimisinä: piirrä-pacman, siirrä-pacman, reunalla? Ainoa ero  oli se, että piirrä-pacman kutsui anna-pacman - apufunktiota saadakseen oikeanlaisen pacmanin. big-bang oli myös aivan samanlainen. Lopputunnista kaikilla oli liikkuva pacman - koodi valmiina.

tiistai 2. syyskuuta 2014

Koodauksen ABC: 3. oppitunti

Kolmannella oppitunnilla opettelimme miten ufon saa laskeutumaan ruudun yläreunasta alas ja  pysähtymään ruudun alareunaan. Teimme koodin yhdessä pala palalta ja vaikka olin tehnyt aikaisemmin ohjeet ufon laskeutumiselle, huomasin meneväni asioita aivan erilailla kuin ohjeessa (Lataa ufo-animaation ohje).

Lähdin liikkeelle siitä, että selitin miten Racketin 2htdp/universe - kirjaston big-bang toimii. Tähänastihan olimme tehneet vain ohjelmanpätkiä, jotka tekevät jotain ja lopettavat toimintansa heti eli niissä ei ole ollut ns. message loop:ia, joka jäisi kuuntelemaan käyttäjän näppäinten painalluksia tai tietokoneen kellon "tikitystä". big-bang - funktio käynnistää tällaisen loopin. 

big-bang:in avulla voi tehdä interaktiivisia ohjelmia
Jotta big-bang tietäisi mitä milloinkin pitää tehdä, ohjelmoijan on kirjoitettava muutama funktio. Aloitimme kirjoittamalla ainoan pakollisen funktion, eli sen miten näyttöä päivitetään, kun vuorossa on toiminto to-draw. Koska tehtävänä oli saada ufo laskeutumaan ruudun yläreunasta alaspäin, kirjoitimme piirrä-ufo - funktion. 
Tämä oli ensimmäinen oppilaiden itsensä kirjoittama funktio, joten käytimme ensin aikaa muuttuja - käsitteen sisäistämiseen. Harjoittelimme ufon laskeuttamista ns. "manuaaliohjauksella" eli määrittelimme ensin define:llä muutaman vakion (KORKEUS, LEVEYS, KENTTÄ) sekä ufon kuvan (UFO) ja sitten kirjoitimme DrRacketin alempaan ikkunaan rivin koodia, joka piirsi UFO:n kentälle. Tehtävänä oli ajaa koodirivi uusilla parametreilla niin kauan kunnes ufo pääsi maanpinnalle. 




Nyt olikin jo paljon helpompaa miettiä, mikä voisi olla piirrä-ufo - funktion muuttuja. Valitsimme muuttujan nimeksi tila, ja kirjoitimme ensimmäisen funktion. Sitä myös testattiin heti kutsumalla sitä eri muuttujan arvoilla DrRacketin alemmasta ikkunasta. Ja sehän toimi! Tämän jälkeen kirjoitimme funktiolle myös kuvauksen kommenttiriville. Funktiota on jatkossa helpompi käyttää, kun merkitsee tällä tavalla funktion nimen (piirrä-ufo), parametrien tyypit (numero) ja paluuarvon tyypin (kuva). 

;; piirrä-ufo : numero -> kuva
(define (piirrä-ufo tila)
        (place-image UFO 250 tila KENTTÄ))

Kokeilimme tätä funktiota big-bang:in kanssa. Ja tietenkään ufo ei liikahtanutkaan.

(big-bang 0 
         (to-draw piirrä-ufo))

Pienen mietinnän jälkeen oli selvää, että kukaan tai mikään ei koskaan muuta tilaa, ja näin pääsimme tekemään siirrä-ufo - funktiota. Tämä on se funktio, jota big-bang kutsuu on-tick:llä, eli se toteutaa asioita, jotka muuttuvat ajan funktiona. Tässä vaiheessa piti miettiä miten tila ufon laskeutuessa muuttuikaan, ja päädyimme yhteenlaskuun (y-koordinaatithan kasvavat alaspäin kuljettaessa Racket:issa):

;; siirrä-ufo : numero -> numero
(define (siirrä-ufo tila)
        (+ tila ASKEL))

Lisäsimme uuden rivin big-bangiin ja nyt ufo lähti tosiaan liikkeelle mutta katosi maanpinnan alle!

(big-bang 0 
         (to-draw piirrä-ufo)
         (on-tick siirrä-ufo))

Viimeinen uusi asia tällä tunnilla oli big-bang:in lopetusehdon kirjoittaminen eli stop-when. Funktion nimeksi valittiin  maassa?. Nimessä oleva kysymysmerkki kertoo siitä, että se palauttaa ns. boolean arvon. Vaikka boolean - arvot eivät olleet entuudestaan tuttuja, oppilaiden tuntui olevan melko helppo ymmärtää, että jokin matemaattinen lauseke voi olla true tai false. Tällainen lopetusehdosta tuli:

;; maassa? : numero -> boolean
(define (maassa? tila)
            (>= tila MAANPINTA))

Ja big-bangiin lisättiin taas yksi uusi rivi:

(big-bang 0 
         (to-draw piirrä-ufo)
         (on-tick siirrä-ufo)
         (stop-when maassa?))

Nyt ufo saatiin laskeutumaan maanpinnalle. Jokaisella oppilaalla oli hieman eri kokoinen KENTTÄ, joten he saivat itse etsiä sopivan arvon MAANPINTA-vakiolleen.

Tässä kaksoistunnissa oli hirveästi asiaa, ja tunnin lopuksi oppilaat olivat hieman pyörällään päästä. Ehkäpä jatkossa pitäisi yrittää tehdä pienempiä kokonaisuuksia :-)

Laskujärjestysharjoituksia Racketilla

Harjoittelimme 7. luokkalaisten kanssa Racketin peruslaskutoimituksia sekä laskujärjestyssääntöjä tekemällä tätä harjoitusta:

Lataa Racket - tiedosto.

Heti alussa huomasin, että ennen tehtävää pitää käydä tietysti läpi aivan peruslaskutoimitukset Racketillä, joten teimme oheiset peruslaskut yhdessä ennen varsinaisia tehtäviä.

Tunnin alussa oppilaille annetut ohjeet
Laskujärjestys osoitetaan Racket:ille käyttämällä sisäkkäisiä sulkulausekkeita

perjantai 29. elokuuta 2014

Koodauksen ABC: 2. oppitunti

Toisella tunnilla jatkoimme kuvien piirtelyä. Kertasimme aluksi miten niitä kuvioita oikein tehtiinkään ja sitten kävin läpi muutaman uuden kuvien käsittelyä helpottavan funktion: rotate, flip-vertical, flip-horizontal, scale ja  overlay/align. Sitten opetin miten define toimii ja miten sen avulla saadaan jaettua koodia helpommin luettaviin paloihin. Vinkkasin myös, että definellä olisi hyvä määritellä kaikki numerovakiot (kuten SÄDE), ettei tule käyttäneeksi "maagisia numeroita".

Tämän jälkeen oppilaat saivat tehtäväksi koodata pacman - hahmot, jotka katsovat oikealle, vasemmalle, ylös ja alas. Ja toden totta sellaiset saimme aikaan!! Osalla pacmanejä oli jopa hienot silmät!

2. tunnin koodaushaasteet
Huomasin myös, että vasta nyt kun otimme  määrittelyt eli define:t käyttöön, oppilaille avautui DrRacketin  definitions area:n ja interactions area:n ero. Määrittelyt kirjoitetaan yläikkunaan ja painetaan "run". Nyt koodia voi testata kirjoittamalla määrittelyssä annettu nimi alempaan ikkunaan ja painamalla <enter>.
DrRacketin ylempi (definitions area) ja alempi (interactions area) ikkuna.
Tunnin jälkeen tajusin, että olen pikkuhiljaa löytämässä sen ohjelmoinnin opettamisen "punaisen langan". Ensinnäkin on erittäin tärkeää, että oppilas ymmärtää jokaisen kirjoittamansa koodirivin merkityksen. Kukaan ei opi koodaamaan kopioimalla valmiita esimerkkejä. Oppitunnit ovat rakentuneet tähän asti niin, että edellisen tunnin asia kerrataan, sitten opetan jonkin uuden käsitteen ja kokeilemme sen toimintaa yhdessä ja sitten heitän oppilaille koodaushaasteen, jonka he ratkaisevat itse käyttämällä sitä tietoa mitä heillä on. Näin jokaisen oppilaan koodi on erilainen, ja lopputulos muistuttaa enemmän tai vähemmän haasteen tehtävänantoa. Nyt ryhmäni oppilailla on jokaisella hieman eri väriset, eri kokoiset ja eri nimiset pacmanit. Toiset on käännetty pelkkällä rotate funktiolla, toiset flip-vertical:lla ja flip-horizontal:lla. Yksi oppilas halusi hieman eksoottisemman värin, joten hänellä on koodissaan käytössä myös make-color. Ensiviikolla yritämme saada pacmanit liikkumaan ja sen jälkeen tottelemaan näppäinkomentoja. Hauskinta tässä on se, että en ole itsekään koskaan koodannut pacman-peliä, joten tällä hetkellä en vielä tiedä mikä on lopputulos.

Tässä rautalankaohjeet kakkosoppitunnin asioista:









Lopputunnista nopeimmat kokeilivat myös asetella pacmania scene:lle. Tässä tarvittiinkin juuri scale - funktiota. Tosin yksi oppilas tajusi ihan itse, että sehän onnistuu myös muuttamalla SÄDE-vakion arvoa. Jotain on siis mennyt perille.
Liikutelta hahmo sijoitetaan "scenelle". Tälle annoimme definellä nimen KENTTÄ.

Pacman aseteltiin kentälle "place-image"-funktiolla.

tiistai 19. elokuuta 2014

Koodauksen ABC: 1. oppitunti

Koodauksen ABC - kurssi on nyt saatu käytiin. Kurssille ilmoittautui 15 oppilasta, joista 4 heitti hanskat tiskiin jo ensimmäisen kaksoistunnin jälkeen (vaihtoivat koodauksen toiseen valinnaiseen). Tämä kertoo, joko siitä että koodaaminen ei sovi kaikille tai sitten näillä oppilailla ei ollut hajuakaan siitä mitä koodaaminen edes on. Ja tietysti on myös mahdollista, että syy on opettajassa: olen vain erityisen huono ja tylsä opettaja (huokaus).

Koodauksen ABC:llä ei ole kovin tarkkaa kurssisuunnitelmaa. Tällä hetkellä menen viikko kerrallaan, koska en voi tietää miten asia uppoaa oppilaisiin. Lähdimme liikkeelle piirtotyökaluista ja DrRacketiin tutustumisesta oheisen 1. Harjoituksen avulla.

1. Harjoitus (lataa ohje tästä)

Osa oppilaista osasi hyvinkin itsenäisesti lukea ohjeita, ja olin positiivisesti yllättynyt kuinka moni oppilaista sai pienen auttamisen jälkeen Suomen lipun valmiiksi. Painotin tunnilla sitä, että koodaaminen on aluksi todella hankalaa mutta kun juonesta pääsee selville se on todella antoisaa. Hanskat tiskiin heittäneille ehti paljastua vain se vaikeus: circle pitää kirjoittaa circle (ei cricle tai cirle) ja sulkumerkit on oltava oikeissa kohdissa, muuten tulee virheilmoituksia.

Ensimmäisen tunnin koodaushaasteet
Huomasin heti ensimmäisellä tunnilla käyttäväni paljon oppilaille uutta sanastoa. Jotta saimme piirrettyä ympyröitä, suorakulmioita, kolmioita ja yhdistettyjä kuvioita, jouduin ottamaan puheeksi kirjasto:n, koska käytimme 2htdp/image:a. Että saimme ensimmäisen kuvion piirrettyä, oli käytettävä jo sanaa funktio ja parametrit. Ja vaikka en ollut ajatellut edes sanoa sanaa tietotyyppi niin sekin tuli tunnilla mainittua kun kävimme läpi sitä miksi osa parametreistä oli lainausmerkkien sisällä (merkkijono eli string), ja osa taas ei (numero). Ja ehkä siinä vaiheessa kun sanoin, että circle - funktio palauttaa tietotyyppiä, joka on kuva, olisi jo pitänyt tajuta lopettaa. No, tieto lisää tuskaa.

Tunnin jälkeen tuli sellainen fiilis, että kaikki oppilaat eivät kuitenkaan jaksa lukea pitkää tekstiä. Heille pitäisi olla lyhyemmät ohjeet. Siksi tein seuraavaa tuntia varten nämä rautalankaohjeet piirtotyökalujen käyttöön (tulostin nämä myös luokan seinälle):








keskiviikko 23. heinäkuuta 2014

Matopeli ja Pong WeSchemellä

Kokeilin miten saisin Racket-pelini toimimaan selaimessa. En saanut Racketin omaa JavaScript-kääntäjää toimimaan (http://hashcollision.org/whalesong/), mutta pienen työn jälkeen sain portattua Racket-koodini WeScheme-ympäristöön. WeScheme toteuttaa riisutun version Schemestä (http://www.wescheme.org/doc/wescheme.html). Toteuteuksen avulla voi tehdä yksinkertaisia animaatioita sekä pelejä. Hyvää WeScheme:ssä on se, että se mahdollistaa myös koodin katselun hieman Scratch:in tyyliin. Koodin tallentaminen verkkoon vaatii Google-tilin ja käytettävät kuvatiedostot on myös tallennettava verkoon. Ohjelmointiympäristönä WeScheme ei ole kovin kätevä, koska sen antamat virheilmoitukset ovat ajoittain hieman epäselviä (mm. rivinumero saattoi  puuttua kokonaan) eikä debuggaukseen ollut minkäänlaisia työkaluja. Siksi päädyin  tekemään koodin vaatimat muutokset DrRacketissä ja kopioin vasta valmiin tekeleen WeScheme-ikkunaan.
Olisin luullut, että Scheme ja Racket ovat hyvinkin samankaltaisia mutta jouduin koskemaan aika moneen kohtaan koodissani. Tässä pieni lista vaadituista muutoksista:
  • "struct"-määrittelyt piti muuttaa "define-struct" muotoon
  • konstruktorikutsuihin piti lisätä "make-" 
  • kuvatiedosto pitää ladata URL:n kautta (WeScheme rajoitus)
  • lokaalit muuttujat piti määrittellä "define":n sijaan "let":llä tai rekursiivisissa tapauksissa "letrec":llä
  • Scheme oli tarkempi myös boolean arvojen kanssa, Racketissä kaikki muu paitsi "false" on "true"
  • WeSchemessä ei ilmeisesti ole mahdollista käyttää mutaattoreita, ainakaan structeja ei voinut määritellä "#:mutable" eikä näin ollen ollut tarjolla set-funktioitakaan. 
  • WeSchemen big-bang:in "stop-when"-toiminnolle ei voi antaa parametrina pelin viimeisen ruudun piirtofunktiota (toimii DrRacketissa) joten viimeisen ruudun piirtäminen vaati hieman lisää koodia. 
Näiden muutosten jälkeen mato lähti liikkeelle ihan näppärästi mutta Pong hidastui oudosti. Onneksi muuttamalla hieman parametreja sain Pongin pallon taas liikkumaan järkevällä nopeudella mutta mailat jäivät hieman jumittelemaan. Ei siis aivan optimaalista, mutta toimii jotenkin.

Kokeile pelejä klikkaamalla alla olevia kuvia:




Aluksi olin hieman pettynyt, että pelit eivät toimineet mobiililaitteilla (tai siis toimivat mutta matoa tai mailoja ei voinut ohjailla nuolinäppäinten puuttuessa). Sitten löysin Bootstrap-discussion-ryhmästä ohjeita mobiilituen lisäämiseen ja pienen ohjelmointisession jälkeen sain pelit toimimaan myös mobiililaitteissa!!!

Kokeile Matopelin mobiiliversiota klikkaamalla alla olevaa kuvaa (testattu toimivaksi iPadillä sekä Lumialla):