Sisällysluettelo

Scratch oh­jel­moin­tia

Opi­taan oh­jel­moin­nin pe­rus­teet ha­vain­nol­li­ses­ti graa­fi­sel­la oh­jel­moin­ti­kie­lel­lä


Heikin pohteita > Ohjelmointia, matematiikkaa, fysiikkaa … > Scratch ohjelmointia > Harjoitus: proseduraalisen ohjelmoinnin perusrakenteet Scratchilla (edit: 2015-03-12)

Har­joi­tus: proseduraalisen oh­jel­moin­nin perus­ra­ken­teet Scratchilla

../xml/Programming/Scratch/scratchKuvat/EsittelyKuva.png

Kuva 1.

 

Seu­raa­van har­joi­tuk­sen tar­koi­tus on tu­tus­tut­taa proseduraalisen oh­jel­moin­nin perusajatukseen. Samalla voi tutustua ohjelmoinnin alkuopetusta varten kehitettyyn Scratch-ohjelmointiympäristöön.

Maa­lis­kuu 2015

Proseduraalisen oh­jel­moin­nin ja oli-ohjelmoinnin periaatteet ovat pysyneet samoina ainakin viisikymmentä vuotta. Monet yleiset ohjelmointikielet kuten C++, Java, Python, perustuvat proseduraalisen ohjelmoinnin ja olio-ohjelmoinnin periaatteisiin.

Joi­hin­kin tar­koi­tuk­siin sopii proseduraalista oh­jel­moin­tia pa­rem­min esi­mer­kik­si funk­tio­naa­li­nen oh­jel­moin­ti tai lo­giik­ka­poh­jai­nen oh­jel­moin­ti , mutta hyödyllisintä on aloittaa ohjelmoinnin opiskelu perehtymällä proseduraaliseen ohjelmointiin ja olio-ohjelmointiin.

Tämän har­joi­tuk­sen tar­koi­tus on tu­tus­tut­taa proseduraalisen oh­jel­moin­nin kes­kei­siin asioi­hin, kuten kont­rol­li­ra­ken­tei­siin ja muut­tu­jiin. Teem­me oh­jel­man — al­go­rit­min, joka piir­tää kuvan 1 kal­tai­sia geo­met­ri­sia ku­vioi­ta. Moi­nen kuvio tus­kin si­nän­sä sä­väyt­tää ke­tään video­pe­lien maail­maan tot­tu­nut­ta, mutta teem­me­kin piir­to-oh­jel­man, koska scratch-kielisen piir­to-oh­jel­man käs­ky­jen vai­ku­tus havainnollistuu sel­keäs­ti oh­jel­moi­jal­le. Geo­met­ris­ten ku­vioi­den piir­te­lyn myötä pää­see sa­mal­la har­joit­te­le­maan geo­met­ris­ta ajat­te­lua. Luvun lo­pus­sa on esi­merk­ki olio-oh­jel­moin­nis­ta Scratchilla.

Käyn­nis­tä scratch oh­jel­moin­ti­ym­pä­ris­tö tästä ja valitse ko­kei­le sitä (tai try it out, jos selaimesi ei suosi suomen kieltä). Sinun pitäisi päästä vaiheen 1 mukaiselle aloitussivulle.

../xml/Programming/Scratch/scratchKuvat/alku.jpg

Vaihe 1: Aloi­tus­sivu. Mi­kä­li aloi­tus­sivu on eng­lan­nik­si, voit vaih­taa kie­len suo­mek­si klik­kaa­mal­la mus­tan nuo­len osoit­ta­maa maa­pal­lon­kuvaa.

 
../xml/Programming/Scratch/scratchKuvat/ekaLiike.jpg

Vaihe 2: Scratch-ohjelmia teh­dään ve­tä­mäl­lä keski­pal­kis­ta oh­jel­ma­loh­ko­ja oi­keal­le työ­ti­laan. Va­lit­se aluk­si mus­tal­la ym­py­röi­dyl­tä alueel­ta ta­pah­tu­mat ja vedä sieltä työtilaan lohko kun kli­ka­taan+vihreän lipun kuva. Hae muut kuvan lohkot valikoista kynä ja liike ja "naksauta" ne paikoilleen. Kirjoita valkeisiin soikioihin järkevät luvut. Komento liiku 100 as­kel­ta siirtää oikealla ylhäällä olevassa laatikossa näkyvää kissaa sata "askelta". Huomaa, että "hiekkalaatikon" koko on muutama sata "kissanaskelta" suuntaansa.

Oh­jel­ma­si on val­mis. Klik­kaa kis­san "hiek­ka­laa­ti­kon" ylä­lai­das­sa ole­vaa vih­reää lip­pua. Jos kaik­ki meni hyvin, kissa siir­tyi ja piir­si vii­van.

 

