Hahmon piirtäminen
Piirretään ensin avaruusalus. Aluksi kannattaa piirtää hahmo paperille, josta on helppo lukea koordinaattipisteet.
Piirretään aluksi kolme suorakulmiota eli käytämme rect-komentoja. Aluksi kuitenkin asetetaan viivan paksuus arvoon 3 ja asetamme täyttövärin. | |
Seuraavaksi piirrämme vaalemman sävyisen kolmion elin ensin asetamme täyttövärin ja sitten piirrämme kolmion triangle-komennollsa. Katsomme ensin kuvasta kolmion nurkkapisteet, jota ovat (150,100), (50,200) ja (250,200) ja sitten kirjoitamme koodin. | |
Seuraavaksi piirrämme viisikulmion eli tarvitsemme monikulmio-komentoa, jonne syötämme viisikulmion nurkkapisteet. Aluksi tummennamme värisävyä fill-komenolla ja sitten kirjoitamme monikulmion seuraavasti. | |
Lopuksi piirräämme keltaisen ikkunan ellipse-komennolla. |
Olemme saaneet luotua seuraavanlaisen ohjelman, joka piirtää avaruusaluksen.
function setup() { createCanvas(600, 600); // Ikkunan koko 600 x 600 } function draw() { background(255); // Taustaväri valkoinen strokeWeight(3); // Viivan paksuus 3 fill(200,50,0); // Täyttöväri rect(70,130,20,100); // Suorakulmio rect(210,130,20,100); // Suorakulmio rect(110,200,80,40); // Suorakulmio fill(250,100,0); // Täyttöväri triangle(150,100,50,200,250,200); // Kolmio fill(180,80,0); // Täyttöväri beginShape(); // Aloita monikulmio vertex(150,50); vertex(170,100); vertex(200,220); vertex(100,220); vertex(130,100); endShape(CLOSE); // Lopeta monikulmio fill(255,255,0); // Täyttöväri ellipse(150,125,40,50); // Ellipsi } |
Hahmosta aliohjelma
Kun olet saanut oman hahmosi grafiikka-komennot kirjoitettua, niin siitä kannattaa sen jälkeen tehdä oma aliohjelmansa. Laita aliohjelmaan heti alkuun translate(x,y)-komento, jotta voit liikutella hahmoa, sekä scale(koko)-komento, jotta voit muuttaa hahmon kokoa. Jos koko on yli yksi, niin hahmo suurenee. Jos koko on alle yksi, niin hahmo pienenee. Lisäksi aliohjelmassa pitää olla push(); ja pop(); komennot, joiden väliin kaikki muut komennot tulevat. Voit käyttää seuraavaa pohjaa omissa animaatioissa.
var pysty = 600; // Origon alkupaikka pystysuunnassa var vaaka = 150; // Origon alkupaikka vaakasuunassa var koko = 1; // Hahmon skaalaus-kerroin function setup() { createCanvas(600, 600); // Ikkunan koko } function draw() { background(100,100,255); // Tyhjennä ja väritä tausta hahmo(vaaka,pysty,koko); // Aliohjelman kutsuminen } // Aliohjelma hahmo function hahmo(x, y, koko) { push(); // Koordinaatisto muistiin translate(x,y); // Siirrä hahmo (=origo) paikkaan (x,y) scale(koko); // Suurenna/pienennä hahmoa // Tähän hahmon komennot pop(); // Palauta koordinaatisto muistista } |
Lisätään tähän pohjaan edellä tehdyt piirtokomennot, jotka piirtävät avaruusaluksen ja lisätään vielä laskuri, niin saamme avaruusaluksen liikkumaan alhaalta ylös. If-lauseella saamme avaruusaluksen palautettua alas.
var pysty = 600; // Hahmon paikka pystysuunnassa var vaaka = 150; // Hahmon paikka vaakasuunnassa var koko = 1; // Hahmon koon skaalaus-kerroin function setup() { createCanvas(600, 600); // Ikkunan koko } function draw() { background(100,100,255); // Tyhjennä tausta ja väritä se pysty--; // Vähennä laskurimuuttujaa pysty yhdellä hahmo(vaaka,pysty,koko); // Kutsutaan aliohjelmaa if (pysty < -200) { // Jos muuttuja pysty on pienempi kuin -200, niin silloin pysty = 600; // Anna pysty-muuttujalle arvo 600 } // Lopeta jos-lause } function hahmo(x, y, koko) { push(); // Koordinaatisto muistiin translate(x,y); // Liikuta hahmoa scale(koko); // Skaalaa hahmoa // Tästä alkaa oman hahmon piirtokomennot strokeWeight(3); fill(200,50,0); rect(70,130,20,100); rect(210,130,20,100); rect(110,200,80,40); fill(250,100,0); triangle(150,100,50,200,250,200); fill(180,80,0); beginShape(); vertex(150,50); vertex(170,100); vertex(200,220); vertex(100,220); vertex(130,100); endShape(CLOSE); fill(255,255,0); ellipse(150,125,40,50); // Tähän loppuu oman hahmon piirtokomennot pop(); // Palauta koordinaatisto muistista } |
Jolloin saamme avaruusaluksen liikkumaan seuraavasti
Hahmon liikuttelu
Katsotaan vielä kuinka luomaamme hahmoa voidaan liikutella liukupalkeilla eli kuinka aliohjelmaa voidaan ohjata.
var sSlider; // Määrietllään muuttujat liukupalkkeja varten var bSlider; var cSlider; var dSlider; function setup() { createCanvas(600, 600); // Ikkunan koko 600 x 600 aSlider = createSlider(0, 600, 300); // Määritellään liukupalkit aSlider.position(10, 20); bSlider = createSlider(0, 600, 300); bSlider.position(160, 20); cSlider = createSlider(0.2, 10, 1); cSlider.position(310, 20); dSlider = createSlider(-360, 360, 0); dSlider.position(460, 20); } function draw() { background(0); // Tyhjennä tausta var x = aSlider.value(); // Muuttujat joihin tallennetaan liukupalkin arvot var y = bSlider.value(); var koko = cSlider.value(); var kulma = dSlider.value(); hahmo(x,y,koko,kulma); // Aliohjelman kutsuminen } function hahmo(x, y, koko,kulma) { var w = 150; // Pyöritys pisteen korjaus var h = 150; push(); // Koordinaatisto muistiin translate(x,y); // Liikuta hahmoa rotate(radians(kulma)); // Pyöritä hahmoa scale(koko); // Skaalaa hahmoa // Tästä alkaa oman hahmon piirtokomennot strokeWeight(3); fill(200,50,0); rect(70-w,130-h,20,100); rect(210-w,130-h,20,100); rect(110-w,200-h,80,40); fill(250,100,0); triangle(150-w,100-h,50-w,200-h,250-w,200-h); fill(180,80,0); beginShape(); vertex(150-w,50-h); vertex(170-w,100-h); vertex(200-w,220-h); vertex(100-w,220-h); vertex(130-w,100-h); endShape(CLOSE); fill(255,255,0); ellipse(150-w,125-h,40,50); // Tähän loppuu oman hahmon piirtokomennot pop(); // Palauta koordinaatisto } |
Ohjelma toimii seuraavasti.
Taustan lisääminen
Yhdistetään lopuksi animaatio ja tausta, joka on omalla tasolla. Tällöin voimme ohjelmoida näitä erillisinä ja se helpottaa visuaalisen ilmeen luomisessa. Koodi on seuraavanlainen.
var pysty = 650; // Hahmon pystysuuntainen aloituspaikka var vaaka = 300; // Hahmon vaakasuuntainen aloituspaikka var koko = 1; // hahmon skaalaus eli 1 = alkuperäinen koko var laskuri = 0; // 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 } function draw() { background(0); // Tyhjennä tausta // Alempi-taso tausta.noStroke(); tausta.fill(random(200),random(200),random(200),100); tausta.ellipse(random(600),random(600),50,50); image(tausta, 0, 0); // Ylempi taso pysty--; vaaka = 300+200*sin(radians(pysty)); hahmo(vaaka,pysty,koko,0); if (pysty < -250) { pysty = 650; } } function hahmo(x, y, koko,kulma) { var w = 150; // Pyöritys pisteen korjaus var h = 150; push(); // Koordinaatisto muistiin translate(x,y); // Liikuta hahmoa rotate(radians(kulma)); // Pyöritä hahmoa scale(koko); // Skaalaa hahmoa // Tästä alkaa oman hahmon piirtokomennot strokeWeight(16); stroke(255,255,255); laskuri++; if (laskuri % 5 == 0) { line(80-w,220-h,80-w,320-h); line(220-w,220-h,220-w,320-h); } stroke(0); strokeWeight(3); fill(200,50,0); rect(70-w,130-h,20,100); rect(210-w,130-h,20,100); rect(110-w,200-h,80,40); fill(250,100,0); triangle(150-w,100-h,50-w,200-h,250-w,200-h); fill(180,80,0); beginShape(); vertex(150-w,50-h); vertex(170-w,100-h); vertex(200-w,220-h); vertex(100-w,220-h); vertex(130-w,100-h); endShape(CLOSE); fill(255,255,0); ellipse(150-w,125-h,40,50); // Tähän loppuu oman hahmon piirtokomennot pop(); } |
Valmis animaatio taustan kanssa näyttää seuraavanlaiselta.