Lisätietoa
Kuvion liikuttelu nuolinäppäimillä
Nuolinäppäimet on kuvattu keyCode komennoilla. Processing ohjelmoinnissa nuolinäppäimet ovat seuraavat.
|
UP |
Nuolinäppäin ylös |
|
DOWN |
Nuolinäppäin alas |
|
RIGHT |
Nuolinäppäin oikealle |
|
LEFT |
Nuolinäppäin vasemmalle |
Muita keyCode-komentoja ovat: ALT, CONTROL, SHIFT. Kaikki näppäinkomennot eivät ole kuvattu keyCode komennoilla. Esimerkiksi Enter-painike on key-komentona: \n ja välilyönti on key-komentona: 32.
Kun tehdään ohjelma, jossa on ehtolauseet: Jos nuolinäppäintä on painettu oikealle, niin kasvata laskuria ja jos nuolinäppäintä on painettu vasemmalle, niin vähennä laskuria. Nyt kun muistat, että kun laskuri on sama kuin kuvion x-koordinaatti, niin laskurin kasvaessa mennään oikealle ja laskurin vähentyessä mennään vasemmalle. Koodi on yksikertaisuudessaan seuraava.
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
int a = 0; // Laskurin alkuarvo
void setup () {
size(400,400); // ikkunan koko
background(255); // Valkea taustaväri
stroke(0); // Musta viivan väri
fill(255,0,0); // Punainen täyttöväri
}
void draw() {
translate(200,200); // Origo (0,0) ikkunan keskelle
background(255); // Tyhjennä tausta
if (keyCode == RIGHT) { // Jos painetaan nuoli oikealle
a++; // Niin kasvata laskuria
}
if (keyCode == LEFT) { // Jos painetaan nuoli vasemalle
a--; // Niin pienennä laskuria
}
ellipse(a,0,20,20); // Ympyrä
}
Tässä on vielä se ongelma, että laskuri jää päälle. Ohjelman pitää siis vielä tarkistaa onko näppäin pohjassa vai ei. Tämä tarkistus tehdään keyPressed-komennolla. Lisätään edellisen ehdon ympärille vielä ylimääräinen ehtolause, niin laskuri kasvaa tai vähenee vain, jos painike on pohjassa ja on lisäksi painettu joko oikeaa tai vasenta nuolinäppäintä. Täydennetty ohjelma näyttää tältä.
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
int a = 0; // Laskurin alkuarvo
void setup () {
size(400,400); // ikkunan koko
background(255); // Valkea taustaväri
stroke(0); // Musta viivan väri
fill(255,0,0); // Punainen täyttöväri
}
void draw() {
translate(200,200); // Origo (0,0) ikkunan keskelle
background(255); // Tyhjennä tausta
if (keyPressed == true){ // Jos painiketta painettu
if (keyCode == RIGHT) { // Jos painetaan nuoli oikealle
a++; // Niin kasvata laskuria
}
if (keyCode == LEFT) { // Jos painetaan nuoli vasemmalle
a--; // Niin pienennä laskuria
}
}
ellipse(a,0,20,20); // Ympyrä
}
Lisäksi suositus on se, että laitettaisiin ehto: if (key == CODED), joka tarkistaa onko koodatut näppäimet käytössä. Tämä tarkistus on lähinnä muita kuin PC-koneita varten. Lisäksi ovat olemassa komennot loop(); ja noLoop(); joilla void draw() lohkon suoritus voidaan pysäyttää ja käynnistää.
Monimutkaisten kuvioiden liikuttelu
Entä jos halutaan ohjata monimutkaisempaa kuviota, esimerkiksi kuutiota. Tällöin kannattaa liikutella koko koordinaatistoa translate(a,b); -komennolla, missä muuttujalla a ilmaisee kuvion paikan vaakasuunnassa ja muuttuja b ilmaisee kuvion paikan pystysuunnassa. Tehdään kokonainen ohjelma, joka liikuttaa kuutiota. Lisätään ohjelmaan vielä ehto, että kuviota liikutellaan vain, jos näppäin on pohjassa. Kokonainen ohjelma näyttää tältä.
// Ohjelman tehnyt e-Oppi Oy
// 16.1.2018
int a = 100; // Kuvion aloituskohta vaakasuunnassa
int b = 100; // Kuvion aloituskohta pystysuunnassa
void setup () {
size(600,600); // Ikkunan koko
stroke(0,0,255); // Reunaviivan väri sininen
strokeWeight(10); // Reunaviivan paksuus 10
}
void draw () {
background(255); // Tyhjennä tausta
if (keyPressed == true) { // Jos näppäin on pohjassa
if ((keyCode == RIGHT) && (key == CODED)) { // Jos oikealle
a++; // Niin kasvata laskuria a
}
if ((keyCode == LEFT) && (key == CODED)) { //Jos vasemmalle
a--; // Niin pienennä laskuria a
}
if ((keyCode == DOWN) && (key == CODED)) { // Jos alas
b++; // Niin kasvata laskuria b
}
if ((keyCode == UP) && (key == CODED)) { // Jos ylös
b--; // Niin pienennä laskuria b
}
}
pushMatrix(); // Koordinaatisto muistiin
translate(a,b); // Liikuta koordinaatistoa
line(100,100,200,100);
line(200,100,250,50);
line(100,200,200,200);
line(200,200,250,150);
line(100,100,100,200);
line(200,100,200,200);
line(150,50,150,150);
line(250,50,250,150);
line(150,50,250,50);
line(150,150,250,150);
line(100,100,150,50);
line(100,200,150,150);
popMatrix(); // Palauta koordinaatisto muistista
}
Käytännössä monimutkainen kuvio laitetaan seuraavan rakenteen sisään.
pushMatrix();
translate(x,y);
// Kuvion piirtokomennot tähän
popMatrix();
Kuvion liikuttelu hiirellä
Entä jos halutaan ohjata ympyrää hiirellä? Nyt kun muistetaan, että hiiren vaakakoordinaatti luetaan komennolla mouseX ja hiiren pystykoordinaatti komennolla mouseY, niin yksikertaisesti verrataan tätä arvoa laskurin arvoon. Jos hiiren koordinaatti on suurempi kuin laskurin arvo, niin kasvata laskuria. Jos hiiren koordinaatti on pienempi kuin laskurin arvo, niin vähennä laskuria. Ainut huomio on se, että hiiren koordinaatti ei älyä mahdollista koordinaatiston siirtoa vaan se otetaan tulostusikkunasta. Kokonainen ohjelma näyttää tältä.
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
int a = 200; // Laskurin alkuarvo
void setup () {
size(400,400); // ikkunan koko
stroke(0); // Musta viivan väri
fill(255,0,0); // Punainen täyttöväri
}
void draw() {
background(255); // Tyhjennä tausta
int x = mouseX; // Selvitä hiiren vaakakoordinaatti
if (x>a) { // Jos hiiri on oikealla puolen
a++; // niin kasvata laskuria
}
if (x<a) { // Jos hiiri on vasemmalla puolen
a--; // niin pienennä laskuria
}
ellipse(a,200,20,20);
}
Tehdään lopuksi vielä jotain hauskaa. Tehdään seuraavaksi peli. Tässä pelissä pallo eli ympyrä putoaa ylhäältä alas. Pelaajan tehtävä on pysäyttää pallo suorakulmiolla, jota liikutellaan nuolinäppäimillä oikealla ja vasemmalle. Jos pelaaja ei saa palloa kiinni, niin peli päättyy. Jos pelaaja saa pallon kiinni, niin pallo palautetaan takaisin ylös. Jotta pelistä tulisi mielenkiintoinen, niin peli voisi nopeutua koko ajan. Lisäksi lasketaan pisteet eli kerätyt pallot.
Esimerkki: Pallopeli
// Ohjelman tehnyt e-Oppi Oy
// 30.8.2017
int y = -320; // Pallon aloituspiste piilossa
int x = -290 + round(random(580)); // Pallon paikka vaakasuunnassa
int r = 10; // Pallon säde
int a = 0; // Suorakulmion aloituspiste keskellä
int w = 60; // Suorakulmion leveys
int nopeus = 100; // Pelin nopeus alussa
boolean pelintila = true; // Peli käynnissä
int pisteet = 0; // Aloituspisteet
void setup () {
size(600,600); // ikkunan koko
stroke(0); // Musta viivan väri
}
void draw() {
frameRate(nopeus); // Ruudun päivitys nopeus
translate(300,300); // Origo (0,0) ikkunan keskelle
background(255,255,0); // Tyhjennä tausta ja väritä se keltaiseksi
if (pelintila == true) { // Laskuri kasvaa vain jos pelintila true
y++; // Pallo putoaa kun laskuri kasvaa
}
// Suorakulmion liikuttelu
if (keyPressed == true){ // Jos on näppäintä painettu
if (keyCode == RIGHT) { // Jos painetaan nuoli oikealle
if (a < 300-w) { // Jos oikeaa reunaa ei ole vielä saavutettu
a++; // niin kasvata laskuria eli liiku oikealle
}
}
if (keyCode == LEFT) { // Jos painetaan nuoli vasemalle
if (a >-300) { // Jos vasenta reunaa ei ole vielä saavutettu
a--; // niin pienennä laskuria eli liiku vasemmalle
}
}
}
// Osuuko pallo suorakulmioon
if (y >=260-r) { // Jos ollaan torjunta-alueella
if ((x+r >= a) && (x-r <= a+w)) { // Jos pallo on torjunta-alueen sisällä, niin
y = -320; // Palauta pallo ylös
x = -290 + round(random(580)); // Arvo pallon uusi paikka vaakasuunnassa
pisteet = pisteet + 10; // Lisätään pisteitä
nopeus = nopeus + 10; // Kasvatetaan nopeutta
} else {
pelintila = false; // Peli on hävitty
}
}
// Lopetus kommentti
if (pelintila == false) { // Jos peli on hävitty
textSize(60); // Tulosta game over
fill(0);
text("Game Over",-150,0);
}
fill(0,0,255); // Sininen väri
rect(a,260,w,20); // Piirrä suorakulmio
fill(255,0,0); // Punainen väri
ellipse(x,y,2*r,2*r); // Piirrä pallo
textSize(18); // Tekstin koko
fill(0); // Tekstin väri musta
text("Pisteet:"+pisteet,-280,-270); // Näytä pisteet
}
Aukaistaan hieman koodia. Olemme tässä määritelleet pelialueeksi 600 x 600 ikkunan. Tässä pelissä origo on siirretty keskelle, joten vasen reuna löytyy kohdasta -300 ja oikea reuna kohdasta 300. Vastaavasti yläreuna löytyy kohdasta -300 ja alareuna kohdasta 300. Koska ikkunan leveys on sama kuin korkeus, niin teoriassa putoavan pallon ehtii pelastamaan, koska matka on sama.
Aloitetaan pallosta eli ympyrästä.
Ympyrällä on kolme kokonaisluku muuttujaa: x, y ja r. Pallon säteelle on sijoitettu kiinteä arvo 10. X on pallon vaakasuuntainen paikka, joka määräytyy arpomalla komennolla:
int x = -290 + round(random(580));
Arvotaan luku väliltä 0..580. Tässä on ajateltu, että kun ikkunan leveydestä 600 ottaa pois kahden pallon säteen verran pois aluetta, niin saadaan luku 580. Vasen reuna oli kohdassa -300. Kun tätä rajaa siirretään pallon säteen verran oikealle, niin saadaan pallon vaakasuuntainen aloituspiste eli -290. Kun tähän lisätään arvottu luku väliltä 0..580, niin pallon vaakasuuntainen koordinaatti on aina välillä -290…290. Tällöin pallo on kokonaan näkyvissä.
Pallon pystysuuntaa hallitaan y-muuttujalla. Y:n aloitusarvo on kohdassa: -320, jolloin pallo on vielä kokonaan piilossa. Pallo liikkuu alaspäin laskurin: y++; avulla.
Seuraavaksi tutkitaan suorakulmiota.
Suorakulmion vasen ylänurkka on piste (a, 260). Suorakulmion leveys on esitetty muuttujalla w, joka on asetettu 60 ja korkeus on 20. Leveys on siksi muuttujana, jos haluamme muuttaa palkin leveyttä. Suorakulmion pystykoordinaatti on asetettu vakioksi, se ei muutu. Vaakakoordinaatti on muuttuja a. Kun muuttuja a kasvaa, niin suorakulmio liikkuu oikealle. Kun muuttuja a pienenee, niin suorakulmio liikkuu vasemmalle. Tämä hoidetaan jo aikaisemmin kuvatulla ohjausrakenteella. Muuttujan a:n arvot voivat vaihdella välillä -300…240. Jos nämä ylitetään, niin mennään yli ikkunan. Huomaa, että 300 - w = 240, koska w = 60.
Eli meidän on lisättävä vielä yhdet ehdot laskurin kasvatukseen. Jos on painettu oikealle näppäintä ja jos a on pienempi kuin 240 eli 300 - w, niin vain siinä tapauksessa kasvata laskuria eli liikuta suorakulmiota oikealle. Koodina sama asia näyttää tältä.
if (keyCode == RIGHT) { // Jos painetaan nuoli oikealle
if (a < 300 - w) { // Jos oikeaa reunaa ei ole vielä saavutettu
a++; // niin kasvata laskuria eli liiku oikealle
}
}
Vastaavalla tavalla vasen reuna hoidetaan. Jos on painettu vasemmalle näppäintä ja jos a on suurempi kuin -300, niin silloin vähennä laskuria eli liikuta suorakulmiota vasemmalle.
if (keyCode == LEFT) { // Jos painetaan nuoli vasemalle
if (a >-300) { // Jos vasenta reunaa ei ole vielä saavutettu
a--; // niin pienennä laskuria eli liiku vasemmalle
}
}
Nyt meillä pallo liikkuu alas laskurin avulla ja suorakulmio sivuttain nuolinäppäimien ja laskurien avulla. Mitäs sitten kun pallo tulee suorakulmion alueelle. Ensin meidän täytyy määritellä torjunta-alue.
Kuten kuviosta selviää, niin olemme saaneet torjuttua pallon, jos ympyrän kehä hipaisee suorakulmiota. Ajatellaan ensin pystysuuntaa. Kun ympyrän keskipiste eli y:n arvo on suurempi tai yhtä suuri kuin 260 – r, missä r on ympyrän säde, niin silloin olemme torjunta alueella. Tämä voidaan kirjoittaa if lauseena.
if (y >= 260-r)
Ennen tämän ehdon täyttymistä ei tarvitse tehdä mitään. Ympyrän kehän pitää olla suorakulmion sisällä myös vaakasuunnassa. Eli ympyrän oikean reunan: x+r pitää olla suurempi tai yhtä suuri kuin suorakulmion vasemman reunan a ja ympyrän vasemman reunan x – r pitää olla pienempi tai yhtä suuri kuin suorakulmion oikean reunan a+w. Tämä voidaan kirjoittaa if lauseena seuraavasti.
if ((x+r >= a) && (x-r <= a+w))
Kun nämä kaksi ehtoa täyttyvät, niin silloin olemme torjuneet pallon ja pallo voidaan palauttaa takaisin ylös antamalla uudet x:n ja y:n arvot palolle. Samalla lisätään pisteitä ja nopeutetaan peliä. Näitä toimintoja varten ovat omat laskurit: pisteet ja nopeus. Jos nämä ehdot eivät täyty, niin on aika lopettaa peli eli muuttaa pelin tila. Pelin tila voidaan tarkistaa helposti boolean-tyyppisellä muuttujalla, joka voi saada arvot: true tai false. Jos pelin tila on false, niin silloin evät enää laskurit kasva ja on aika tulostaa loppukommentti: Game Over. Alla on esimerkki ohjelman suorituksesta.
Jos haluat mieluummin hiiriohjauksen, niin muuta ohjauskoodi alue seuraavanlaiseksi.
// Suorakulmion liikuttelu
int hiiri = mouseX; // Perustetaan hiiri-muuttuja
if (hiiri-300 > a) { // Jos hiiri on isompi kuin laskuri
if (a < 300-w) { // Jos oikeaa reunaa ei ole vielä saavutettu
a++; // niin kasvata laskuria eli liiku oikealle
}
}
if (hiiri-300 < a) { // Jos hiiri on pienempi kuin laskuri
if (a > -300) { // Jos vasenta reunaa ei ole vielä saavutettu
a--; // niin pienennä laskuria eli liiku vasemmalle
}
}
Huomaa, että hiiren koordinaatti vaihtelee välillä 0…600, mutta a:n arvo vaihtelee välillä -300…300. Siksi ehtoon pitää lisätä korjaus eli hiiri-300.