Jos haluaisimme piirtää omenan, niin kuinka piirrettäisiin kaarevia muotoja? Se on onnistuu bezier-funktiolla. Bezier-funktio on muotoa:
bezier(x1,y1,x2,y2,x3,y3,x4,y4);
missä piste (x1,y1) on viivan alkupiste ja (x4,y4) on viivan loppupiste. Pistettä (x1,y1) väännetään kahvalla, jonka päätepiste on (x2,y2), vastaavasti pistettä (x4,y4) väännetään kahvalla, jonka päätepiste on (x3,y3).
Katsotaan asiaa esimerkin avulla.
- Kun menemme pisteestä A = (250,200) pisteeseen D = (250,400) oikeaa reunaa pitkin, niin silloin väännämme pistettä A kahvalla B. Kahva B on pisteessä (400,100). Vastaavasti väännämme pistettä D kahvalla C. Kahva C on pisteessä (450,400). Kun laitamme pisteet järjestykseen eli A,B,C,D, niin voimme kirjoittaa tästä piirtokomennon muotoon: bezier(250,200,400,100,450,400,250,200);
- Kun menemme pisteestä A = (250,200) pisteeseen D = (250,400) vasenta reunaa pitkin, niin silloin väännämme pistettä A kahvalla E. Kahva E on pisteessä (100,100). Vastaavasti väännämme pistettä D kahvalla F. Kahva F on pisteessä (50,400). Kun laitamme pisteet järjestykseen eli A,E,F,D, niin voimme kirjoittaa tästä piirtokomennon muotoon: bezier(250,200,100,100,50,400,250,200);
Näistä kahdesta omenan puolikkaasta muodostuu kokonainen omena. Kokonainen ohjelma on seuraavanlainen
function setup() {
createCanvas(500, 500); // Ikkunan koko on 500 x 500
strokeWeight(5); // Viivan paksuus on 5
}
function draw() {
background(0,255,255); // Asetetaan taustan väriksi syaani
fill(255,0,0); // Asetetaan täyttöväri punaiseksi
bezier(250,200,400,100,450,400,250,400); // Piste A(250,200), kahva B(400,100), Kahva C(450,400), Piste D(250,400)
bezier(250,200,100,100,50,400,250,400); // Piste A(250,200), kahva E(100,100), Kahva F(50,400), Piste D(250,400)
}
|
Jos haluat kokeilla mikä vaikutus kahvalla on viivan kaarevuuteen, niin muutetaan ohjelmaa seuraavasti.
function setup() {
createCanvas(500, 500); // Ikkunan koko on 500 x 500
strokeWeight(5); // Viivan paksuus on 5
}
function draw() {
background(0,255,255); // Asetetaan taustan väriksi syaani
fill(255,0,0); // Asetetaan täyttöväri punaiseksi
bezier(250,200,mouseX,mouseY,450,400,250,400); // bezier-komento, jossa kahvan paikka luetaan hiiren liikkeistä: (mouseX,mouseY)
line(250,200,mouseX,mouseY); // Piirretään kahvan paikalle viiva
ellipse(mouseX,mouseY,10,10); // Piirretään kahvan päähän pieni ympyrä
}
|
Ohjelma toimii seuraavasti.
Hiirtä seuraava liekki
Kokeillaan miten bezier-viiva käyttäytyy random-funktion kanssa.
function setup() {
createCanvas(600, 600); // Ikkunan koko on 600 x 600
frameRate(10); // Animaation nopeus 1o kuvaa sekunnissa
}
function draw() {
background(0,200,255); // Taustaväri sininen
fill(255,150,0); // Täyttöväri oranssi
bezier(mouseX,mouseY,random(200),random(200),random(200), 400+random(200),300,500);
bezier(mouseX,mouseY,300+random(200),random(200),400+random(200), 400+random(200),300,500);
fill(220,220,220); // Täyttöväri harmaa
rect(250,500,100,100); // Piirrä neliö, jonka nurkkapiste on (250,500) ja sivun pituus 100.
}
|
Ohjelma toimii seuraavasti.