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.