Scratch

Siirrä ja kierrä

Scratchissa ei ole komentoina koordinaatiston kiertoa ja siirtoa. Kuitenkin voit ajatella, että Scratchin komennot, kuten liiku x askelta ja mene kohtaan x: y: ovat käytännössä sama kuin translate(x,y)-komento Processing-ohjelmoinnissa. Vastaavasti Scratchin komennot: käänny myötäpäivään x astetta ja käänny vastapäivään x astetta on käytännössä sama kuin rotate(radians(kulma))-komento Processing-ohjelmoinnissa. Katsotaan asiaa esimerkin avulla.

Jolloin tulostuu seuraavaa.

Jos käytämme toistolausetta, yllä oleva koodi voidaan lyhentää muotoon.

Viivan pyörittäminen

Tehdään vastaavalla tavalla kuvio, jossa neljä viivaa pyörii ympäri.

Jolloin tulostuu seuraavaa.

Toisto

Scratchissa ei ole komentoina koordinaatiston kiertoa ja siirtoa. Kuitenkin voit ajatella, että Scratchin komennot, kuten liiku x askelta ja mene kohtaan x: y: ovat käytännössä sama kuin translate(x,y)-komento Processing-ohjelmoinnissa. Vastaavasti Scratchin komennot: käänny myötäpäivään x astetta ja käänny vastapäivään x astetta on käytännössä sama kuin rotate(radians(kulma))-komento Processing-ohjelmoinnissa.

Scratchissa monimutkaisemmat kuviot luodaan toistojen avulla. Katsotaan asiaa käytännössä. Tehdään ohjelma, joka piirtää kukkia.

Piirretään kaari. Kaari saadaan aikaiseksi, kun edetään hieman eteenpäin eli 3 askelta ja samalla muutetaan hieman suuntaa eli käännytään 6 astetta. Kun eteneminen ja suunnan muuttaminen toistetaan 15 kertaa, niin lopputulos muistuttaa kaarta. Yhteensä kynän suunta on muuttunut 90 astetta, koska 15 ∙ 6° = 360°. Kun laitetaan kynä alas ennen toistoa ja nostetaan kynä ylös toiston jälkeen, niin näemme kuljetun matkan piirtojälkenä. Lisäksi hahmo kannattaa piilottaa, jolloin näemme vain kynän jäljen.
Seuraavaksi piirretään kukan terälehti kahden kaaren avulla. Ennen kuin aloitamme uuden kaaren piirtämisen, niin muutetaan suuntaa 90 astetta. Tällöin saadaan aikaiseksi terävä nurkka. Kahdella toistolla etenemissuunta on muuttunut täyden ympyrän verran eli se 360 astetta. Kaksi 90 asteen kaarta ja kaksi 90 asteen suunnan muutosta on yhteensä se 360 astetta.
Piirretään kukka 10 terälehden avulla. Aloituskulma määrää sen mihin asentoon terälehti oikein piirretään. Jos teemme uuden silmukan, jossa aloituskulma vaihtuu 36 astetta ja toistoja on yhteensä 10, niin lopputuloksena saamme 10 terälehteä siten, että jokainen terälehti on hieman eri asennossa. Koska 36° ∙ 10 = 360°, niin olemme kiertäneet taas täyden ympyrän. Jos haluaisit piirtää vain viisi terälehteä, niin silloin kulman pitäisi olla 72 astetta, koska 72° ∙ 5 = 360°. Voit laittaa terälehtien määräksi periaatteessa melkein minkä tahansa, kun lasket aloituskulman jakamalla 360° terälehtien määrällä.
Ideaa voidaan jatkaa tästä eteenpäin. Entä jos haluaisimme piirtää kuusi kukkaa? Mieti ensin, kuinka kuusikulmio piirretään. Jos toistamme kuusi kertaa toiminnon, jossa liikutaan eteenpäin esimerkiksi 100 askelta ja käännytään 60 astetta, niin reitistä on tullut kuusikulmio. Lisäämme taas uuden 6 toiston silmukan, jossa liikutaan 100 askelta eteenpäin ja käännytään 60 astetta, niin saamme aikaiseksi kuusi kukkaa. Pääasia, että nostamme kynän ylös tämän siirroksen ajaksi. Ohjelma, joka piirtää 6 kukkaa on seuraava.