Hyvä työtä sääs­tä­vä tapa on tal­len­taa oh­jel­ma uu­del­la ni­mel­lä ennen kuin alkaa tehdä isoja muu­tok­sia. Klik­kaa ylä­pal­kis­ta tie­dos­to — lataa tieto­ko­neel­le­si. Anna tiedoston nimeksi vaikka "piirtely-v1". Seuraavalla kerralla tallenna ohjelma nimellä "piirtely-v2" jne. Jos jossain vaiheessa satut sotkemaan ohjelmasi tosi pahasti, voit ladata edellisen version eikä sinun tarvitse aloittaa kaikkea alusta. Pienet virheet voi korjata yläpalkin komennolla muok­kaa — pe­ruu­ta.

../xml/Programming/Scratch/scratchKuvat/ekaLiikejaReset.png

Vaihe 3: Tee kuvan oi­kean lai­dan mu­kai­nen "sii­vous­oh­jel­ma", joka pa­laut­taa kis­san ja "hiek­ka­laa­ti­kon" alku­ti­laan. Vaik­ka kis­sa­si kar­kai­si näy­tön ulko­puo­lel­le, voit kut­sua sen ta­kai­sin pai­na­mal­la väli­lyön­tiä. Sa­mal­la van­hat piir­rok­set pyyh­kiy­ty­vät pois.

(Minun mie­les­tä­ni Scratchissä pi­täi­si olla val­mii­na reset-komento, joka te­ki­si ylläolevan.)

 
../xml/Programming/Scratch/scratchKuvat/Kolmion_osat.png

Vaihe 4: Hae kuvan oh­jel­ma­loh­kot va­li­kos­ta ja kokoa niis­tä oh­jel­ma, joka piir­tää kol­mion. Oi­keaa kään­ty­mis­kul­maa voi olla vai­kea kek­siä. Voit nous­ta sei­so­maan ja kä­vel­lä kol­mion muo­toi­sen polun. Mon­ta­ko as­tet­ta kään­nyit kaik­kiaan?

 
../xml/Programming/Scratch/scratchKuvat/OsatRepeatKolmio.png

Vaihe 5: Kol­mio­ta piir­tä­väs­sä oh­jel­mas­sa tois­tuu sama ko­men­to­sarja kolme ker­taa. Kokoa kuvan loh­ko­ja käyt­täen oh­jel­ma, joka piir­tää kol­mion. Su­jau­ta tois­tet­ta­vat ko­men­not tois­ta-lohkon haarukkaan.

 
../xml/Programming/Scratch/scratchKuvat/sanoKaannos.png

Vaihe 6: Kissa piir­tää kuvan niin no­peas­ti, ettei sen liik­kei­tä ehdi seu­ra­ta. Laita kissa py­säh­ty­mään ja sa­no­maan "kään­nös" kol­mion joka kul­mas­sa, su­jaut­ta­mal­la sano-käsky sopivaan kohtaan ohjelmaa.

 
../xml/Programming/Scratch/scratchKuvat/teeMuuttuja.png

Vaihe 7: Entä jos ha­luai­sim­me piir­tää ne­liön tai mikä hy­vän­sä moni­kul­mion? Help­po juttu. Tois­te­taan ko­men­not useam­man ker­ran ja kään­ny­tään kus­sa­kin kul­mas­sa vähän vä­hem­män. Tätä var­ten tar­vit­sem­me muut­tu­jan, joka ker­too, mon­ta­ko kul­maa ha­luam­me ku­vioom­me.

Va­lit­se tieto-valikosta komento tee muut­tu­ja ja anna sille nimeksi vaikka KulmienLkm. Laiskempi ehkä antaa muuttujalle nimeksi n tai lkm. Näin pienessä ohjelmassa tuskin unohtuu, mitä varten muuttuja on luotu.

 
../xml/Programming/Scratch/scratchKuvat/KulmienLkm.png

Vaihe 8: Lisää oh­jel­maa­si ohei­set loh­kot niin, että se piir­tää minkä hy­vän­sä moni­kul­mion. Kul­mien luku­mää­räl­le pitää aset­taa ha­lut­tu arvo ennen tois­ta-lohkoa. Toistoja tehdään KulmienLkm kertaa. Vihreä pallukka suorittaa jakolaskun. Sillä voi laskea kääntymiskulman, joten sijoita se lohkoon kään­ny ja sijoita jakolaskuun sopivat arvot ja muuttujat.

Ko­kei­le, toi­mii­ko oh­jel­ma­si. Hie­noa, jos toi­mii. Lä­hes­kään aina oh­jel­ma ei toimi ekalla yri­tyk­sel­lä ja vir­heen et­si­mi­nen voi olla ra­sit­ta­vaa. Oh­jel­moin­ti on kieh­to­vaa ja kou­kut­ta­vaa, mutta jos­kus myös ras­kas­ta.

 
../xml/Programming/Scratch/scratchKuvat/Piiri.png

