Predavanje 3: Glave 7 do 9

FlipView[{Text[Style[" Branko Urošević, imqfbrankourosevic@gmail.com ",20,"Text",Italic]],Text[Style[" Faculty of Economics, University of Belgrade, NBS and CESIfo Munich",20,"Text", Italic]]}]

7. Boje i stilovi (Color and Style)

Boje u WL

Wolfram Language ne radi samo sa brojevima. On dozvoljava i da se operiše sa bojama. Engleska imena boja mogu se koristiti kao komande za boje. Red predstavlja crvenu boju:

Red

{Red,Blue,Brown,Green,Black}

Operacije sa bojama

Sa bojama se mogu raditi razne operacije. ColorNegate daje negativnu od određene boje, to jest komplementarnu boju. Blend meša boje.

ColorNegate[Blue]

ColorNegate[Yellow]

Evo kako izgleda rezultat mešanja žute, pink i zelene boje:

Blend[{Yellow,Pink,Green}]

Detaljnija specifikacija boja

Možete, naravno, da specifikujete boju i na osnovu toga koliko crvene, zelene i plave želite da u njoj bude (od 0 do 1). To se radi pomoću funkcije RGBColor:

{RGBColor[1,0,0],RGBColor[0,1,0],RGBColor[0,0,1]}

Maksimum crvene i zelene daju žutu boju:

RGBColor[1,1,0]

A šta je ovo?

RGBColor[1,1,1]

RGBColor[0,0,0]

Tabela boja

Ovo daje tabelu boja gde je crvena maksimalno zastupljena a zelena u različitom obimu:

Table[RGBColor[1,g,0],{g,0,1,0.05}]

Često je zgodno da specifikujemo boje prema hue (red, orange, yellow, green, blue, violet). Funkcija Hue nam to omogućava. To su meke boje.

Table[Hue[x],{x,0,1,0.05}]

Ponekad želimo da izaberemo slučajnu boju. To radimo koristeći RandomColor[]. Primetimo da ta funkcija ne zahteva nikakav argument. Ali, ako stavimo argument, to će biti broj puta koliko smo generisali slučajnu boju. Evo dva načina kako možemo napraviti listu od 30 slučajnih boja:

Slučajne boje

Table[RandomColor[],30]

RandomColor[30]

Ukoliko pomešamo puno slučajnih boja dobijamo nešto ovako:

Blend[RandomColor[30]]

Funkcija Style

Pomoću funkcije Style možete da kontrolišete kako izgleda, na primer, tekst. Evo broja 1000 u crvenoj boji:

Style[1000,Red]

Evo 30 slučajnih brojeva u slučajnim bojama:

Table[Style[RandomInteger[1000],RandomColor[]],30]

Još jedan element vizuelnog u Style je veličina (size). Pokazati slovo x u veličini 30 i u veličini 50 ali crveno:

Style[x,30]

Style[x,Red,50]

Ovo prikazuje broj 100 u veličinama od 10 do 40:

Table[Style[100,n],{n,10,40}]

Napraviti tabele brojeva od 1 do 50 različitih boja i veličina

Prvo pođimo od proste tabele brojeva od 1 do 50.

Table[n,{n,1,50}]

Pretpostavimo sada da želimo da napravimo te iste brojeve ali sa veličinom fonta od 20. To se može kontrolisati preko funkcije Style

Table[Style[n,20],{n,1,50}]

Razmotrimo sada iste brojeve ali sa slučajnim veličinama od 10 do 30

Table[Style[n,RandomInteger[{10,30}]],{n,1,50}]

Najzad napravimo to isto ali još sa slučajnim bojama

Table[Style[n,RandomInteger[{10,30}],RandomColor[]],{n,1,50}]

Da li je tu poredak važan? Probajmo

Table[Style[n,RandomColor[],RandomInteger[{10,30}]],{n,1,50}]

Možemo formatirati i matematičke izraze, ali oprezno!

Pretpostavimo da nas zanima da nađemo izraz za rezultat stepenovanja izraza x na neki stepen, za stepene od -10 do 10. To možemo da postignemo preko Table

Table[(x^n),{n,-10,10}]

Sa ovom listom možemo da radimo kao i sa svakom drugom. Recimo možemo da je dignemo na kub!

((Table[(x^n),{n,-10,10}])^3)

Napravite output da bude slučajne boje i da bude veličine fonta 25

Table[Style[(x^n),25,RandomColor[]],{n,-10,10}]

