2.3 Kaari ja Bezier-käyrä

Yhteenveto




Pyörimissuunta on myötäpäivään.

Sanallinen algoritmi
  1. Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn.
  2. Aseta taustaväriksi valkoinen.
  3. Aseta reunaviivan paksuudeksi 3.
  4. Aseta täyttöväriksi sininen.
  5. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (150,150). Sektorin aloituskulma on 90 ja lopetuskulma on 315.
  6. Aseta täyttöväriksi punainen.
  7. Piirrä sektori, jonka leveys on 100 px ja korkeus 300 px paikkaan (350,150). Sektorin aloituskulma on 180 ja lopetuskulma on 360+90 = 450.
  8. Aseta täyttöväriksi vihreä.
  9. Piirrä segmentti, jonka leveys on 300 px ja korkeus 200 px paikkaan (200,350). Segmentin aloituskulma on 135 ja lopetuskulma on 225.
 

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017

void setup () {

     size(450,450); // Ikkunan koko

     background(255); // Taustaväri valkoinen

     strokeWeight(3); // Reunaviivan paksuus 3

}

void draw () {

     fill(0,0,255); // Täyttöväri sininen

     arc(150,150,200,200,radians(90),radians(315),PIE);

     fill(255,0,0); // Täyttöväri punainen

     arc(350,150,100,300,radians(180),radians(360+90),PIE);

     fill(0,255,0); // Täyttöväri vihreä

     arc(200,350,300,200,radians(135),radians(225),CHORD);

}

Kaari

Sektori tai segmentti voidaan piirtää komennolla.

KOMENTO

MERKITYS

arc(a,b,c,d,e,f,g);

Komento piirtää kaaren ellipsiin. Ellipsin keskipiste on (a,b) ja ellipsin leveys on c ja ellipsin korkeus on d. e on kaaren alkupiste ja f on kaaren loppupiste.

a

a on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin keskipisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.

b

b on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin keskipisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.

c

c on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin leveyden pikseleinä.

d

d on desimaali- tai kokonaislukuarvo, joka kertoo ellipsin korkeuden pikseleinä.

e

e on kaaren alkukulma. Kulma annetaan radiaaniasteina. Jos käytät tavallisia asteita, niin käytä silloin komentoa radians(kulma).

f

e on kaaren loppukulma. Kulma annetaan radiaaniasteina. Jos käytät tavallisia asteita, niin käytä silloin komentoa radians(kulma).

g

Kirjoita tähän jokin sana näistä kolmesta alavalinnasta. Lopputulos on esitetty kuvassa.


Huomaa, että arc-komento toimii myös ilman tätä määrettä g.

Jos kuviosta poistaa täyttövärin, niin sektorin (PIE) avulla voidaan piirtää kaari ja kaksi sädettä. Vastaavasti segmentistä (CHORD) saadaan aikaiseksi kaari ja jänne. Kun käytät asetusta OPEN, niin saat aikaiseksi tällöin pelkän kaaren.

Processing-ohjelmoinnissa kulmat alkavat idästä ja kiertosuunta on myötäpäivään. Seuraavat asetukset on hyvä tietää.

SUUNTA

KULMA

KOMENTO

itä

0°

radians(0)

kaakko

45°

radians(45)

etelä

90°

radians(90)

lounas

135°

radians(135)

länsi

180°

radians(180)

luode

225°

radians(225)

pohjoinen

270°

radians(270)

koillinen

315°

radians(315)

Koska ohjelmoinnissa käytetään radiaanikulmia, niin kirjoita kulmat aina radians(kulma) komennon avulla. Komento muuttaa asteet radiaaneiksi. Radiaani-asteissa 360 astetta vastaa kulma: 2π.



Kuvan mukainen piirakkakuvio saadaan aikaiseksi seuraavalla ohjelmalla.

Sanallinen algoritmi
  1. Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta kuvion täyttöväriksi syaani.
  4. Piirrä sektori, jonka keskipiste on kohdassa (200,200), leveys on 300 ja korkeus on 200. Sektorin aloituskulma on 0 astetta eli idässä ja lopetuskulma on 270 astetta myötäpäivään eli pohjoisessa.
 

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() { 
      size(450,450); // Ikkunan koko
      background(255); // Taustaväri valkoinen
      fill(0,255,255); // Täyttöväri Syaani
}
void draw() {
     arc(200,200,300,200,radians(0),radians(270),PIE);
}


Entä jos lopetuskulma menee yli 360 asteen?




Ylläolevassa sektorissa aloituskulma on 180 astetta ja lopetuskulma on 45 astetta. Käytännössä lopetuskulman on oltava suurempi kuin aloituskulman eli kuvan mukainen sektori saadaan komennolla:

arc(200,200,300,300,radians(180),radians(360+45),PIE);

Jos lopetuskulma on yli 360 asteen, niin tällöin lisää 360 astetta kaaren lopetuskulmaan. Voit myös kirjoittaa komennon muotoon:

