Processing
Processing ohjelmointi
Ohjelmointi on tullut mukaan peruskoulun opetussuunnitelmaan. Ohjelmointia on tarkoitus opettaa esimerkiksi matematiikan oppisisällöissä. Yläkoulussa pitäisi käydä jotain oikeaa ohjelmointikieltä. Käytännössä tämä tarkoittaa tekstipohjaisen ohjelmointikielen valintaa. Vaihtoehtoja on monia. Haastavinta ohjelmointikielen valinta on niille opettajille, joilla kokemusta ohjelmoinnista on hyvin vähän. Opettajilla, jotka ovat pitäneet valinnaisaineen kursseja ohjelmoinnista, ei ohjelmointikielen valinta tuota ongelmia. Tärkeintä ohjelmointikielen valinnassa on se, että opettaja hallitsee opetettavasta ohjelmointikielestä perusteet ja on siitä innostunut, koska se innostus helposti tarttuu oppilaisiin. Kaikilla ohjelmointikielillä voi ohjelmoinnin perusasiat opettaa ja ohjelmointikielen vaihtaminen ei tällöin ole välttämätöntä.
Aikaisempaa kokemusta minulla on HTML, Pascal, C++, Java, PHP, JavaScript ja Delphi-ohjelmoinnista. Mutta itse valitsin yläkoulussa opetettavaksi ohjelmointikieleksi kuitenkin Processing-ohjelmoinnin. Haluan tässä perustella miksi minä innostuin Processing-ohjelmoinnista.
Vaikka ohjelmointi on mukana matematiikan oppisisällöissä, niin mielestäni se ei poista tarvetta ohjelmoinnin opettamiseen omana oppiaineena. Ohjelmoinnista toki saadaan mainio työkalu matematiikan tunnille. Processing-ohjelmointikieli sopii täydellisesti matematiikan tunnille, koska matemaattisten ilmiöiden havainnollistaminen sillä on helppoa.
Simulaatio, joka havainnolistaa grafiikka-komentoja Processing-ohjelmoinnissa (Toimii parhaiten Google Cromella).
1) Processing-ohjelmointikieli on ilmainen.
Jos koulussa investoidaan, niin usein käytetään ns. investointirahaa. Nämä investoinnit ovat yleensä harvakseltaan ja siinä mielessä maksullisten ohjelmien käyttö on ongelmallista, koska ne menevät silloin vuosittaisista käyttömenoista. Käytetään sitä rahaa mieluummin laadukkaan oppikirjan/oppimateriaalin hankintaan. Processing ohjelmointikieli on ilmainen ja sitä päivitetään aktiivisesti.
2) Processing-ohjelmointikieli on laitteistoriippumaton.
Ohjelmointikielestä löytyy PC, Linux ja Mac-versiot. Lisäksi löytyy omat sovelmat iPAD:lle, iPhonelle ja Adroid-tabletille. Tämä on tärkeää, jotta ohjelmointia voi harrastaa millä tahansa koulun hankkimalla laitteella. Tämä laitteistoriippumattomuus mahdollistaa myös oppilaan omien laitteiden käytön. Vaikka opettaja vaihtaisi koulua, niin ohjelmointiympäristö pysyy samana.
3) Processing on opetuskieli
Processing-ohjelmointikieli on ns. opetuskieli, joka alunperin on tehty taiteilijoille, siksi komennot ovat yksinkertaisia ja selkeitä. Ohjelmointikielessä on selkeä pääohjelma, johon komennot kirjoitetaan. Pääohjelma eli void draw ()-lohko on ikuisessa silmukassa, joten vuorovaiktuksen luonti on helppoa. Esimerkiksi ympyrän arvonta satunnaisesti onnistuu komennolla: ellipse(random(400), random(400),10,10); tai ympyrän hiiriohjaus onnistuu komennolla: ellipse(mouseX,mouseY,10,10); Ohjelmointikielessä on yhtenevyyksiä esimerkiksi Java-kielen kanssa, mutta Processing-kielessä ei ole Java:n rasitteita. Processing-kielessä moottorina (taustalla) voi toimia Java-kääntäjä, JavaScript-kääntäjä tai Python-kääntäjä. Itse asiassa Processing-kielen syntaksi on lähellä Scratch:iä, joten se on hyvä jatkumo, jos alakoulussa on käytetty Scratchiä. Alla on esitetty tästä esimerkki.
4) Tulostus xy- koordinaatiostoon
Kaikki tulostus tapahtuu xy- koordinaatistoon, joten se on lähtökohtaisesti täydellinen ohjelmointikieli matematiikan tunnille. Myös matematiikan xy- koordinaatisto on helposti saavutettavissa. Monessa muussa kielessä on ensin ladattava erityinen matikkakirjasto. Näissä tapauksissa voi helposti tulla vastaan se, että se ei toimi kaikilla laitteilla. Processing-ohjelmoinnissa on lisäksi 3D ympäristö eli xyz- koordinaatisto.
5) Selkeät grafiikka-komennot & hiirituki
Oppilaat tykkäävät sellaisista ohjelmointikielistä joissa on hyvät grafiikka-komennot. Processing-ohjelmointikielestä löytyy omat komennot: pisteelle, viivalle, tekstille, suorakulmiolle, ellipsille, kolmiolle, nelikulmiolle, monikulmiolle ja sektorille. Myös Bezier-käyrät saa piirrettyä. Jolloin voidaan piirtää komentojen avulla käytännössä mitä tahansa. Lisäksi ohjelma tukee hiirtä syöttölaitteena, niin vuorovaikutuksen luominen on helppoa. Mitään erillisiä kirjastoja ei tarvitse ladata, vaan kaikki on jo valmiiksi sisään rakennettuna. Hiirituki mahdollistaa esimerkiksi simulaatioiden tai pelien tekemisen, jolloin piirroshahmot heräävät henkiin. Hiirituki on silloin erityisen tärkeä, jos ohjelmointia tehdään iPAD:lla.
6) Matematiikan havainnolistaminen on helppoa
Koska Processing-ohjelmointikielessä on samanlaiset laskuoperaattorit (+, - , *, /) kuin esimerkiksi Excel-taulukkolaskentaohjelmassa ja hyvä tietotyypitys (int, float, String, char, boolean), niin matematiikan laskukaavojen tuottaminen on helppoa ja yhtenevää matematiikan kanssa. Kun vielä lisäksi käytössä on xy-koordinaatisto, niin kaikki matemaattiset asiat voi Processing-ohjelmoinilla havainnollistaa myös kuvin, käytännössä Processing-ohjelmoinnilla voisi korvata jopa Geogebran matematiikan havainollistajana. Ohjelman tulostus tukee myös unicode-merkkejä, joten matemaattisten merkkien tulostaminen on myös mahdollista, esimerkiksi kertomerkki on unicode-merkki: \u00B7. Alla on tästä esimerkki eli ohjelma, joka tulostaa kuuden kertotaulun.
7) Ohjelman julkaisu netissä
Kaikki ohjelmat, jotka on tehty Processing-ohjelmointikielellä, voidaan julkaista Internetissä. Julkaisu onnistuu sekä Java-, että JavaScipt-versiona. Julkaisu onnistuu PC-versiossa komennolla File | Export Application. Tämän jälkeen pitää olla vain internet-palvelin, jonne ohjelman tekemät tiedostot siirretään ftp-ohjelmalla.
8) Animaatiot
Ohjelmassa on saveFrame()-komento, joka mahdollistaa tulostusikkunan sisällön tallentamisen valokuvaksi. Kun tähän lisätään laskuri, niin ohjelma voi automaattisesti tallentaa useita kuvia peräkkäin. Näistä kuvista on helppo koostaa esimerkiksi GIMP-ohjelman avulla animaatio. Tämä tuo lisäarvoa oppilaiden omien tuotosten (kuva tai animaatio) julkaisuun Internetissä.
Kuvassa on havainnoillistettu xyz-koordinaatiston pyöritystä komennolla: rotateX(radians(kulma)); , missä kulma on ns. laskuri-muuttuja.
9) Peli-ohjelmointi
Koska Processing-ohjelmointi tukee näppäimistöä ja hiirtä, sekä lisäksi Processing-ohjelmointi mahdollistaa kuvien lataamisen ohjelmaan, niin tällöin se myös mahdollistaa pelien tekemisen. Pelin piirroshahmot voidaan piirtää esimerkiksi Inkscape-ohjelmalla ja itse peli koostaa processing-ohjelmalla. Pelin voi jopa julkaista internetissä ja pelata selaimella. Yleensä oppilaat kysyvät jo eka tunnilla, että voiko tällä ohjelmointikielellä tehdä pelejä. Vastaus on, että kyllä voi. Matematiikan tunnilla pelejä ei keritä tekemään, mutta onneksi oppimista tapahtuu myös oppituntien ulkopuolella, joten lahjakkaille myös riittää omatoimsita tekemistä. Toinen sovellusalue tähän voisi olla omien simulaatioiden tekeminen.
10) Hyvä laajennettavuus
Processing-ohjelmointikielelle on myös saatavana erilaisia kirjastoja, joita voi käyttää ohjelmoinnin apuna omissa projekteissa. Lisäksi Processing-ohjelmoinista löytyy kytkökset Java-, JavaScript- ja Python-kieleen, joten uuden kielen opettelu Processing-kielen jälkeen on helppoa. Myös kuvan, videon ja äänen editointi onnistuu, samoin robottien ohjaus porttien kautta. Arduino-ohjelmointi on hyvä esimerkki Processing-kielen laajennettavuudesta.
Processing-ohjelmoinnista löytyy kytkökset Javaan, JavaScriptiin ja Pythoniin, niin siitä on helppo jatkaa eteenpäin toiseen ohjelmointikieleen tarvittaessa. Vaikka Java on tällä hetkellä suosituin ohjelmointikieli, joka johtuu lähinnä siitä että Android-ohjelmia kirjoitetaan Javalla, niin tulevaisuudessa Javan suosio tulee vähenemään. JavaScript/HTML5 ohjelmointi on korvannut Javaa paremman yhteensopivuuden takia. Joka korvaa myös Flashin ja Silverlightin yms. blug-in sovellukset. JavaScript oli alussa hepponen ohjelmointiympäristö, mutta Google Crome toi JavaScriptin uuteen kukoistukseen. JavaScriptiin löytyy lisäksi paljon kirjastoja, joilla ohjelmointia voi helposti syventää ja laajentaa. Esimerkiksi p5.js ohjelmointi tekee JavaScript ohjelmoinnista helppoa, joka on Processing-ohjelmoinnin JavaScript-versio. Lisäksi monet graafiset ohjelmointiympäristöt, esim Scartch 3 ja Blocky (micro:bit) on kirjoitettu JavaScriptillä.
Tulevaisuus on Pythonin, koska siitä on tullut ilmaisohjelmointiympäristöjen standardi. Periaatteessa Python on vain tekstipohjainen ohjelmointiympäristö (konsoli-ikkuna). Mutta koska Python-kääntäjä on pieni, niin se on samalla tehokas. Siksi sitä käytetään esimerkiksi yliopistoissa, joissa tarvitaan tehokas laskentatyökalu. Myös Python-koodi on selkeää, joka selittää sen suosion. Aikaisemmin, kun tuli uusi tarve, niin kehitettiin uusi ohjelmointikieli. Python muuttaa tätä ajattelumallia, ei tarvitse kehittää uutta ohjelmointikieltä, vaan kehitetään vain uusi kirjasto tai lisäosa. Python taipuu vaikka mihin. Tulevaisuudessa Python pyörii myös selaimessa, joten tämä johtaa siihen, että tulevaisuudessa ohjelmointikielten lukumäärä tulee vähenemään. Jos kysytään, että mitä ohjelmointikieltä kannattaisi opetella, niin vastaus on JavaScript ja Python. Processing for Python ympäristö yhdistää Pythoin ja Javan, niin se olisi hauska ja graafinen ympäristö tutustua näihin molempiin kieliin. Grafiikan ohjelmoiminen on hauska tapa aloittaa ohjelmointi.
Jos mietitään ohjelmointipolkua, niin tutustuminen ohjelmointiin kannattaa aloittaa graafisista-ohjelmointiympäristöistä (esim. Scratch), koska se kehittää ohjelmallista ajattelua. Siinä pääasiassa on kokeilu ja looginen päättely. Kun siirrytään tekstipohjaisiin ympäristöihin, niin Processing, P5.js tai Processing for Python on graafinen, luova ja helppo tapa tutustua tekstipohjaiseen ohjelmointiin antaen samalla pohjan Javalle ja javaScriptille. Tämän jälkeen kannattaa opiskella JavaScriptiä ja Pythonia, joilla pärjää jo työelämässäkin.
Esimerkki: Heittoliike
Laskukaavoihin perustuvia fysikaalisia ilmiöitä ei kannata animoida piirtämällä koska löytyy parempia ja nopeampia tapoja tehdä animaatiota. Tässä on esimerkki koodista, jolla voi tutkia millä kulmalla saadaan pisin lentorata. Koodi on kirjoitettu Proccesing-ohjelmointikielellä, jossa on yksinkertainen rakenne eli on se helppo oppia. Lisäksi ohjelmointikieli sisältää hyvät grafiikkakomennot eli on visuaalinen ohjelmointikieli. Tulostus on sidottu koordinaatistoon eli siinä mielessäon ihanteellinen ohjelmointikieli matematiikan tunnille. Processing-ohjelmointia kannattaa mielestäni käyttää peruskoulusta lukioon ongelmien ratkaisun apuna. Muutaman vuoden päästä myös lukiossa on sukupoli, joka jo osaa ohjelmoinnin perusteet ja silloin on luonnollista ratkaista matemaattisia ja fysikaalisia ongelmia ohjelmoimalla. Processing-ohjelmasta löytyy PC-version lisäksi myös apsit iPAD:lle ja Android tabletille eli mahdollistaa koulussa myös omien laitteiden käytön.
Lopputulos näyttää tältä.
Processing ohjelmassa on myös komento saveFrame("nimi.png"); jolla animaatio voidaan muuttaa kuviksi suoraan ohjelmassa. Käyttämällä laskuria tallennusnimessä saadaan kuvat numerojärjestykseen.
Olen tekemässä ohjelmointimateriaalia Processing-ohjelmoinnista yläkoululaisille. Katso näytekirja 7. luokan materiaalista tästä linkistä:
https://peda.net/oppimateriaalit/e-oppi/näytekirjat/ylakoulu/ohjelmointi
Ohjelmointiyylejä
size(600,600); background(255); fill(0); textSize(30); int a = 2; int b = 5; int summa = a+b; int erotus = a-b; text(summa,50,100); text(erotus,50,150);Vastaava ohjelma funktionaalisella ohjelmointiyylillä on seuraava.
void setup() {
size(600,600);
}
void draw() {
alkuarvot();
text(summa(2,5),50,100);
text(erotus(2,5),50,150);
}
void alkuarvot() {
fill(0);
textSize(30);
background(255);
}
int summa(int a, int b) {
int tulos = a+b;
return tulos;
}
int erotus(int a, int b) {
int tulos = a-b;
return tulos;
}
Ja vielä sama esimerkki olio-ohjelmoinnilla olisi seuraavanlainen.Laske uusiLasku;
void setup() {
size(600,600);
fill(0);
textSize(30);
uusiLasku = new Laske(2,5);
}
void draw() {
background(255);
text(uusiLasku.summa(),50,100);
text(uusiLasku.erotus(),50,150);
}
class Laske {
int luku1;
int luku2;
Laske (int a, int b) {
luku1 = a;
luku2 = b;
}
int summa(){
int tulos = luku1+luku2;
return tulos;
}
int erotus() {
int tulos = luku1-luku2;
return tulos;
}
}
Mielestäni on hyvä asia, jos voi tutustua eri ohjelmointityyleihin samalla ohjelmointikielllä. Siksi Processing-kieli sopii hyvin opetuskieleksi.Esimerkki: Auto-animaatio
1) Tee seuraava ohjelma Processing-kielessä.
// copywright: TR, 2017
int a = -550; // Laskurin alkuarvo
void setup () {
size(600,600); // Ikkunan koko
strokeWeight(5); // Viivan paksuus
frameRate(10); // Animaation nopeus
}
void draw () {
background(0,100,255); // Sininen taivas
translate(300,300); // Origo ikkunan keskelle
a=a+10; // Laskuri kasvaa, liiku oikealle
fill(50,255,0); // Vihreä täyttöväri
rect(-300,40,600,400); // Maa
auto(a,0); // Piirrä auto paikkaan (a,0)
// Jos auto oikeassa reunassa
if (a > 550) { a = -550; } // Siirrä auto vasempaan reunaan
// saveFrame(a+".png");
// Kun tallennat, niin poista kommentti-merkit
}
void auto(int x,int y) {
pushMatrix(); // Koordinaatisto muistiin
translate(x,y); // Liikuta autoa
fill(255,0,255); // Magneta täyttöväri
beginShape(); // Auton kori
vertex(-200, 0);
vertex(-100, -100);
vertex(50, -100);
vertex(100, 0);
vertex(200, 0);
vertex(220,100);
vertex(-200,100);
endShape(CLOSE); // Lopetetaan auton kori
fill(255,255,0); // Keltainen täyttöväri
beginShape(); // Takaikkuna
vertex(-180, 0);
vertex(-100, -80);
vertex(-80, -80);
vertex(-80, 0);
endShape(CLOSE); // Lopetetaan takaikkuna
beginShape(); // Etuikkuna
vertex(-60, 0);
vertex(-60, -80);
vertex(40, -80);
vertex(80, 0);
endShape(CLOSE); // Lopetetaan etuikkuna
fill(0); // Musta täyttöväri
ellipse(-120,100,100,100); // Takarengas
ellipse(120,100,100,100); // Eturengas
fill(100); // Harmaa täyttöväri
ellipse(-120,100,50,50); // Takarenkaan keskiö
ellipse(120,100,50,50); // Eturenkaan keskiö
popMatrix(); // Koordinaatisto muistista
}
Liikuteltavasta kohteesta kannattaa aina tehdä oma aliohjelmansa, jota on helppo liikutella laskurin avulla. Koko auto liikkuu kerralla translate(x,y); komennolla.
2) Tallenna ohjelma (PC) ja testaa se ensin.
3) Lisää void draw ( )-lohkon loppuun komento: saveFrame(a+".png"); Kun ajat ohjelman, niin animaation ruudut tallennetaan samaan paikkaan kuin on tallennettu ohjelmakin. Kun katsot kansiota, jonne ohjelma on tallennettu, niin sinun pitäisi nähdä automaattisesti tallennetut kuvat.
4) Aukaise GIMP ja avaa kaikki kuvat komennolla: TIEDOSTO | AVAA TASOINA. Painaa SHIFT näppäin pohjaan, niin voit valita kaikki kuvat yhdellä kertaa. Eli napsauta tällöin kerran hiiren vasemmalla painikkeella ensimmäisessä ja viimeisessä kuvassa. Kuvat aukeavat samaan kuvaan kukin eri tasolle. Tarvittaessa ota tallennus GIMP:n omassa tallennusmuodossa.
5) Lopuksi ota komento: TIEDOSTO | EXPORT AS ja anna tiedostolle nimi, esimerkiksi: auto.gif. Huomio: Loppupääte gif- on pakollinen tieto. Kuittaa Vie-painikkeella.
6) Laita ruksi kohtaan: As animation. Aseta tauko ruutujen välissä, esimerkiksi 1000 ms on yksi sekunti. Oikea arvo löytyy kokeilelemalla. Laita kohtaan: Ruutujen poistotapa, jos määrittelemätön: Ruutu per taso (korvaa). Laita lisäksi ruksit kohtiin: Use delay entered above for all frames ja Use disposal entered above for all frames. Paina lopuksi Vie-painiketta.
Koostettu animaatio GIF-muodossa näyttää tältä.
Processing-ohjelmoinnissa voi myös tehdä 3D-animaatioita. Tässä vielä toinen esimerkki Processing-ohjelmoimalla tehdystä animaatiosta.
Esimerkki: Kertolaskupeli (PC-koneille)
Tehdään ohjelma, joka arpoo kaksi kokonaislukua ja kysyy paljonko kertolasku on. Lopuksi ohjelma ilmoittaa, että menikö vastaus oikein vai väärin. Kysymisessä käytämme java:n syöttökenttää ja siksi tämä ohjelma on suunniteltu PC-koneille.
Ohjelman koodi on seuraavanlainen.
// copywright: TR, 2018
import static javax.swing.JOptionPane.*;
void setup () {
size(400,400); // ikkunan koko
fill(0); // Tekstinväri musta
background(255); // Taustaväri valkoinen
textSize(20); // Tekstin koko 20
noLoop(); // void draw ()-lohko suoritetaan vain kerran
}
void draw () {
int luku1 = round(random(1,10));
int luku2 = round(random(1,10));
int vastaus1 = luku1*luku2;
String kysy = showInputDialog("Paljonko on "+luku1+"\u00B7"+luku2+"?");
int vastaus2 = 0;
if (kysy != null) { // Jos kysy ei ole Cancel (= null), niin tee
vastaus2= int(kysy); // konversio merkkijonosta kokonaisluvuksi
}
text(luku1+"\u00B7"+luku2+" = "+vastaus1,20,50);
if (vastaus1 == vastaus2) {
text("Oikein",20,100);
} else {
text("Väärin",20,100);
}
}
Esimerkki: Kertolaskupeli hiiriohjauksella
Suoritetaan allaoleva ohjelma, jossa lukuja voi syöttää painikkeiden avulla. Lisätään myös painikkeet laskutoimituksen tarkistamista ja uuden kertolaskun tarkistamista varten. Kokonainen ohejelma on seuraava.
// TR 8.1.2018 |
Linkkejä Processing ohjelmointiin
- http://write.flossmanuals.net/processing-suomeksi/johdanto/
- https://www.syk.fi/~jhurri/ohjelmointi/
- https://mehackit.org/
- http://learningprocessing.com/examples/
- https://processing.org/examples/
- https://www.openprocessing.org/
- https://www.funprogramming.org/
- http://www.generative-gestaltung.de/2/
- http://www.codingforart.com/category/technical/
- http://thecodingtrain.com/
- http://hello.processing.org/guide/
- https://happycoding.io/tutorials/
- https://timrodenbroeker.de/courses/creative-coding-essentials/
- https://maol.fi/materiaalit/taidetta-ohjelmoimalla/