Primetimo da sada probamo da tu listu dignemo na kub to neće raditi onako kako očekujemo:

((Table[Style[(x^n),25,RandomColor[]],{n,-10,10}])^3)

To je stoga što su, zbog Style, u pitanju nealgebarski izrazi. Kako bismo mogli da postignemo efekat koji bismo hteli?

Table[Style[(x^(3n)),25,RandomColor[]],{n,-10,10}]

Q and A

Koje boje možete da zovete po imenu u Wolfram Language?
Red, Green, Blue, Black, White, Gray, Yellow, Brown, Orange, Pink, Purple, LightRed, itd. 

Zašto boje mogu da budu specifikovane preko red, green, blue vrednosti?
Zato što tako naše oko percipira boje: postoji tri tipa receptora u našem oku koji odgovaraju tim komponentama svetlosti. (Kod nekih drugih organizama je drugačije.)

Šta radi ColorNegate?
Generiše komplementarnu boju definisanu kao 1−value (jedan minus vrednost) za svaku od RGB komponenti.

Šta je hue?
To je način da specifikujete ono što se često zove čiste boje, bez obzira na senku, saturaciju itd. 

Postoje li i drugi načini specifikacije boja osim RGB?
Da. Često (implementirano sa Hue) jeste da se kombinuje hue, saturation, and brightness. LABColor i XYZColor su drugi primeri. GrayLevel daju razne nivoe sive gde je GrayLevel[0] crna a GrayLevel[1] je bela boja.

Mali kvadrati sa bojama zovu se Swatches.

ChromaticityPlot i ChromaticityPlot3D crtaju liste boja u prostoru boja.

Postoji puno različitih drugih atributa u WL koji menjaju Style, na primer, Bold, Italic i FontFamily (ovo poslednje je izbor fonta).

8. Osnovni grafički objekti

Uvod u grafičke objekte

U WL, Circle[] predstavlja kružnicu sa centrom u {0,0} i radijusom 1. Da bismo predstavili Circle kao grafik moramo da ga stavimo u komandu Graphics. Kasnije ćemo govoriti o tome kako se specifikuju centar i radijus kružnice. Za sada samo koristimo osnovne grafičke objekte kako bismo se upoznali sa njima. To su takozvani graphics primitives, npr Circle, Point, Disk itd.

 Pored toga možemo da koristimo direktive (directives) koje bliže određuju kako će izgledati ti graphics primitives (kakva će biti boja i veličina, na primer). Najzad, u principu, možemo da koristimo i graphic options (opcije)  ali o njima ćemo kasnije.
 
Ako ne specifikujemo direktive i opcije WL korisiti defolte vrednosti. Circle[] i Disk[] su grafički osnovni (primitive) koncepti koji predstavljaju kružnicu i disk (krug), respektivno. Defoltna boja je crna. Primetimo da komanda Graphics mora da bude spoljna komanda kad god želimo da napravimo 2D grafik. U slučaju 3D grafika, ta komanda je Graphics3D. U slučaju nekih grafičkih komandi, Graphics odnosno Graphics3D ne moraju da se predstave eksplicitno jer podrazumevaju.

Kružnica (Circle) i krug (Disk)

Evo jedinične kružnice sa centrom u tački {0,0}.

Graphics[Circle[]]

Disk je ispunjena kružnica (tj krug).

Graphics[Disk[]]

Pogledajmo punu formu za ovaj izraz

FullForm[Graphics[Disk[]]]

Sada razmotrimo punu formu za

FullForm[ListLinePlot[Range[10]]]

Mada je izraz puno komplikovaniji nego u slučaju diska, ono što je važno jeste da je Graphics opet prva funkcija koja sve zaokružava (wrap).

Regularni mnogougao (Regular polygon)

RegularPolygon crta jednakostranične mnogouglove sa onoliko stranica koliko mi specifikujemo. Ovde imamo regularni petougao (5-sided regular polygon):

Graphics[RegularPolygon[5]]

Napravite tabelu jednakostraničnih mnogouglova sa brojem stranica od 5 do 10:

Table[Graphics[RegularPolygon[n]],{n,5,10}]

Kontrola izgleda grafika

Jedan način da promenimo boju jeste da koristimo Style unutar Graphics. Evo narandžastog petougla:

Graphics[Style[RegularPolygon[5],Orange]]

Da li je ovde poredak u funkciji Style važan?

Graphics[Style[Orange,RegularPolygon[5]]]

