Skip to content

Latest commit

 

History

History
329 lines (299 loc) · 12.9 KB

piirtaminen.org

File metadata and controls

329 lines (299 loc) · 12.9 KB
Raw

Piirtäminen

Piirtoikkunan pisteen koordinaatit

Processing-ohjelmointikielessä piirretään kuvioita ja animaatioita piirtoikkunaan. Piirtoikkunan eri kohtiin eli pikseleihin viitataan \(x\)- ja \(y\)-koordinaateilla. Esimerkiksi pisteen \((70, 40)\) \(x\)-koordinaatti on 70 ja \(y\)-koordinaatti 40. Toisin kuin matematiikassa, piirtoikkunassa piste \((0, 0)\) on vasemmassa yläkulmassa ja \(y\)-koordinaatin arvot kasvavat alaspäin. Alla oleva kuva esittää piirtoikkunaa, jonka leveys on 600 ja korkeus 400. Kuvaan on piirretty myös kaikkien ikkunan kulmapisteiden koordinaatit sekä pisteiden \((70, 40)\) ja \((220, 130)\) kohdat.

<<koordinaatisto>>
pair A = (70, 40);
pair B = (220, 130);

for (pair P : new pair[] {A, B})
  dot ((string) P, T * P, NE);
for (int x : new int[] {0, LEVEYS})
  for (int y : new int[] {0, KORKEUS})
    {
      pair P = (x, y);
      dot ((string) P, T * P, (x == 0 ? W : E));
    }

#+RESULTS[ba65e9a8adc35339944122d669c0b96a45972266]: pisteita-koordinaatistossa pisteita-koordinaatistossa.svg

Pistettä \((0, 0)\) kutsutaan piirtokoordinaatiston origoksi.

Eräs Processing-kielen peruskuvioista on suorakulmio (englanniksi rectangle). Seuraavassa esimerkissä piirretään suorakulmio ikkunaan, jonka koko on $600× 400$ pikseliä. Piirtoikkuna on väriltään harmaa, ja piirretyssä valkoisessa suorakulmiossa on musta reunus.

size (600, 400);
rect (70, 40, 150, 90);

Lauseke size (600, 400); avaa piirtoikkunan, jonka leveys on 600 pikseliä ja korkeus 400 pikseliä. Lauseke rect (70, 40, 150, 90); piirtää suorakaiteen, jonka vasen yläkulma on kohdassa \((70, 40)\) ja jonka leveys on 150 ja korkeus 90. Koska suorakaiteen yläkulman \(x\)-koordinaatin ja leveyden summa on \[ 70 + 150 = 220, \] ja yläkulman \(y\)-koordinaatin ja korkeuden summa on \[ 40 + 90 = 130, \] suorakaiteen oikea alakulma on samassa kohdassa kuin yllä olevaan kuvaan piirretty piste \((220, 130)\).

Tarkalleen ottaen pikselit ovat pieniä neliöitä, mikä vaikuttaa hieman oikean alakulman tarkkoihin koordinaatteihin. Tähän palataan kappaleessa sisäkkäiset silmukat.

Ohjelmakoodin muoto

Tietokoneohjelma koostuu tyypillisesti ohjelmariveistä, joita edellä olevasta ohjelmasta löytyy kaksi. Processing-ohjelma on hyvin tarkka monista ohjelmarivin yksityiskohdista. Jotkut asiat ohjelmoija voi itse päättää.

Edellä olevasta ohjelmasta voidaan jättää pois kaikki tyhjä tila eli välilyönnit, ja ohjelma toimii silti samalla tavalla. Välilyöntien käyttäminen on siis tyylikysymys. Myös tyhjiä rivejä ja rivinvaihtoja voidaan lisätä ohjelmaan huoletta.

size(600,
     400);

rect(70,40,150,90);

Monet muutokset johtavat siihen, että ohjelma ei joko toimi tai lopputulos muuttuu. Ennen kaikkea

  • suoritettavan komennon lopussa täytyy olla puolipiste eli ;
  • sanat size ja rect täytyy kirjoittaa pienillä kirjaimilla
  • sulkujen () täytyy olla tavalliset sulut, ei esimerkiksi aaltosulut {} tai hakasulut []
  • sulkujen sisällä olevien lukujen täytyy olla eroteltuina toisistaan pilkuilla
  • Processing-ohjelmassa komennon size() täytyy olla aina ohjelman ensimmäinen rivi.

Kokeile tehdä muutoksia ohjelmaan ja katso, mitä tapahtuu kun yrität suorittaa ohjelman.

Muita kuvioita