Vaihe 9: Jos piir­sit oh­jel­mal­la­si esi­mer­kik­si 13-kul­mion, se saat­toi venyä kuva­ruu­dun ulko­puo­lel­le. Muuta oh­jel­maa­si niin, että moni­kul­mion piiri on kul­mien luku­mää­räs­tä riip­pu­mat­ta sama.

Tee muut­tu­ja piiri ja laita sille ohjelman alussa, ennen toista silmukkaa joku järkevä arvo. Senjälkeen aseta sivun pituudeksi piiri/KulmienLkm eli liiku kerrallaan piiri/KulmienLkm. Kuvassa näet tarvittavat lohkot.

 
../xml/Programming/Scratch/scratchKuvat/kysyNkulmat.png

Vaihe 10: En­tä­pä jos kissa ky­syi­si, minkä­lai­sen moni­kul­mion ha­luam­me piir­tää?

Si­joi­ta ky­sy­mys oh­jel­man al­kuun ennen kuin tar­vit­set tie­toa kul­mien luku­mää­räs­tä. Sen jäl­keen lok­sau­ta vas­taus sinne, mihin olet tähän asti kirjoittanut käsin muuttujien lukumäärän.

 
../xml/Programming/Scratch/scratchKuvat/Laskuri.png

Vaihe 11: Har­joi­tel­laan lisää muut­tu­jien käyt­töä. Tee muut­tu­ja Las­ku­ri , jolla seuraamme, montako sivua kissa on jo piirtänyt.

Aseta Las­ku­rin arvoksi 0 ohjelman alussa ja lisää sen arvoa yhdella aina kun on tullut piirrettyä lisää yksi sivu. Muuta komento sano kään­nä niin, että kissa sanoo, montako sivua se on jo piirtänyt. Eli korvaa "käännä!" muuttujalla Las­ku­ri.

 
../xml/Programming/Scratch/scratchKuvat/pikkuKolmio.png

Vaihe 12: Kokoa kuvan mu­kai­nen lohko ja su­jau­ta se moni­kul­mio-oh­jel­ma­si tois­ta-lohkon sisään aiempien komentojen lisäksi. Koeta, mitä tapahtuu.

 
../xml/Programming/Scratch/scratchKuvat/pikkuKolmiot.png

Vaihe 13: Mi­nul­le kävi näin. Jos lai­toit loh­kon eri paik­kaan kuin minä, sait var­maan­kin vähän toi­sen­lai­sen ku­vion.

 
../xml/Programming/Scratch/scratchKuvat/Lopetus.png
Vaihe 14: Lisää ohei­set ko­men­not oh­jel­maa­si niin, että ku­vion piir­ret­tyään kissa siir­tyy sen si­sään kuten ku­vas­sa 1. 

Vai­heis­sa 12 ja 13 piir­sit moni­kul­mion nurk­kaan pie­nen kol­mion. Muuta oh­jel­maa niin, että joka kul­maan piir­tyy iso moni­kul­mio pie­nois­koos­sa niin, että kun­kin sivun pi­tuus on vii­des­osa ison ku­vion sivun pi­tuu­des­ta eli pie­nem­män ku­vion piiri on vii­des­osa isom­man ku­vion pii­ris­tä. Voit joko luoda uuden muut­tu­ja vaik­ka ni­mel­lä piiri2 ja käyttää sitä sisemmässä tois­ta-haarukassa tai käyttää kahta sisäkkäistä jakolaskua. (Tämä tehtävä saattaa vaatia pikkuisen miettimistä ja kokeilua.)

Scracthilla voi tehdä pal­jon muu­ta­kin, monen mie­les­tä ehkä haus­kem­paa­kin kuin moni­kul­mioi­den piir­te­ly, joten kan­nat­taa tu­tus­tua scratchin aloi­tus­sivun oi­kean lai­dan tutoriaaleihin. Voit vaik­ka tehdä oh­jel­man, jossa kis­sat tans­si­vat, mi­kä­li geo­met­ria alkaa tym­piä. Voit myös vil­kais­ta lisä­har­joi­tuk­sia , jotka esittelevät muutamia ohjelmoinnin perusrakenteita.

Kii­tok­set

Hel­sin­gin yli­opis­ton ai­neen­opet­ta­ja­kou­lu­tuk­ses­sa val­mis­te­lim­me ryhmä­työnä oh­jel­moin­nin oppi­tun­nin. En tiedä, vas­taa­ko ylläoleva en­sin­kään ryh­män mui­den jä­sen­ten aja­tuk­sia, mutta joka ta­pauk­ses­sa ylläoleva pe­rus­tuu ryhmä­työs­sä op­pi­maa­ni.