Očito, važno je u funkciji Style prvo navesti grafički primitiv pa tek onda boju i druge parametre formatiranja.

Alternativno, možemo da koristimo grafičku direktivu što se svodi na to da pravimo listu:

Graphics[{Orange,RegularPolygon[5]}]

Primetimo da smo u ovom slučaju stavili boju prvu. Da li možemo to drugačije da uradimo? Na primer, možemo li sada boju da stavimo posle grafičkog primitiva?

Graphics[{RegularPolygon[5],Orange}]

Ovo ne daje grešku, ali zapravo ne radi kako treba. Program prosto ignoriše boju kad se stavi posle grafičkog primitiva.

Šta da radimo ako imamo više grafičkih primitiva?

Recimo, imamo kružnicu i kvadrat i probamo ovakvu komandu:

Graphics[{Circle[],RegularPolygon[4]}]

Pretpostavimo da želimo da oba grafička objetka budu crvene boje. U tom slučaju jedan način da se to postigne bio bi:

Graphics[{Red,{Circle[],RegularPolygon[4]}}]

Naime, direktiva Red se odnosi na listu od dva grafika. Preko Style morali bismo da pišemo to malo drugačije:

Graphics[Style[{Circle[],RegularPolygon[4]},Red]]

Naime, sad Red mora da ide na kraju. Naravno, možemo da napravimo da recimo kružnica bude crvena a kvadrat plav. U tom slučaju moramo da odvojeno specifikujemo direktive za dva primitivna objekta. Na primer:

Graphics[{Style[Circle[],Red],Style[RegularPolygon[4],Blue]}]

Grafici u 3D

Wolfram Language ima izvrsne grafike i u 3D, sa osnovnim objektima kao što su Sphere, Cylinder i Cone. Kod 3D grafika možete da rotirate dobijeni grafik kako biste ga bolje sagledali u prostoru.

Graphics3D[Sphere[]]

{Graphics3D[Cone[]],Graphics3D[Cylinder[]]}

Žuta sfera:

Graphics3D[Style[Sphere[],Yellow]]

Drugi način je da se prikaže to isto jeste da se napravi direktiva koja se sastoji od liste u vidu boje i onda grafičkog primitivnog objekta:

Graphics3D[{Yellow,Sphere[]}]

Tačke u 2D

Još jedan ključni objekat je tačka ili Point. Pretpostavimo da nismo specifikovali poziciju tačke. Da li program prepoznaje da je nacrta? To prijavljuje grešku

Graphics[Point[]]

Ako prijavimo poziciju u {0,0}

Graphics[Point[{0,0}]]

Ovako možemo da tačku obojimo u plavo i dodamo još veličinu tačke

Graphics[{Blue,PointSize[0.02],Point[{0,0}]}]

Kako bi radilo preko Style?

Graphics[Style[Point[{0,0}],Blue, PointSize[0.02]]]

Kombinovanje tačke i drugih elemenata

Bez problema možete kombinovati razne grafičke elemente. Ovde crtamo na istom grafiku plavu tačku i crnu kružnicu. Tačka je u ovom slučaju centrar kružnice.

Graphics[{{Blue,PointSize[0.02],Point[{0,0}]},Circle[]}]

Graphics[{{Blue,PointSize[0.02],Point[{0,0}]},{Pink,Circle[]}}]

Tačke u 3D

Evo primera tačke u 3D

Graphics3D[Style[Point[{0,0,0}],Red,PointSize[0.02]]]

Napravite tabelu kružnica koje imaju različite boje

Table[Graphics[Style[Circle[],RGBColor[1-g,g,0]]],{g,0.,1,0.1}]

Evo i primera krugova sa bojama definisanim pomoću Hue

Table[Graphics[Style[Disk[],Hue[g]]],{g,0.,1,0.1}]

Naravno, možemo napraviti i diskove slučajnih boja

Table[Graphics[Style[Disk[],RandomColor[]]],{g,1,10}]

Q and A

Kako da napravim grafički objekat sa puno različitih elemenata?
To učimo u odeljku 14. Potrebno je da znamo kako da radimo sa koordinatama.

Zašto Circle[ ], a ne samo Circle?
Zbog konsistentnosti. Kao što ćete videti u odeljku 14, Circle[ ] je kratka verzija Circle[{0, 0}, 1], što znači da je to kružnica sa radijusom 1 i centrom u {0, 0}.

