Scratch

Scratch- ja Processing-ohjelmoinnin vertailua

PÄÄLOHKOT


Jos luomme Scratch-ohjelmassa käynnistyslohkon ja lisäämme siihen ikuisesti silmukan, niin se vastaa Processing- ohjelmoinnissa void draw () - lohkoa. Kun komennot laitetaan ennen ikuisesti silmukkaa, niin se on sama kuin laittaisimme komennot void setup ()-lohkoon.

void setup () {

}

void draw () {

}

 

KOORDINAATISTO



Scratchissa on käytössä koordinaatisto, jossa origo on ikkunan keskellä ja x:n arvot vaihtelevat arvosta -240 arvoon 240 ja arvosta -180 arvoon 180. Samanlainen koordinaatisto saadaan aikaiseksi Processing-kielessä seuraavasti.

void setup () {

     size(480,360);

}



void draw () {

     translate(240,180);

     scale(1,-1);

}

 

HAHMON LATAAMINEN

Scratchissa ohjataan hahmoa koordinaatistossa. Hahmo on oletuksena Scratch-kissa, joka on kuvatiedosto, jonka koko on 100 x 100 px. Processing ohjelmassa kuva voidaan ladata ja asettaa ikkunan keskelle seuraavasti.

PImage kuva;

void setup () {

     size(480,360);  // Koordinaatiston koko

     background(255);  // Taustaväri valkoinen

     kuva = loadImage("kissa.png");  // Lataa kissan kuvan muistiin

}



void draw () {

     translate(240,180);  // Origo ikkunan keskelle

     image(kuva,-50,-50,100,100);  // Näytä 100x100 kokoinen kuva paikassa (-50,-50).

}


Tallenna ensin kissan kuva samaan paikkaan kuin on Processing-ohjelma koodi tallennettu. Ohjelman suoritus näyttää nyt tältä.



Hahmosta voidaan tehdä oma aliohjelmansa. Oletetaan, että meillä on Scratchin mukainen koordinaatisto, niin silloin aliohjelmassa hahmo, joudumme ottamaan peilikuvan hahmosta, koska muutoin kuva piirretään ylösalaisin.

PImage kuva;

int laskuri = 0;

void setup () {

     size(480,360);  // Ikkunan koko

     background(255); // Taustaväri valkoinen

     kuva = loadImage("kissa.png"); // Kuva muistiin

}



void draw () {

     translate(240,180);  // Origo ikkunan keskelle

     scale(1,-1);  // Peilaa y-koordinaatit

     hahmo();  // Piirrä hahmo

}



void hahmo() {

     pushMatrix();  // Koordinaatisto muistiin

     scale(1,-1);  // Peilaa y-koordinaatit

     image(kuva,-50,-50,100,100);  // Näytä kuva

     popMatrix();  // Palauta koordinaatisto

}

 

KOODIN SAMANKALTAISUUS

Tehdään Scratchissa ohjelma, joka piirtää ympyrän silmukan avulla.



Samanlainen ympyrä samalla tekniikalla saadaan aikaiseksi Processing-ohjelmassa seuraavasti.

void setup() {

      size(480,360);  // Koordinaatiston koko

      background(255);  // pyyhi

      fill(0,0,255);  // aseta kynälle väri

      noStroke(); // Piirrä ilman reunaviivaa 

}



void draw () {

      translate(240,60); // mene kohtaan x: y:

      for (int a= 1; a<=360; a++) {  // toista 360 kertaa

           ellipse(0,0,10,10);  // kynä alas, kynän koko 10 

           translate(2,0); // liiku 2 askelta

           rotate(radians(1));  // käänny 1 aste 

      }

}

Huomataan selkeä samankaltaisuus. Nyt tulostuu seuraavaa.

Scratch-funktiot Processing-ohjelmalle

Tehdään tavallisimmista Scratchin komennoista omat aliohjelmat Processing-kieleen, jolloin niitä voi kutsua void draw ()-lohkosta. Sinulla on käytössä seuraavat aliohjelmat.

