Ellipsi, suorakulmio ja sektori

Ellipsi ja suorakulmio

Tutkitaan kuviota ja tehdään siitä päätelmiä.

• Piste A = (150,150), joka on ympyrän keskipiste. Lisäksi ympyrän halkaisija on 200. Siksi punaisen värinen ympyrä saadaan aikaiseksi komennolla: ellipse(150,150,200,200);
• Piste B = (100,350), joka on ellipsin keskipiste. Lisäksi ellipsin halkaisija vaakasuunnassa on 100 ja pystysuunnassa 200. Siksi syaanin värinen ellipsi saadaan aikaiseksi komennolla: ellipse (100,350,100,200);
• Piste C = (300,400), joka on ellipsin keskipiste. Lisäksi ellipsin halkaisija vaakasuunnassa on 300 ja pystysuunnassa 100. Siksi magnetan värinen ellipsi saadaan aikaiseksi komennolla: ellipse (300,400,300,100);
• Piste D = (300,50), joka suorakulmion vasemman ylänurkan piste. Lisäksi suorakulmion leveys on 150 ja korkeus on 100. Siksi vihreä suorakulmio saadaan aikaiseksi komennolla: rect(300,50,150,100);
• Piste E = (400,200), joka suorakulmion vasemman ylänurkan piste. Lisäksi suorakulmion leveys on 50 ja korkeus on 150. Siksi sininen suorakulmio saadaan aikaiseksi komennolla: rect(400,200,50,150);
• Piste F = (250,200), joka suorakulmion vasemman ylänurkan piste. Lisäksi suorakulmion leveys on 100 ja korkeus on 100. Siksi keltainen suorakulmio saadaan aikaiseksi komennolla: rect(300,50,100,100); Koska leveys ja korkeus oavt samat, niin kuvio on neliö.

Kun tähän lisäämme värikomennot, niin ohjelma, joka piirtää yllä olevan kuvion on seuraava.

P5.js-koodi

function setup() {
  createCanvas(500, 500);   // Ikkunan koko 500 x 500
  strokeWeight(3);          // Reunaviivan paksuus on 3 px
}

function draw() {
  background(255,255,255);  // Taustaväriksi asetetaan valkoinen  
  fill(255,0,0);            // Täyttöväriksi asetetaan punainen
  ellipse(150,150,200,200); // Piirretään punainen ympyrä, jonka keskipiste on (150,150) ja halkaisija 200
  fill(0,255,255);          // Täyttöväriksi asetetaan syaani
  ellipse(100,350,100,200); // Piirretään syaani ympyrä, jonka keskipiste on (100,350), leveys = 100 ja korkeus = 200
  fill(255,0,255);          // Täyttöväriksi asetetaan magneta
  ellipse(300,400,300,100); // Piirretään magneta ympyrä, jonka keskipiste on (300,400), leveys = 300 ja korkeus = 100
  fill(0,255,0);            // Täyttöväriksi asetetaan vihreä       
  rect(300,50,150,100);     // Piirretään vihreä suorakulmio, jonka nurkkapiste on (300,50), leveys = 150 ja korkeus = 100
  fill(0,0,255);            // Täyttöväriksi asetetaan sininen
  rect(400,200,50,150);     // Piirretään sininen suorakulmio, jonka nurkkapiste on (400,200), leveys = 50 ja korkeus = 150
  fill(255,255,0);          // Täyttöväriksi asetetaan keltainen
  rect(250,200,100,100);    // Piirretään keltainen neliö, jonka nurkkapiste on (250,200), leveys = 100 ja korkeus = 100
}

Yhteenvetona voidaan todeta seuraavaa.

Sektori

P5.js ohjelmoinnissa kulmat kasvavat seuraavasti.

Nollakulma on idässä, josta kulmat kasvavat myötäpäivään. Ohjelmoinnissa käytetään radiaaniasteita, siksi ohjelmassa on erikseen kerrottava, että haluamme käyttää normaaleja kulma-asteita. Se tapahtuu laittamalla komento: angleMode(DEGREE); setup-funktioon.

Haluamme seuraavaksi piirtää sektoreita. Se tapahtuu komennolla:

arc(x,y,w,h,kulma1, kulma2,PIE);

