Processing suomeksi
Värit
Piirrä kuva ruudulle ja muuta pikselien väriä. Pikselit ovat pieniä alueita, yleensä neliömäisiä, joilla on väri. Jokaisella värillä on kolme kanavaa, jotka ovat punainen, vihreä ja sininen. 100% arvo jokaisella kanavalla on valkoinen. 0% arvo jokaisella kanavalla on musta. Se on valoa, ei maalia. Niinpä jokaisen kanavan arvon kasvaessa sen väri vaalenee.
Esimerkiksi 100% punainen, 80% vihreä, 20% sininen antaa värin oranssi. Metodi fill() antaa meidän määritellä värin seuraaville piirrettäville muodoille. Jokainen värikanava annetaan asteikolla 0-255. Niinpä 80% arvosta 255 on 204 ja 20% arvosta 255 on 51.
Taustavärit
Voit muuttaa taustaväriä metodilla background(). Huomaa: komento background() pyyhkii ruudun edellisen komennon jälkeen!
background(0, 0, 0);
Täyttöväri
Joka kerta kun piirrät muodon, se tehdään täyttövärillä, joka valitaan tässä vaiheessa. Se tehdään kutsumalla metodia fill().
noStroke(); fill(255, 204, 51); rect(25, 25, 50, 50);
Processing tarjoaa erilaisia formaatteja värin ilmaisemiseen. Jos teet verkko-ohjelmointia, tunnet luultavasti heksadesimaaliformaatin. Kirjoitamme siis:
fill(#ffcc33); rect(25, 25, 50, 50);
Voit määritellä värin alfakanava-arvon. Se esittää värin läpinäkyvyyden. Tehdäksemme tämän menetelmälle täytyy tarjota neljä arvoa. Neljäs arvo on alfa-arvo.
noStroke(); fill(255, 204, 51); // oranssi rect(25, 25, 50, 50); fill(255, 255, 255, 127); // valkoinen osittain läpinäkyvä rect(35, 35, 50, 50);
Jos tahdot valita värin, joka on harmaan sävy, voimme antaa yhden parametrin komennolle. Se on harmaan arvo väliltä 0-255.
fill(127); rect(25, 25, 50, 50);
Voit ottaa muotojen täytön pois päältä kutsumalla metodia noFill().
Ääriviivan väri
Muuttaaksesi ääriviivan väriä, voit kutsua metodia stroke(), jonka parametreinä on halutun värin kanavat. Kutsu komentoa noStroke() poistaaksesi ääriviivan värit.
size(200, 200); smooth(); background(255); // piirrämme valkoisen taustan stroke(#000000); // ääriviiva on musta fill(#FFFF00); // täyte on keltainen strokeWeight(5); translate(width / 2, height / 2); ellipse(0, 0, 120, 120); stroke(255, 0, 0); // viiva on punainen line(20, -40, 20, 0); stroke(0, 0, 255); // viiva on sininen line(-20, -40, -20, 0); noFill(); // seuraavaa muotoa ei täytetä stroke(#000000); // viivasta tulee musta bezier(-45, 0, -45, 60, 45, 60, 45, 0);
Värimuutosten laajuus
Oletusarvoisesti mikä tahansa tyylimuutos (täytön väri tai esineen muoto tai paksuus) vaikuttaa kaikkee⁞n, jonka maalaat. Rajoittaaksesi näiden muutosten laajuutta voit laittaa muutoksesi komentojen pushStyle () ja popStyle ()⁞ väliin.
size(100, 100); background(255); stroke(#000000); fill(#FFFF00); strokeWeight(1); rect(10, 10, 10, 10); pushStyle(); // Avaa tyylin "sulkeet" stroke(#FF0000); fill(#00FF00); strokeWeight(5); rect(40, 40, 20, 20); popStyle(); // Sulkee tyylin "sulkeet" rect(80, 80, 10, 10);
Harjoitus:
Poista komennot pushStyle() ja popStyle() ja tarkkaile muutoksia.
Väriavaruus
Värien valinnassa punainen, vihreä ja sininen on yksi mahdollisista väriavaruuksista. Processing tarjoaa myös HSB-tilan. Tämä merkitsee "hue, saturation, brighness", eli väri, kylläisyys, kirkkaus. Valitsemme arvon 0-100 jokaiselle kanavalle. Väri on numero, joka valitsee värin sijainnin kromaattisella skaalalla, joka on sateenkaari. Punainen on vasemmalla, sen jälkeen tulevat oranssi, keltainen, vihreä, sininen ja purppura.
Metodi colorMode() on käyttökelpoinen muutettaessa numeroskaalaa, jolla määritellään värit ja muutetaan väriavaruutta. Esimerkiksi komento colorMode(RGB, 1.0) muuttaa skaalan, jota käytetään määrittämään jokaista värikanavaa, joten se menee nollasta ykköseen.
Tässä muutamme väritilaksi HSB:n tehdäksemme liukuvärin, joka muistuttaa sateenkaaren värejä.
noStroke();
size(400, 128);
// Väri määritellään numeroilla 0-400
colorMode(HSB, 400, 100, 100);
// Se on 400 toistoa...
for (int i = 0; i < 400; i++) {
fill(i, 128, 128);
rect(i, 0, 1, 128);
}