Mitkä ovat tähden koordinaattipisteet? Kootaan ne taulukkoon
Piste | x | y |
A | 250 | 50 |
B | 300 | 150 |
C | 400 | 150 |
D | 350 | 250 |
E | 400 | 350 |
F | 300 | 350 |
G | 250 | 450 |
H | 200 | 350 |
I | 100 | 350 |
J | 150 | 250 |
K | 100 | 150 |
L | 200 | 150 |
Kuinka tähti voitaisiin ohjelmoida? Se onnistuu monikulmio-komenolla. Monikulmio komento alkaa beginShape(); komennolla ja loppuu endShape(CLOSE); komentoon. Tähän väliin voimme luetella monikulmioon tulevat pisteet vertex(x,y); komennoilla. Vertext(x,y)-komentoja voi olla kuinka paljon tahansa. Monikulmio työkalulla voitaisiin piirtää myös piste, viiva, kolmio ja nelikulmio. Ohjelma, joka piirtää kuvan mukaisen tähden on seuraava.
function setup() { createCanvas(500, 500); // Aseta ikkunan kooksi 500 x 500 strokeWeight(3); // Aseta viivan paksuudeksi 3 } function draw() { background(255,255,0); // Aseta taustaväriksi keltainen fill(255,0,0); // Aseta täyttöväriksi punainen beginShape(); // Aloita monikulmio vertex(250,50); // Piste A vertex(300,150); // Piste B vertex(400,150); // Piste C vertex(350,250); // Piste D vertex(400,350); // Piste E vertex(300,350); // Piste F vertex(250,450); // Piste G vertex(200,350); // Piste H vertex(100,350); // Piste I vertex(150,250); // Piste J vertex(100,150); // Piste K vertex(200,150); // Piste L endShape(CLOSE); // Lopeta monikulmio } |
Monikulmion liikuttelu hiirellä
Kuinka monikulmiota voitaisiin liikutella hiirellä? Koska on hieman hankalaa laittaa jokaiseen monikulmion pisteeseen (mouseX,mouseY) komentoja siten, että lisäksi vielä lasketaan muiden pisteiden etäisyys suhteessa ensimmäiseen valittuun pisteeseen. Onneksi tähän löytyy helpompi ratkaisu. Voit käyttää komentoa: translate(mouseX,mouseY); kuvioiden siirtelyyn. Komento itse asiassa siirtää origoa eli kaikkia kuvoita ikkunassa samaan aikaan. Joten on parempi laittaa sekä kuvio, että translate(mouseX,mouseY); komento komentojen push(); ja pop(); väliin. Komento push(); ottaa koordinaatiston muistiin ja komento pop(); palauttaa koordinaatiston muistista.
push(); translate(mouseX,mouseY); // Lisää tähän siirrettävä kuvio pop(); |
Tehdään tästä ideasta kokonainen ohjelma eli piirretään nuoli ja siirretään sitä hiirellä. Ohjelman koodi on seuraavanlainen.
function setup() { createCanvas(600, 600); // Ikkunan koko 600 x 600 strokeWeight(3); // Viivan paksuus 3 } function draw() { background(255,255,0); // Tyhjennä tausta ja väritä se fill(255,0,0); // Aseta punainen täyttöväri push(); // Ota koordinaatisto muistiin translate(mouseX-200,mouseY-250); // Siirrä koordinaatistoa hiiren avulla beginShape(); // Aloita monikulmio vertex(100,200); vertex(200,200); vertex(200,150); vertex(300,250); vertex(200,350); vertex(200,300); vertex(100,300); endShape(CLOSE); // Lopeta monikulmio pop(); // Palauta koordinaatisto muistista } |
Monikulmion pisteistä muodostuu nuoli. Nuolen keskipiste laskettuna ikkunan vasemmasta yläreunasta on 200 oikealle ja 250 alaspäin, niin siksi translate(mouseX,mouseY); komento kirjoitetaan muotoon translate(mouseX-200,mouseY-250); niin saadaan hiiri siirrettyä nuolen keskelle. Ilman tätä siirrosta nuoli olisi aina origossa. Ohjelman suoritus näyttää tältä.
Olisiko mahdollista arpoa taustaan ympyröitä ja samalla liikutella monikulmiota? Kyllähän se onnistuu, joudumme nyt luomaan uuden tason, johon arpominen suoritetaan. Muutetaan koodia seuraavasti.
var tausta; // Luodaan muuttuja taustatasoa varten function setup() { createCanvas(600, 600); // Ikkunan koko on 600 x 600 tausta = createGraphics(600, 600); // Luodaan taustataso, jonka koko on 600 x 600 tausta.clear(); // Tyhjennä taustataso strokeWeight(3); // Aseta viivan paksuus 3 } function draw() { background(255,255,0); // Tyhjennä tausta ja väritä se keltaiseksi // Taustataso tausta.fill(random(255), random(255), random(255), random(255)); // Arvotaan täyttöväri tausta.ellipse(random(width), random(height), 100, 100); // Arvotaan ympyrä satunnaiseen paikkaan image(tausta, 0, 0); // Sijoitetaan ympyrä taustatasolle // Ylempi taso fill(255,0,0); // Aseta Punainen täyttöväri push(); // Ota koordinaatisto muistiin translate(mouseX-200,mouseY-250); // Siirrä koordinaatistoa beginShape(); // Aloita monikulmio vertex(100,200); vertex(200,200); vertex(200,150); vertex(300,250); vertex(200,350); vertex(200,300); vertex(100,300); endShape(CLOSE); // Lopeta monikulmio pop(); // palauta monikulmio muistista } |
Ohjelma toimii nyt seuraavasti.