Yhteenvetona voimme todeta, että ensimmäisellä silmukalla piirsimme kaaren, toisella silmukalla piirsimme terälehden, kolmannella silmukalla piirsimme kukan ja neljännellä silmukalla piirsimme kuusi kukkaa. Nämä kaikki neljä silmukkaa ovat sisäkkäisiä, jossa sisin silmukka piirtää kaaren ja uloin silmukka siirtää kukan aloitus pisteen aina eri paikkaan samalla nostaen kynän ylös.

Asusteet

Voisiko Scratchissa piirtää kukan terälehden, jota monistamalla saataisiin aikaiseksi kukka? Tämä kysymys johtaa Scratchissa asusteiden tutkimiseen. Mitä ovat asusteet? Asusteilla tarkoitetaan hahmojen eri asuja tai asentoja. Käytännössä kyseessä on uuden hahmon luominen. Asusteisiin päästään esimerkiksi napsauttamalla luo uusi hahmo painiketta: tai menemällä Asusteet välilehdelle, jolloin muokataan nykyisen valitun hahmon asustetta. Tällöin aukeaa piirtoikkuna, joka on tämän näköinen.

Aina kun haluat luoda uuden hahmon, jolla on jokin asuste, paina luo uusi hahmo - painiketta: . Jokaiselle hahmolle on piirrettävä vähintään yksi asuste, mutta tarvittaessa voit piirtää useammankin asusteen.

Piirtämisessä on kaksi tilaa. Voit piirtää hahmoja, joka vektorikuvina tai bittikarttakuvina.

Bittikarttakuvassa hahmo koostuu pisteistä. Kun piirrät piirtotyökaluilla (kynä, viiva, suorakulmio, ellipsi), niin bittikarttakuvien ainoa muokkaustoiminto on yleensä pyyhekumi. Käytännössä bittikarttakuva piirretään hyvin pitkälle käsivaralla. Jos ikkunan alareunassa lukee teksti: Bittikarttatila, niin tällöin sinulla on käytössä bittikarttatyökalut, jotka ovat piirtoalueen vasemmalla puolen.

Vektorikuva koostuu solmuista ja solmuja yhdistävistä viivoista. Vektorikuva on täysin muokattavissa, tosin vektorikuva Scratchissa on yksinkertaistettu eli voit ainoastaan muokata kuvion solmupisteitä. Jos ikkunan alareunassa lukee teksti: Vektoritila, niin tällöin sinulla on käytössä vektorityökalut, jotka ovat piirtoalueen oikealla puolen.

