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

carre_orange.tiff

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

carre_film.tiff

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.

multi_quadrat.tiff

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