Suorakaiteen piirtämiseen käytetään yllä funktiota rect(). Funktioiden nimiin viitataan usein laittamalla sulut nimen perään, jotta tiedetään kyseeessä olevan nimenomaan funktio. Tällöin sulkujen sisältö jätetään yksinkertaisuuden vuoksi monesti tyhjäksi.

Funktio rect() piirtää suorakaiteen, jonka sivut ovat piirtoikkunan sivujen suuntaiset. Muunlaisia nelikulmioita voidaan piirtää funktiolla quad(), jonka nimi tulee englannin kielen nelikulmiota tarkoittavasta sanasta quadrilateral. Tällöin sulkujen sisään laitetaan kaikkien neljän pisteen koordinaatit järjestyksessä joko myötä- tai vastapäivään kuviota kiertäen. Seuraavassa esimerkissä piirretään nelikulmio, jonka kärkipisteet ovat myötäpäivään kiertäen \((70, 40)\), \((220, 40)\), \((220, 130)\) sekä \((70, 130)\). Lopputuloksena saadaan samankaltainen suorakulmio kuin edellisessä esimerkissä.

size (600, 400);
quad (70, 40, 220, 40, 220, 130, 70, 130);

Kolmioita voidaan piirtää vastaavalla funktiolla triangle() jolle annetaan kolmen kärkipisteen koordinaatit.

Mikäli kuvioita piirretään useampia, seuraava piirretään edellisen päälle. Seuraavissa esimerkeissä vain piirtokomentojen järjestys on vaihdettu.

size (600, 400);
triangle (50, 50, 50, 350, 350, 350);
quad (50, 200, 200, 350, 350, 200, 200, 50);
size (600, 400);
quad (50, 200, 200, 350, 350, 200, 200, 50);
triangle (50, 50, 50, 350, 350, 350);

Kuvion suunnitteleminen

Kuvioiden kärkipisteiden koordinaatit kannattaa usein suunnitella kynällä ja paperilla ennen kuvan piirtämistä tietokoneella. Esimerkiksi yllä oleva kahden kuvion kuva suunniteltiin seuraavasti. Tavoitteena oli piirtää kuvan kaltainen kuvio, jossa on

  • suorakulmainen tasakylkinen kolmio sekä
  • neliö, jonka kaksi kärkipistettä ovat kolmion kylkien keskikohdissa.

Kolmion yhdeksi pisteeksi valittiin $(50, 50)$ ja kylkien pituudeksi 300.

Suunnittelu voidaan yleensä tehdä useammalla eri tavalla. Tässä tapauksessa kärkipisteet voidaan etsiä vaikkapa seuraavasti alla olevan kuvan mukaisesti.

  1. Piste \(A (50, 50)\) on annettu.
  2. Pisteellä $B$ on sama \(x\)-koordinaatti kuin pisteellä \(A.\) Koska kolmion kyljen pituus on 300 ja \(y\)-akselin arvot kasvavat alaspäin, pisteen $B$ \(y\)-koordinaatti on 300 yksikköä suurempi kuin pisteen \(A\). Niinpä \(B(50, 350).\)
  3. Pisteillä $B$ ja $C$ on sama \(y\)-koordinaatti, mutta pisteen \(C\) \(x\)-koordinaatti on 300 suurempi. Täten \(C(350, 350).\)
  4. Piste \(D\) on pisteiden $A$ ja $B$ puolivälissä, joten \(D(50, 200).\) Vastaavasti \(E\) on pisteiden $B$ ja $C$ puolivälissä, jolloin \(E(200, 350).\)
  5. Koska $DEFG$ on neliö, pisteellä $F$ on sama \(x\)-koordinaatti kuin pisteellä $C$ ja sama \(y\)-koordinaatti kuin pisteellä \(D,\) joten \(F(350, 200).\)
  6. Vastaavasti pisteellä $G$ on on sama \(x\)-koordinaatti kuin pisteellä $E$ ja sama \(y\)-koordinaatti kuin pisteellä \(A,\) joten \(G(200, 50).\)
<<koordinaatisto>>
pair A = (50, 50);
int s = 300; // sivun pituus
pair B = shift ((0, s)) * A;
pair C = shift ((s, 0)) * B;

draw (T * (A -- B -- C -- cycle), dashed);
pair D = midpoint (A -- B);
pair Ep = midpoint (B -- C);
pair F = (C.x, D.y);
pair G = (Ep.x, A.y);
draw (T * (D -- Ep -- F -- G -- cycle), dashed);
pair[] points = {A, B, C, D, Ep, F, G};
string[] labels = {"$A$", "$B$", "$C$", "$D$", "$E$", "$F$", "$G$"};
for (int i = 0; i < points.length; ++i)
  {
    pair P = points [i];
    dot (labels [i] + (string) P, T * P, (P.y == A.x + s ? S : E));
  }