Zašto žuta sfera nije potpuno žuta? 
Zato što je Wolfram Language prikazuje kao pravi 3D objekat, sa osvetljenjem. Kad bi bila potpuno žuta, vi ne biste mogli da vidite nikakvu 3D dubinu, i ličila bi na 2D disk.

9. Interaktivne manipulacije (Manipulate)

Uvod u interaktivne manipulacije

Do sada smo koristili Wolfram Language kao sredstvo da postavljamo pitanja i dobijamo odgovor: ubacimo input, i program nam izbaci output. Ali, program nam takođe omogućava da napravimo interfejs tako da možemo da manipulišemo parametre sistema i odmah vidimo output. Funkcija Manipulate radi veoma slično kao Table, ali umesto da pravi liste rezultata, onda stvara slider ili druge interaktivne elemente pomoću kojih možemo da radimo šta-ako analizu. Slider ovde daje mogućnost da se n menja od 1 do 5 prema našem izboru (sa korakom 1):

Manipulate[Table[Orange,n],{n,1,5,1}]

Manipulate sa kolonom prvog, drugog i trećeg stepena brojeva od 1 do 10

Evo sličnog interfejsa koji prikazuje kolonu prvog, drugog i trećeg stepena brojeva od 1 do 10:

Manipulate[Column[{n,n^2,n^3}],{n,1,10,1}]

Nasuprot Table, Manipulate nije ograničen na konačan skup vrednosti koji se može manipulisati. Ovde ne ukazujemo najmanji korak izmedju updatea.

Manipulate[Column[{n,n^2,n^3}],{n,1,10}]

Manipulacija sa graficima

Vrlo je uobičajeno da pomoću Manipulate manipulišemo sa graficima. Evo kako možemo da manipulišemo sa BarChart:

Manipulate[BarChart[{1,a,4,2*a,4,3*a,1}],{a,0,5}]

A evo kako da to radimo sa PieChart za istu listu:

Manipulate[PieChart[{1,a,4,2*a,4,3*a,1}],{a,0,5}]

Više kontrola

Manipulate nam dozvoljava da uvedemo koliko god hoćemo raznih kontrolora. Samo za svaki treba da date odgovarajuće informacije, kao i kod Table.  Ovde menjamo broj stranica i hue regularnog mnogougla:

Manipulate[Graphics[Style[RegularPolygon[n],Hue[h]]],{n,3,20,1},{h,0,1}]

Ima puno načina na koji možemo da kontrolišemo Manipulate. Ako imamo konkretno listu nekih vrednosti, dobićemo Chooser Menu. Ovde pravimo interfejs koji nam omogućava da izaberemo jednu od tri boje:

Manipulate[Graphics[Style[RegularPolygon[5],color]],{color,{Red,Yellow,Blue}}]

Kontrola algebarskih izraza preko Manipulate

Postoji puno mogućnosti da kontrolišemo algebarske izraze preko maniulate. Recimo, pretpostavimo da želimo da vidimo ćemu je jednaka binomna formula za različite stepene n

Expand[(((a+b))^2)]

Sada možemo da napravimo manipulator koji menja stepen od 1 do 20.

Manipulate[Expand[(((a+b))^n)],{n,1,20,1}]

Naravno, možemo kontrolisati i boju izraza koji dobijamo

Manipulate[Style[Expand[(((a+b))^n)],Hue[boja]],{n,1,20,1},{boja,0,1}]

A možemo kontrolisati i veličinu fonta

Manipulate[Style[Expand[(((a+b))^n)],Hue[boja],vel],{n,1,20,1},{boja,0,1},{vel,10,25}]

Q and A

Da li Manipulate radi na webu, mobilnoj aplikaciji i na desktopu?
U principu da. Ali najbrže radi na desktopu jer je na cloud potrebno vreme za komunikaciju svaki put kad pomerimo slider. 

Može li se napravi samostalna (stand-alone) aplikacija sa Manipulate?
Da. To se još uvek razvija, ali već sada u principu može da se uradi. Sve što vam treba jeste da napravite aplikaciju na desktopu i onda uradite CloudDeploy (vidite poglavlje 36).

Mogu li da koristim slučajne brojeve u Manipulate?
Da, i u principu biće drugačiji svaki put kad povučete slider (osim ako ne fiksirate Seed).

Manipulate podržava veliki broj kontrolora kao što su checkboxes, menus, input fields, color pickers, itd..

Slideri u Manipulate često daju dugme (button) koji otvara dodatne kontrole uključujući animaciju. 

ControllerInformation[ ] daje informaciju o svim dostupnim kontrolorima.