missä (x,y) on ellipsin keskipiste, w = ellipsin leveys, h = ellipsin korkeus, kulma1 on sektorin aloituskulma, kun kierretään idästä myötäpäivään, kulma2 on sektorin lopetuskulma, kun kierretään idästä myötäpäivään. Jos asetuksen PIE tilalle kirjoittaa komennon CHORD, niin saamme aikaiseksi segmentin.

Tutkitaan kuvaajaa ja tehdään siitä seuraavia päätelmiä.

• Piste A = (100,100), joka on ympyrän keskipiste. Lisäksi ympyrän halkaisija on 200. Sektorin alkukulma on 0°:tta ja loppukulma on 180°:tta. Kuvan mukainen sininen sektori saadaan aikaiseksi komennolla: arc(100,100,200,200,0,180,PIE);
• Piste B = (100,350), joka on ympyrän keskipiste. Lisäksi ympyrän halkaisija on 200. Sektorin alkukulma on 90°:tta ja loppukulma on 270°:tta. Kuvan mukainen punainen sektori saadaan aikaiseksi komennolla: arc(100,350,200,200,90,270,PIE);
• Piste C = (350,350), joka on ympyrän keskipiste. Lisäksi ympyrän halkaisija on 300. Sektorin alkukulma on 270°:tta ja loppukulma on 90°:tta yli täyden ympyrän (= 360°). Kuvan mukainen keltainen sektori saadaan aikaiseksi komennolla: arc(350,350,300,300,270,360+90,PIE);
• Piste D = (325,125), joka on ympyrän keskipiste. Lisäksi ympyrän halkaisija on 150. Sektorin alkukulma on 45°:tta ja loppukulma on 135°:tta. Kuvan mukainen sininenvihreäi saadaan aikaiseksi komennolla: arc(325,125,150,150,45,135,PIE);
• Piste E = (420,75), joka on ympyrän keskipiste. Lisäksi ympyrän halkaisija on 150. Sektorin alkukulma on 315°:tta ja loppukulma on 225°:tta yli täyden ympyrän (=360°). Kuvan mukainen sininen sektori saadaan aikaiseksi komennolla: arc(425,75,150,150,315,360+225,PIE);

Kun mukaan lisäämme värikomennot, niin kokonainen ohjelma on seuraavanlainen.

P5.js-koodi

function setup() {
  createCanvas(500, 500);       // Ikkunan koko 500 x 500
  strokeWeight(3);              // Viivan paksuus 3
  angleMode(DEGREES);           // Laitetaan asetus, että käytetään kulma-asteita
}

function draw() {
  background(255,255,55);              // Asetetaan taustaväriksi valkoinen
  fill(0,0,255);                       // Asetetaan täyttöväriksi sininen
  arc(100,100,200,200,0,180,PIE);      // Piirretään sektori, jonka keskipiste on (100,100), halkaisija on 200,
                                       // eli leveys ja korkeus on sama, alkukulma 0, loppukulma 180
  fill(255,0,0);                       // Asetetaan täyttöväriksi punainen
  arc(100,350,200,200,90,270,PIE);     // Piirretään sektori, jonka keskipiste on (100,350), halkaisija on 200,
                                       // eli leveys ja korkeus on sama, alkukulma 90, loppukulma 270
  fill(255,255,0);                     // Asetetaan täyttöväriksi keltainen
  arc(350,350,300,300,270,360+90,PIE); // Piirretään sektori, jonka keskipiste on (350,350), halkaisija on 300,
                                       // eli leveys ja korkeus on sama, alkukulma 270, loppukulma 450
  fill(0,255,0);                       // Asetetaan täyttöväriksi vihreä
  arc(325,125,150,150,45,135,PIE);     // Piirretään sektori, jonka keskipiste on (325,125), halkaisija on 150,
                                       // eli leveys ja korkeus on sama, alkukulma 45, loppukulma 135
  fill(0,255,255);                     // Asetetaan täyttöväriksi syaani
  arc(425,75,150,150,315,360+225,PIE); // Piirretään sektori, jonka keskipiste on (425,75), halkaisija on 150,
                                       // eli leveys ja korkeus on sama, alkukulma 315, loppukulma 585
}

Huomio: Mikäli et käytä asetusta angleMode(DEGREES); niin komennossa voidaan käyttää funktiota radians(kulma), joka muuttaa kulma-asteet radiaaniasteiksi. Esimerkiksi komento arc(100,100,200,200,0,180,PIE); voidaan kirjoittaa myös muodossa: arc(100,100,200,200,radians(0),radians(180),PIE);