Bittikarttatyökalut
Työkalu	Merkitys
	Sivellintyökalu. Piirtää viivaa vapaalla kädellä, kun hiiren vasen painike on pohjassa. Alavalintana voit valita viivan paksuuden ja viivan värin.
	Viivatyökalu. Piirtää suoran viivan. Viivan piirtäminen alkaa, kun painat hiiren vasemman painikkeen pohjaan ja loppuu kun vapautat hiiren vasemman painikkeen. Alavalintana voit valita viivan paksuuden ja viivan värin.
	Suorakulmiotyökalu. Piirtää suorakulmion tai neliön (SHIFT eli vaihtonäppäin pohjassa). Piirtäminen alkaa, kun painat hiiren vasemman painikkeen pohjaan ja loppuu kun vapautat hiiren vasemman painikkeen. Alavalinnoissa voit valita reunaviivan värin tai viivan paksuuden. Alavalinnoissa voit valita myös pelkän täyttövärin.
	Ellipsityökalu. Piirtää ellipsin tai ympyrän (SHIFT eli vaihtonäppäin pohjassa). Piirtäminen alkaa, kun painat hiiren vasemman painikkeen pohjaan ja loppuu kun vapautat hiiren vasemman painikkeen. Alavalinnoissa voit valita reunaviivan värin tai viivan paksuuden. Alavalinnoissa voit valita myös pelkän täyttövärin.
	Tekstityökalu. Luo tekstilaatikon, jonka sisälle voi kirjoittaa. Alavalintana voit valita tekstin ulkoasun eli fontin ja tekstin värin. Voit suurentaa tekstin kokoa heti kirjoittamisen jälkeen venyttämällä hiirellä vetämällä tekstilaatikkoa nurkasta suuremmaksi.
	Täyttötyökalu. Täyttää suljetun alueen valitulla värillä. Väri lisätään hiirellä napsauttamalla kuvion päällä. Alavalintana voit lisätä suljettuun kuvioon liukuvärin, joka muodostetaan kahden valitun värin avulla.
	Pyyhekumi. Poistaa piirroksen kumittamalla. Kumitus toiminto on käytössä, kun hiiren vasen painike on pohjassa. Kumituksessa piirretty kuvio muuttuu läpinäkyväksi. Neliöistä koostuva ruudukko piirroskuvion taustalla tarkoittaa läpinäkyvyyttä. Jos haluat tyhjentää nopeasti koko työpöydän, napsauta Puhdista-painiketta.
	Valitse -työkalu. Kuvio tai osa siitä valitaan piirtämällä suorakulmion muotoinen valinta piirroksen päälle. Valitun kuvion voit siirtää uuteen paikkaan hiirellä raahaamalla, voit suurentaa kuvion kokoa valinnan reunoilla olevista neliön muotoista kahvoista ja voit pyörittää kuviota ympyränmuotoisesta kahvasta.
	Taustan poistotyökalu. Piirrä työkalulla ensin suljettu alue, jos et halua poistaa taustaa. Jos jatkat piirtämistä, niin se alue joka säästetään kasvaa. Kun valitset jonkin muun työkalun hiirellä napsauttamalla, niin se alue jota ei ole valittu poistetaan kuvasta.
	Monistustyökalu. Valitse alue piirtämällä sen päälle suorakulmio. Tämä alue monistetaan. Monistetun kuvion voit siirtää uuteen paikkaan hiirellä raahaamalla, voit suurentaa kuvion kokoa valinnan reunoilla olevista neliön muotoista kahvoista ja voit pyörittää kuviota ympyränmuotoisesta kahvasta. Kun poistut monistetusta alueesta, niin monistettu kuvio siirtyy taustaan.

Vektorigrafiikkatyökalut
Työkalu	Merkitys
	Valintatyökalu. Työkalulla voit valita piirretyn vektorikuvion ja nostaa hiirellä raahaamalla kuvion uuteen paikkaan. Työkalulla voit lisäksi suurentaa kuviota tarttumalla hiirellä neliönmuotoisista kahvoista ja pyörittää kuviota tarttumalla ympyränmuotoiseen kahvaan.
	Uudelleen hahmota -työkalu. Voit tarttua hiirellä kuvion solmupisteisiin ja nostaa niitä hiirellä raahaamalla uuteen paikkaan. Jos tartut solmujen väliseen viivaan, niin tällöin luodaan uusi solmupiste. Jos napsautat kerran hiirellä solmupistettä, niin se poistetaan.
	Kynätyökalu. Piirtää viivaa vapaalla kädellä, kun hiiren vasen painike on pohjassa. Alavalintana voit valita viivan paksuuden ja viivan värin.
	Viivatyökalu. Piirtää suoran viivan. Viivan piirtäminen alkaa, kun painat hiiren vasemman painikkeen pohjaan ja loppuu kun vapautat hiiren vasemman painikkeen. Alavalintana voit valita viivan paksuuden ja viivan värin.
	Suorakulmiotyökalu. Piirtää suorakulmion tai neliön (SHIFT eli vaihtonäppäin pohjassa). Piirtäminen alkaa, kun painat hiiren vasemman painikkeen pohjaan ja loppuu kun vapautat hiiren vasemman painikkeen. Alavalinnoissa voit valita reunaviivan värin tai viivan paksuuden. Alavalinnoissa voit valita myös pelkän täyttövärin.
	Ellipsityökalu. Piirtää ellipsin tai ympyrän (SHIFT eli vaihtonäppäin pohjassa). Piirtäminen alkaa, kun painat hiiren vasemman painikkeen pohjaan, ja loppuu, kun vapautat hiiren vasemman painikkeen. Alavalinnoissa voit valita reunaviivan värin tai viivan paksuuden. Alavalinnoissa voit valita myös pelkän täyttövärin.
	Tekstityökalu. Luo tekstilaatikon, jonka sisälle voi kirjoittaa. Alavalintana voit valita tekstin ulkoasun eli fontin ja tekstin värin. Voit suurentaa tekstin kokoa heti kirjoittamisen jälkeen venyttämällä hiirellä vetämällä tekstilaatikkoa nurkasta suuremmaksi.
	Täyttötyökalu. Täyttää valitun alueen valitulla värillä. Huomaa, että kuvio pitää ensin valita valintatyökalulla. Väri lisätään hiirellä napsauttamalla kuvion päällä. Alavalintana voit lisätä suljettuun kuvioon liukuvärin, joka muodostetaan kahden valitun värin avulla.
	Monistustyökalu. Monistettava kuvio pitää ensin valita valintatyökalulla. Valittu kuvio monistetaan. Monistetun kuvion voit siirtää uuteen paikkaan hiirellä raahaamalla, voit suurentaa kuvion kokoa valinnan reunoilla olevista neliön muotoista kahvoista ja voit pyörittää kuviota ympyränmuotoisesta kahvasta. Kun poistut monistetusta alueesta, niin monistettu kuvio siirtyy taustaan.
	Tuo eteen. Komento siirtää valitun kuvion päällimmäiseksi. Huomaa, että tämä työkalu näkyy vain, kun piirroskuvio on valittu valintatyökalulla tai olet piirtämässä uutta kuviota.
	Vie taakse. Komento siirtää valitun kuvion takimmaiseksi. Huomaa, että tämä työkalu näkyy vain, kun piirroskuvio on valittu valintatyökalulla tai olet piirtämässä uutta kuviota.

