Wprowadzenie do WebGL

Wielkość: px
Rozpocząć pokaz od strony:

Download "Wprowadzenie do WebGL"

Transkrypt

1 Wprowadzenie do WebGL Monika Falarz, Grzegorz Jaśko, Patryk Kiepas 9 listopad 2012 Streszczenie Dokument prezentuje podstawy i wprowadza w proces tworzenia grafiki przestrzennej przy użyciu biblioteki WebGL i języka JavaScript, renderowanej przez wiodące przeglądarki WWW. W trakcie procesu nauki będziemy tworzyć wspólnie szkielet aplikacji WebGL. 1 Wstęp Celem niniejszego dokumentu jest zapoznanie czytelnika z nową technologią WebGL w stopniu umożliwającym pisanie prostych scen przestrzennych. Zakładamy, że czytelnik posiada podstawową znajomość popularnych języków JavaScript i HTML5 oraz posiada ogólną wiedzę programistyczną (zmienne, pętle, instrukcje warunkowe itp.), matematyczną (macierze, wektory i operacje na nich) i szczątkową znajomość pojęć pochodzących z grafiki komputerowej (renderowanie, potok grafiki, translacja, rotacja, skalowania, bufor głębi, bufor wierzchołków, shader, test przycięcia itp.). WebGL to nic innego jak API języka JavaScript, które umożliwa nam tworzenie interaktywnej grafiki 3D bezpośrednio w przeglądarce. Jest to standard webowy tworzony przez grupę Khronos odpowiedzialną za stworzenie i kolejne specyfikacje OpenGL. API bazuje bezpośrednio na mobilnej wersji OpenGL ES 2.0 przez co, grafika utworzona przy pomocy WebGL może być uruchamiania nie tylko na pececie, ale i na urządzeniach mobilnych i telewizorach. W trakcie nauki zaczniemy wprowadzać coraz to kolejne elementy własnego szkieletu aplikacji WebGL. W założeniu, ma on być prosty i umożliwić jak najwygodniejsze przeskoczenie całego procesu inicjalizacji. W wyniku tego w późniejszych częściach wprowadzania, będziemy mogli w całości skupić się na tworzeniu i modyfikacji tworzonej przez nas trójwymiarowej sceny. 1

2 Naszą naukę rozpoczniemy od przygotowania naszej przeglądarki do obsługi technologi WebGL. Następnie przejdziemy przez proces integracji WebGL z HTML5, co umożliwi nam osadzanie kreowanych programów wprost w kodzie naszej strony WWW. Kolejnym krokiem, będzie próba przygotowania przez nas pustej sceny, a następnie narysowania na niej prostego obiektu dwuwymiarowego. Gdy to nam się uda, spróbujemy swych sił w trzecim wymiarze. Rozpoczniemy od prostych brył, by przejść do ich transformacji (obroty, translacje etc.), bufora głębi i obiektów na siebie zachodzących, nakładania tekstur, oświetlenia, shaderów, obsługi klawiatury i myszki oraz wielu innych. 2 Uruchomienie WebGL 2.1 Wstęp Nie każda przeglądarka jest w stanie uruchomić aplikacje WebGL z dwóch przyczny. Pierwsza to technologiczna bariera, gdy przeglądarka po prostu go nie obsługuje. Druga to kwestia bezpieczeństwa. Otóż WebGL ma parę błędów przez co osoby postronne jak i złośliwe oprogramowanie jest w stanie zawiesić nam przeglądarkę i nawet cały komputer. Z tego powodu WebGL jest domyślnie wyłączony. 2.2 Wybór przeglądarki Przeglądarki obsługujące WebGLa to m.in.: a) Firefox (wersja 4.0 i większa) b) Opera (wersja i wyższa) c) Chrome (wersja 9.0 i wyższa) d) Safari (wersja 5.1 i wyższa na MacOS) Wsparcie dla żadnej z przeglądarek nie jest mocne i może ulec zmianie w zależności od wersji. Kompatybilność poszczególnych przeglądarek należy sprawdzać na stronie producenta. 2.3 Włączenie WebGL w przeglądarce Z powodu wspomnianej kwestii słabego bezpieczeństwa WebGL domyślnie jest zazwyczaj wyłączony. Włączenie go w większości przeglądarkach wygląda podobnie. W pasku adresu wpisujemy podany adres, wyszukujemy atrybut i ustawiamy odpowiednią wartość: i) Firefox - adres=about:config, atrybut=webgl.force-enabled, wartość= true 2

3 ii) Opera - adres=opera:config, atrybut=enable WebGL, wartość=1 iii) Chrome - adres=chrome://flags, atrybut=disable WebGL, wartość= Disable To czy udało nam się włączyć można sprawdzić wchodząc na strone: i zobaczyć czy aplikacja się uruchamia. Warto też wspomnieć o wymaganym sprzęcie. Potrzebna jest karta z Shaderami w wersji conjamniej 2.0. Najlepiej od NVidia, ATI. Występują problemy z kartami wbudowanymi producentów Intel, SiS. Niekiedy będziemy musieli siłowo wymusić uruchomienie WebGL, gdy nasza karta jest nie do końca zgodna ze specyfikacją. Można to zrobić poprzez ustawienie odpowiednich atrybutów bądź też rezygnując ze wsparcia sprzętowego i uruchomić renderowanie programowe (ang. software rendering, na CPU). 3 Integracja z HTML5 3.1 Po stronie HTML5 Cała magia związana z WebGL w przeglądarce dzieje się na komponencie canvas pochodzącym z nowego HTML5. Integracja jest prosta. Tworzymy podstawowy szablon strony HTML5, obiekt canvas określając przy tym jego identyfikator i wymiary oraz określamy, która funkcja JavaScript ma zostać wywołana podczas ładowania strony. Używamy do tego celu event onload: <html> <head> <title>integracja WebGL z HTML5</title> <meta http-equiv="content-type" content="text/html; charset=utf8"/> <script type="text/javascript" src="start.js"> </script> </head> <body onload="start();"> <canvas id="empty_canvas" width="500" height="500"> </canvas> </body> </html> 3.2 Po stronie WebGL Następnie w kodzie start.js odwołujemy się do elementu canvas za pomocą obiektowego modelu dokumentu DOM i funkcji getelementbyid i 3

