Grafiký program v Pascale

Ako vidíte, je to jednoduchý dvojposchodový dom postavený na zelenej lúke s červenou strechou, pri ňom je plot a na oblohe svieti slniečko. Niečo také ako sme všetci zvykli kresliť keď sme boli malé deti. Takže poďme do detských čias, ale s tým, že si obrázok nakreslíme pomocou počítačového programu, v ktorom využijeme všetky doteraz prebraté príkazy. Jednotlivé kroky budeme postupne popisovať až do chvíle, kým nevznikne celý obrázok. Na koniec vložím do textu celý zdrojový text programu s tým, že študenti si ho môžu sami vyskúšať, modifikovať ho podľa ľubovôle a učiť sa tvoriť grafiku dovtedy, kým pomocou Pascalovského programu nenakreslia Bojnický zámok!

Bojnický zámok

Začíname!

Ako prvé si nadefinujeme premenné a ich počiatočné hodnoty. To preto, aby sme ich mohli v programe využívať. Časť listingu programu bude vyzerať nasledovne:

program obrazok; - názov programu

uses crt, graph; - inicializácia výstupného zariadenia

var - definícia premenných

ovladac, grafmod: smallint;

vyskaTravy, pravaStranaDomu: Integer;

okno, radOkna, polomerSlnka: Integer;

dlzkaOkna, vyskaOkna, medzeraMedziOknami: Integer;

begin - začiatok

{inicializacia grafickeho rezimu}

ovladac:=detect; - detekcia ovládača

initgraph (ovladac, grafmod, 'c:\fpc\egavga.bgi'); - umiestnenie ovládača grafiky

Počiatočná inicializácia programu, vykreslí čiernu obrazovku.

{nastavenie velkosti casti obrazkov} - číselné hodnoty sa udávajú v pixeloch

vyskaTravy:=200;

pravaStranaDomu:= getmaxx div 2;

polomerSlnka:=75;

medzeraMedziOknami:=30;

dlzkaOkna:= ((pravaStranaDomu-230) {50 odprava obrazovky, 2*30 od kraja domu, 4*30 medzi oknami} div 5);

vyskaOkna:= (350-(2*30)-(2*medzeraMedziOknami)) div 3;

Vykreslenie modrej oblohy.

Na to použijeme takýto programový kód.

{nastavenie modrej oblohy}

SetFillStyle(SolidFill, blue); - nastavenie modrej farby

bar(0,0,getmaxx,getmaxy-vyskaTravy); - stanovili sme hodnoty odkiaľ a pokiaľ sa má vykresľovať obloha

Ak už máme vykreslenú časť obrazovky, ktorá nám bude plniť funkciu modrej oblohy, môžeme nakresliť zelenú lúku na ktorú postavíme náš dom.

Na to použijeme tento programový kód:

{nastavenie zelenej travy}

SetFillStyle(SolidFill, green); - zadefinovanie zelenej farby

bar(0,getmaxy-vyskaTravy,getmaxx,getmaxy); - vykreslenie časti trávnatej plochy

Ako ďalšie vykreslíme biely dom.

Na to použijeme tento programový kód:

{vykreslenie bieleho domu}

SetColor (white); - nastavenie farby pôdorysu domu

line (20, getmaxy-vyskaTravy+50, pravaStranaDomu+30, getmaxy-vyskaTravy+50);

Nakreslenie pôdorysovej úsečky, na ktorej bude postavený dom

SetFillStyle(SolidFill, white); - nastavenie farby domu

bar(50,getmaxy-vyskaTravy-300,pravaStranaDomu,getmaxy-vyskaTravy+50);

Nakreslenie prednej steny domu

Nakreslenie červenej strechy domu.

Na to použijeme tento programový kód:

{vykreslenie strechy}

SetColor (LightRed); - nastavenie bledočervenej farby

line (50, getmaxy-vyskaTravy-301, 100, getmaxy-vyskatravy-370);

line (100, getmaxy-vyskatravy-370, pravaStranaDomu-50, getmaxy-vyskatravy-370);

line (pravaStranaDomu-50, getmaxy-vyskatravy-370, pravaStranaDomu, getmaxy-vyskatravy-301);