ALIOHJELMAKUVAUS
koordinaatisto(); Komento asettaa Scratchin xy-koordinaatiston. Voit kuitenkin halutessasi kasvattaa koordinaatiston kokoa muuttamalla lukuarvoa size(x,y)-komennossa (void setup ()-lohko).
hahmo(); Tässä hahmo on kissan kuva (kissa.png), joka pitää tallentaa samaan paikkaan kuin olet tallentanut Processing-ohjelman. Kuvan lataus toimii vain PC:llä. Mikäli käytät iPadia, niin korvaa image()-komento piirtokomennoilla. Siinä tapauksessa poista myös kuvan lataus komento: loadImage() void setup()-lohkossa.
vasemmalle(kulma); Komennolla voidaan pyörittää hahmoa vastapäivään eli vasemmalle kulman verran.
oikealle(kulma); Komennolla voidaan pyörittää hahmoa myötäpäivään eli oikealle kulman verran.
liiku(askel); Komennolla edetään askeleen verran eteenpäin. Negatiivisilla arvoilla edetään taaksepäin.
mene_kohtaan(x,y); Komennolla mennään koordinaatistossa kohtaan (x, y).
osoita_suuntaan(kulma); Komento kääntää oletussuunnan osoittamaan kohti kulmaa.
osoita_kohti(); Komennolla käännetään kulma kohti hiirtä.
mene(); Komennolla mennään hiiren paikkaan (x, y).
kynan_vari(R,G,B); Komennolla asetetaan kynän väri. R (punainen), G (vihreä) ja B (sininen) voivat saada arvoja väliltä 0...255. Oletusväri ohjelmassa on punainen.
kynan_paksuus(koko); Komennolla voidaan asettaa kynän paksuus. Oletuspaksuus ohjelmassa on 2.
kyna_ylos(); Komennolla voidaan nostaa kynä ylös. Tämä on myös ohjelman oletusarvo.
kyna_alas(); Komennolla voidaan asettaa kynä alas. Jolloin saadaan esille kynän piirtojälki.
nayta(); Komento piilottaa hahmon näkyvistä.
piilota(); Komento tuo esille hahmon. Tämä on ohjelman oletusarvo.

Esitetään seuraavaksi kokonainen ohjelma, joka sisältää yllä olevat aliohjelmat. Kopioi se kokonaisuudessaan Processing-ohjelmointiympäristöön, tee lisäyksiä ainoastaan void draw ()-lohkoon ja suorita ohjelma. Huomaa, että käytämme tässä kuvatiedostoa, jolloin se on tallennettava samaan kansioon kuin olet tallentanut koodinkin. Siksi tämä ohjelma toimii sellaisenaan vain PC:llä. iPad-käyttäjät joutuvat muuttamaan hahmo()- koodin siten, että siinä käytetään Processing-ohjelman piirtokomentoja. Hahmo voi tällöin olla esimerkiksi hymynaama.

Scratch-funktiot ohjelman koodi

// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017

PImage kuva;

int x; // Muuttuja origolle

int y;  // Muuttuja origolle

int x2;

int y2;

boolean kyna=false; // Oletuksena on, että kynä ei piirrä

boolean olio = true;  // Oletuksena on, että hahmo näkyy



void setup () {

     size(480,360); // Voit halitessasi muuttaa tätä

     x = width/2;  // Origo puolet ikkunan leveydestä

     y = height/2;  // Origo puolet ikkunan korkeudesta

     background(255);  // Taustaväri valkoinen

     kuva = loadImage("kissa.png"); // Lataa kissan kuva

     frameRate(20);  // Ikkunan päivitysnopeus

     stroke(255,0,0); // Punainen väri oletuksena

     strokeweight(2); Viivan paksuus 2 oletuksena

}



void draw () {

     koordinaatisto();  // Älä poista tätä

     // Laita tähän omat komennot     

     hahmo();  // Piirrä hahmo  

}


void koordinaatisto() {

     x2 = 0;

     y2 = 0;

     translate(x,y);

     scale(1,-1);

     if (kyna == false) {

         background(255);

     }

}



void hahmo() {

     if (olio == true) {

         pushMatrix();

         scale(1,-1);

         image(kuva,-50,-50,100,100);

         popMatrix();

     } 

}



void vasemmalle(int kulma) {

      rotate(radians(kulma)); 

}



void oikealle(int kulma) {

      rotate(radians(-kulma)); 

}

void liiku(int askel) {

      if (kyna == true) {

          line(0,0,askel,0);

      }

      translate(askel,0);

}



void mene_kohtaan(int a, int b) {

     translate(-x2,-y2);

     if (kyna == true) {

         line(x2,y2,a,b);

     }

     translate(a,b);

     x2 = a;

     y2 = b;

}



void osoita_suuntaan(int d) {

     rotate(radians(d));

}



void osoita_kohti() {

     float kulma = degrees(atan2(mouseX-x,mouseY-y)); 

     rotate(radians(-90+kulma)); 

}



void mene() {

     if (kyna == true) {

         line(pmouseX-x,-pmouseY+y,mouseX-x,-mouseY+y);

     }

     translate(mouseX-x,-mouseY+y);

     x = mouseX;

     y = mouseY; 

}



void kynan_vari(int r, int g, int b) {

     fill(r,g,b);

     stroke(r,g,b);

}



void kynan_paksuus(int p) {

     strokeWeight(p);

}



void kyna_alas() {

     kyna = true;

}

void kyna_ylos() {

     kyna = false;

}

void piilota() {

     olio = false;

}

void nayta() {

     olio = true;

}

Processing-kissan kuva