arc(200,200,300,300,radians(180),radians(405),PIE);

Eri variaatiot

Tutkitaan mikä vaikutus täytöllä ja reunaviivan poistolla on kaari-komentoon. Tehdään seuraava ohjelma.

Sanallinen algoritmi
  1. Aseta ikkunan kooksi 600 px vaakaan ja 400 px pystyyn.
  2. Aseta taustaväriksi valkoinen.
  3. Aseta reunaviivan paksuudeksi 5.
  4. Aseta täyttöväriksi punainen.
  5. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (100,30). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus PIE.
  6. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (300,30). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus OPEN.
  7. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (500,30). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus CHORD.
  8. Laita asetus, joka poistaa täytön..
  9. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (100,150). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus PIE.
  10. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (300,150). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus OPEN.
  11. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (500,150). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus CHORD.
  12. Laita asetus, joka poistaa reunaviivan.
  13. Aseta täyttöväriksi sininen.
  14. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (100,270). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus PIE.
  15. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (300,270). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus OPEN.
  16. Piirrä sektori, jonka leveys on 200 px ja korkeus 200 px paikkaan (500,270). Sektorin aloituskulma on 45 ja lopetuskulma on 135. Laita asetus CHORD.
 

// Ohjelman tehnyt: e-Oppi Oy
// 25.10.2017

void setup() {

     size(600,400);  // Ikkunan koko

     background(255); // Taustaväri valkoinen

     strokeWeight(5);  // Viivan paksuus 5

}

void draw () {

     fill(255,0,0);  // Punainen täyttöväri

     arc(100,30,200,200,radians(45),radians(135),PIE);

     arc(300,30,200,200,radians(45),radians(135),OPEN);

     arc(500,30,200,200,radians(45),radians(135),CHORD);

     noFill();  // Ei täyttöä

     arc(100,150,200,200,radians(45),radians(135),PIE);

     arc(300,150,200,200,radians(45),radians(135),OPEN);

     arc(500,150,200,200,radians(45),radians(135),CHORD);

     noStroke();  // Ei reunaviivaa

     fill(0,0,255);  // Sininen täyttöväri

     arc(100,270,200,200,radians(45),radians(135),PIE);

     arc(300,270,200,200,radians(45),radians(135),OPEN);

     arc(500,270,200,200,radians(45),radians(135),CHORD);

}

Ohjelma tulostaa seuraavaa.

Bezier-käyrä (Extra)

Bezier-käyrä kahden pisteen ja kahden kahvan avulla saadaa, komennolla.

KOMENTO

MERKITYS

bezier(x1,y1,x2,y2,x3,y3,x4,y4);

Komento piirtää bezier-käyrän pisteiden (x1,y1) ja (x4,y4) välille. Bezier-käyrä väännetään mutkalle pisteistä lähtevien kahvojen avulla. Kahvojen paikka ilmaistaan koordinaatteina (x2,y2) ja (x3,y3).

x1

x1-arvo on desimaali- tai kokonaislukuarvo, joka kertoo Bezier-käyrän aloituspisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.

y1

y1-arvo on desimaali- tai kokonaislukuarvo, joka kertoo Bezier-käyrän aloituspisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.

x2

x2-arvo on desimaali- tai kokonaislukuarvo, joka kertoo ensimmäisen kahvan loppupisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.

y2

y2-arvo on desimaali- tai kokonaislukuarvo, joka kertoo ensimmäisen kahvan loppupisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.

x3

x3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo toisen kahvan loppupisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.

y3

y3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo toisen kahvan loppupisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.

x4

x4-arvo on desimaali- tai kokonaislukuarvo, joka kertoo Bezier-käyrän lopetuspisteen vaakasuuntaisen etäisyyden ikkunan vasemmasta reunasta.

y4

y3-arvo on desimaali- tai kokonaislukuarvo, joka kertoo Bezier-käyrän lopetuspisteen pystysuuntaisen etäisyyden ikkunan yläreunasta.

 




Kuvan mukainen Bezier-käyrä saadaan aikaiseksi seuraavalla koodilla.

Sanallinen algoritmi
  1. Aseta ikkunan kooksi 450 px vaakaan ja 450 px pystyyn.
  2. Aseta ikkunan taustaväriksi valkoinen.
  3. Aseta kuvion täyttöväriksi vihreä.
  4. Piirrä Bezier-viiva pisteiden (350,150) ja (300,250) välille. Ensimmäistä pistettä väännetään kahvalla, jonka on kohdassa (150,100) ja toista pistettä väännetään kahvalla, joka on kohdassa (200,300).
 

// Ohjelman tehnyt: e-Oppi Oy
// 29.1.2017
void setup() { 
     size(450,450); // Ikkunan koko
     background(255); // Taustaväri valkoinen
     fill(0,255,0); // Täyttöväri Vihreä
}

void draw() {
     bezier(150,100,350,150,300,250,200,300);
}