#+RESULTS[7ef1d97d2b913d57b2c0eedfb923a272bbecd591]: kolmio-nelio.svg

Tehtävät

  1. Piirrä \(800× 600\)-kokoiseen piirtoikkunaan a) nelikulmio, jonka vasen yläkulma on pisteessä \((160, 90)\) ja jonka leveys on 200 ja korkeus 300 b) kolmio, jonka kärkipisteet ovat \((110, 500)\), \((370, 420)\) sekä \((480, 570)\) c) nelikulmio, jonka kärkipisteet ovat vastapäivään kiertäen lueteltuina \((730, 50)\), \((450, 370)\), \((770, 530)\) sekä \((610, 250)\).
  2. Piirrä seuraavanlaiset kuvat. Piirtoikkunan koko on \(200× 200.\) a)
size (200, 200);
triangle (0, 100, 0, 200, 200, 0);

b)

size (200, 200);
quad (0, 0, 200, 200, 200, 100, 100, 0);
triangle (0, 100, 0, 200, 100, 200);

c)

size (200, 200);
quad (0, 100, 100, 200, 200, 100, 100, 0);
rect (50, 50, 100, 100);
  1. Piirrä haluamasi kokoiseen piirtoikkunaan valitsemasi kokoinen a) puolisuunnikas b) tasakylkinen kolmio, joka ei ole suorakulmainen c) suunnikas, joka ei ole suorakulmio.
  2. Piirrä seuraavat kuviot. Piirtoikkunan koko on \(300× 200.\) a) Suorakaide on piirtoikkunan keskellä, ja suorakaiteen leveys ja korkeus ovat puolet piirtoikkunan vastaavista mitoista.
size (300, 200);
rect (75, 50, 150, 100);

b) Ulomman suunnikkaan kaksi kärkipistettä jakavat piirtoikkunan pidemmät sivut suhteessa \(1:2.\) Sisemmän suunnikkaan kärkipisteet ovat ulomman suunnikkaan sivujen keskipisteitä.

size (300, 200);
quad (100, 0, 300, 100, 200, 200, 0, 100);
quad (50, 50, 200, 50, 250, 150, 100, 150);
  1. Piirrä haluamasi näköiset ja kokoiset versiot isoista kirjaimista T, X, A, B sekä Q. Alla esimerkkinä yksi versio A-kirjaimesta. 
    size (300, 200);
rect (75, 100, 150, 30);
quad (250, 200, 300, 200, 175, 0, 125, 0);
quad (0, 200, 50, 200, 175, 0, 125, 0);
  2. Tämän tehtävän voit tehdä vain, mikäli olet jo opiskellut Pythagoraan lauseen. Piirrä tasasivuinen kolmio, jonka sivun pituus on 120. Piirrä kolmio \(300× 300\)-kokoisen piirtoikkunan keskelle siten, että kolmion sivuille jää yhtä paljon tilaa ja myös ylä- ja alapuolelle jää yhtä paljon tilaa. Voit pyöristää laskujesi tuloksina saamasi koordinaatit kokonaisluvuiksi.

Ratkaisuja

Saman asian tekevä tietokoneohjelma voidaan kirjoittaa monella eri tavalla. Nämä ratkaisut ovat vain esimerkkejä.

  1. size (800, 600);
rect (160, 90, 200, 300);
triangle (110, 500, 370, 420, 480, 570);
quad (730, 50, 450, 370, 770, 530, 610, 250);
  2. a)
	 <<piirtaminen-kolmio>>

b)

	 <<piirtaminen-raidat>>

c)

	 <<piirtaminen-neliot>>
  1. Esimerkkejä mahdollisista ratkaisuista. a)
size (300, 200);
quad (50, 50, 130, 50, 190, 150, 10, 150);

b)

size (300, 200);
triangle (50, 150, 250, 150, 150, 100);

c)

size (300, 200);
quad (50, 150, 200, 150, 250, 50, 100, 50);
  1. a)
	  <<piirtaminen-suorakaide-keskella>>

b)

	  <<piirtaminen-sisakkaiset-suunnikkaat>>
  1. Useita eri ratkaisuja.
  2. Tasasivuisen kolmion korkeudeksi saadaan Pythagoraan lauseella noin 104. 
    size (300, 300);
triangle (90, 202, 210, 202, 150, 98);