line (50, getmaxy-vyskaTravy-301, pravaStranaDomu, getmaxy-vyskatravy-301);

SetFillStyle(SolidFill, lightred);

Na to použijeme nasledovný programový kód:

{vykreslenie okien}

SetFillStyle (SolidFill, 7); - nastavenie sivej farby pre okno

for radOkna :=1 to 3 do - počítadlo radov okien

for okno :=1 to 5 do - počítadlo okien v riadku

bar (50+30+((okno-1)*dlzkaOkna)+((okno-1)*medzeraMedziOknami),

getmaxy-vyskaTravy+50-30-((radOkna-1)*vyskaOkna)-((radOkna-1)*medzeraMedziOknami),

50+30+(okno*dlzkaOkna)+((okno-1)*medzeraMedziOknami),

getmaxy-vyskaTravy+50-30-(radOkna*vyskaOkna)-((radOkna-1)*medzeraMedziOknami)

Tu by som chcel študentov upozorniť na tú skutočnosť, že v tejto časti programu som použil cyklus v cykle. Vonkajší cyklus nám zabezpečuje tvorbu riadkov – radov okien. Vnútorný cyklus nám zabezpečuje samotné vykresľovanie okien na dome. Keďže do jedného riadku dávame 5 okien, vykresľovanie sa uskutoční 5x. Po dosiahnutí maximálnej hodnoty – hodnoty kedy by nasledujúce okno už bolo mimo domu, vracia program riadenie cyklu o úroveň vyššie. To znamená, že sa nastavia počiatočné hodnoty súradníc x a súradnice y sa posunú o jeden riadok. Aj tu máme zabezpečený posun o riadok 3x, to preto, aby nám okná nešli mimo prednej steny domu.

Ak sme už zvládli nakresliť dom pridáme ku nemu aj nejaký plot, nech sa to podobá na taký obrázok, ako sme zvykli maľovať, keď sme boli malé deti.

Hotový domček aj s plotom.

Programový kód na vykreslenie plota bude vyzerať nasledovne:

{vykreslenie plotu}

SetFillStyle (SolidFill, brown); - nastavenie farby plota - hnedá

bar (pravaStranaDomu+20, getmaxy-vyskatravy+25, getmaxx-20, getmaxy-vyskatravy+15);

bar (pravaStranaDomu+20, getmaxy-vyskatravy-30, getmaxx-20, getmaxy-vyskatravy-40);

for tyckaPlotu := 1 to pocetTyciek do

bar (pravaStranaDomu+20+15+((tyckaPlotu-1)*25),

getmaxy-vyskatravy+45,

pravaStranaDomu+20+15+((tyckaPlotu-1)*25)+10,

getmaxy-vyskatravy-60

);

Ako prvé nakreslíme dve vodorovné nosné tyče plota, tak aby na prvý pohľad bolo jasné, že sú na nich upevnené zvislé tyčky plota. Potom pomocou cyklu nakreslíme zvislé tyčky plota s pravidelným posunom po osi x. Takto bude plot pôsobiť dojmom precízne postaveného, lebo tyčky budú od seba rovnako ďaleko.

Aby náš obrázok bol úplný ešte na oblohu umiestnime zlaté slnko. Asi takto:

Hotový obrázok už aj so slniečkom.

Programový kód na vykreslenie slnka vyzerá nasledovne:

{vykreslenie zlteho slnka}

SetColor (yellow); - nastavenie žltej farby

circle (getmaxx-200, 200, polomerSlnka); - nastavenie polomeru slnka

SetFillStyle (SolidFill, yellow); - nastavenie žltej farby

FloodFill(getmaxx-150, 150, yellow); - vykreslenie samotného zlatého slnka

Každému študentovi vrele odporúčam, aby si buď tento, alebo aj iný programový kód odskúšal krok za krokom, menil hodnoty premenných, poprípade veľkosti prírastkov v cykloch. Takto vždy po skompilovaní a spustení programu bude vedieť ku akej zmene došlo. Či už budete meniť farby jednotlivých častí obrázka (modrá tráva, zelené nebo, sivé slnko a pod.), alebo budete meniť parametre a hodnoty rozmerov, každá zmena sa Vám okamžite prevedie a výsledok Vašej práce si takýmto spôsobom môžete okamžite skontrolovať.

Samozrejme, programovacích možností je obrovské množstvo, ako aj možností ich kombinácií. Všetko je to len výsledkom praxe pri ktorej získate nielen praktické skúsenosti, ale si overíte aj teoretické vedomosti z matematiky, geometrie a iných prírodovedných predmetov, ktoré sú do programovacieho jazyka buď priamo, alebo nepriamo zakomponované.

Na záver ako som na začiatku sľúbil pripájam kompletný listing programu. Inak bolo by možné postupne si ho poskladať z jednotlivých častí, tak ako sú vyššie vysvetlené.

Kompletný listing:

program obrazok;

uses crt, graph;

var

ovladac, grafmod: smallint;

vyskaTravy, pravaStranaDomu: Integer;

okno, radOkna, polomerSlnka: Integer;

!!! koniec komentara !!!}

