04 - Farby

Úloha 1

Vytvor nový skeč, ktorý nakreslí na obrazovku štyri štvorce, po dvoch pod sebou:

Úloha 2

Pridajte do svojho programu nový príkaz fill, pred prvý príkaz rect. Takto:

size(400, 400);

fill(0);
rect(40, 40, 150, 150);
rect(210, 40, 150, 150);
rect(40, 210, 150, 150);
rect(210, 210, 150, 150);

Sledujte, ako sa zmenila farba štvorcov. Vyskúšajte namiesto hodnoty 0 dať do príkazu fill ako parameter hodnotu 100.

Vedeli by ste zvyšovaním parametra prísť na to, aká približne hodnota vytvorí bielu farbu?

Farba výplne

Ak dáme príkazu fill iba 1 číselný parameter, bude to intenzita bielej. 0 je žiadna intenzita, takže čierna farba. Maximálna intenzita je 255, to je biela farba. Hodnoty medzi tým sú rôzne odtiene šedej.

Ak dáme 3 parametre príkazu fill, budú to intenzity červenej, zelenej a modrej zložky farby, takzvané RGB. Tieto hodnoty sú tiež v rozsahu 0 až 255.

Úloha 3

Vyskúšajte zmeniť fill vo vašom programe tak, aby kreslil červenou farbou:

size(400, 400);

fill(255, 0, 0);
rect(40, 40, 150, 150);
rect(210, 40, 150, 150);
rect(40, 210, 150, 150);
rect(210, 210, 150, 150);

Úloha 4

Vyskúšajte rôzne kombinácie čísiel v parametroch príkazu fill:

• 0, 255, 0

• 0, 0, 255

• 255, 255, 0

• 255, 255, 255

Príkaz fill vie prijať ako parameter aj hexadecimálnu hodnotu farby. Tá vyzerá napríklad takto: #27BACB.

Skúste si to v programe: fill(#27BACB);

Hodnoty farieb môžete ľahko hľadať aj priamo v Processingu, v menu Tools-> Color selector:

Úloha 5

Všetky štvorce sme doteraz mali rovnakou farbou. Lebo sme mali len jeden príkaz fill v programe.

Pridaj v programe pred každý príkaz rect jeho vlastný príkaz fill a vytvor viacfarebný obrázok:

Ktorý príkaz fill ovplyvňuje ktorý príkaz rect?

Prečo v Úlohe 3 jeden príkaz fill nastavil farbu všetkých štyroch štvorcov naraz a nie len tomu príkazu rect, ktorý bol bezprostredne za fill?

Úloha 6

Vytvorte nový skeč. Pomocou príkazov fill a rect nakreslite írsku vlajku:

Úloha 7

Vytvorte nový program, ktorý nakreslí takýto obrázok. Farby nemusia byť presne ako na obrázku:

Úloha 8

Skúste do každého príkazu fill v tomto programe pridať ešte jeden číselný parameter na koniec, číslo 50.

Ak používate hexa farby, tak takto napríklad:

fill(#FF00FF, 50);

Alebo ak používate RGB farby, tak takto:

fill(255, 0, 255, 50);

Takto vyzerá výsledok po pridaní štvrtého parametra

Zistite, aká hodnota predstavuje úplnú priesvitnosť a ktorá úplnú viditeľnosť.

Pozrite si dokumentáciu k príkazu fill a v nej všetky možnosti parametrov: https://processing.org/reference/fill_.html

Farba okraja

Podobne ako farba výplne sa nastavuje aj farba okraja objektu. Je na to príkaz stroke. Skúste do programu, pred prvý príkaz fill pridať:

stroke(255, 0, 0);

Keby ste chceli farbu okraja vynechať úplne, môžete príkaz stroke nahradiť príkazom noStroke(), bez parametrov:

noStroke();

Okraje zmizli po použití príkazu noStroke

Ak by ste sa chceli zbaviť farby výplne a urobiť objekt priehľadný, tak môžete použiť príkaz noFill(). Použijete ho namiesto fill, takisto ako ste použili noStroke() namiesto stroke.

Farba pozadia

V Processingu sa farba pozadia celého okna nastavuje príkazom background. Farbu mu nastavíme rovnakými parametrami ako v príkazoch fill a stroke.

Úloha 9

Vytvorte nový skeč a v ňom jeden žltý a jeden červený obdĺžnik:

Na začiatok, hneď pod príkaz size pridajte príkaz background s parametrom 0:

background(0);

Zmeňte parametre príkazu background tak, aby pozadie malo zelenú farbu:

Úloha 10

Skúste presunúť príkaz backgroundzo začiatku programu doprostred, pod prvý príkaz rect. Pozorujte, čo sa stane:

Kam sa stratil prvý obdĺžnik? Čo vieme na základe tohto experimentu povedať o fungovaní príkazu background?