Kuten huomaat, piirtotyökalut ovat osittain samoja sekä bittikarttatilassa, että vektorigrafiikkatilassa. Piirtämisvaiheessa et huomaa eroa, mutta kun haluat muokata jo piirrettyä kuviota, niin vektorigrafiikkatilassa se onnistuu helposti uudelleen hahmota -työkalulla. Bittikarttakuvassa voit lähinnä poistaa kuvion kumittamalla ja piirtämällä kuvion uudestaan.

Esimerkki: Lehden piirtäminen bittigrafiikkatyökaluilla

Valitse ellipsityökalu ja piirrä ellipsi.
Rajaa valitse-työkalulla ellipsi piirtämällä kuvion ympärille suorakulmiovalinta.
Nosta hiirellä raahaamalla kuvion kopio hieman oikealle. Kuvittele, että kahden kuvion yhteisestä alasta voisi tulla lehti.
Valitse täyttötyökalu napsauttamalla työkalua hiirellä.
Valitse ensin tumma väri.
Käännä edusta- ja taustavärit toisinpäin napsauttamalla väriruutua hiirellä.
Valitse seuraavaksi vaalea väri.
Valitse lineaarinen liukuväri alavalinnasta.
Napsauta hiirellä kahden kuvion keskellä olevaa tyhjää kohtaa ja liukuväri siirtyy siihen.
Valitse pyyhekumityökalu ja kumita ylimääräiset viivat pois.

Kukan terälehden voit myös piirtää vektorigrafiikkatyökaluilla. Piirtäminen tapahtuu seuraavasti.

Valitse ellipsityökalu ja piirrä ellipsi.
Valitse Uudelleen hahmota -työkalu ja siirrä solmupisteitä, kunnes haluttu muoto löytyy. Mitä tiheämmässä ovat solmupisteet, sitä terävämpi on nurkkapiste. Tarvittaessa lisää solmupisteitä, kun piirrät terävän nurkan. Kaareva nurkka saadaan, kun solmupisteet ovat harvassa.
Lopuksi valitse täyttötyökalu ja lisää väri samalla tavalla kuin edellisessä ohjeessa.

Kun kukan terälehti on valmis, on hahmomme valmis. Hahmolle pitää vielä kertoa, mikä on hahmon keskipiste. Kun pyöritämme kuviota, niin pyöritys tapahtuu tämän keskipisteen suhteen, siksi asetamme terälehden keskipisteen keskelle alas.

Valitse: Aseta asusteen keskipiste -työkalu napsauttamalla sitä kerran hiirellä.
Nyt työpöydälle ilmestyy kaksi viivaa. Napsauta yhden kerran hiirellä kukan keskikohdassa alareunassa. Olet nyt asettanut kukan terälehdelle keskipisteen.

Kun menet takaisin Scriptit-välilehdelle ja lisäät piirtämääsi hahmoon koodin.

Niin havaitsemme, että valitsemasi kukan keskikohta on origossa.

Kuinka tästä saadaan kukkakuvio? Lisätään piirtämäämme hahmoon seuraava koodi.

