Programowanie. Grafika w języku j programowania. Klasa 2 Lekcja 16 GRAFIKA

Transkrypt

1 Programowanie Grafika w języku j programowania Klasa 2 Lekcja 16 GRAFIKA

2 Wprowadzenie Analizowane dotąd d programy pracują w trybie tekstowym, czyli mogą wyświetla wietlać na ekranie tylko pewien określony z góry g zbiór r znaków. Wszystkie nowoczesne komputery dysponują jednak także trybem graficznym. W trybie tym ekran należy y traktować jako mozaikę miniaturowych punktów, tzw. pikseli, z których każdy może e mieć dowolną,, niezależną od innych barwę. Ponieważ punkty te sąs bardzo małe e (wielkości ok. 1/4 mm), nie dostrzegamy ich pojedynczo, lecz patrząc c na ekran, widzimy cały y obraz. Tryb graficzny określa liczbę punktów w w poziomie i pionie, paletę dostępnych barw oraz liczbę kolorów w dostępnych jednocześnie nie na ekranie.

3 Układ współrz rzędnych graficznych Piksel (z ang. Picture Element) - najmniejszy, niepodzielny element obrazu. Prostokątny tny układ współrz rzędnych: W prostokątnym tnym układzie współrz rzędnych ośo Ox jest pozioma i skierowana w prawo, natomiast ośo Oy - pionowa i skierowana do góry. g Współrz rzędne x i y mogą przyjmować wartości zarówno dodatnie, jak i ujemne.