begin

{inicializacia grafickeho rezimu}

ovladac:=detect;

initgraph (ovladac, grafmod, 'c:\fpc\egavga.bgi');

{nastavenie velkosti casti obrazkov}

vyskaTravy:=200;

pravaStranaDomu:= getmaxx div 2;

polomerSlnka:=75;

medzeraMedziOknami:=30;

dlzkaOkna:= ((pravaStranaDomu-230) {50 odprava obrazovky, 2*30 od kraja domu, 4*30 medzi oknami} div 5);

vyskaOkna:= (350-(2*30)-(2*medzeraMedziOknami)) div 3;

SetBkColor(black);

{nastavenie modrej oblohy}

SetFillStyle(SolidFill, blue);

bar(0,0,getmaxx,getmaxy-vyskaTravy);

{nastavenie zelenej travy}

SetFillStyle(SolidFill, green);

bar(0,getmaxy-vyskaTravy,getmaxx,getmaxy);

{vykreslenie bieleho domu}

SetColor (white);

line (20, getmaxy-vyskaTravy+50, pravaStranaDomu+30, getmaxy-vyskaTravy+50);

SetFillStyle(SolidFill, white);

bar(50,getmaxy-vyskaTravy-300,pravaStranaDomu,getmaxy-vyskaTravy+50);

{vykreslenie strechy, }

SetColor (LightRed);

line (50, getmaxy-vyskaTravy-301, 100, getmaxy-vyskatravy-370);

line (100, getmaxy-vyskatravy-370, pravaStranaDomu-50, getmaxy-vyskatravy-370);

line (pravaStranaDomu-50, getmaxy-vyskatravy-370, pravaStranaDomu, getmaxy-vyskatravy-301);

line (50, getmaxy-vyskaTravy-301, pravaStranaDomu, getmaxy-vyskatravy-301);

SetFillStyle(SolidFill, lightred);

SetFillStyle (SolidFill, 7);

getmaxy-vyskaTravy+50-30-((radOkna-1)*vyskaOkna)-((radOkna-1)*medzeraMedziOknami),

50+30+(okno*dlzkaOkna)+((okno-1)*medzeraMedziOknami),

getmaxy-vyskaTravy+50-30-(radOkna*vyskaOkna)-((radOkna-1)*medzeraMedziOknami)

);

{vykreslenie plotu}

SetFillStyle (SolidFill, brown);

bar (pravaStranaDomu+20, getmaxy-vyskatravy+25, getmaxx-20, getmaxy-vyskatravy+15);

bar (pravaStranaDomu+20, getmaxy-vyskatravy-30, getmaxx-20, getmaxy-vyskatravy-40);

for tyckaPlotu := 1 to pocetTyciek do

bar (pravaStranaDomu+20+15+((tyckaPlotu-1)*25),

getmaxy-vyskatravy+45,

pravaStranaDomu+20+15+((tyckaPlotu-1)*25)+10,

getmaxy-vyskatravy-60

);

{vykreslenie zlteho slnka}

SetColor (yellow);

circle (getmaxx-200, 200, polomerSlnka);

SetFillStyle (SolidFill, yellow);

FloodFill(getmaxx-150, 150, yellow);

{ukoncenie programu}

readln;

CloseGraph;