Kun tallennat kuvan niin napsauta ensin kissa.png linkkiä ja paina sen jälkeen kuvan päällä hiiren oikeaa painiketta ja avautuvasta valikosta valitse: Tallenna kuva nimellä. Kun ohjelma kysyy tallennuspaikkaa, niin se tallennetaan samaan paikkaan kuin on Processing-ohjelmassa tallennettu ohjelman koodi. Voit käyttää tätä kuvaa PC-koneilla.
kissa.png 7.4 kt

Hahmo iPad-tabletille

Jos käytät IPadia, niin korvaa aliohjelma hahmo() seuraavalla koodilla.

 void hahmo() {

      if (olio == true) {

           pushMatrix(); // Koordinaatisto muistiin

           scale(0.5); // Skaalaa kuvio pienemmäksi

           scale(1,-1);

           stroke(0);

           fill(200,100,50); // Ruskea väri

           ellipse(0,0,200,200); // Taakse tuleva ympyrä

           fill(100,200,200); // Sininen väri

           ellipse(-25,-25,40,80); // Vasen silmä

           ellipse(25,-25,40,80); // Oikea Silmä

           fill(0); // Musta väri

           ellipse(-25,0,20,20); // Silmän mustuainen, vasen

           ellipse(25,0,20,20); // Silnän mustuainen, oikea

           fill(255,0,0); // Punainen väri

           arc(0,50,100,50,radians(0),radians(180),PIE); // Suu

           popMatrix(); // Palauta muistissa oleva koordinaatisto

           stroke(0,0,255); // Oletusväri takaisin.
     }

}


Lisäksi poista ensimmäiseltä riviltä komento: PImage kuva;
ja void setup()-lohkosta komento: kuva = loadImage("kissa.png");
Koska iPadilla et voi tallentaa kuvaa samaan paikaan kuin koodi on tallennettu, niin silloin kuva-koodit pitää poistaa ja korvata piirto-komennoilla luodulla hahmolla.

Esimerkkejä funktioiden käytöstä

Käydään tässä muutamia tavallisempia Scratchin funktioita ja esitetään niille vastaavuus Processing-ohjelmassa.



Liiku-komento siirtää hahmoa askeleen verran eteenpäin. Voit käyttää komentoa esimerkiksi seuraavasti.

void draw () {

     koordinaatisto();

     liiku(100);

     hahmo();

}

Jos haluat nähdä vain kuljetun reitin, voit kokeilla seuraavaa.

void draw () {

     koordinaatisto();

     kyna_alas();

     liiku(100);

}

Hahmon voi myös poistaa näkyvistä käyttämällä komentoa piilota();



Kääntyminen myötäpäivään onnistuu oikealle(kulma)-funktiolla. Jos haluat piirtää esimerkiksi neliön, niin se onnistuu seuraavalla komentosarjalla.

void draw () {

 koordinaatisto();

 kyna_alas();

 liiku(100);

 oikealle(90);

 liiku(100);

 oikealle(90);

 liiku(100);

 oikealle(90);

 liiku(100);

}



Vastaavasti kääntyminen vastapäivään onnistuu vasemmalle(kulma)-funktiolla. Jos haluat piirtää tasasivuisen kolmion, niin se onnistuu seuraavalla komentosarjalla.

void draw () {

     koordinaatisto();

     kyna_alas();

     liiku(100);

     vasemmalle(120);

     liiku(100);

     vasemmalle(120);

     liiku(100);

}



Komennolla mene_kohtaan(x,y) voidaan hahmo siirtää haluttuun koordinaattipisteeseen xy-koordinaatistossa. Komennolla osoita_suuntaan(kulma) hahmo voidaan kääntää haluttuun kulmaan. Komentoja voi käyttää esimerkiksi seuraavasti.

void draw () {

     koordinaatisto();

     mene_kohtaan(100,50);

     osoita_suuntaan(90);

     hahmo();

}



Komento osoita_kohti() kääntää hahmon kohti hiiriosoitinta. Alla esimerkki komennoista.

void draw () {

     koordinaatisto();

     osoita_kohti();

     hahmo();

}



Komennolla mene() saadaan hahmo seuraamaan hiiren paikkaa ruudulla.

void draw () {

     koordinaatisto();

     mene();

     hahmo();

}



Piirtely-ohjelma voidaan rakentaa seuraavasti.

void draw () {

    koordinaatisto();

    kyna_alas();

    kynan_vari(0,0,255);

    kynan_paksuus(5);

    piilota();

    mene();

    hahmo();

}

Komento: kyna_alas(); asettaa kynän alas eli silloin piirretään kuljettu reitti ja komento: piilota() ei näytä hahmoa. Komennolla: kynan_vari(0,0,255); saadaan asetettua kynälle sininen väri ja komennolla kynan_paksuus(5); voidaan viivan väri paksuntaa arvoon 5.