Processing suomeksi
Muutokset
Toistaiseksi olemme suunnitelleet muotoja sovelluksemme ikkunassa, aina suhteessa ikkunan vasempaan yläkulmaan.
Muutoksilla on mahdollista siirtää tätä alkupistettä, mutta myös määritellä uudelleen akseleiden suunta ja jopa muuttaa näiden viivojen skaalaa.
Oletusarvoisesti Processing asettaa alkupisteen seuraavasti:
size(200, 200); noStroke(); fill(0); rect(0, 0, 100, 100);
Siirto
Alkupisteen muuttamiseksi on komento translate (). Voimme siirtää x-akselia (horisontaalisesti) ja y-akselia (vertikaalisesti). Kerromme translate () -komennolle, kuinka paljon tahdomme siirtää näitä akseleita. Seuraavassa esimerkissä siirrämme alkupistettä 50 pikseliä suunnassa x ja 50 pikseliä suunnassa y. Tulisi huomata, että translate () ei vaikuta myöhemmin piirrettyihin geometrisiin muotoihin.
size(200, 200); noStroke(); fill(0); translate(50, 50); rect(0, 0, 100, 100);
Komennon translate() linkittäminen antaa sinun siirtää muotoja, kuten alla näkyy.
size(200,200); // Musta fill(0); translate(20,20); rect(0,0,40,40); // Harmaa fill(128); translate(60,60); rect(0,0,40,40); // Valkoinen fill(255); translate(60,60); rect(0,0,40,40);
Käännös
Voimme siirtää koordinaattipiirroksen alkupistettä. Nyt pyöritämme akseleita. Komennolla rotate() x ja y vaihtavat suuntaa. rotate() ottaa parametriksi numeron, joka esittää pyörimisliikkeen astetta, eli kuinka akselimme pyörivät suhteessa ikkunaamme. Positiiviset numerot osoittavat pyörimistä myötäpäivään.
Olemassa on kaksi mittausjärjestelmää kulman mittaamiseen: radiaani ja asteet. Oletusarvoisesti Processing toimii radiaanilla, mutta yleensä on helpompi ajatella asteina. Esimerkiksi 180 astetta on u-käännös.
Processing muuttaa yhden yksikön toiseksi funktioilla radians() ja degrees().
float d = degrees(PI/4); // muuttaa radiaanin asteiksi float r = radians(180.0); // muuttaa asteet radiaaniksi
Yksinkertainen esimerkki funktion rotate() toiminnasta. Pyöritämme neliötä alkupisteen ympäri.
size(200, 200); noStroke(); fill(0); rotate(PI/4); rect(0, 0, 100, 100);
Kuten translate(), rotate()asetetaan ennen geometristen muotojen piirtämistä. On mahdollista yhdistää näitä muutoksia, jotka ovat kasautuvia.
size(200,200);
smooth();
translate(width/2, height/2);
for (int i=0;i<360;i+=30){
rotate(radians(30));
quad(0, 0, 30, 15, 70, 60, 20, 60);
}
Skaalaaminen
Kohteiden kokoa voidaan muuttaa komennolla scale(). Tämä komento antaa sinun suurentaa tai kutistaa geometristen muotojen kokoa. Se ottaa yksi tai kaksi parametriä. Esimerkiksi scale(0.5) puolittaa geometristen muotojen koon, kun taas scale(2.0) kaksinkertaistaa sen. Komennolla scale(1) ei ole mitään vaikutusta.
Kahdella parametrillä kirjoittaminen yhdistää koon muuttamisen akseleilla x ja y. Esimerkiksi scale(0.5, 2.0) puolittaa koon suunnassa x ja kaksinkertaistaa sen suunnassa y.
size(200,200); scale(1.5); rect(0,0,100,100);
size(200,200); scale(1.0,1.5); rect(0,0,100,100);
Kuten komennot rotate() ja translate(), komennon scale() toistaminen kasautuu. Seuraava ohjelma esittää tämän ominaisuuden. Tässä neliöt ovat sisäkkäin kuin venäläiset nuket ja niiden koko kasvaa toistettaessa komentoa scale().
size(200,200); noStroke(); // Musta fill(0); scale(1); rect(0,0,200,200); // Harmaa fill(128); scale(0.5); rect(0,0,200,200); // Valkoinen fill(255); scale(0.5); rect(0,0,200,200);
Muutosten järjestys
On mahdollista yhdistää muutama erilainen muutostyyppi. Kuten näimme edellisessä esimerkissä, muutokset kasautuvat asteittain, kun peräkkäiset translate(), rotate() ja scale() -komennot kasautuvat. Jokainen muutos ottaa huomioon edelliset muutokset.
Kun käytetään useampia erilaisia muutostyyppejä, niiden kirjoitusjärjestys on tärkeä. Ajaessasi autolla "käänny vasempaan ja aja suoraan" on eri komento kuin "aja suoraan ja käänny vasemmalle". Et välttämättä päädy samaan paikkaan. Sama pätee Processingin muutoksiin.
Esittelemme tämän komennon kääntämällä komennot translate() ja rotate() toisin päin.
size(200,200); smooth(); fill(0); translate(100,0); rotate(PI/5); rect(0,0,100,100);
size(200,200); smooth(); fill(0); rotate(PI/5); translate(100,0); rect(0,0,100,100);
Eristä muutokset
Olemme nähneet muutoksien kasautuvan asteittain käytettäessä komentoja translate(), rotate() ja scale(). Näemme nyt, kuinka muutokset voidaan tallentaa tiettynä aikana, ja kuinka palauttaa ne myöhemmin, komennon draw() aikana.
Käytämme sitä kahteen funktioon, joita käytetään aina pareittain. Nämä komennot ovat pushMatrix() ja popMatrix(). Näemme lopuksi, miksi nämä komennot on nimetty niin oudosti.
Kahdessa seuraavassa esimerkissä näemme seuraavat muutokset:
* A: Aluksi ikkunan vasen ylänurkka.
* B: Alkupiste ruudun keskellä.
* C: Alkupiste ruudun keskellä, kieritetään PI/4.
size(200,200); smooth(); rectMode(CENTER); // Tee kirjanmerkki ruudun keskipisteeseen translate(width/2,height/2); // Tallennus A pushMatrix(); // Muutos B rotate(PI/4); // Piirrä musta neliö fill(0); rect(0,0,120,120); // Palautus A // Tässä pisteessä kirjanmerkki palaa ruudun keskipisteeseen popMatrix(); // Piirrä valkoinen ruutu, joka ei ota pyöritystä huomioon fill(255); rect(0,0,50,50);
Voimme käyttää funktioita pushMatrix() ja popMatrix() tallentamaan nykyisen muutoksen tilan.
Edellisen esimerkin pohjalta laitamme pushMatrix() / popMatrix() -parin, joka tallentaa ensisijaisen muutoksen (width / 2, height / 2).
size(200,200); smooth(); rectMode(CENTER); noStroke(); // Varmuuskopio A pushMatrix(); // Muutos B translate(width/2,height/2); // Tallennus B pushMatrix(); // Muutos C rotate(PI/4); // Piirretään musta neliö fill(0); rect(0,0,120,120); // Palautus B popMatrix(); // Piirrä valkoinen neliö, joka ei ota huomioon // pyöritystä rotate(PI/4) fill(255); rect(0,0,50,50); // Palautus A popMatrix(); // Piiretään harmaa laatikko fill(128); rect(0,0,100,100);
Kolmiulotteinen muutos
Kaikki muutokset, joista olemme keskustelleet, ovat mahdollisia myös kolmiulotteisessa piirtämisessä. Processing siirtyy kolmiulotteiseksi, kun kutsumme komentoa size():
size(300,300,P3D);
Tässä tilassa Processing määrittelee z-akselin osoittavan ruudun pohjaa kohden.
Matkan ja skaalan muutokset kirjoitetaan lisäämällä kolmas parametri. Esimerkiksi siirtyminen ruudun keskipisteeseen x ja y -akselia pitkin mahdollistaa piirtämisen kuin muodot olisivat kaukana meistä, voisimme kirjoittaa jotain tällaista:
translate(width/2, height/2, -100);
Pyörityksiä varten tarvitsemme kolme uutta komentoa: rotateX, rotateY ja rotateZ. Nämä kierittävät akseleita x, y ja z.
Processing sisältää funktiot yksinkertaisten kolmiulotteisten muotojen piirtämistä varten. Näihin sisältyvät kuutiot ja pallot. Luomme kuution, joka kiertää akselien x ja y ympäri, ja joka asetetaan hiiren sijaintiin.
float rx = 0;
float ry = 0;
float z = 100;
void setup() {
size(200,200,P3D);
}
void draw() {
background(128);
rx = map(mouseX, 0,width,-PI,PI);
ry = map(mouseY, 0,height,-PI,PI);
translate(width/2,height/2,z);
rotateX(rx);
rotateY(ry);
box(30);
}
Esittelemme uuden funktion map (), joka muuntaa arvojen joukon uudeksi arvojen joukoksi. Yksinkertainen esimerkki selittää tätä konseptia:
float v = 100; float m = map(v,0,200, 0,1); // m on 0.5
Tässä esimerkissä map() muuntaa arvon 100 välillä [0, 200] vastaavaksi arvoksi välillä [0, 1]. Palautettu arvo on 0.5 m.
Ohjelmissamme tämä funktio mahdollistaa mouseX -arvon muuttamisen välillä 0 ja leveys vastaavaksi arvoksi välillä -PI ja PI.
Funktiot pushMatrix() ja popMatrix() toimivat myös kolmiulotteisessa grafiikassa, jossa voidaan tallentaa ja palauttaa muutokset. Tämä on paras tapa piirtää kolmiulotteinen maailma, jossa on joukko liikkuvia esineitä. Näin vältetään monimutkaiset matemaattiset konseptit.
Kaikki Processingin muutokset tallennetaan 16 numeron sarjaan, jota kutsutaan matriisiksi (englanniksi matrix). Näitä numeroita muutosfunktiot muuttavat suoraan. Voit tulostaa tämän taulukon komennolla printMatrix().