4 już możemy renderować grafikę w przeglądarce: function start() { var canvas = document.getelementbyid("empty_canvas"); 4 Pusta scena 4.1 Inicjalizacja W tej części postaramy stworzyć naszą pierwszą pustą scenę. Zaczynamy od stworzenia globalnej zmiennej gl przechowującej cały kontekst WebGL oraz od wywołania funkcji inicjalizującej sam WebGL init() w naszej głównej funkcji start(): var gl; function start() { var canvas = document.getelementbyid("empty_canvas"); init(); Następnie wypełniamy funkcję init() następującym kodem inicjalizującym globalną zmieną gl, która jest wypełniana odpowiednimi danymi pochodzącymi z płótna canvas. Między innymi kontekstem WebGL, udostępniającym zestaw funkcji do rysowania: function init(canvas) { gl = canvas.getcontext("webgl") canvas.getcontext("experimental-webgl"); gl.viewportwidht = canvas.width; gl.viewportheight = canvas.height; if(!gl) { alert("nie mozna zainicjalizowac!"); 4.2 Rysowanie Teraz możemy się zając rysowaniem naszej pustej sceny dopisując do start() odpowiednie instrukcje. Zaczynamy od wyczyszczenia płótna i ustawieniu mu koloru czarnego. Następnie włączamy test bufora głębi, który 4

5 odpowiada za warstwowe rysowanie obiektów, tak aby odpowiednio się zasłaniały. Na koniec ustawiamy wielkość obszaru rysowania pobierając dane z płótna i wywołujemy funkcje rysującą draw(): function start() { gl.clearcolor(0.0, 0.0, 0.0, 1.0); gl.enable(gl.depth_test); gl.viewport(0, 0, gl.viewportwidth, gl.viewportheight); draw(); Nasza funkcja rysująca będzie bardzo prosta skoro niczego nie rysuje. Jedyne co robi to czyści bufor ekranu i bufor głębi co jest wymagane przy zwykłym renderowaniu sceny. Nie możemy przecież pozwolić, by dane zapisywane do bufora ekranu i głębi nakładały się na siebie. Zawsze tworząc nową klatkę musimy zapisywać dane do pustch buforów: function draw() { gl.clear(gl.color_buffer_bit gl.depth_buffer_bit); Przykładowy kod źródłowy znajduje się w folderze 1. Pusta scena. Po uruchomieniu powinniśmy otrzymać czarny pusty widok. 5 Szkielet fruitgl (cz.1) 5.1 Wstęp Tworzony przez nas szkielet fruitgl ma być nieskomplikowany. Ma umożliwić nam jak najszybsze przejście do tworzenia grafiki, pozostawiając w niepamięć takie operacje jak inicjalizacja ekranu, buforów, shaderów, operacje na macierzach i wektorach czy przekształcenia w przestrzeni. 5.2 Kod Wszystkie funkcje szkieletu są umieszczone we wspólnej przestrzeni nazw fruitgl. Technicznie kod zawarty w szkielecie nie różni się od tego użytego wcześniej przy okazji tworzenia pustej sceny. Jest tylko inaczej zorganizowany: var fruitgl = { gl : null, 5

6 initialize : function(canvasname) { var canvas = document.getelementbyid(canvasname); fruitgl.gl = canvas.getcontext("webgl") canvas.getcontext("experimental-webgl"); fruitgl.gl.viewportwidht = canvas.width; fruitgl.gl.viewportheight = canvas.height; if(!fruitgl.gl) { alert("nie mozna zainicjalizowac!");, fruitgl.gl.clearcolor(0.0, 0.0, 0.0, 1.0); fruitgl.gl.enable(fruitgl.gl.depth_test); fruitgl.gl.viewport(0, 0, fruitgl.gl.viewportwidth, fruitgl.gl.viewportheight); begindraw : function() { fruitgl.gl.clear(fruitgl.gl.color_buffer_bit fruitgl.gl.depth_buffer_bit);, enddraw : function() { 5.3 Wykorzystanie fruitgl Wykorzystanie szkieletu fruitgl jest bardzo proste. Najpierw dołączamy plik z kodem fruitgl.js do kodu naszej strony (przed dołączeniem kodu start.js), a następnie wywołujemy funkcje szkieletu w funkcji start(). Nasz kod strony w html: <html> <head> <script type="text/javascript" src="fruitgl.js"> </script> <script type="text/javascript" src="start.js"> </script> </head> </html> 6

7 Użycie fruitgl w kodzie naszej aplikacji start.js: function start() { fruitgl.initialize("empty_canvas"); fruitgl.begindraw(); draw(); fruitgl.enddraw(); function draw() { // tu rysujemy! Szkielet fruitgl oraz przykłady jego wykorzystania znajdują się w katalogu "Kody źródłowe\fruitgl". 6 Pierwszy obiekt (trójkąt) Wyświetlając grafikę w WebGL nie możemy korzystać ze standardowego potoku karty graficznej (tzw. fixed-pipeline). Musimy utworzyć bardziej współczesny potok wymagający od nas zdefiniowania jednostek cieniujących, które w rzeczywistości są prostymi funkcjami wykonywanymi na rzecz każdego wierzchołka bądź też pixela sceny. 6.1 Vertex Shader Pomijając nieistotne etapy, przekazane na kartę graficzną wierzchołki trafiają wpierw do jednostki vertex shader odpowiedzialnej za ich transformację. Jednostka ta ustawia im m.in. odpowiednią pozycję z uwzględnieniem macierzy widoku, projekcji i świata. attribute vec3 position; void main(void){ gl_position = vec4(position, 1.0); Zaczynamy od deklaracji wektora 3-elementowego position, któremu będziemy przypisywać z programu pozycję naszych wierzchołków. Pozycja ta jest przepisywana bez zmian do odpowiedniego miejsca gl_position, z którego następny etap potoku będzie ją pobierał. Dzięki temu zabiegowi, pozycje wierzchołków będą oznaczały ich rzeczywiste położenie na ekranie w zakresie dla każdej ze współrzędnych. 7

8 6.2 Pixel Shader Zwrócone wierzchołki trafiają do pixel shadera odpowiedzialnego za modyfikację pojedyńczych pixeli. Jest to jedna z ostatnich faz renderingu, która wykorzystuje już ułożoną w przestrzeni scene i skupia się tylko na widocznych fragmentach modeli. precision mediump float; void main(void){ gl_fragcolor = vec4(0.5, 0.2, 1.0, 1.0); Wpierw ustawiamy średnią precyzję typu zmiennopozycjnego, a następnie przypisujemy każdemu modyfikowanemu pixelu kolor RGB(0.5, 0.2, 1.0). Tym razem, nie przekazujemy niczego z programu. Odpowiedni pixel jest wydobywany z przesłanych od vertex shadera, wstępnie przetworzonych wierzchołków. 6.3 Ładowanie shaderów Definiujemy shadery w łańcuchach znaków shaderps i shadervs. Następnie tworzymy pusty shader o odpowiednim typie i przypisujemy mu kod shaderów oraz kompilujemy: var shaderps = "precision mediump float; void main(void) { gl_fragcolor = vec4(0.5, 0.2, 1.0, 1.0);"; var shadervs = "attribute vec3 position; void main(void) { gl_position = vec4(position, 1.0); "; var pixelshader = gl.createshader(gl.fragment_shader); gl.shadersource(pixelshader, shaderps); gl.compileshader(pixelshader); var vertexshader = gl.createshader(gl.vertex_shader); gl.shadersource(vertexshader, shadervs); gl.compileshader(vertexshader); Same wypełnione shadery nie na wiele nam się zdadzą. Musimy utworzyć podprogram reprezentujący potok, któremu przypisujemy utworzone jednostki cieniujące i go linkujemy. Następnie ustawiamy go jako domyślny sposób na tworznie grafiki oraz wskazujemy atrybut position jako ten w vertex shaderze, pod który będziemy przesyłać pozycje wierzchołków z programu: 8

9 shaderprogram = gl.createprogram(); gl.attachshader(shaderprogram, vertexshader); gl.attachshader(shaderprogram, pixelshader); gl.linkprogram(shaderprogram); gl.useprogram(shaderprogram); shaderprogram.position = gl.getattriblocation(shaderprogram, "position"); gl.enablevertexattribarray(shaderprogram.position); 6.4 Bufor wierzchołków Tworzone przez nas figury i bryły składają się z wierzchołków. Umieszczamy je w tzw. buforach, czyli szybkich, wydzielonych obszarach pamięci na karcie graficznej, których użycie znacząco redukuje czas odczytu. Zaczynamy od wywołania funkcji tworzącej bufor, a następnie ustawiamy go na bufor domyślny, czyli ten na którym aktualnie działamy: trianglebuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, trianglebuffer); Nie pozostaje nam nic innego jak zdefiniować trzy wierzchołki dla naszego trójkąta pamiętająć, że przy używaniu współrzędnych ekranowych poruszamy się po zakresie Następnie funkcją bufferdata() ładujemy wierzchołki do bufora ustawiając przy tym jego rozmiar: var vertices = [ 0.0, 0.7, 0.0, -0.7, -0.7, 0.0, 0.7, -0.7, 0.0 ]; gl.bufferdata(gl.array_buffer, new Float32Array(vertices), gl.static_draw); trianglebuffer.itemsize = 3; trianglebuffer.numitems = 3; 6.5 Wyświetlenie Mając zdefiniowany potok graficzny i wczytane wierzchołki trójkąta, możemy przejść do wyświetlania sceny. Uzupełniamy funkcję draw() o następujące instrukcje: function draw() { gl.bindbuffer(gl.array_buffer, trianglebuffer); 9

10 gl.vertexattribpointer(shaderprogram.position, trianglebuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); Wpierw ustawiamy bufor z wierzchołkami trójkąta jako domyślny i na nim pracujemy. Później definiujemy rozmieszczenie wierzchołków w buforze poczynając od miejsca gdzie dane z niego będą trafiać do vertex shadera, poprzez liczbę współrzędnych (wymiar), aż po typ je przechowujący (dokładność). Rysunek 1: Pierwsza grafika (trójkąt) Cały proces wyświetlania kończymy funkcją drawarrays(), która wyświetla na ekranie aktywny bufor. W naszym przypadku rysujemy trzy wierzchołki (trianglebuffer.numitems) tworzące trójkąt (gl.triangles). Powyższy rysunek przedstawia nasze dotychczasowe dokonanie. 7 Trzeci wymiar Rysowanie w dwóch wymiarach wstępnie przetransformowanych wierzchołków jest proste. Trzeci wymiar oznacza konieczność wymnożenia wszystkich wierzchołków przez odpowiednie macierze (projekcji, widoku, świata), które ustawią ich pozycje z uwzględnieniem odpowiedniej perspektyw. Wynikiem tego jest złudzenie trzeciego wymiaru sceny. Nie dokonamy tego jednak przy użyciu samego WebGL, gdyż nie zawiera on wbudowanych operacji matematycznych na wektorach i macierzach. Użyjemy do tego gotowej biblioteki glmatrix v0.9.5 dostępnej pod adresem 10

11 7.1 Macierze Zaczniemy od utworzenia macierzy projekcji (stworzenie iluzji trzeciego wymiaru na płaskim ekranie) i macierzy świata (rozmieszczenie obiektów na scenie). Wpierw dołączamy bibliotekę glmatrix do strony przed naszym skryptem start.js, tworzymy globalne zmienne dla naszych macierzy i modyfikujemy vertex shader tak by z nich korzystał: var worldmat = mat4.create(); var projectionmat = mat4.create(); Modyfikacja vertex shadera: attribute vec3 position; uniform mat4 uworldmat; uniform mat4 uprojectionmat; void main(void) { gl_position = uprojectionmat * uworldmat * vec4(avertexposition, 1.0); Kolejny krok to stworzenie połączenia pomiędzy naszymi macierzami w programie i vertex shaderze: shaderprogram.worldmatuniform = gl.getuniformlocation(shaderprogram, "uworldmat"); shaderprogram.projectionmatuniform = gl.getuniformlocation(shaderprogram, "uprojectionmat"); Przy wypełnianiu macierzy projekcji i świata będziemy korzystać z funkcji bibliotecznych glmatrix. Dzięki funkcji perspective() utworzona macierz projekcji sprawi, że pozbędziemy się widoku ortogonalnego na rzecz perspektywy przestrzennej o horyzontalnym polu widzenia 45 stopni i zgodnym ze stosunkiem długości do szerokości ekranu widokiem. Macierz świata tworzymy wpierw jako macierz jednostkową (neutralna dla mnożenie, identity()), by następnie dokonywać za jej pomocą translacji obiektów sceny o wektor [0.5, 0.5, -4.0] i rotacje wzgledem osi Z o 90 stopni: mat4.perspective(45, gl.viewportwidth / gl.viewportheight, 0.1, 100.0, projectionmat); mat4.identity(worldmat); mat4.translate(worldmat, [0.5, 0.5, -4.0]); mat4.rotatez(worldmat, degtorad(90)); 11

12 Ostatnią rzeczą jest zaaplikowanie tak utworzonych macierzy do naszego vertex shadera, tak aby mógł z nich swobodnie korzystać. Dokonujemy tego tuż przed wywołaniem funkcji rysującej: gl.uniformmatrix4fv(shaderprogram.worldmatuniform, false, worldmat); gl.uniformmatrix4fv(shaderprogram.projectionmatuniform, false, projectionmat); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); 7.2 Efekt końcowy Rysunek 2: Trójkąt w trzecim wymiarze po transformacjach Przykład znajduje się w katalogu "Kody źródłowe\3. Trzeci wymiar". Użyliśmy w nim pomocniczej funkcji degtorad(), która odpowiada za zamiane kąta wyrażonego w stopniach na radiany. Jest to wymagane przez wszystkie funkcje przyjmujące kąt rotacji: function degtorad(degrees) { return degrees * Math.PI / 180; 8 Trochę kolorków Dokonamy lekkiej modyfikacji poprzedniego trójkąta dodając do wierzchołków dodatkową informację w postaci koloru. Przykład z tego rozdziału znajduje się w folderze "Kody źródłowe\4. Trochę kolorków". 12

13 8.1 Jednostki cieniujące Ponieważ wszystkie dane sceny w potoku odbiera najpierw vertex shader, także i do niego musimy przesłać kolor wierzchołka. Również i pixel shader wymaga modyfikacji, tak aby mógł korzystać z nowej informacji o kolorze: attribute vec3 position; attribute vec4 color; varying vec4 vcolor; uniform mat4 uworldmat; uniform mat4 uprojectionmat; void main(void) { gl_position = uprojectionmat * uworldmat * vec4(avertexposition, 1.0); vcolor = color; Używamy zmiennej vcolor z modyfikatorem varying dzięki czemu jej wartość jest przekazywana pomiędzy wywołaniami jednostek cieniujących: precision mediump float; varying vec4 vcolor; void main(void){ gl_fragcolor = vcolor; Ostatni krok związany z ustawianiem shaderów to wskazanie i połączenie nowych atrybutów z programem: shaderprogram.color = gl.getattriblocation(shaderprogram, "color"); gl.enablevertexattribarray(shaderprogram.color); 8.2 Bufor kolorów Informacje o kolorach wierzchołków przechowujemy tak jak i pozycje po prostu w buforze. Tworzymy zmienną dla bufora a następnie wypełniamy go: var trianglecolorbuffer; trianglecolorbuffer = gl.createbuffer(); 13

14 gl.bindbuffer(gl.array_buffer, trianglecolorbuffer); var colors = [ 1.0, 0.0, 0.0, 1.0, 0.0, 1.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0 ]; gl.bufferdata(gl.array_buffer, new Float32Array(colors), gl.static_draw); trianglecolorbuffer.itemsize = 4; trianglecolorbuffer.numitems = 3; 8.3 Wyświetlenie Jedyne co musimy zrobić by wyświetlić tak pokolorowany trójkąt to przesłać bufor kolorów do vertex shadera zaraz obok bufora pozycji. Wszystko to dokonujemy w funkcji draw(), tuż przed funkcją rysowania: gl.bindbuffer(gl.array_buffer, trianglevertexcolorbuffer); gl.vertexattribpointer(shaderprogram.vertexcolorattribute, trianglevertexcolorbuffer.itemsize, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); Rysunek 3: Efekt końcowy: trójkąt kolorowych 9 Animacja 9.1 Podstawy Ponieważ animacja opiera się na ciągłym tworzeniu sceny na nowo z uwzględnieniem pewnych zmian, potrzebujemy mechanizmu, który nam to umożliwi. Z pomocą przychodzi nam biblioteka od Google webgl-utils i funkcja requestanimframe() cyklicznie wywołująca podaną funkcję. 14

15 Ściągamy bibliotekę z source/browse/book/extension/webgl-utils.js oraz dołączamy ją do naszej strony tak jak przy okazji glmatrix. Następnie tworzymy funkcję tick() odpowiedzalną za cykliczne wywołania animacji: function tick() { requestanimframe(tick); begindraw(); draw(); enddraw(); animate(); Wywołujemy ją w funkcji start() zamiast funkcji draw(), która jest uruchamiana teraz wraz z tick(). Następnie tworzymy globalną zmienną angle śledzącą aktualną rotacje naszego trójkąta oraz lasttime do przechowywania czasu. Wypełniamy funkcję animate() odpowiedzialną za samą animacje obiektów i ich płynną formę w zależności od liczby klatek wyświetlanego obrazu: function animate() { var timenow = new Date().getTime(); if (lasttime!= 0) { var elapsed = timenow - lasttime; angle += (90 * elapsed) / ; lasttime = timenow; 9.2 Stos macierzy Użyjemy prostego stosu dla macierzy świata, aby zachowywać jej początkowy stan i oddzielić od wszelkich modyfikacji wynikłych z transformacji na pojedyńczym obiekcie. Definiujemy pustą zmienną tablicową dla stosu. Następnie tworzym dwie funkcje obsługujące stos, które zdejmują z (pop()) oraz wkładają na niego macierz (push()): var stackmat = []; function push() { var copy = mat4.create(); mat4.set(worldmat, copy); stackmat.push(copy); 15

16 function pop() { if (stackmat.length == 0) { throw ParamConst.INVALID_POP_MATRIX_CALL; worldmat = stackmat.pop(); 9.3 Wyświetlenie Pozostało jeszcze zmodyfikować funkcje rysującą tak aby po ustawieniu macierzy świata odłożyć ją na stos, dokonać transformacji obiektów, wyrenderować na ekranie oraz zdjąć początkową wartość macierzy dla nowej klatki: function draw() { mat4.translate(worldmat, [0.0, 0.0, -2.0]); push(); mat4.rotate(worldmat, degtorad(angle), [0, 1, 1]); gl.drawarrays(gl.triangles, 0, trianglebuffer.numitems); pop(); Rysunek 4: Efekt końcowy: trójkąt animowany 10 Sześcian Stworzym całkowicie trójwymiarową bryłę: sześcian. Użyjemy do tego tzw. indeksowanego bufora wierzchołków. Ponieważ niektóre wierzchołki są wspólne dla wielu trójkątów/ścian dlatego też możemy pozycję takiego wierzchołka przechowywać tylko raz, a dobierać się do niego poprzez ustalony indeks. Możliwość taką daje nam właśnie indeksowany bufor. 16

17 10.1 Bufory danych Pozbywamy się całkiem wszystkich zmiennych związanych z trójkątem. Tworzymy nowe bufory wierzchołków, kolorów i indeksów dla naszego sześcianu: var cubevertexbuffer; var cubecolorbuffer; var cubeindexbuffer; Zaczynamy od wypełnienia bufora wierzchołków składającego się z 24 elementów jako standardowy ARRAY_BUFFER, analogicznie jak w poprzednich przykładach. Następnie bierzemy się za równie standardowy bufor kolorów. Do jego utworzenia używamy tylko 6 kolorów i pętli, która dla każdej ze ścian powiela 4-krotnie dany kolor. Bliżej przyjrzymy się tylko nowemu buforowi indeksów, w którym za pomocą indeksów do wierzchołków i grupowaniu ich po trzy wyznaczamy trójkąty do renderowania: cubeindexbuffer = gl.createbuffer(); gl.bindbuffer(gl.element_array_buffer, cubeindexbuffer); var cubeindices = [ 0, 1, 2, 0, 2, 3, // Przednia 4, 5, 6, 4, 6, 7, // Tylnia 8, 9, 10, 8, 10, 11, // Górna 12, 13, 14, 12, 14, 15, // Dolna 16, 17, 18, 16, 18, 19, // Prawa 20, 21, 22, 20, 22, 23 // Lewa ] gl.bufferdata(gl.element_array_buffer, new Uint16Array(cubeIndices), gl.static_draw); cubeindexbuffer.itemsize = 1; cubeindexbuffer.numitems = 36; 10.2 Wyświetlenie Rysowanie wszystkiego nie powinno być problematyczne. Zaczynamy od zbindowania wszystkich trzech buforów, a następnie wyświetlenia danych pochodzących z bufora indeksów: function draw() { mat4.translate(worldmat, [0.0, 0.0, -7.0]); gl.bindbuffer(gl.array_buffer, cubepositionbuffer); gl.vertexattribpointer(shaderprogram.position, 17

18 cubepositionbuffer.itemsize, gl.float, false, 0, 0); gl.bindbuffer(gl.array_buffer, cubecolorbuffer); gl.vertexattribpointer(shaderprogram.color, cubecolorbuffer.itemsize, gl.float, false, 0, 0); gl.bindbuffer(gl.element_array_buffer, cubeindexbuffer); gl.drawelements(gl.triangles, cubeindexbuffer.numitems, gl.unsigned_short, 0); Rysunek 5: Efekt końcowy: sześcian 11 Teksturowanie 11.1 Przygotowanie tekstury Na każdą z tworzonych powierzchni możemy nałożyć dowolną teksturę naśladującą pewien materiał. Tekstura to nic innego jak plik graficzny obrazujący np. drewno, metal. Przykład ten znajduje się w folderze "Kody źródłowe\7. Teksturowanie", a użyta do nałożenia na sześcian tekstura to wood.jpg. Zaczynam od zadeklarowania zmiennej na naszą teksture i stworzenia funkcji inicjalizującej wywoływanej po inicjalizacji buforów w funkcji start(): var texture; function initializetexture() { texture = gl.createtexture(); texture.image = new Image(); texture.image.crossorigin = "anonymous"; 18

19 texture.image.onload = function() { settexture(texture); texture.image.src = "wood.jpg"; Następnie tworzymy funkcje settexture() odpowiedzialną za ustawienie odpowiednich parametrów tekstury (sposób składowania tekstury, jej rodzaj, użyty system kolorów i techniki jej filtrowania): function settexture(tex) { gl.bindtexture(gl.texture_2d, tex); gl.pixelstorei(gl.unpack_flip_y_webgl, true); gl.teximage2d(gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, tex.image); gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.nearest); gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.nearest); gl.bindtexture(gl.texture_2d, null); 11.2 Przygotowanie współrzędnych Jednak tekstura nie może współistnieć z powierzchnią bez pewnego kleju. Tym klejem są dwuwymiarowe (u, v) współrzędne tekstury określające położenie wierzchołka powierzchni na teksturze. Umożliwia to rozszerzanie, zwężanie i w ogólności dopasowanie danej tekstury do powierzchni. Zakres dla tych współrzędnych to I tak wierzchołek o współrzędnych u: 0.0, v: 0.0 będzie tam gdzie lewy górny róg tekstury, a więc tą jej częścią zostanie przykryty. Z kolei wierzchołek ze współrzednymi u: 1.0, v: 1.0 to nic innego jak prawy dolny róg. Pomiędzy wierzchołkami tekstura jest odpowiednio dopasowana. Kod wygląda następująco: var cubetexturebuffer; cubetexturebuffer = gl.createbuffer(); gl.bindbuffer(gl.array_buffer, cubetexturebuffer); var coords = [ // Przednia 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 19

20 0.0, 1.0, ]; gl.bufferdata(gl.array_buffer, new Float32Array(coords), gl.static_draw); cubetexturebuffer.itemsize = 2; cubetexturebuffer.numitems = 24; 11.3 Modyfikacja shaderów Wszystko czego do tej pory dokonaliśmy w kontekście tekstur na nic się zda jeśli nie zmodyfikujemy jednostek cieniujących. Współrzędne tekstury są w tej kwestii na równi z kolorem wierzchołka (który zostanie przez teksturę zastąpiony) i są przekazywane do potoku graficznego poczynając od vertex shadera. Wymagana dlatego jest jego modyfikacja: attribute vec3 position; attribute vec2 coord; varying vec2 vcoord; uniform mat4 uworldmat; uniform mat4 uprojectionmat; void main(void) { gl_position = uprojectionmat * uworldmat * vec4(position, 1.0); vcoord = coord; Współrzędne tekstur zazwyczaj nie są wykorzystywane w vertex shaderze, a tylko przekazywane dalej do pixel shadera. To w nim dla każdego fragmentu powierzchni pobierany jest odpowiedni pixel tekstury przy pomocy tzw. obiektu próbkującego (ang. sampler), by następnie zostać nowym kolorem danego wycinka powierzchni: precision mediump float; varying vec2 vcoord; uniform sampler2d usampler; void main(void) { gl_fragcolor = texture2d(usampler, vec2(vcoord.s, vcoord.t)); 20

21 11.4 Wyświetlenie Przed rozpoczęciem wyświetlania musimy powiązać dane programu z danymi shaderów: shaderprogram.coord = gl.getattriblocation(shaderprogram, "coord"); gl.enablevertexattribarray(shaderprogram.coord); shaderprogram.sampleruniform = gl.getuniformlocation(shaderprogram, "usampler"); Wyświetlanie zaczynamy od przekazania przekazania danych z programu do vertex shadera, by następnie aktywować nakładaną teksturę i dokonać końcowego renderingu: function draw() { gl.bindbuffer(gl.array_buffer, cubetexturebuffer); gl.vertexattribpointer(shaderprogram.coord, cubetexturebuffer.itemsize, gl.float, false, 0, 0); gl.activetexture(gl.texture0); gl.bindtexture(gl.texture_2d, texture); gl.uniform1i(shaderprogram.sampleruniform, 0); gl.drawelements(gl.triangles, cubeindexbuffer.numitems, gl.unsigned_short, 0); Rysunek 6: Efekt końcowy: sześcian oteksturowany 21

22 12 Obsługa klawiatury 12.1 Wprowadzenie Obsługa klawiatury jest niezwykle łatwa i opera się o zdarzenia przeglądarki/obiektowego dokumentu wyzwalane podczas wciśnięcia bądź puszczenia klawisza. Aktualna informacja o stanie klawisza (wciśnięty / puszczony) jest przechowywana w tablicy currentkeys, której stan jest zmieniany przy pomocy funkcji keydownhandle() oraz keyuphandle() wywoływanych wraz z wywołaniem wspomnianych wcześniej zdarzeń. Wszystko to opakowujemy w funkcje inicjalizującą klawiaturę: var currentkeys = {; function initializekeyboard() { document.onkeydown = keydownhandle; document.onkeyup = keyuphandle; function keydownhandle(event) { currentkeys[event.keycode] = true; function keyuphandle(event) { currentkeys[event.keycode] = false; 12.2 Obsługa klawiszy Pozostało nam tylko obsłużyć odpowiedni klawisze. Zaczynamy od zdefiniowania zmiennej zoom przechowującej aktualne oddalenie sześcianiu od ekranu oraz od funkcji wykonującej na tej zmiennej modyfikacje w zależności od wciśniętego klawisza: function handlekeys() { if (currentkeys[38]) { // Strzałka w górę zoom -= 0.05; if (currentkeys[40]) { // Strzałka w dół zoom += 0.05; I tak strzałka w górę oddali sześcian, a strzałka w dół przybliży go do nas. Funkcję tą wywołujemy funkcji tick() tuż przed rysowaniem, tak 22

23 aby aktualna scena mogła pozostać aktualne w stosunku do ustawionego przybliżenia: function tick() { handlekeys(); begindraw(); draw(); Na koniec musimy zaaplikować zmienną zoom do operacji translacji sześcianu. Dokonujemy tego w funkcji draw(): draw() { mat4.translate(worldmat, [0.0, 0.0, -7.0+zoom]); Rysunek 7: Efekt końcowy: sześcian przybliżony 13 Przeźroczystość Przeźroczystość jest łatwa do osiągnięcia. Należy wyłączyć bufor głębi (wkońcu nie interesuje nas obiekt najbardziej na wierzchu ale również i tan za, gdyż z racji przeźroczystości pierwszego obiektu będzie widoczny). Następnie włączyć funkcje mieszania (ang. blending) i odpowiednio ustawić: function initialize(canvasname) { gl.disable(gl.depth_test); gl.enable(gl.blend); 23

24 gl.blendfunc(gl.src_alpha, gl.one); Kolejny krok to modyfikacja pixel shadera tak aby wynikowy kanał alpha (przeźroczystości) dla fragmentu tekstury był przemnożony przez odpowiedni współczynnik prześwitywania (u nas półprzeźroczystość): precision mediump float; varying vec2 vcoord; uniform float ualpha; uniform sampler2d usampler; void main(void) { vec4 texturecolor = texture2d(usampler, vec2(vcoord.s, vcoord.t)); gl_fragcolor = vec4(texturecolor.rgb, texturecolor.a * ualpha); Następnie musimy obsłużyć nowy parametr w shaderze. W inicjalizacji shaderów pobieramy dla niego uniform, a w funkcji rysującej ustawiamy na stałe wartość 0.5: shaderprogram.alphauniform = gl.getuniformlocation(shaderprogram, "ualpha"); Oraz: gl.uniform1f(shaderprogram.alphauniform, 0.5); Rysunek 8: Efekt końcowy: sześcian przeźroczysty 24

25 Spis treści 1 Wstęp 1 2 Uruchomienie WebGL Wstęp Wybór przeglądarki Włączenie WebGL w przeglądarce Integracja z HTML Po stronie HTML Po stronie WebGL Pusta scena Inicjalizacja Rysowanie Szkielet fruitgl (cz.1) Wstęp Kod Wykorzystanie fruitgl Pierwszy obiekt (trójkąt) Vertex Shader Pixel Shader Ładowanie shaderów Bufor wierzchołków Wyświetlenie Trzeci wymiar Macierze Efekt końcowy Trochę kolorków Jednostki cieniujące Bufor kolorów Wyświetlenie Animacja Podstawy Stos macierzy Wyświetlenie

26 10 Sześcian Bufory danych Wyświetlenie Teksturowanie Przygotowanie tekstury Przygotowanie współrzędnych Modyfikacja shaderów Wyświetlenie Obsługa klawiatury Wprowadzenie Obsługa klawiszy Przeźroczystość 23 26

Systemy wirtualnej rzeczywistości. Komponenty i serwisy

Systemy wirtualnej rzeczywistości. Komponenty i serwisy Uniwersytet Zielonogórski Instytut Sterowania i Systemów Informatycznych Systemy wirtualnej rzeczywistości Laboratorium Komponenty i serwisy Wstęp: W trzeciej części przedstawione zostaną podstawowe techniki

Bardziej szczegółowo

Mobilne aplikacje multimedialne. OpenGL

Mobilne aplikacje multimedialne. OpenGL Mobilne aplikacje multimedialne OpenGL Marek Kulawiak Katedra Systemów Geoinformatycznych Wydział Elektroniki, Telekomunikacji i Informatyki Politechniki Gdańskiej Open Graphics Library API do tworzenia

Bardziej szczegółowo

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty.

Druga aplikacja Prymitywy, alpha blending, obracanie bitmap oraz mały zestaw przydatnych funkcji wyświetlających własnej roboty. Przyszedł czas na rysowanie własnych figur, czyli prymitywy, obracanie bitmap, oraz alpha blending-czyli półprzezroczystość. Będę opisywał tylko rzeczy nowe-nie ma potrzeby abym się powtarzał. Zaczynajmny

Bardziej szczegółowo

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS

WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS WIZUALIZACJA INFORMACJI TEKSTOWEJ WSTĘP DO HTML 5 CANVAS Autor prezentacji: Michał Kołkowski Promotor: prof dr. hb. Włodzisław Duch SPIS TREŚCI 1. Ogólnie o Canvasie 2. Utworzenie szablonu do pracy z Canvas

Bardziej szczegółowo

Multimedia i interfejsy. Ćwiczenie 5 HTML5

Multimedia i interfejsy. Ćwiczenie 5 HTML5 Multimedia i interfejsy Ćwiczenie 5 HTML5 Celem ćwiczenia jest poznanie nowych elementów wprowadzonych w HTML 5, do których należą m.in. video oraz canvas. Poniższy opis przedstawia sposób użycia tych

Bardziej szczegółowo

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript

Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Zajęcia nr 15 JavaScript wprowadzenie do JavaScript Prowadzący: Andrzej Gąsienica-Samek, strona kółka www.atinea.pl/kolko Wprowadzenie do jsfiddle.net Uruchom Chrome i wejdź na stronę http://jsfiddle.net.

Bardziej szczegółowo

Sieciowe Technologie Mobilne. Laboratorium 4

Sieciowe Technologie Mobilne. Laboratorium 4 Sieciowe Technologie Mobilne Laboratorium 4 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 4 Urozmaicone zostaną animacje potworów, aby odpowiadały

Bardziej szczegółowo

Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków do plików, bitmapy pozaekranowe.

Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków do plików, bitmapy pozaekranowe. Programowanie Wizualno-Obiektowe (studia zaoczne - inżynieria komputerowa) Zajęcia z Delphi 5, program 1 Temat: Zadanie: Obsługa grafiki w Delphi, rysowanie na płótnie, obsługa myszki, zapisywanie obrazków

Bardziej szczegółowo

GRAFIKA CZASU RZECZYWISTEGO Wprowadzenie do OpenGL

GRAFIKA CZASU RZECZYWISTEGO Wprowadzenie do OpenGL GRAFIKA CZASU RZECZYWISTEGO Wprowadzenie do OpenGL Grafika komputerowa i wizualizacja, Bioinformatyka S1, II Rok OpenGL Open Graphics Library Jest to API pozwalające na renderowanie grafiki w czasie rzeczywistym,

Bardziej szczegółowo

Zdarzenia Zdarzenia onload i onunload

Zdarzenia Zdarzenia onload i onunload Zdarzenia Zdarzenia onload i onunload Ćwiczenie 1. Rysunek 1. Okno powitalne wykorzystujące zdarzenie onload Na stronie mogą zachodzić różne zdarzenia, np. użytkownik kliknie myszą lub zacznie wprowadzać

Bardziej szczegółowo

Kod źródłowy programu: program Grafika1; uses crt, graph; (1) var sterownik, tryb:smallint; (2)

Kod źródłowy programu: program Grafika1; uses crt, graph; (1) var sterownik, tryb:smallint; (2) Grafika w Pascalu. Do tej pory, tworząc programy w Pascalu, wykorzystywaliśmy jedynie tryb tekstowy. Jednak Pascal, tak jak i inne języki programowania, umoŝliwia korzystanie równieŝ z trybu graficznego.

Bardziej szczegółowo

Grafika trójwymiarowa

Grafika trójwymiarowa Strona 1 Grafika 3D w systemie Android Wprowadzenie do OpenGL ES Podstawy rysowania Rzutowanie i kamera Klasa GLSurfaceView Algorytm rysowania Tekstury Strona 2 Grafika 3D w systemie Android W komputerach,

Bardziej szczegółowo

1 Podstawy c++ w pigułce.

1 Podstawy c++ w pigułce. 1 Podstawy c++ w pigułce. 1.1 Struktura dokumentu. Kod programu c++ jest zwykłym tekstem napisanym w dowolnym edytorze. Plikowi takiemu nadaje się zwykle rozszerzenie.cpp i kompiluje za pomocą kompilatora,

Bardziej szczegółowo

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D

Wprowadzenie do rysowania w 3D. Praca w środowisku 3D Wprowadzenie do rysowania w 3D 13 Praca w środowisku 3D Pierwszym krokiem niezbędnym do rozpoczęcia pracy w środowisku 3D programu AutoCad 2010 jest wybór odpowiedniego obszaru roboczego. Można tego dokonać

Bardziej szczegółowo

Podstawy JavaScript ćwiczenia

Podstawy JavaScript ćwiczenia Podstawy JavaScript ćwiczenia Kontekst:

Bardziej szczegółowo

INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie... 2. II. Tworzenie nowej karty pracy... 3. a. Obiekty... 4. b. Nauka pisania...

INSTRUKCJA UŻYTKOWNIKA. Spis treści. I. Wprowadzenie... 2. II. Tworzenie nowej karty pracy... 3. a. Obiekty... 4. b. Nauka pisania... INSTRUKCJA UŻYTKOWNIKA Spis treści I. Wprowadzenie... 2 II. Tworzenie nowej karty pracy... 3 a. Obiekty... 4 b. Nauka pisania... 5 c. Piktogramy komunikacyjne... 5 d. Warstwy... 5 e. Zapis... 6 III. Galeria...

Bardziej szczegółowo

Tworzenie Stron Internetowych. odcinek 5

Tworzenie Stron Internetowych. odcinek 5 Tworzenie Stron Internetowych odcinek 5 Nagłówek zawiera podstawowe informacje o dokumencie, takie jak: tytuł strony (obowiązkowy) metainformacje/metadane (obowiązkowa deklaracja

Bardziej szczegółowo

Podstawy programowania 2. Przygotował: mgr inż. Tomasz Michno

Podstawy programowania 2. Przygotował: mgr inż. Tomasz Michno Instrukcja laboratoryjna 2 Podstawy programowania 2 Temat: Zmienne dynamiczne tablica wskaźników i stos dynamiczny Przygotował: mgr inż. Tomasz Michno 1 Wstęp teoretyczny 1.1 Tablice wskaźników Tablice

Bardziej szczegółowo

Specyfikacja techniczna dot. mailingów HTML

Specyfikacja techniczna dot. mailingów HTML Specyfikacja techniczna dot. mailingów HTML Informacje wstępne Wszystkie składniki mailingu (pliki graficzne, teksty, pliki HTML) muszą być przekazane do melog.com dwa dni albo maksymalnie dzień wcześniej

Bardziej szczegółowo

Ćwiczenie: JavaScript Cookies (3x45 minut)

Ćwiczenie: JavaScript Cookies (3x45 minut) Ćwiczenie: JavaScript Cookies (3x45 minut) Cookies niewielkie porcje danych tekstowych, które mogą być przesyłane między serwerem a przeglądarką. Przeglądarka przechowuje te dane przez określony czas.

Bardziej szczegółowo

PyGame Gra w Ponga. Spis treści

PyGame Gra w Ponga. Spis treści - 1 - PyGame Gra w Ponga Opis implementacji: Używając biblioteki PyGame oraz języka Python, stworzymy prostą grę Pong. Autorzy: Łukasz Zarzecki, Robert Bednarz Czas realizacji: 90 min Poziom trudności:

Bardziej szczegółowo

Simba 3D LOGO. Cele zajęć: - Poznanie zasad i sposobów tworzenia procedur z parametrami. - Poznanie zasad wywoływania procedur z parametrami.

Simba 3D LOGO. Cele zajęć: - Poznanie zasad i sposobów tworzenia procedur z parametrami. - Poznanie zasad wywoływania procedur z parametrami. Simba 3D LOGO Scenariusz lekcji Dokument zawiera cykl proponowanych scenariuszy lekcji z wykorzystaniem programu dydaktycznego Simba 3D LOGO. Program ten oparty jest na edukacyjnym języku programowania

Bardziej szczegółowo

Grafika w aplikacjach lp. Jak zmienić kolor tła?

Grafika w aplikacjach lp. Jak zmienić kolor tła? Grafika w aplikacjach lp W tym rozdziale znajdziesz informacje jak osadzić w tworzonym programie zdjęcia, rysunki, wykresy i inne elementy graficzne. W środowisku lp autor ma dostęp do następujących obiektów

Bardziej szczegółowo

DesignCAD 3D Max 24.0 PL

DesignCAD 3D Max 24.0 PL DesignCAD 3D Max 24.0 PL Październik 2014 DesignCAD 3D Max 24.0 PL zawiera następujące ulepszenia i poprawki: Nowe funkcje: Tryb RedSDK jest teraz dostępny w widoku 3D i jest w pełni obsługiwany przez

Bardziej szczegółowo

Krótki kurs JavaScript

Krótki kurs JavaScript Krótki kurs JavaScript Java Script jest językiem wbudowanym w przeglądarkę. Gdy ma się podstawy nabyte w innych językach programowania jest dość łatwy do opanowania. JavaScript jest stosowany do powiększania

Bardziej szczegółowo

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape

Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Jak uzyskać efekt 3D na zdjęciach z wykorzystaniem programu InkScape Program InkScape jest bezpłatnym polskojęzycznym programem grafiki wektorowej do pobrania ze strony http://www.dobreprogramy.pl/inkscape,program,windows,12218.html.

Bardziej szczegółowo

która metoda jest najlepsza

która metoda jest najlepsza która metoda jest najlepsza dr inż. Marek Żabka Instytut Matematyki Wydział Matematyki Stosowanej Politechnika Śląska 20 września 2012r Nowa metoda tworzenia grafiki na stronie internetowej: element,,canvas

Bardziej szczegółowo

Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy.

Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy. Allegro5 3/x. Przykład wklejamy go do dev'a zamiast kodu domyślnego dal programu z allegro i kompilujemy. #include #include #include #include

Bardziej szczegółowo

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012

Skalowanie i ustawianie arkuszy/układów wydruku w AutoCAD autor: M. Motylewicz, 2012 1 z 72 Rysunek rysujemy w skali rzeczywistej tzn. jeżeli pas ruchu ma szerokość 3,5m to wpisujemy w AutoCAD: 3,5 jednostki (mapa oczywiście również musi być wstawiona w skali 1:1). Opisany w dalszym ciągu

Bardziej szczegółowo

Rysowanie punktów na powierzchni graficznej

Rysowanie punktów na powierzchni graficznej Rysowanie punktów na powierzchni graficznej Tworzenie biblioteki rozpoczniemy od podstawowej funkcji graficznej gfxplot() - rysowania pojedynczego punktu na zadanych współrzędnych i o zadanym kolorze RGB.

Bardziej szczegółowo

Moduł Mikołajkowe kodowanie

Moduł Mikołajkowe kodowanie Moduł Mikołajkowe kodowanie I. Przygotowania przed zajęciami: 1. Instalacja środowiska Adobe i programu Scratch. 2. Wgranie plików graficznych i dźwiękowych na komputer. Możemy wgrać je z pendrive na komputer-

Bardziej szczegółowo

Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach?

Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach? Część XVIII C++ Funkcje Widoczność zmiennych Czy wartości każdej zmiennej można zmieniać w dowolnym miejscu kodu? Czy można zadeklarować dwie zmienne o takich samych nazwach? Umiemy już podzielić nasz

Bardziej szczegółowo

Dowiedz się, jak tworzyć zapierające dech w piersiach gry 3D i efektowne, trójwymiarowe wizualizacje!

Dowiedz się, jak tworzyć zapierające dech w piersiach gry 3D i efektowne, trójwymiarowe wizualizacje! Dowiedz się, jak tworzyć zapierające dech w piersiach gry 3D i efektowne, trójwymiarowe wizualizacje! Jak sprawnie tworzyć podstawowe obiekty, oświetlać je i cieniować? Jak napisać własne programy, korzystając

Bardziej szczegółowo

Szybkie tworzenie grafiki w GcIde

Szybkie tworzenie grafiki w GcIde Szybkie tworzenie grafiki w GcIde Opracował: Ryszard Olchawa Poniższy opis dotyczy aplikacji okienkowej w systemie Windows lub Linux bazującej na obiektowej bibliotece rofrm stworzonej w środowisku GcIde.

Bardziej szczegółowo

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9

Spis treści. Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3. Wprowadzenie... 9 Księgarnia PWN: Roland Zimek - SWiSH Max2 i SWiSH Max3 Spis treści Wprowadzenie... 9 1. Opis programu i instalacja... 13 1.1. Nowości w SWiSH Max2... 13 1.1.1. Wygląd okna programu... 13 1.1.2. Język skryptowy...

Bardziej szczegółowo

Spis treści. 1 Moduł Mapy 2

Spis treści. 1 Moduł Mapy 2 Spis treści 1 Moduł Mapy 2 1.1 Elementy planu............................. 2 1.1.1 Interfejs widoku......................... 3 1.1.1.1 Panel sterujacy.................... 3 1.1.1.2 Suwak regulujacy przybliżenie...........

Bardziej szczegółowo

OpenGL i wprowadzenie do programowania gier

OpenGL i wprowadzenie do programowania gier OpenGL i wprowadzenie do programowania gier Wojciech Sterna Bartosz Chodorowski OpenGL i wprowadzenie do programowania gier Autorstwo rozdziałów: 1, 2, 3, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14 Wojciech Sterna

Bardziej szczegółowo

Prezentacja multimedialna MS PowerPoint 2010 (podstawy)

Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Prezentacja multimedialna MS PowerPoint 2010 (podstawy) Cz. 4. Animacje, przejścia, pokaz slajdów Dzięki animacjom nasza prezentacja może stać się bardziej dynamiczna, a informacje, które chcemy przekazać,

Bardziej szczegółowo

Funkcje i instrukcje języka JavaScript

Funkcje i instrukcje języka JavaScript Funkcje i instrukcje języka JavaScript 1. Cele lekcji a) Wiadomości Uczeń : zna operatory i typy danych języka JavaScript, zna konstrukcję definicji funkcji, zna pętlę If i For, Do i While oraz podaje

Bardziej szczegółowo

Animacje cz. 2. Rysujemy koło zębate

Animacje cz. 2. Rysujemy koło zębate Animacje cz. 2 1. Do wykonania poniższej animacji będziemy potrzebować dodatkowego desenia. Znajduje się on w folderze z instrukcją, żeby program Gimp mógł z niego skorzystać musimy wskazać mu ścieżkę

Bardziej szczegółowo

Załącznik techniczny przedmiotu zamówienia komponentu

Załącznik techniczny przedmiotu zamówienia komponentu Załącznik nr 1 mapowego dla portalu WWW Załącznik techniczny przedmiotu zamówienia komponentu 1.1 Komponent mapowy Zleceniodawcy pozostawia się wolną rękę w wyborze technologii w jakiej zostanie stworzony

Bardziej szczegółowo

grafika 2D i animacja obsługa rotacji i elementy 3D-OpenGL w Androidzie

grafika 2D i animacja obsługa rotacji i elementy 3D-OpenGL w Androidzie grafika 2D i animacja obsługa rotacji i elementy 3D-OpenGL w Androidzie Krzysztof Czech, 2 rok IZ Grzegorz Duszyński, 2 rok IZ Daniel Engel, 2 rok IZ Łukasz Olech, 2 rok IZ Radek Wilczak, 2 rok EKA Nadpisywanie

Bardziej szczegółowo

Podstawy technologii cyfrowej i komputerów

Podstawy technologii cyfrowej i komputerów BESKIDZKIE TOWARZYSTWO EDUKACYJNE Podstawy technologii cyfrowej i komputerów Budowa komputerów cz. 2 systemy operacyjne mgr inż. Radosław Wylon 2010 1 Spis treści: Rozdział I 3 1. Systemy operacyjne 3

Bardziej szczegółowo

Tworzenie prezentacji w MS PowerPoint

Tworzenie prezentacji w MS PowerPoint Tworzenie prezentacji w MS PowerPoint Program PowerPoint dostarczany jest w pakiecie Office i daje nam możliwość stworzenia prezentacji oraz uatrakcyjnienia materiału, który chcemy przedstawić. Prezentacje

Bardziej szczegółowo

Aplikacje WWW - laboratorium

Aplikacje WWW - laboratorium Aplikacje WWW - laboratorium Język JavaScript Celem ćwiczenia jest przygotowanie formularza na stronie WWW z wykorzystaniem języka JavaScript. Formularz ten będzie sprawdzany pod względem zawartości przed

Bardziej szczegółowo

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012

KGGiBM GRAFIKA INŻYNIERSKA Rok III, sem. VI, sem IV SN WILiŚ Rok akademicki 2011/2012 Rysowanie precyzyjne 7 W ćwiczeniu tym pokazane zostaną wybrane techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2012, między innymi wykorzystanie punktów charakterystycznych. Narysować

Bardziej szczegółowo

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej.

Celem ćwiczenia jest zapoznanie się z podstawowymi funkcjami i pojęciami związanymi ze środowiskiem AutoCAD 2012 w polskiej wersji językowej. W przygotowaniu ćwiczeń wykorzystano m.in. następujące materiały: 1. Program AutoCAD 2012. 2. Graf J.: AutoCAD 14PL Ćwiczenia. Mikom 1998. 3. Kłosowski P., Grabowska A.: Obsługa programu AutoCAD 14 i 2000.

Bardziej szczegółowo

Laboratorium 6 Tworzenie bloga w Zend Framework

Laboratorium 6 Tworzenie bloga w Zend Framework Laboratorium 6 Tworzenie bloga w Zend Framework Przygotowanie bazy danych 1. Wykonaj skrypt blog.sql, który założy w bazie danych dwie tabele oraz wpisze do nich przykładowe dane. Tabela blog_uzytkownicy

Bardziej szczegółowo

Część II Wyświetlanie obrazów

Część II Wyświetlanie obrazów Tło fragmentu ABA-X Display jest wyposażony w mechanizm automatycznego tworzenia tła fragmentu. Najprościej można to wykonać za pomocą skryptu tlo.sh: Składnia: tlo.sh numer oznacza numer

Bardziej szczegółowo

Angular, cz. II. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl

Angular, cz. II. Tworzenie serwisów Web 2.0. dr inż. Robert Perliński rperlinski@icis.pcz.pl ngular, cz. II 1/24 Angular, cz. II Tworzenie serwisów Web 2.0 dr inż. Robert Perliński rperlinski@icis.pcz.pl Politechnika Częstochowska Instytut Informatyki Teoretycznej i Stosowanej 10 kwietnia 2015

Bardziej szczegółowo

Podstawy 3D Studio MAX

Podstawy 3D Studio MAX Podstawy 3D Studio MAX 7 grudnia 2001 roku 1 Charakterystyka programu 3D Studio MAX jest zintegrowanym środowiskiem modelowania i animacji obiektów trójwymiarowych. Doświadczonemu użytkownikowi pozwala

Bardziej szczegółowo

Rysowanie precyzyjne. Polecenie:

Rysowanie precyzyjne. Polecenie: 7 Rysowanie precyzyjne W ćwiczeniu tym pokazane zostaną różne techniki bardzo dokładnego rysowania obiektów w programie AutoCAD 2010, między innymi wykorzystanie punktów charakterystycznych. Z uwagi na

Bardziej szczegółowo

Programowanie Strukturalne i Obiektowe Słownik podstawowych pojęć 1 z 5 Opracował Jan T. Biernat

Programowanie Strukturalne i Obiektowe Słownik podstawowych pojęć 1 z 5 Opracował Jan T. Biernat Programowanie Strukturalne i Obiektowe Słownik podstawowych pojęć 1 z 5 Program, to lista poleceń zapisana w jednym języku programowania zgodnie z obowiązującymi w nim zasadami. Celem programu jest przetwarzanie

Bardziej szczegółowo

Język JAVA podstawy. wykład 2, część 2. Jacek Rumiński. Politechnika Gdańska, Inżynieria Biomedyczna

Język JAVA podstawy. wykład 2, część 2. Jacek Rumiński. Politechnika Gdańska, Inżynieria Biomedyczna Język JAVA podstawy wykład 2, część 2 Jacek Rumiński 1 Język JAVA podstawy Plan wykładu: 1. Rodzaje programów w Javie 2. Tworzenie aplikacji 3. Tworzenie apletów 4. Obsługa archiwów 5. Wyjątki 6. Klasa

Bardziej szczegółowo

Zastosowanie programu PowerPoint do tworzenia prezentacji multimedialnych

Zastosowanie programu PowerPoint do tworzenia prezentacji multimedialnych SŁAWOMIR MICHNIKIEWICZ Zastosowanie programu PowerPoint do tworzenia prezentacji multimedialnych 2006 SPIS TREŚCI 1. Wskazówki dotyczące przygotowywania pokazu slajdów... 2. Podstawowe operacje związane

Bardziej szczegółowo

Rys 3.2. 17 Odtwarzacz filmu. Możemy także skorzystać z programów służących do odtwarzania filmów np. Windows Media Player.

Rys 3.2. 17 Odtwarzacz filmu. Możemy także skorzystać z programów służących do odtwarzania filmów np. Windows Media Player. Powoduje to odtworzenie filmu : Rys 3.2. 17 Odtwarzacz filmu Możemy także skorzystać z programów służących do odtwarzania filmów np. Windows Media Player. 3.3 Ruch kamery Tematem tego ćwiczenia będzie

Bardziej szczegółowo

Instrukcja obsługi programu. BlazeVideo HDTV Player v6

Instrukcja obsługi programu. BlazeVideo HDTV Player v6 Instrukcja obsługi programu BlazeVideo HDTV Player v6 Spis treści 1. Opis programu...3 1.1 Wprowadzenie...3 1.2 Funkcje programu...3 1.3 Wymagania sprzętowe...4 2. Wygląd interfejsu...4 3. Obsługa programu...6

Bardziej szczegółowo

Kurs walut. Specyfikacja projektu. Marek Zając 2013-12-16

Kurs walut. Specyfikacja projektu. Marek Zając 2013-12-16 Kurs walut Specyfikacja projektu Marek Zając 2013-12-16 Spis treści 1. Podsumowanie... 2 1.1 Wstęp... 2 1.2 Projekt interfejsu... 2 1.2.1 Rozmiar głównego okna... 2 2. Słownik pojęć... 2 2.1 Definicja

Bardziej szczegółowo

Instrukcja użytkownika

Instrukcja użytkownika SoftwareStudio Studio 60-349 Poznań, ul. Ostroroga 5 Tel. 061 66 90 641 061 66 90 642 061 66 90 643 061 66 90 644 fax 061 86 71 151 mail: poznan@softwarestudio.com.pl Herkules WMS.net Instrukcja użytkownika

Bardziej szczegółowo

2 Przygotował: mgr inż. Maciej Lasota

2 Przygotował: mgr inż. Maciej Lasota Laboratorium nr 2 1/7 Język C Instrukcja laboratoryjna Temat: Wprowadzenie do języka C 2 Przygotował: mgr inż. Maciej Lasota 1) Wprowadzenie do języka C. Język C jest językiem programowania ogólnego zastosowania

Bardziej szczegółowo

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów Aplikacje internetowe KL. III Rok szkolny: 011/01 Nr programu: 31[01]/T,SP/MENIS/004.06.14 Okres kształcenia: łącznie ok. 180 godz. lekcyjne Wojciech Borzyszkowski Zenon Kreft Moduł Bok wprowadzający Podstawy

Bardziej szczegółowo

I - Microsoft Visual Studio C++

I - Microsoft Visual Studio C++ I - Microsoft Visual Studio C++ 1. Nowy projekt z Menu wybieramy File -> New -> Projekt -> Win32 Console Application w okienku Name: podajemy nazwę projektu w polu Location: wybieramy miejsce zapisu i

Bardziej szczegółowo

Podstawy WINDOWS 9x, 2000, XP

Podstawy WINDOWS 9x, 2000, XP - 1 - Podstawy Windows & Zarządzanie zasobami komputera opr.m r Osa Podstawy WINDOWS 9x, 2000, XP 1. System Windows składa się z następujących podstawowych elementów: ikona pulpit okno pasek zadań folder

Bardziej szczegółowo

5.4. Tworzymy formularze

5.4. Tworzymy formularze 5.4. Tworzymy formularze Zastosowanie formularzy Formularz to obiekt bazy danych, który daje możliwość tworzenia i modyfikacji danych w tabeli lub kwerendzie. Jego wielką zaletą jest umiejętność zautomatyzowania

Bardziej szczegółowo

KATEGORIA OBSZAR WIEDZY

KATEGORIA OBSZAR WIEDZY Moduł 6 - Grafika menedżerska i prezentacyjna - od kandydata wymaga się umiejętności posługiwania się programem komputerowym do tworzenia. Zdający powinien posiadać umiejętności wykonania następujących

Bardziej szczegółowo

Podstawy pozycjonowania CSS

Podstawy pozycjonowania CSS Podstawy pozycjonowania CSS Żeby pokazać w jaki sposób przeglądarka rozkłada elementy na stronie posłużę się prostym przykładowym fragmentem kodu html. div id="before"

Bardziej szczegółowo

Przygotowywanie dokumentu do pracy

Przygotowywanie dokumentu do pracy Przygotowywanie dokumentu do pracy 1. Wczytywanie tekstu źródłowego (dostępne w menu Plik/Otwórz) Wczytując tekst, nie będący zapisany w rodzimym formacie programu (w tym przypadku MS Word) trzeba pamiętać,

Bardziej szczegółowo

Przetwarzanie grafiki rastrowej na wektorową

Przetwarzanie grafiki rastrowej na wektorową Przetwarzanie grafiki rastrowej na wektorową Inaczej wektoryzacja, lub trasowanie, czyli zastąpienie rysunku rastrowego rysunkiem wektorowym. Wykonanie: Piotr Dróżdż Podstawowe różnice między grafiką wektorową,

Bardziej szczegółowo

Jak przygotować pliki gotowe do publikacji w sieci za pomocą DigitLabu?

Jak przygotować pliki gotowe do publikacji w sieci za pomocą DigitLabu? Jak przygotować pliki gotowe do publikacji w sieci za pomocą DigitLabu? Po zainstalowaniu DigitLabu na komputerze otrzymujemy pakiet programów niezbędnych do przygotowania cyfrowych wersji obiektów tekstowych.

Bardziej szczegółowo

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu

I Tworzenie prezentacji za pomocą szablonu w programie Power-Point. 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu I Tworzenie prezentacji za pomocą szablonu w programie Power-Point 1. Wybieramy z górnego menu polecenie Nowy a następnie Utwórz z szablonu 2. Po wybraniu szablonu ukaŝe się nam ekran jak poniŝej 3. Następnie

Bardziej szczegółowo

c. Przesuwamy sześcian wzdłuż osi Z o wartość 5

c. Przesuwamy sześcian wzdłuż osi Z o wartość 5 Celem ćwiczenia będzie stworzenie i zaanimowanie kół zębatych. W przykładzie, posłużymy się metodami odejmowania określonych części obiektu, wykorzystamy funkcję Boolean, która działa na zasadzie algebry

Bardziej szczegółowo

Quiz Aplikacja internetowa

Quiz Aplikacja internetowa - 1 - Quiz Aplikacja internetowa Opis: Realizacja aplikacji internetowej Quiz w oparciu o Python i framework Flask (wersja 0.10.1). Autorzy: Tomasz Nowacki, Robert Bednarz Czas realizacji: 90 min Poziom

Bardziej szczegółowo

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu...

I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... Kreator szablonów I. Spis treści I. Spis treści... 2 II. Kreator szablonów... 3 1. Tworzenie szablonu... 3 2. Menu... 4 a. Opis ikon... 5 3. Dodanie nowego elementu... 7 a. Grafika... 7 b. Tekst... 7 c.

Bardziej szczegółowo

Zasady programowania Dokumentacja

Zasady programowania Dokumentacja Marcin Kędzierski gr. 14 Zasady programowania Dokumentacja Wstęp 1) Temat: Przeszukiwanie pliku za pomocą drzewa. 2) Założenia projektu: a) Program ma pobierać dane z pliku wskazanego przez użytkownika

Bardziej szczegółowo

Specyfikacja techniczna

Specyfikacja techniczna Specyfikacja techniczna Informacje wstępne Grupa Melog.com sp. z o.o Morizon SA nie ponosi odpowiedzialności finansowej w przypadku gdy klient nie dostarczy poprawionej wersji kreacji lub nie spełnia ona

Bardziej szczegółowo

Visual Basic w programie Excel dla Windows

Visual Basic w programie Excel dla Windows Visual Basic w programie Excel dla Windows Ćwiczenie nr 1 Makrodefinicje. Zakres ćwiczenia: Nagrywanie, odtwarzanie, modyfikowanie i upraszczanie makrodefinicji. Makrodefinicje lokalne i globalne. Przyporządkowanie

Bardziej szczegółowo

Delphi podstawy programowania. Środowisko Delphi

Delphi podstawy programowania. Środowisko Delphi Delphi podstawy programowania Środowisko Delphi Olsztyn 2004 Delphi Programowanie obiektowe - (object-oriented programming) jest to metodologia tworzeniu programów komputerowych definiująca je jako zbiór

Bardziej szczegółowo

Ustawienia ogólne. Ustawienia okólne są dostępne w panelu głównym programu System Sensor, po kliknięciu ikony

Ustawienia ogólne. Ustawienia okólne są dostępne w panelu głównym programu System Sensor, po kliknięciu ikony Ustawienia ogólne Ustawienia okólne są dostępne w panelu głównym programu System Sensor, po kliknięciu ikony Panel główny programu System Sensor (tylko dla wersja V2, V3, V4) Panel główny programu System

Bardziej szczegółowo

Podręcznik użytkownika programu. Ceremonia 3.1

Podręcznik użytkownika programu. Ceremonia 3.1 Podręcznik użytkownika programu Ceremonia 3.1 1 Spis treści O programie...3 Główne okno programu...4 Edytor pieśni...7 Okno ustawień programu...8 Edycja kategorii pieśni...9 Edytor schematów slajdów...10

Bardziej szczegółowo

Mathcad c.d. - Macierze, wykresy 3D, rozwiązywanie równań, pochodne i całki, animacje

Mathcad c.d. - Macierze, wykresy 3D, rozwiązywanie równań, pochodne i całki, animacje Mathcad c.d. - Macierze, wykresy 3D, rozwiązywanie równań, pochodne i całki, animacje Opracował: Zbigniew Rudnicki Powtórka z poprzedniego wykładu 2 1 Dokument, regiony, klawisze: Dokument Mathcada realizuje

Bardziej szczegółowo

Programowanie na poziomie sprzętu. Programowanie w Windows API

Programowanie na poziomie sprzętu. Programowanie w Windows API Programowanie w Windows API Windows API Windows Application Programming Interface (API) to zestaw funkcji systemu operacyjnego Windows, które umożliwiają aplikacjom korzystanie z wszystkich usług systemu.

Bardziej szczegółowo

Wprowadzenie do projektu QualitySpy

Wprowadzenie do projektu QualitySpy Wprowadzenie do projektu QualitySpy Na podstawie instrukcji implementacji prostej funkcjonalności. 1. Wstęp Celem tego poradnika jest wprowadzić programistę do projektu QualitySpy. Będziemy implementować

Bardziej szczegółowo

ANALIZA RAMY PRZESTRZENNEJ W SYSTEMIE ROBOT. Adam Wosatko Tomasz Żebro

ANALIZA RAMY PRZESTRZENNEJ W SYSTEMIE ROBOT. Adam Wosatko Tomasz Żebro ANALIZA RAMY PRZESTRZENNEJ W SYSTEMIE ROBOT Adam Wosatko Tomasz Żebro v. 0.1, marzec 2009 2 1. Typ zadania i materiał Typ zadania. Spośród możliwych zadań(patrz rys. 1(a)) wybieramy statykę ramy przestrzennej

Bardziej szczegółowo

Grafika komputerowa i wizualizacja

Grafika komputerowa i wizualizacja Grafika komputerowa i wizualizacja Radosław Mantiuk ( rmantiuk@wi.zut.edu.pl, p. 315 WI2) http://rmantiuk.zut.edu.pl Katedra Systemów Multimedialnych Wydział Informatyki, Zachodniopomorski Uniwersytet

Bardziej szczegółowo

SPOSOBY POMIARU KĄTÓW W PROGRAMIE AutoCAD

SPOSOBY POMIARU KĄTÓW W PROGRAMIE AutoCAD Dr inż. Jacek WARCHULSKI Dr inż. Marcin WARCHULSKI Mgr inż. Witold BUŻANTOWICZ Wojskowa Akademia Techniczna SPOSOBY POMIARU KĄTÓW W PROGRAMIE AutoCAD Streszczenie: W referacie przedstawiono możliwości

Bardziej szczegółowo

Instrukcja obsługi. Karta video USB + program DVR-USB/8F. Dane techniczne oraz treść poniższej instrukcji mogą ulec zmianie bez uprzedzenia.

Instrukcja obsługi. Karta video USB + program DVR-USB/8F. Dane techniczne oraz treść poniższej instrukcji mogą ulec zmianie bez uprzedzenia. Instrukcja obsługi Karta video USB + program DVR-USB/8F Dane techniczne oraz treść poniższej instrukcji mogą ulec zmianie bez uprzedzenia. Spis treści 1. Wprowadzenie...3 1.1. Opis...3 1.2. Wymagania systemowe...5

Bardziej szczegółowo

JAVAScript w dokumentach HTML - przypomnienie

JAVAScript w dokumentach HTML - przypomnienie Programowanie obiektowe ćw.1 JAVAScript w dokumentach HTML - przypomnienie JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania. Skrypty JavaScript są zagnieżdżane w

Bardziej szczegółowo

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.

Widżety KIWIPortal. tworzenie umieszczanie na stronach internetowych opcje zaawansowane. Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1. Widżety KIWIPortal tworzenie umieszczanie na stronach internetowych opcje zaawansowane Autor: Damian Rebuś Data: 29.06.2015 Wersja: 1.3 Strona 1 z 17 1 SPIS TREŚCI 2 Metody osadzania widżetów... 3 2.1

Bardziej szczegółowo

1. Jak to działa? 2. Krok po kroku. a) Pierwsze uruchomienie

1. Jak to działa? 2. Krok po kroku. a) Pierwsze uruchomienie Aplikacja serwisu Promocja za rogiem ma za zadanie powiedzieć Ci o aktualnych, ciekawych ofertach w Twojej najbliższej okolicy. Aplikację po prostu ściągasz, uruchamiasz i z niej korzystasz. To wszystko.

Bardziej szczegółowo

Cw.12 JAVAScript w dokumentach HTML

Cw.12 JAVAScript w dokumentach HTML Cw.12 JAVAScript w dokumentach HTML Wstawienie skryptu do dokumentu HTML JavaScript jest to interpretowany, zorientowany obiektowo, skryptowy język programowania.skrypty Java- Script mogą być zagnieżdżane

Bardziej szczegółowo

QUERY język zapytań do tworzenia raportów w AS/400

QUERY język zapytań do tworzenia raportów w AS/400 QUERY język zapytań do tworzenia raportów w AS/400 Dariusz Bober Katedra Informatyki Politechniki Lubelskiej Streszczenie: W artykule przedstawiony został język QUERY, standardowe narzędzie pracy administratora

Bardziej szczegółowo

Laboratorium 1 Wprowadzenie do PHP

Laboratorium 1 Wprowadzenie do PHP Laboratorium 1 Wprowadzenie do PHP Ćwiczenie 1. Tworzenie i uruchamianie projektu PHP w Netbeans Tworzenie projektu Uruchom środowisko NetBeans. Stwórz nowy projekt typu PHP Application (File->New Project,

Bardziej szczegółowo

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk

Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery. Łukasz Bartczuk Tworzenie stron internetowych z wykorzystaniem HTM5, JavaScript, CSS3 i jquery Łukasz Bartczuk Moduł 6 JavaScript w przeglądarce Agenda Skrypty na stronie internetowej Model DOM AJAX Skrypty na stronie

Bardziej szczegółowo

Instalacja systemu zarządzania treścią (CMS): Joomla

Instalacja systemu zarządzania treścią (CMS): Joomla Instalacja systemu zarządzania treścią (CMS): Joomla Na stronie http://www.cba.pl/ zarejestruj nowe konto klikając na przycisk:, następnie wybierz nazwę domeny (Rys. 1a) oraz wypełnij obowiązkowe pola

Bardziej szczegółowo

Rozdział 4 KLASY, OBIEKTY, METODY

Rozdział 4 KLASY, OBIEKTY, METODY Rozdział 4 KLASY, OBIEKTY, METODY Java jest językiem w pełni zorientowanym obiektowo. Wszystkie elementy opisujące dane, za wyjątkiem zmiennych prostych są obiektami. Sam program też jest obiektem pewnej

Bardziej szczegółowo

Microsoft Visual C++

Microsoft Visual C++ Microsoft Visual C++ Typy aplikacji okna dialogowe Typy aplikacji Multiple Document Obsługa zdarzeń - komunikaty W celu obsługi zdarzeń pochodzących z wielu źródeł funkcja MainLoop odbiera komunikaty systemowe

Bardziej szczegółowo

Metody numeryczne Laboratorium 2

Metody numeryczne Laboratorium 2 Metody numeryczne Laboratorium 2 1. Tworzenie i uruchamianie skryptów Środowisko MATLAB/GNU Octave daje nam możliwość tworzenia skryptów czyli zapisywania grup poleceń czy funkcji w osobnym pliku i uruchamiania

Bardziej szczegółowo

Sigplus. Galeria w Joomla

Sigplus. Galeria w Joomla Sigplus Galeria w Joomla Cel prezentacji Pokazanie że Sigplus jest prosty w konfiguracji; Metody konfiguracji Sigplusa; Jest jednym z najczęściej używanych dodatków w tworzeniu galerii na stronie internetowej

Bardziej szczegółowo

Programowanie w Javie

Programowanie w Javie Programowanie w Javie Andrzej Czajkowski Lista nr 0 Debugger w Javie Celem ćwiczenia jest poznanie podstawowych funkcji narzędzia debugera (odpluskwiacz) w środowisku Eclipse. Po ukończeniu ćwiczenia student

Bardziej szczegółowo