Tässä tuli uusi komento "leimaa", joka piirtää hahmosta kopion työpöydälle. Yhteensä teemme hahmosta 10 kopiota 36 asteen välein eli yhteensä pyörähdämme täyden ympyrän eli 10 ∙ 36° = 360°. Lopputuloksen pitäisi näyttää esimerkiksi tältä.

Painonappi

Tehdään ohjelma, jossa on painonappi, joka muuttaa väriä, kun hiiri viedään painonapin päälle. Luodaan uusi hahmo ja piirretään hahmolle kaksi asustetta. Toinen asusteista on erivärinen painonappi kuin toinen.

Käytä piirtämiseen vektorigrafiikkatyökaluja ja piirrä painonappi kahdesta erivärisestä suorakulmiosta. Lisää painonapin päälle tekstiä. Painonappi voisi näyttää esimerkiksi tältä.
Vie nyt hiiri listassa olevan asusteen päälle ja paina hiiren oikeaa painiketta asusteen päällä, jolloin aukeaa valikko. Valitse valikosta komento: Kopioi.
Tällöin ilmestyy kopio asusteesta, jonka Scratch automaattisesti nimeää asuste2:ksi.
Muuta asuste2:n väri toiseksi täyttötyökalulla. Olet nyt luonut yhden hahmon, jolla on kaksi asustetta.
Kohdista lopuksi molempiin hahmoihin sama keskipiste. Valitse ensin hahmo ensimmäinen asuste listasta, valitse: Aseta asusteen keskipiste – työkalu ja napsauta hiirellä esimerkiksi painonapin vasemmassa alareunassa. Tee samalla tavalla myös toiselle asusteelle.
Mene seuraavaksi Scriptit-osioon ja lisää piirtämäämme hahmoon eli painonappiin seuraava koodi.

Kun lisäämme ikuisen silmukan sisälle jos-lauseen, jonka ehto täyttyy, kun hiiri on hahmon päällä ja hiiren painiketta on painettu. Kun molemmat ehdot täyttyvät, niin tällöin vaihdetaan hahmon asuste 2:ksi. Mikäli molemmat ehdot eivät täyty, niin silloin palautetaan asuste 1:n.

Voit testata koodin toimivuuden eli napsauta hiirellä painonapin päälle, kun olet käynnistänyt ohjelman lipusta. Asusteen pitäisi nyt vaihtua.

Lisätään painonappiin toiminto, joka piirtää kukan. Tällöin painonapin on lähetettävä tieto piirtämisestä kukan terälehdelle. Tämä tieto on nimeltään viesti. Tapahtumat ryhmästä löytyy komento: lähetä: viesti1.

Lisää tämä komento painonapin koodiin siihen kohtaan, jossa jos -lauseen ehto täyttyy.

Mene seuraavaksi kukan terälehdelle ja lisää sinne seuraavat koodit.

Ensimmäinen koodi, kun klikataan lippua laittaa alussa terälehden piiloon ja tyhjentää ruudun. Tämä komento suoritetaan vain kerran heti kun ajamme ohjelman napsauttamalla vihreää lippua. Toinen koodi piirtää kukan, kun vastaanotan viesti1:n. Kukka siis piirretään vasta, kun viesti1 on tullut terälehti-hahmolle, ja viesti tulee aina, kun napsautetaan painonappia.

Ohjelman pitäisi nyt toimia seuraavasti. Alussa näkyy vain painonappi.

Mutta heti kun napsautat painonappia, niin painonapin väri muuttuu ja samalla piirretään kukka.

Esimerkki: Hahmon käveleminen

Asusteita voi kätevästi vaihtaa komennolla: seuraava asuste. Kun laitetaan silmukan sisälle asusteen vaihto komento ja liikkumiskomento, niin hahmo saadaan kävelemään reunasta reunaa. Jos kävely tapahtuu mielestäsi liian nopeasti, voit vielä lisätä silmukan sisälle komennon: odota x sekuntia. Sopiva ajan arvo löytyy kokeilemalla.

Myös seuraava rakenne on toimiva. Pieni viive on välttämätön asusteiden välissä.

Jos haluat liikkua vasemmalle, niin silloin tarvitset kaksi asustetta lisää. Myös aloituskohta muuttuu ja askel muuttuu negatiiviseksi.