1 Grafika komputerowa Dr inż. Piotr Gronek Wykład dla Studium Podyplomowego „Informatyka w Szkole”

2 Grafika komputerowa – narzędzia i technologie WWW Graphics Image Manipulation Program (GIMP) – zaawansowany edytor grafiki rastrowej Virtual Reality Modelling Language (VRML) – środowisko Web 3D Scalable Vector Graphics (SVG) – standard grafiki wektorowej w aplikacjach WWW HTML 5 Canvas – programowa realizacja grafiki rastrowej w przeglądarce WWW

3 Graphics Image Manipulation Program (GIMP) GIMP – bezpłatny program do obróbki grafiki rastrowej w środowisku Linux i Windows Możliwości porównywalne z programami profesjonalnymi np. Adobe Photoshop Rozbudowana obsługa filtrów GIMP http://www.gimp.org/ – Windows: http://gimp-win.sourceforge.net/

4 Virtual Reality Modelling Language (VRML) VRML – język do kreowania trójwymiarowych przestrzeni wirtualnych, analogiczny do HTML Obsługa w przeglądarkach za pomocą wtyczek np.Cortona, CosmoPlayer, Octaga (X3D) http://www.parallelgraphics.com/products/cortona/download/other/ http://www.cai.com/cosmo/ http://www.octaga.com/start/start.php?startpage=download_octaga Standardy: VRML 1.0, VRML 2.0, VRML 97, X3D Web3D consortium http://www.web3d.org/ Art of Illusion http://www.artofillusion.org/

5 Grafika komputerowa Scalable Vector Graphics (SVG) - nowy standard grafiki przeznaczony do zastosowań w sieci WWW.

6 Scalable Vector Graphics SVG – Standard zapisu skalowalnej grafiki wektorowej bazujący na standardzie XML. Odtwarzanie realizowane obecnie za wybranych przeglądarek internetowych, np. Opera, Mozilla Firefox / Seamonkey. W innych przeglądarkach (np. IE) obsługa SVG jest możliwa za pomocą wtyczek (plug-in): –Adobe SVG Viewer 3.0: http://www.adobe.com/ http://www.adobe.com/ –wersja 6.0: http://www.adobe.com/svg/viewer/install/beta.htmlhttp://www.adobe.com/svg/viewer/install/beta.html –m. in. zaawansowana obsługa animacji SMIL, –obecnie nie rozwijane przez firmę Adobe.

7 Scalable Vector Graphics W3C SVG http://www.w3.org/Graphics/SVG/ Format SVG http://republika.pl/format_svg/ SVG Zone http://www.adobe.com/svg XML.com http://www.xml.com/pub/a/2001/03/21/svg.html Wikipedia http://en.wikipedia.org/wiki/SVG Edytor Inkscape http://www.inkscape.org/

8 Umieszczanie grafiki SVG w dokumencie HTML Zmiany standardów wymagają użycia kilku konstrukcji jednocześnie; –współpraca wtyczek z przeglądarkami. Najnowsze standardy umożliwiają mieszanie aplikacji języka XML (np. XHTML, SVG, MathML) w jednym dokumencie; –jeszcze nie obsługiwane przez popularne przeglądarki. Można także stosować odwołanie do zewnętrznego dokumentu SVG: –element: kliknij tutaj

9 Umieszczanie grafiki SVG w dokumencie HTML Rysunek SVG

10 Dokument SVG SVG należy do rodziny aplikacji XML Wymagany odpowiedni nagłówek Treść dokumentu SVG

11 Dokument SVG Część opisowa i komentarz Pierwszy rysunek SVG

12 Podstawowe obiekty graficzne Koło (okrąg) i prostokąt

13 Podstawowe obiekty graficzne Elipsa i linia

14 Podstawowe obiekty graficzne Łamana –points: współrzędne x,y kolejnych wierzchołków oddzielone przecinkami

15 Podstawowe obiekty graficzne Wielokąt

16 Podstawowe obiekty graficzne Tekst –podelement tspan zaznacza fragment tekstu, umożliwiając np. jego odrębne sformatowanie Hello, world

17 Grupowanie Łączenie obiektów w grupy –wspólna manipulacja połączonymi obiektami

18 Wzorce Definiowanie wzorca do późniejszego użycia –nie jest wyświetlany bezpośrednio –można go wykorzystać w dalszej części pliku SVG Hello, world

19 Transformacje Modyfikacja położenia obiektów

20 Animacja Definiowanie ruchu obiektów i grup

21 Powtarzanie ruchów Animacja

22 Animacja Manipulowanie wyglądem (stylem)

23 Animacja Manipulowanie transformacjami

24 Element Canvas w HTML 5 HTML 5 – przygotowywana rewizja standardu X/HTML –zawiera pewną liczbę nowych elementów opisu stron, –wstępnie obsługiwany przez większość nowoczesnych przeglądarek: Mozilla/Firefox, Opera, Safari. Element Canvas – „sztalugi” –nowa forma umieszczania informacji graficznej (rastrowej), –przystosowana do programowej obsługi z poziomu wbudowanego w przeglądarki języka Javascript. Mozilla Developer Center https://developer.mozilla.org/en/Canvas_tutorial Dev.Opera http://dev.opera.com/articles/view/html-5-canvas-the-basics/ Wikipedia http://en.wikipedia.org/wiki/Canvas_element

25 DOM i JavaScript DOM – Document Object Model – sposób reprezentacji złożonych dokumentów XML i HTML w postaci modelu obiektowego (o strukturze drzewa). –W3C DOM definiuje zespół klas i interfejsów, pozwalających na dostęp do struktury dokumentów oraz jej modyfikację poprzez tworzenie, usuwanie i modyfikację węzłów. JavaScript – zorientowany obiektowo język skryptowy programowania, stosowany głównie do obsługi elementów środowiska przeglądarki internetowej. – kod źródłowy (skrypt) programu JavaScript umieszczony wprost w dokumencie HTML, –podstawowe narzędzie budowy interaktywnej obsługi witryn internetowych przez przeglądarki.

26 Canvas – szablon Canvas tutorial function draw() { var canvas = document.getElementById('tutorial'); if ( canvas.getContext ) { var ctx = canvas.getContext('2d'); } else { document.write(" No HTML 5 Canvas support! "); return false; } } canvas { border: 1px solid black; } Drawing is made here.

27 Canvas – przykład function draw() { var canvas = document.getElementById('tutorial'); if ( canvas.getContext ) { var ctx = canvas.getContext('2d'); } else { document.write(" No HTML 5 Canvas support! "); return false; } // draw rectangle - the only directly available primitive shape ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 255, 250); // draw transparent rectangle ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (50, 50, 255, 250); } Drawing is made here.

28 Przykłady operacji graficznych na elemencie Canvas Kształty – operacje: fillRect, clearRect, strokeRect Ścieżki – operacje: beginPath, moveTo, lineTo, arc, fill, stroke Krzywe Beziera – operacja: bezierCurveTo Obrazy – operacja: drawImage Style i barwy – operacje: fillStyle, strokeStyle, globalAlpha, lineWidth, lineCap, lineJoin –pozycjonowanie linii względem rozdzielczości obrazu

29 Przykłady operacji graficznych na elemencie Canvas Transformacje – operacje: translate, rotate, scale Kompozycja – operacja: globalCompositeOperation, clip cliprotatetranslate

30 Przykłady operacji graficznych na elemencie Canvas Animacje – wykorzystanie funkcji DOM dotyczących czasu: –time.getSeconds(), –time.getMilliseconds(), Przykłady: http://www.ftj.agh.edu.pl/~gronek/

31 koniec