• Esittely
• Johdanto
• Esimerkkejä
• Asennus
• Perusteet
• Perusteet
• Suunnittelu
• Suunnittelutila
• Muodot
• Värit
• Kuvat
• Tekstit
• Interaktiivisuus
• Video
• Videon tuominen
• Mikrofoni
• Hiiri
• Näppäimistö
• Tulostaminen
• Vienti
• Verkkoon vieminen
• Animaatio
• Äänet
• Draw-metodi
• Objektien animointi
• Monien objektien animointi
• Aikajana
• Ohjelmointi
• Kommentit
• Objektit
• Metodit
• Listat
• Toistaminen
• Ehdot
• Muuttujat
• Muutokset
• Rajat
• Liitteet
• Yleisiä virheitä
• Ulkoiset kirjastot
• Dokumentaatio
• Arduino
• Tästä oppaasta
• Tekijät

Muodot

Processing tarjoaa monia muotoja. Tässä ovat tärkeimmät.

Piste

Aloitamme piirtämisen pisteellä. Yksi piste vastaa pikseliä, joka on ikkunassa sijainnissa x leveyssuunnassa ja sijainnissa y korkeussuunnassa. Koordinaatit annetaan muodossa (x, y). Tässä esimerkissä piste on hyvin pieni. Se on keskipisteessä.

point(50, 50);

Huomaa, että kehys on 100x100, joten piste on keskellä. Jos piirrämme kehyksen ulkopuolelle, et näe pistettä. 

Viiva

Viiva (AB) koostuu määritelmällisesti loputtomasta määrästä pisteitä alkupisteen A ja loppupisteen B välillä. Rakentaaksemme sen keskitymme vain pisteiden A ja B koordinaatteihin x ja y. Jos esimerkiksi oletusikkunassa piste A on ikkunan vasemmassa alanurkassa, ja piste B on oikeassa ylänurkassa, voimme piirtää tämän viivan komennolla line(xA,yA,xB,yB) :

line(15, 90, 95, 10);

Suorakulmio

Suorakulmio piirretään neljällä arvolla komennolla rect(x-yläkulma,y-yläkulma,leveys,korkeus). Ensimmäinen x ja y -arvojen pari merkitsee suorakulmion vasenta yläkulmaa, kuten pisteen tapauksessa. Sen sijaan seuraavat kaksi arvoa eivät merkitse vasenta alakulmaa, vaan tämän suorakulmion leveyttä (x-akseli, horisontaalinen) ja korkeutta (y-akselilla, vertikaalinen). 

Esimerkki:

rect(10, 10, 80, 80);

Koska kaksi viimeistä arvoa (leveys ja korkeus) ovat identtiset, saamme neliön. Muuttele arvoja ja katso tuloksia.

Käytä metodia CENTER saadaksesi kaksi ensimmäistä arvoa vastaamaan suorakulmion keskipistettä: 

rectMode(CENTER);
rect(50, 50, 80, 40);

Ellipsi

Kuten suorakulmio, ellipsi luodaan tilassa CENTER (oletusarvoinen tila) tai tilassa CORNER. Niinpä seuraava komento luo neliön, jonka keskipisteen koordinaatit ovat kaksi ensimmäistä arvoa sulkujen sisällä. Kolmas arvo vastaa horisontaalisen akselin läpimittaa ja vastaa vertikaalisen akselin läpimittaa: huomaa, että jos kolmas ja neljäs arvo ovat identtisiä, saat ympyrän, muuten saat ellipsin:

ellipse(50, 50, 80, 80);

Kokeile kolmannen ja neljännen arvon muuttamista ja tarkkaile tuloksia.

Kolmio

Kolmio on kolmen pisteen muodostama kuvio. Kolmio luodaan komennolla triangle(x1,y1,x2,y2,x3,y3), jolla määritellään kolmion kolme kärkipistettä:

triangle(10, 90, 50, 10, 90, 90);

Kaari

Ympyrän kaari voidaan tehdä komennolla arc(x, y, leveys, korkeus, alku, loppu), jossa pari x, y määrittelee ympyrän keskipisteen, toinen ja kolmas pari määrittää kulman loppupisteen:

arc(50, 50, 90, 90, 0, PI);

Nelitahokas

Nelitahokas luodaan määrittelemällä neljä paria x ja y -koordinaatteja komennolla quad(x1,y1,x2,y2,x3,y3,x4,y4) myötäpäivään:

quad(10, 10, 30, 15, 90, 80, 20, 80);

Käyrä

Käyrä luodaan komennolla curve(x1, y1, x2, y2, x3, y3, x4, y4), jossa x1 ja y1 määrittelevät käyrän ensimmäisen läpikulkupisteen, x4 ja y4 toisen läpikulkupisteen , x2 ja y2 alkupisteen ja x3, y3 loppupisteen:

curve(0, 300, 10, 60, 90, 60, 200, 100);

Bézier-käyrä

Toisin kuin komento curve(), Bézier-käyrä luodaan komennolla bezier(x1,y1,x2,y2,x3,y3,x4,y4)

bezier(10, 10, 70, 30, 30, 70, 90, 90);

Tasoitettu käyrä

Komento curveVertex() luo joukon x ja y -koordinaatteja kahden läpikulkupisteen välille komennolla  curveVertex(ensimmäinen läpikulkupiste,xN,yN,xN,yN,xN,yN, viimeinen läpikulkupiste) :

beginShape();
curveVertex(0, 100);
curveVertex(10, 90);
curveVertex(25, 70);
curveVertex(50, 10);
curveVertex(75, 70);
curveVertex(90, 90);
curveVertex(100, 100);
endShape();

Vapaat muodot

Kokonainen joukko vapaita muotoja voidaan piirtää tasolle pisteiden sarjana, komennoilla beginShape(),vertex(x,y),...,endShape(). Jokainen piste luodaan koordinaateilla x ja y. Funktio  CLOSE komennossa endShape(CLOSE) osoittaa, että muoto suljetaan, ja että jälkimmäinen yhdistetään, kuten kuusikulmion esimerkissä:

beginShape();
vertex(50, 10);
vertex(85, 30);
vertex(85, 70);
vertex(50, 90);
vertex(15, 70);
vertex(15, 30);
endShape(CLOSE);

Ääriviivat

Olemme havainneet, että tähän mennessä kaikilla mainituilla esimerkeillä on ääriviivat ja täytetty pinta. Jos tahdot tehdä näkymättömän ääriviivan, käytä komentoa noStroke():

noStroke();
quad(10, 10, 30, 15, 90, 80, 20, 80);

Täyte

Vastaavasti voimme jättää pinnan täyttämättä käyttämällä komentoa noFill() :

noFill();
quad(10, 10, 30, 15, 90, 80, 20, 80);

Tähän mennessä ikkunan tausta on ollut harmaa, muotojen reunat ovat olleet mustat, ja täyttö on ollut valkoinen. Seuraavassa luvussa opit muuttamaan nämä värit.