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.

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):

 

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):

Kesän toinen matopeli syntyi Scratchillä!

Matopeli Racketilla

Kesäloman kunniaksi koodasin matopelin :-)


Ohjeet tähän löytyvät kirjasta: Realm of Racket.

3D-tulostaminen

Kävin parin tunnin 3D - tulostuskurssin (en siis ole vielä tulostanut mitään :-) ja tässä jotain mitä opin kurssilla ja mitä olen saanut selville aiheesta netistä.

MiniFactory tulostaa

Tulostamisessa on nämä vaiheet:

1) 3D-mallin luominen. Mallin voi tehdä millä tahansa ohjelmalla, joka tuottaa STL-formaattia (STereoLithography). Malli muunnetaan siis läjäksi kolmioita. Ohjelmia, joilla 3D-mallin voi tehdä:

• Google SketchUp - ohjelma. Tässä ohje Google SketchUp:in peruskäyttöön. SketchUp-malli pitää muuttaa erikseen STL:ksi esim. MeshLab - ohjelmalla. Tässä ohje STL:n tekemiseen.
• Blender - ohjelmalla voi tehdä STL:ää suoraan. Blender on ilmainen. Tässä suomenkieliset ohjeet Blenderin käyttöön.
• Inventor CAD - ohjelma. Lataa tästä ilmainen kokeiluversio. Tämä ohjelma tekee suoraan STL:ää.
• Minecraft - peli. Myös tällä voi tehdä tulostettavia 3D-malleja. Printcraft - palvelussa voi rakentaa mallin suoraan ja tallentaa STL:nä. Jos on jo tehnyt rakennelman Minecraftiin, joutuu lataamaan lisäksi MinecraftEdit - ohjelman. Tällä ohjelmalla tallennetaan Minecraft - malli ensin Schematics - muotoon ja tämä ladataan Printcraft - palveluun. Jotta Minecraft:llä voi jotain rakentaa, peli pitää ostaa (~20€). Myös Mineways - ohjelmalla voi tehdä Minecraft-mallista STL:ää.
• TinkerCAD:llä voi myös tehdä 3D-malleja.
• Joskus STL-malli ei ole "vesitiivis". Silloin STL-tiedosto pitää korjata. Yksi toimiva palvelu on NetFabb (vaatii Microsoft-tilin).

Hdä 2) STL-malli muunnetaan G-koodiksi, jolla ohjataan tulostinta. Esineen tulostamisessa on monta säädettävää parametria, esim. suuttimen ja tulostusalustan lämpötila, tulostusnopeus, esineen täyttökuvio, esineen tulostusasento jne. Konetta pitää myös kalibroida, että tulostuspää on oikealla korkeudella tulostusalustasta. G-koodia tekeviä ohjelmia (ja siis itse printteriä ajavia ohjelmia):

• RepetierHost-ohjelma on koulumme käytössä olevan MiniFactoryn käyttöön tarkoitettu ohjelma
• Cura-ohjelma saattaisi olla helppokäyttöisempi, koska siitä on myös suomenkielinen versio.

Täällä on lisää 3D-tietoa: http://kolomeree.blogit.tampere.fi/

Tulostus pysyy paremmin kiinni tulostusalustassa reunuksen avulla (poistetaan lopuksi)

Miten matematiikka ja ohjelmointi liittyvä toisiinsa?

Tein pienen videon siitä, miten matematiikka ja ohjelmointi liittyvät toisiinsa. OPS 2016 - luonnoksen mukaanhan ohjelmointia tullaan opettamaan yläkoulussa juuri matematiikan tunneilla...