4 Układ współrz rzędnych graficznych Układ współrz rzędnych graficznych: Układ współrz rzędnych graficznych wygląda nieco inaczej. Także e tu oś Ox jest pozioma i skierowana w prawo, natomiast ośo Oy jest wprawdzie pionowa, ale skierowana w dół d (y rosną w dół"). d Punkt (0, 0) - początek układu współrz rzędnych - znajduje się w lewym górnym rogu ekranu, wszystkie współrz rzędne ekranowe sąs więc dodatnie. Para współrz rzędnych (x, y) jedno znacznie określa położenie punktu. Niektóre procedury graficzne wymagają podania kąta. k Kąty K liczymy względem osi Ox; ; kąty k dodatnie skierowane sąs przeciwnie do ruchu wskazówek wek zegara, ujemne - zgodnie z ich ruchem.

5 Przejście do trybu graficznego Programy pisane w Pascalu standardowo pracują w trybie tekstowym. Aby przejść do trybu graficznego, niezbędne jest użycie u odpowiednich instrukcji i procedur: program Grafika; uses CRT, Graph; var driver, mode: integer; begin driver := DETECT; lnitgraph(driver, mode,'c :\BP\BGI'); {tutaj można już używać instrukcji graficznych} repeat until KeyPressesed; CloseGraph; end. {wykrywanie trybu pracy karty graficznej} {przejście z trybu tekstowego do graficznego} {oczekiwanie na naciśnięcie klawisza} {powrót do trybu tekstowego}

6 Przejście do trybu graficznego Deklaracja uses Graph" " określa, że e będziemy b posługiwa ugiwać się procedurami graficznymi. Aby uruchomić tryb graficzny, potrzebne sąs nam dwie zmienne driver i modę, odpowiadające za określenie sterownika karty graficznej i trybu jej pracy. Najprostszym sposobem włąw łączenia grafiki jest rozpoznanie karty graficznej przez system Turbo Pascal - dzieje się tak po przypisaniu zmiennej driver stałej DETECT (zawartość zmiennej modę jest wtedy ignorowana). Innym rozwiązaniem zaniem jest samodzielne przypisanie tej zmiennej odpowiednich wartości (zademonstrujemy to na końcu tego tematu).

7 Przejście do trybu graficznego Procedura InitGraph powoduje włąw łączenie trybu graficznego - niezbędnym jej elementem jest wyrażenie tekstowe (np( np. 'C: C:\BP\BGF), określaj lające położenie katalogu, który zawiera sterowniki kart graficznych (pliki z rozszerzeniem.bgi). Pliki te sąs standardowym elementem Turbo Pascala. Położenie katalogu zależy y od sposobu zainstalowania Turbo Pascala, więc c podaną tu ścieżkę należy y odpowiednio samemu dopasować.

8 Przejście do trybu graficznego Po włąw łączeniu trybu graficznego można już posługiwa ugiwać się procedurami graficznymi. Po zakoń czeniu pracy z grafiką należy y wróci cić do trybu tekstowego procedurą CloseGraph. Powoduje ona jednak skasowanie zawartości obrazu. Aby więc c pozostawić sobie możliwo liwość zapoznania się ze swoim dziełem, em, należy y opóźni nić wyłą łączenie grafiki poprzez użycie u instrukcji: repeat until KeyPressed - aby komputer czekał na naciśni nięcie dowolnego klawisza.

9 Rysowanie punktów, prostych i krzywych

10 Rysowanie punktów, prostych i krzywych Ćwiczenie 1 Napisz program rysujący zygzak na górze ekranu monitora (patrz tabela wcześniej). Ćwiczenie 2 Zdefiniuj procedurę rysującą zamalowany" prostokąt, używając wyłącznie instrukcji rysowania linii. Wskazówka: Zamaluj wnętrze prostokąta, używając w pętli procedury rysowania odcinka.

11 Rysowanie punktów, prostych i krzywych Korzystając z grafiki komputerowej, mamy możliwość pełnego wpływania na wygląd rysowa nych obiektów, m.in. poprzez ustawienie koloru linii, jej rodzaju i grubości. Procedury do usta wiania tych parametrów noszą nazwy typu SetXXX (od ang. set, czyli ustaw"). Podobnie procedury umożliwiające sprawdzanie aktualnych parametrów noszą nazwy typu GetXXX (od ang. get, czyli pobierz"). Uwaga: Bardzo ważne jest używanie procedur graficznych w odpowiedniej kolejności.

12 Rysowanie punktów, prostych i krzywych Przykład 1 Rysowanie czerwonego okręgu o środku w punkcie (100,100) i promieniu równym 50 pikseli. Ćwiczenie 3 Zdefiniuj procedurę rysującą trójkąt. Zastanów się nad wymaganą liczbą parametrów procedury.

13 Wypełnianie barwą wyznaczonego obszaru W Pascalu istnieje możliwo liwość rysowania obiektów geometrycznych nie tylko konturowych, lecz także wypełnionych barwą.. Niektóre z poznanych już procedur mają swoje odpowiedni ki, umożliwiaj liwiające wypełnianie rysowanej figury. Kolor wypełnienia należy y wcześniej ustawić procedurą SetFillStyle: Uwaga: Przy ustalaniu koloru wypełniania bardzo ważne jest zachowanie odpowiedniej kolejności procedur.

14 Wypełnianie barwą wyznaczonego obszaru Przykład 2 Rysowanie na środku ekranu żółtego koła a o promieniu 100 pikseli W Turbo Pascalu istnieje także możliwość wypełniania dowolnych obszarów zamkniętych. Służy do tego procedura FloodFill: Ze względu na użytą w tej procedurze metodę wypełniania (tzw. metodę powodzi" lub metodę pożaru") instrukcja ta działa wolno, w miarę możliwości należy więc unikać jej stosowania

15 Wypełnianie barwą wyznaczonego obszaru Ćwiczenie 4 Napisz program rysujący na całym ekranie monitora flagę Szwajcarii (biały y krzyż na czerwonym tle). Napisz program w dwóch wariantach (z użyciem u procedury Bar oraz z użyciem u procedury FloodFill). Porównaj czas działania ania obu. Ćwiczenie 5 Napisz program rysujący na ekranie monitora flagę Unii Europejskiej. Wskazówka wka: : Zdefiniuj procedurę rysowania żółtej gwiazdy w zadanym punkcie ekranu.

16 Jak narysować wykres funkcji? Rysując c wykres funkcji, należy y pamięta tać o tym, że: 1. Uk Układ współrz rzędnych graficznych jest zorientowany inaczej niż prostokątny tny układ współrz rzęd nych (skierowana w dółd oś Oy,, początek układu znajduje się w lewym górnym g rogu ekranu). 2. Współrz rzędne graficzne sąs liczbami całkowitymi, podczas gdy wartości funkcji sąs na ogół liczbami rzeczywistymi.

17 Wykres funkcji typu y = f(x) Przykład 3 Rysowanie wykresu funkcji: y = sin(x) w przedziale [-180[ 180 ; ; 180 ]. Do narysowania wykresu użyjemy u pętli, p której zmienna sterująca zmienia się w wybranym przez nas przedziale.

18 Wykres funkcji typu y = f(x) program Wykres; uses CRT.Graph; var xr,, yr: real; xe,, ye: integer; i: integer; d, m: integer; begin end.

19 Wykres funkcji typu y = f(x) begin d := DETECT; lnitgraph(d,, m, 'C:\BP BP\BGI' BGI'); for i := -180 to 180 do begin xr:= i*pii *Pi/180; yr:=sin(xr sin(xr); xe := Round(i + GetMaxX div 2); ye := Round((-yr)*100 + GetMaxY div 2); PutPixel(xe,, ye, 15); end; repeat until KeyPressed; CloseGraph; end.

20 Wykres funkcji typu y = f(x) W zmiennych xr i yr pamiętamy prostokątne tne współrz rzędne punktu wykresu, w zmiennych xe i ye - współrz rzędne ekranowe (graficzne) punktu. Wyrażenie i*pi/180 dokonuje zamiany wartości wyrażonej w stopniach na wartość w radianach, ponieważ standardowa funkcja Pascala sin operuje na wartościach wyrażonych w radianach. Funkcja standardowa Round dokonuje zamiany liczby rzeczywistej na najbliższ szą jej liczbę całkowit kowitą (przez zaokrąglenie). Dodanie do współrz rzędnych GetMaxX div 2, 2 GetMaxY div 2 pozwala na przeniesienie środka układu współrz rzędnych na środek ekranu. Ponieważ wartości funkcji sin są z przedziału u [-1;[ 1], konieczne jest przeskalowanie wykresu (stąd d mnożenie przez 100). I wreszcie znak -"" przy yr oznacza odwrócenie wartości, by dopasować ją do graficznego układu współrz rzędnych.

21 Wykres funkcji typu y = f(x) Ćwiczenie 6 Przeanalizuj program z przykładu 3 i przepisz go w edytorze Pascala. Skompiluj i uruchom program. Zmodyfikuj go tak, by dodatkowo rysował osie Ox i Oy (wraz z opisami). Ćwiczenie 7 Wykres tworzony przez program nie jest linią ciągłą łą,, lecz składa się z punktów. Zmodyfikuj program tak, by wykres był linią ciągłą łą. Wskazówka: Użyj procedury MoveTo i LineTo; prawdopodobnie użyjesz u równier wnież instrukcji warunkowej.

22 Przykład 4 Wykres funkcji parametrycznej Rysowanie spirali Archimedesa. Spirala Archimedesa opisana jest równaniem r r = c*φ, gdzie c to stała a i c>0, r - odległość od środka układu współrz rzędnych (promień wodzący), φ - kąt, o jaki obróci się dana półprosta p prosta (promień wodzący), przyjmując, że e w położeniu początkowym pokrywała a się z dodatnią półosią Ox. Ponieważ korzystając c z instrukcji Pascala, posługujemy się współrz rzędnymi w postaci (x,( y), y musimy każdą parę (r, φ) przekształci cić w parę (x, y). y Zamiana taka nazywa się zamianą współrz rzędnych biegunowych na współrz rzędne prostokątne tne i jest opisana wzorami: x = r cos φ, y = r sin φ.

23 Wykres funkcji parametrycznej Ćwiczenie 8 Napisz program rysujący na ekranie monitora spiralę Archimedesa, której środek znajduje się na środku ekranu. Wskazówka: Przyjmij c = 0,125 i zastosuj pętlp tlę od 0 do Porównaj swój j program z programem ćwiczenie8. Ćwiczenie 9 Zmodyfikuj swój j program tak, by każdy nowy obrót" spirali był rysowany innym kolorem.

24 Elementy grafiki animowanej Tradycyjna animacja polega na szybkim wyświetlaniu wietlaniu następuj pujących po sobie klatek taśmy filmowej. Jeżeli eli dzieje się to dostatecznie szybko, nasz wzrok nie jest w stanie rozróżni nić poje dynczych klatek i zlewają się one w ruchomy obraz. Odpowiednia szybkość to klatek na sekundę; ; im więcej klatek w ciągu sekundy, tym doskonalsza iluzja ruchu.

25 Proste animacje W animacji komputerowej klatce taśmy filmowej odpowiada zawartość ekranu wyświetlana wietlana przez odpowiednio długi d czas. Następnie ekran jest czyszczony, wypełniany nową zawartości cią i proces powtarza się od początku. Ogólny schemat animacji komputerowej można więc przed stawi stawić jak na rysunku.

26 Przykład 5 Proste animacje Skonstruujmy program wyświetlaj wietlający na ekranie przesuwający się napis: Lubię in formatyk formatykę". Napis powinien przesuwać się po przekątnej ekranu od lewego górneg rne go rogu. W zmiennych x i y zapamiętujemy współrz rzędne naszego obiektu. Wyrażenie y:=x-3 div 4 określa, że e obiekt będzie b poruszać się wzdłuż osi Oy z szybkości cią 3/4 ruchu w osi 0x (ekran monitora ma właśnie w proporcje 4:3). Procedura Delay(20) powoduje, że e komputer przed wykonaniem następnej procedury czeka przez 1/50 sekundy (parametr procedury Delay to opóźnienie w milisekundach; 1/50 sekundy to 20 mili sekund). Następnie cały y ekran jest czyszczony procedurą ClearViewPort. Szybkości cią ruchu można sterować,, zwiększaj kszając c lub zmniejszając c opóźnienie - albo wyświetlaj wietlając c nasz obiekt, np.. co kilka pikseli.

27 Proste animacje Niestety, powyższy program nie jest pozbawiony wad. Procedura ClearViewPort działa a dosyć wolno i zanim napis zostanie pokazany na nowo w następnej pozycji, ekran przez moment pozostaje pusty. TęT nieciągłość odbieramy jako denerwujące miganie obrazu. Czy jednak czyszczenie całego obrazu jest naprawdę potrzebne? Przecież tak naprawdę chodzi nam jedynie o chwilowe pozbycie się napisu z ekranu! Zamiast więc c czyści cić cały y ekran, wyczyść śćmy sam napis. Jak? Wypisując c go ponownie, tym razem w kolorze tła t a (na czarno). Wprawdzie nie pozbyliśmy się migotania, jednak zostało o ono zredukowane do akceptowalnych rozmiarów.

28 program Anim; uses CRT, Graph; var i, x, y: integer; d, m: integer; begin d := DETECT; lnitgraph(d, m,'c:\bp\bgi'); for i := 0 to GetMaxX do begin x:= i; y := x*3 div 4; OutTextXY(x, y, lubię informatykę'); Delay(20); ClearViewPort end; CloseGraph; end.

29 Proste animacje Ćwiczenie 10 Otwórz plik przykład5, w którym zapisany jest program z przykładu 5. Uruchom ten program. Następnie zmień go tak, aby zamiast całego ekranu czyszczony był tylko obszar napisu. Ćwiczenie 11 Napisz program animujący twoje imię i nazwisko. Imię powinno przesuwać się z lewej strony ekranu na prawą, natomiast nazwisko - z dołu u ekranu do góry; g imię i nazwisko powinny spotkać się w odpo wiednim miejscu i czasie, tworząc c kompletny napis.

30 Podwójne buforowanie Aby całkowicie uniknąć efektu migotania animowanego obrazu, niezbędne jest skorzystanie z techniki podwójnego buforowania (wykorzystywanej powszechnie w grach komputerowych). W technice tej istnieją jak gdyby dwa ekrany. W danym momencie jeden z nich jest widoczny, natomiast wszystkie operacje rysowania sąs wykonywane na drugim ekranie. Po wykonaniu całego rysunku ekrany sąs zamieniane (przełą łączenie jest błyskawiczne). b W rezultacie animacja jest płynna. p

31 Podwójne buforowanie Kluczowym elementem programu jest funkcja przełą łączania buforów w ekranu - ZamienStrony. Wykorzystuje ona standardowe procedury Pascala SetActivePage i SetVisualPage. Podczas gdy widoczna jest jedna strona, na drugiej czyścimy cimy najpierw odpowiedni fragment ekranu (z wy korzystaniem procedury Bar), a potem rysujemy napis. Gdy jest już gotowy, można pokazać go na ekranie i przejść do operacji na niewidocznej stronie. Dodatkowo program ustawia specjalny tryb graficzny, wpisując c odpowiednie wartości do zmiennych d i m (w normalnym trybie VGA podwójne buforowanie nie jest możliwe).

32 Zadanie domowe Napisz program rysujący prostokąt t otaczający cy lewą górną ćwiartkę ekranu. Napisz program rysujący na środku ekranu okrąg g o promieniu 100 pikseli. Napisz program rysujący elipsę wypełniaj niającą lewą połówk wkę ekranu. Napisz program tworzący na ekranie monitora rysunek domu (patrz: wzór r rysunku domu na następnym slajdzie). Korzystając c z systemu pomocy Turbo Pascala, przygotuj tabelę dla następuj pujących procedur: SeiLineStyle, SetTextStyle, SetTextJustify, SetBkColor, SetPalette.

33 Zadanie domowe

34 Zadanie domowe Napisz program wyświetlaj wietlający animowaną flagę olimpijską. Każde koło o olimpijskie powinno przylecieć"" na swoje miejsce z innego kierunku. Napisz program wyświetlaj wietlający kwadrat obracający cy się i przesuwający jednocześnie. nie. Wskazówka: Użyj zamiany współrz rzędnych biegunowych na prostokątne tne (patrz przykład 3). Napisz program wyświetlaj wietlający na ekranie komputera zegar cyfrowy. Wskazówka: Użyj funkcji GetTime z modułu DOS, by pobrać aktualny czas. Napisz program wyświetlaj wietlający na ekranie komputera zegar analogowy (ze wskazówkami). wkami). Skorzystaj z doświadcze wiadczeń nabytych w poprzednich ćwiczeniach. Wykorzystując procedury Sound i NoSound, dodaj efekt tykania. Napisz program rysujący na ekranie szachownicę.