Info Draft 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: 

TG_01

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. 

TG_02

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. 

radian_degrev2

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.

 

quad_rotate.tiff

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);

TG_05

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. 

TG_tr_01

size(200,200);
smooth();
fill(0);

translate(100,0);
rotate(PI/5);
rect(0,0,100,100);

TG_tr_02

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. 

push_quad.tiff

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)

push_pop.tiff

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.

coordonnees3D_02

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.

cube3D.tiff

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().