Mazakiem po WWW czyli kilka słów o obiekcie «canvas»

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

Download "Mazakiem po WWW czyli kilka słów o obiekcie «canvas»"

Transkrypt

1 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» Robert BoBsoN Partyka Streszczenie: Rozwój informatyki to ciągły bieg za nowymi technologiami. Tendencja ta nie omija także globalnej pajęczyny stron WWW. Czasy, gdy serwisy internetowe składały się tylko z tekstu i hiperłączy minęły bezpowrotnie. Standardy, które wytyczają drogę rozbudowy przeglądarek, rozszerzane są o kolejne pomysły organizacji takich jak W3C, WHATWG oraz firm takich jak Nokia, Google czy Microsoft. Najnowsze wydania Firefox i Opery wprowadziły natywną obsługę strumieni video i dźwięku. W najbliższym czasie spodziewać się należy kolejnego przełomu w postrzeganiu narzędzia jakim jest WWW. Przyjrzyjmy się jednemu z elementów HTML5, które mogą przyczynić się do tego przełomu. Czym właściwie jest <canvas>? Z obiektami o działaniu podobnym do <canvas> spotkał się każdy, kto próbował swych sił w programowaniu w C/C++ czy Pascal (Delphi). Jest to nic innego jak płótno na ekranie, na której możemy narysować dowolną grafikę. Nic nadzwyczajnego, ale gdy dodamy do tego szereg wbudowanych funkcjonalności, otrzymujemy elastyczne i przydatne narzędzie, dzięki któremu możemy zmienić odbiór naszych stron WWW. <canvas> po raz pierwszy został wprowadzony przez firmę Apple dla Mac OS X Dashboard a następnie zaimplementowany w Safari. Implementacja tego obiektu została wykonana także w silniku Gecko, począwszy od wersji 1.8 oraz w przeglądarce Opera w związku z zawarciem tego obiektu w specyfikacji WHATWG Web application 1.0 znanej jako HTML5. Nie jest zaskakującym fakt, że firma Microsoft nie implementowała tego obiektu <canvas> w IE zawdzięczamy Google.

2 36 Robert BoBsoN Partyka Podstawy Tak, jak każdą zabawę z elementami HTML i tutaj zaczynamy od wstawienia obiektu w kod strony WWW. Przykładowo: <canvas id="mycanvas" width="400" height="300"> </canvas> wstawi obiekt o wymiarach 400 na 300 pikseli. Zaleca się stosowanie zamykającego tagu </canvas> ze względu na nieprawidłowe interpretowanie <canvas.../> przez niektóre przeglądarki. Tego typu konstrukcja pozwala także na zastosowanie kodu, który zostanie wyświetlony w przeglądarkach nie wspierających tego obiektu: <canvas id="mycanvas" width="400" height="300"> Twoja przeglądarka nie wspiera obiektu Canvas. </canvas> W efekcie interpretacji przez przeglądarkę takiego kodu naszym oczom ukaże się zachęcająca do dalszej pracy pustka. Mając już obiekt <canvas> w drzewie DOM strony, przystępujemy do manipulacji na tym obiekcie. W tym celu wykorzystujemy JavaScript. <canvas> obsługuje zdarzenia HTML, dzięki czemu możliwe jest oprogramowanie interakcji z użytkownikiem. Do rysowania obrazu wykorzystywane są konteksty rysowania. Może być ich więcej niż jeden, dzięki czemu zyskujemy dodatkowe możliwości, takie jak dostęp do OpenGL ES z poziomu JavaScript (o czym za chwilę). Podstawowym kontekstem jest 2d. var canvas = document.getelementbyid( MyCanvas ); var ctx = canvas.getcontext( 2d ); Po pobraniu kontekstu możemy przystąpić do rysowania na stworzonym przez nas płótnie, wykorzystując dostarczane przez obiekt metody. canvas obsługuje jedynie prostokąt jako wbudowany kształt. fillrect(x,y,szerokość,wysokość) rysuje wypełniony prostokąt, strokerect(x,y,width,height) rysuje obrys prostokąta, a clearrect(x,y,width,height) czyści dany obszar, czyniąc go całkowicie przeźroczystym Każda inna figura musi być zbudowana ze ścieżek. Tych na szczęście jest kilka rodzajów. Rysowanie figur przy użyciu ścieżek jest trochę bardziej skomplikowane wymaga wykorzystania więcej niż jednej metody. Dodatkowo ważnym elementem staje się kontrola nad położeniem pędzla. Ścieżkę rozpoczynamy od wydania beginpath(). Kolejne metody przesuwają i rysują pędzlem. Ostatnia zamyka ścieżkę i aktywuje jej wykonanie. Jest to albo:

3 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 37 fill() dla figur wypełnionych lub stroke() dla obrysów figur. Opcjonalna metoda closepath() służy do narysowania linii prostej z bieżącej pozycji pędzla do punktu początkowego ścieżki. Pierwszą metodą wywoływaną po beginpatch() w większości przypadków będzie moveto(x,y). Służy ona do przeniesienia pędzla bez pozostawiania śladu na płótnie w wybraną pozycję. W celu rysowania śladu ścieżki otrzymujemy całkiem pokaźny zestaw metod: lineto(x, y) rysuje linię prostą z aktualnej pozycji do podanej, arc(x, y, r, początkowykąt, końcowykąt, przeciwniedozegara) rysuje okrąg lub fragment okręgu od początkowego do końcowego końca, zgodnie lub przeciwnie do ruchu wskazówek zegara o promieniu r i środku w punkcie x,y. quadraticcurveto(cp1x, cp1y, x, y) oraz beziercurveto(cp1x, cp1y, cp2x, cp2y, x, y) służy do rysowania krzywych, oraz: rect(x,y, szerokość, wysokość) dodająca obrys prostokąta do aktualnej ścieżki. Pamiętać należy, że pozycją pędzla po wykonaniu którejkolwiek z tych metod, będzie pozycja ostatniego piksla zaplanowanego do narysowania. Wiemy już, jak poruszać pędzlem. Kolejny krok to dobór farb. Do dyspozycji mamy dwie własności obiektu kontekstu: fillstyle określa kolor wypełnienia, zaś: strokestyle określa kolor obrysu. Kolory te zapisane mogą być w jednym z czterech formatów: 1. słowna nazwa zgodna z nazewnictwem kolorów w CSS, 2. zapis #RRGGBB, 3. zapis z wykorzystaniem funkcji rgb(r,g,b) lub funkcji rgba(r,g,b,a) przykładowo: ctx.fillstyle = "orange"; ctx.fillstyle = "#FFA500"; ctx.fillstyle = "rgb(255,165,0)"; ctx.fillstyle = "rgba(255,165,0,1)"; Innymi słowy, jest to zapis zgodny ze specyfikacją zapisów kolorów w standardzie CSS3. Przeźroczystość (lub jak kto woli siłę nacisku) pędzla możemy określić przy pomocy globalnej własności globalalpha. Przyjmuje ona wartości zmiennoprzecinkowe z przedziału 0 do 1.

4 38 Robert BoBsoN Partyka Sposób rysowania pędzla po płótnie określają kolejne cztery własności: linewidth określająca szerokość linii rysowanej przez pędzel, linecap określająca sposób rozpoczęcia i zakończenia rysowanej linii (możliwe wartości to: butt, round i square), linejoin określa sposób, w jaki będą łączone kolejne elementy ścieżki rysowanej przez pędzel (możliwe wartości to: round, bevel i miter), oraz miterlimit określająca, jak daleko mogą znajdować się od siebie punkty połączenia rysowanych linii (dotyczy linii szerszych niż 1px). Nie samymi kreskami i krzywymi jednak obraz żyje. Czasami przydatne jest wykorzystanie grafiki stworzonej np. w GiMP-ie. Jest to możliwe dzięki obiektowi Image() i metodzie drawimage(). Pierwszym krokiem jest załadowanie obrazka z pliku: var img = new Image(); img.src = jesien2009.png ; lub przez zakodowany tekst: img.src = data:image/gif;base64,r0lgo... trochę base64... Ow== ; Do umieszczenia załadowanego obrazka na obszarze płótna obiektu <canvas> używamy metody drawimage(). Występuje ona w trzech wersjach: drawimage(img, x, y) kopiuje obrazek w obszar o początkowej pozycji x,y na obiekcie <canvas>, drawimage(image, x, y, szerokość, wysokość) kopiuje obrazek w obszar o początkowej pozycji x,y z równoczesnym przeskalowaniem do nowych wymiarów, oraz drawimage(image, sx, sy, sszerokość, swysokość, dx, dy, dszerokość, dwysokość) kopiuje fragment obrazka od pozycji sx,sy i wymiarach zdanych w dwóch kolejnych parametrach na pozycję dx,dy w obszarze płótna obiektu canvas z równoczesnym przeskalowaniem do nowych wymiarów podanych w kolejnych dwóch parametrach. Oprócz prostego przerysowywania obrazka na płaszczyznę <canvas>, istnieje możliwość użycia go jako wzoru dla wypełnienia. Umożliwia to metoda createpattern(), która przyjmuje dwa parametry: obiekt obrazka jako pierwszy i określenie sposobu powtarzania wzorca (repeat, repeat-x, repeat-y, no-repeat). W chili obecnej wspierane jest tylko repeat. var img = new Image(); img.src = fajne_wypelnienie.png ; img.onload = function(){

5 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 39 } var ptrn = ctx.createpattern(img, repeat ); ctx.fillstyle = ptrn; ctx.fillrect(0,0,150,150); Tryb kopiowania obrazu lub rysowania po nim na zasadzie dokładnego przykrywania nowym wzorcem, nie zawsze jest tym, czego potrzebujemy. Kolejny raz z pomocą przychodzą własności obiektu kontekstu. globalcompositeoperation pozwala określić, w jaki sposób łączone ze sobą będą źródło i elementy istniejące już na płótnie. Wtym miejscu otwiera się bogactwo możliwości wyboru: source-over domyślny tryb, w którym źródło przykrywa dokładnie piksle miejsca przeznaczenia; destination-over tryb, w którym nowe elementy umieszczane są poniżej istniejącego obrazu widoczne tylko w miejscach przeźroczystości aktualnego obrazu; source-in oraz destination-in tryb części wspólnej; na płaszczyźnie umieszczony zostanie obszar wspólny pochodzący z źródła lub płótna zależnie od wybranego trybu; source-out oraz destination-out tryby wycięcia, na płaszczyźnie umieszczona zostanie albo część źródła nie pokrywająca elementów w miejscu przeznaczenia, albo część elementów na płaszczyźnie nie przykryta przez element źródła (część wspólna zostanie zamieniona na przeźroczystość); source-atop oraz destination-atop tryby wycięcia z równoczesnym połączeniem części wspólnych. W pierwszym przypadku tylko fragment źródła pokrywający się z elementami w miejscu przeznaczenia będzie pozostawiony i narysowany, w drugim przypadku pozostawiona zostanie tylko część elementów z miejsca przeznaczenia, która pokrywa się z źródłem (źródło umieszczane jest pod spodem ); lighter w części wspólnej nastąpi zsumowanie kolorów źródła i elementów w miejscu przeznaczenia; darker w części wspólnej nastąpi odjęcie wartości koloru źródła od koloru przeznaczenia; xor część wspólna źródła i elementów w miejscu przeznaczenia zostanie usunięta; copy tylko źródło zostanie narysowane, wszystkie inne elementy z zadanego obszaru zostaną usunięte. Oprócz trybów rysowania, istnieje możliwość zdefiniowania ścieżki przycięcia obrazu na płaszczyźnie płótna. Oznacza to, że wszystko, co znajduje się poza obszarem wyznaczonym przez ścieżkę, zostanie usunięte. Ścieżkę taką deklarujemy w identyczny

6 40 Robert BoBsoN Partyka sposób, jak ścieżkę elementu rysowanego na powierzchni obiektu canvas zmienia się jedynie metoda zamykająca: ctx.beginpath(); ctx.arc(0,0,60,0,math.pi*2,true); ctx.clip(); Transformacje Możliwości obiektu <canvas> nie kończą się na rysowaniu ścieżek, czy też kopiowaniu obrazków. Kolejny zestaw metod dodaje obsługę transformacji. O ile opisywane wcześniej metody odnosiły się do sterowania pędzlem, nakładania obrazków ogólnie rysowania po płótnie transformacje odnoszą się do samej powierzchni tworzonego obrazu. Nie należy mylić tego z manipulacją istniejącym obrazem. Transformacje zmieniają tylko układ siatki punktów poprzez przemieszczenie jej punktu zerowego, obrót, zmianę skalowania bez uszczerbku dla już istniejących fragmentów obrazu. Skomplikowane? Spójrzmy na przykład: Na płaszczyźnie umieśćmy kwadrat o boku 20px w pozycji (10,10). ctx.strokerect(10,10,20,20); Następnie narzućmy translację: ctx.translate(100, 100); Komenda ta przenosi punkt zerowy siatki odniesienia w nowe koordynaty. Jak widzimy już narysowany prostokąt pozostał nietknięty. Narysujmy go jeszcze raz dla pewności. ctx.strokerect(10,10,20,20); Prostokąt pojawił się... w nowym miejscu. Tak właśnie działają transformacje. Sposób widzenia płaszczyzny bez uszczerbku dla już narysowanych elementów. Sprawdźmy kolejne metody. ctx.scale(0.5, 0.5); ctx.strokerect(10,10,20,20); Odpowiada za przeskalowanie płaszczyzny. Parametry odpowiednio dla osi X i Y przyjmują wartości zmiennoprzecinkowe równe lub większe niż zero. Wartości z przedziału 0 do 1 oznaczają zgniatanie obrazu, większe od jedynki jego rozciąganie. Jak widzimy narysowany prostokąt jest połowę mniejszy, a dodatkowym efektem jest zmiana jego pozycji. To dlatego, że przeskalowaliśmy siatkę punktów odniesienia obiektu a nie sposób rysowania obiektu. Kolejna metoda pozwoli na obrócenie siatki o zadany w radianach kąt zgodnie z ruchem wskazówek zegara.

7 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 41 ctx.rotate(math.pi*0.25); ctx.strokerect(10,10,20,20); Istnieje jeszcze dwie metody, które pozwalają na manipulację bezpośrednio na macierzy przekształceń. transform(m 11, m 12, m 21, m 22, dx, dy) mnożąca aktualną macierz przekształceń przez macierz: m 11 m 21 dx m 12 m 22 dy 0 oraz 0 1 settransform(m 11, m 12, m 21, m 22, dx, dy) która ustawia nowe wartości macierzy przekształceń na: m 11 m 21 dx m 12 m 22 dy Gdzie można wykorzystać transformacje? Głównie przy rysowaniu skomplikowanych elementów, takich jak np. hipotrochoida czy epicykloida. Dodawanie wyliczeń transformacji do funkcji rysującej taki element zwiększałoby jej złożoność i drastycznie zmniejszało czytelność kodu. Dzięki transformacjom siatki odniesienia obiektu <canvas> możemy tego uniknąć. Narzucanie kolejnych transformacji wiąże się z ryzykiem utraty panowania nad aktualnym stanem siatki odniesienia. Dodatkowym czynnikiem chaosu jest zmiana barw, sposobu łączenia elementów, wartości opisujących pędzel. W złożonym programie łatwo doprowadzić do sytuacji, w której przez drobną pomyłkę, część obrazu ląduje poza krawędziami obiektu <canvas>. Aby temu zapobiec, stosujemy metodę save(), która zapisuje aktualny stan obiektu <canvas> na stos. Stan przywracamy metodą restore(). Jako, że save() zapamiętuje informacje na stosie możliwe jest zapamiętanie kilku kolejnych stanów, a następnie cofanie się po nich do stanu pierwotnego. Rysowanie tekstu Obiekt <canvas> nie tylko pozwala na rysowanie obrazu. Kontekst 2d posiada także funkcje odpowiedzialne za narzucanie tekstu na obraz. Najprostszą metodą rysowania tekstu jest filltext(), która przyjmuje następujące parametry: tekst do wyświetlenia, koordynaty kolejno x i y początku rysowania tekstu, oraz opcjonalnie maksymalną szerokość (w tym przypadku silnik renderujący będzie starał się użyć fontu o większej gęstości lub mniejszej czcionce w przypadku, gdy treść nie mieści się w zadanej szerokości). measuretext() zwraca informację o szerokości zadanego tekstu w pikslach, mozpathtext() dodaje obrys tekstu do aktualnie przygotowywanej ścieżki. Pozwala to na wrysowanie w obraz tekstu, który będzie posiadał obrys. Najciekawszą z metod rysujących tekst wydaje się moztextalongpath(), która wpisuje tekst wzdłuż utworzonej ścieżki. Sama grafika nie jest skalowana lub poddawana

8 42 Robert BoBsoN Partyka Rys 1 Praktyczny przykład (Pełen opis znajdziesz pod adresem: zniekształceniom. Proces polega na traktowaniu ścieżki jako linii bazowej pod daną literą. Pozwala to na uzyskanie ciekawych efektów, takich jak pofalowany czy spiralny tekst. Możliwe też jest ułożenie tekstu wzdłuż ścieżki utworzonej z... tekstu. Sterowanie stylem rysowanego tekstu, podobnie jak w poprzednich przypadkach, odbywa się poprzez globalne własności obiektu odpowiadającego za kontekst. font określa rozmiar i nazwę aktualnie używanej czcionki, zgodnie ze standardem zapisu wykorzystywanym w CSS, textalign definiuje sposób ułożenia tekstu względem np. ścieżki; możliwe wartości to left, right, center, start oraz end (domyślnie: start), textbaseline ustala położenie linii bazowej tekstu; aktualnie wspierane wartości to: top, hanging, middle, alphabetic, bottom (domyślnie: alphabetic). Praktyczne wykorzystane obiektu <canvas> można przedstawić implementując blue box dla obrazu video. Przypomnijmy czym jest efekt blue box jest to zastąpienie wybranego koloru tła obrazem pochodzącym z innego źródła. W efekcie uzyskujemy złudzenie przebywania osoby w innym miejscu niż jest faktycznie. Efekt ten znany jest także pod nazwami: bluescreen, greenscreen czy też chroma key. Jedyne co potrzebujemy, to obiekt <video>, z którego pobierać będziemy kolejne klatki oraz dwa obiekty <canvas>. W drugim z tych obiektów ustawiamy tło na obrazek, który ma być tłem sceny. Algorytm działania jest prosty. Po załadowaniu strony, zdarzeniem onload inicjujemy wszystkie potrzebne nam zmienne oraz inicjujemy przeliczanie widocznych klatek w funkcji settimeout(). Funkcja uruchomiona przez settimeout() każdorazowo na koniec swojego działania ustawia ponowne wywołanie samej siebie z opóźnieniem 0. W praktyce powinno ustawiać się opóźnienie, wyliczając czas na podstawie framerate filmu. Skupimy się na obliczeniach efektu chroma key. W tym celu najpierw kopiujemy zawartość obrazu z <video> do pierwszego z posiadanych obiektów <canvas>. ctx1.drawimage(myvideo, 0, 0, mywidth, myheight);

9 Mazakiem po WWW czyli kilka słów o obiekcie «canvas» 43 Następnie pobieramy macierz obrazu (dane o kolorach w każdym pikslu w postaci tablicy) let frame = ctx1.getimagedata(0, 0, mywidth, myheight); let l = frame.data.length / 4; Przeliczamy w iteracji wszystkie piksle jeżeli kolor któregoś z nich zgadza się z określonym przez nas tłem ustawiamy jego alpha na zero. for (let i = 0; i < l; i++) { let r = frame.data[i * 4 + 0]; let g = frame.data[i * 4 + 1]; let b = frame.data[i * 4 + 2]; if (g > 100 && r > 100 && b < 43) frame.data[i * 4 + 3] = 0; } W ostatnim kroku umieszczamy przetworzoną macierz obrazu w drugim obiekcie <canvas>: ctx2.putimagedata(frame, 0, 0); Powyższy przykład umieszcza obraz video na statycznym tle. Przy niewielkiej modyfikacji (kopiowanie z dwóch źródeł, narzucanie na trzeci obiekt <canvas>) możliwe jest uzyskanie efektu nałożenia dwóch obrazów video. Kontekst 3D Peter Drucker powiedział kiedyś, że najlepszą metodą przewidywania przyszłości jest jej tworzenie. Nie wiadomo, czy ta sentencja przyświecała Vladimirowi Vukićevićowi, gdy rozpoczynał prace nad kontekstem 3d. Jej celem było wprowadzenie możliwości wykorzystania OpenGL ES (z sprzętową akceleracją) poprzez komendy JavaScript dostępne w ramach kontekstu graficznego obiektu <canvas>. W chwili obecnej dostępne jest rozszerzenie dla Firefox 3.5, które wprowadza dostęp do kontekstów 3d. Jego prace nie zostały bez echa. Inna grupa ludzi rozpoczęła prace nad biblioteką JS, która miała ułatwić tworzenie aplikacji w trzecim wymiarze, czego efektem jest C3D Library. Biblioteka ta wprowadza szereg udogodnień, takich jak obsługa scen, światła, system cząsteczek, kamerę czy też możliwość importu modeli z kilku formatów plików. 25 marca podczas Game Developers Conference w San Francisco fundacja Mozilla oraz grupa Khronos ogłosiły podjęcie wspólnych działań na rzecz wprowadzenia akceleracji 3D do przeglądarek internetowych. Wsparcie dla projektu zadeklarowało także Google co wraz z istnieniem przeglądarki Chrome wydaje się przesądzać o przyszłym sukcesie tego projektu. Pozostaje jedynie uzbroić się w cierpliwość i testować kolejne wersje rozszerzenia Canvas:3D.

10 44 Robert BoBsoN Partyka Powyższy artykuł nie wyczerpuje wszystkich zagadnień związanych z obiektem <canvas>. Mam nadzieję, że udało mi się zachęcić was do bliższego przyjrzenia się temu elementowi. Czas pokaże, czy czeka nas wysyp graficznych aplikacji on-line. Źródła:

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

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania.

narzędzie Linia. 2. W polu koloru kliknij kolor, którego chcesz użyć. 3. Aby coś narysować, przeciągnij wskaźnikiem w obszarze rysowania. Elementy programu Paint Aby otworzyć program Paint, należy kliknąć przycisk Start i Paint., Wszystkie programy, Akcesoria Po uruchomieniu programu Paint jest wyświetlane okno, które jest w większej części

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

Sieciowe Technologie Mobilne. Laboratorium 2

Sieciowe Technologie Mobilne. Laboratorium 2 Sieciowe Technologie Mobilne Laboratorium 2 Tworzenie wieloplatformowych aplikacji mobilnych przy użyciu biblioteki PhoneGap. Łukasz Kamiński Laboratorium 2 Na dzisiejszym laboratorium skupimy się na implementacji

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

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

Dokumentacja WebMaster ver 1.0

Dokumentacja WebMaster ver 1.0 1 Wstęp Dokumentacja WebMaster ver 1.0 Dokumentacja ta przeznaczona jest dla webmasterów, grafików, programistów. Przedstawia ona strukturę aplikacji SOTEeSKLEP, opisuje działanie oraz wyjaśnia m.in. jak

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

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2.

Adobe InDesign lab.1 Jacek Wiślicki, Paweł Kośla. Spis treści: 1 Podstawy pracy z aplikacją Układ strony... 2. Spis treści: 1 Podstawy pracy z aplikacją... 2 1.1 Układ strony... 2 strona 1 z 7 1 Podstawy pracy z aplikacją InDesign jest następcą starzejącego się PageMakera. Pod wieloma względami jest do niego bardzo

Bardziej szczegółowo

Z CSS3 szybciej i przyjemniej

Z CSS3 szybciej i przyjemniej 1 Z CSS3 szybciej i przyjemniej Marta Piasecka, 2 Zaokraglone--narozniki - 3 lub 4 elementy rysują tło - więcej kodu html - obrazki z narożnikami lub częściami tła - użytkownik widzi stronę bez tła dopóki

Bardziej szczegółowo

I. Wstawianie rysunków

I. Wstawianie rysunków I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka

Bardziej szczegółowo

Zadania domowe. Ćwiczenie 2. Rysowanie obiektów 2-D przy pomocy tworów pierwotnych biblioteki graficznej OpenGL

Zadania domowe. Ćwiczenie 2. Rysowanie obiektów 2-D przy pomocy tworów pierwotnych biblioteki graficznej OpenGL Zadania domowe Ćwiczenie 2 Rysowanie obiektów 2-D przy pomocy tworów pierwotnych biblioteki graficznej OpenGL Zadanie 2.1 Fraktal plazmowy (Plasma fractal) Kwadrat należy pokryć prostokątną siatką 2 n

Bardziej szczegółowo

Ćwiczenie 2 Warstwy i kształty podstawowe

Ćwiczenie 2 Warstwy i kształty podstawowe Ćwiczenie 2 Warstwy i kształty podstawowe Poznamy podstawy pracy z nowym obrazkiem w Adobe Photoshop: - zapisywanie własnego ustawienia nowo tworzonego pliku - wybór kolorów, tworzenie własnych próbek

Bardziej szczegółowo

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37 Spis treści Wstęp 13 CZĘŚĆ I JĘZYK SIECI 17 Rozdział 1 Wprowadzenie do HTML5 19 Tworzenie przy pomocy znaczników: przegląd 20.Wprowadzanie nowych elementów HTML5 21 Korzystanie z kontynuowanych znaczników

Bardziej szczegółowo

Pokażę w jaki sposób można zrobić prostą grafikę programem GIMP. 1. Uruchom aplikację GIMP klikając w ikonę na pulpicie.

Pokażę w jaki sposób można zrobić prostą grafikę programem GIMP. 1. Uruchom aplikację GIMP klikając w ikonę na pulpicie. Tworzenie grafiki Jest wiele oprogramowania służącego tworzeniu grafiki. Wiele z nich daje tylko podstawowe możliwości (np. Paint). Są też programy o rozbudowanych możliwościach przeznaczone do robienia

Bardziej szczegółowo

1 Zrozumieć Flasha... 1 Co można zrobić za pomocą Flasha?... 2 Tworzenie obrazków do strony 3 Animowanie witryny 4 Tworzenie filmów

1 Zrozumieć Flasha... 1 Co można zrobić za pomocą Flasha?... 2 Tworzenie obrazków do strony  3 Animowanie witryny  4 Tworzenie filmów 1 Zrozumieć Flasha... 1 Co można zrobić za pomocą Flasha?... 2 Tworzenie obrazków do strony WWW... 3 Animowanie witryny WWW... 4 Tworzenie filmów interaktywnych... 6 Wyświetlanie przycisków... 7 Transformacja

Bardziej szczegółowo

Obsługa programu Paint. mgr Katarzyna Paliwoda

Obsługa programu Paint. mgr Katarzyna Paliwoda Obsługa programu Paint. mgr Katarzyna Paliwoda Podstawowo program mieści się w Systemie a dojście do niego odbywa się przez polecenia: Start- Wszystkie programy - Akcesoria - Paint. Program otwiera się

Bardziej szczegółowo

Projekt K.I.K. Podręcznik użytkownika. Paweł Kieliszczyk, Bartłomiej Kucharczyk, Michał Skrzypkowski, Szymon Wilczek

Projekt K.I.K. Podręcznik użytkownika. Paweł Kieliszczyk, Bartłomiej Kucharczyk, Michał Skrzypkowski, Szymon Wilczek Projekt K.I.K. Podręcznik użytkownika Paweł Kieliszczyk, Bartłomiej Kucharczyk, Michał Skrzypkowski, Szymon Wilczek 18 stycznia 2010 2 Rozdział 1 Wstęp 1.1 Wprowadzenie Dziękujemy za wybór naszego produktu!

Bardziej szczegółowo

PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF.

PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF. PyX jest pakietem Pythona do grafiki wektorowej. Pozawala zatem tworzyd pliki EPS oraz PDF. Aby go zainstalowad należy rozpakowad pakiet o nazwie PyX-0.10 do odpowiedniego katalogu. Będzie on dostępny

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

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

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

Scenariusz lekcji opartej na programie Program nauczania informatyki w gimnazjum DKW-4014-87/99

Scenariusz lekcji opartej na programie Program nauczania informatyki w gimnazjum DKW-4014-87/99 Scenariusz lekcji opartej na programie Program nauczania informatyki w gimnazjum DKW-4014-87/99 Techniki algorytmiczne realizowane przy pomocy grafiki żółwia w programie ELI 2,0. Przedmiot: Informatyka

Bardziej szczegółowo

Politechnika Warszawska Wydział Mechatroniki Instytut Automatyki i Robotyki

Politechnika Warszawska Wydział Mechatroniki Instytut Automatyki i Robotyki Politechnika Warszawska Wydział Mechatroniki Instytut Automatyki i Robotyki Ćwiczenie laboratoryjne 2 Temat: Modelowanie powierzchni swobodnych 3D przy użyciu programu Autodesk Inventor Spis treści 1.

Bardziej szczegółowo

Maskowanie i selekcja

Maskowanie i selekcja Maskowanie i selekcja Maska prostokątna Grafika bitmapowa - Corel PHOTO-PAINT Pozwala definiować prostokątne obszary edytowalne. Kiedy chcemy wykonać operacje nie na całym obrazku, lecz na jego części,

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

Materiały pomocnicze do programu AutoCAD 2014

Materiały pomocnicze do programu AutoCAD 2014 Łukasz Przeszłowski Politechnika Rzeszowska im. I. Łukasiewicza Wydział Budowy Maszyn i Lotnictwa Katedra Konstrukcji Maszyn Materiały pomocnicze do programu AutoCAD 2014 UWAGA: Są to materiały pomocnicze

Bardziej szczegółowo

Microsoft Small Basic

Microsoft Small Basic Microsoft Small Basic Okno grafiki Szacowany czas trwania lekcji: 1 godzina Okno grafiki Podczas tej lekcji uzyskasz informacje na temat: Instrukcji używających obiektu GraphicsWindow. Właściwości obiektu

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

Baltie 3. Podręcznik do nauki programowania dla klas I III gimnazjum. Tadeusz Sołtys, Bohumír Soukup

Baltie 3. Podręcznik do nauki programowania dla klas I III gimnazjum. Tadeusz Sołtys, Bohumír Soukup Baltie 3 Podręcznik do nauki programowania dla klas I III gimnazjum Tadeusz Sołtys, Bohumír Soukup Czytanie klawisza lub przycisku myszy Czytaj klawisz lub przycisk myszy - czekaj na naciśnięcie Polecenie

Bardziej szczegółowo

Microsoft PowerPoint 2003 efektywne tworzenie i prezentacji multimedialnych

Microsoft PowerPoint 2003 efektywne tworzenie i prezentacji multimedialnych Microsoft PowerPoint 2003 efektywne tworzenie i prezentacji multimedialnych Projekt: Wdrożenie strategii szkoleniowej prowadzony przez KancelarięPrezesa Rady Ministrów Projekt współfinansowany przez Unię

Bardziej szczegółowo

4. Rysowanie krzywych

4. Rysowanie krzywych 1. Operator plot y x \begin{tikzpicture} \draw[->] (-0.2,0) -- (4.2,0) node[right] {$x$}; \draw[->] (0,-1.2) -- (0,4.2) node[above] {$y$}; \draw (3,4) -- (3,3) plot coordinates{(2,3) (3,0) (4,3)}; \end{tikzpicture}

Bardziej szczegółowo

Grażyna Koba. Grafika komputerowa. materiały dodatkowe do podręcznika. Informatyka dla gimnazjum

Grażyna Koba. Grafika komputerowa. materiały dodatkowe do podręcznika. Informatyka dla gimnazjum Grażyna Koba Grafika komputerowa materiały dodatkowe do podręcznika Informatyka dla gimnazjum Rysunki i animacje w Edytorze postaci 1. Rysunek w Edytorze postaci Edytor postaci (rys. 1.) jest częścią programu

Bardziej szczegółowo

WASM AppInventor Lab 3. Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI

WASM AppInventor Lab 3. Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI Rysowanie i animacja po kanwie PODSTAWY PRACY Z KANWAMI Kanwa, to komponent służący do rysowania. Można ją dodać w Designerze przeciągając komponent Canvas z sekcji Basic. W celu ustawienia obrazka jako

Bardziej szczegółowo

TWORZENIE OBIEKTÓW GRAFICZNYCH

TWORZENIE OBIEKTÓW GRAFICZNYCH R O Z D Z I A Ł 2 TWORZENIE OBIEKTÓW GRAFICZNYCH Rozdział ten poświęcony będzie dokładnemu wyjaśnieniu, w jaki sposób działają polecenia służące do rysowania różnych obiektów oraz jak z nich korzystać.

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

Animacje z zastosowaniem suwaka i przycisku

Animacje z zastosowaniem suwaka i przycisku Animacje z zastosowaniem suwaka i przycisku Animacja Pole równoległoboku Naukę tworzenia animacji uruchamianych na przycisk zaczynamy od przygotowania stosunkowo prostej animacji, za pomocą, której można

Bardziej szczegółowo

CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites

CSS + HTML. Front end publikacji internetowej. Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites CSS + HTML Front end publikacji internetowej Cięcie grafiki i CSS Ćwiczenia z CSS Typografia CSS image sprites 1 CSS + pocięcie grafiki Struktura folderów reset.css Cięcie grafiki w Photoshopie 2 Nasza

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

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

Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji

Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji Ćwiczenie 4 - Podstawy materiałów i tekstur. Renderowanie obrazu i animacji Materiał jest zbiorem informacji o właściwościach powierzchni. Składa się na niego kolor, sposób odbijania światła i sposób nakładania

Bardziej szczegółowo

Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej

Jarosław Kuchta Podstawy Programowania Obiektowego. Podstawy grafiki obiektowej Jarosław Kuchta Podstawy Programowania Obiektowego Podstawy grafiki obiektowej Zagadnienia Grafika proceduralna grafika obiektowa Grafika WPF dualizm XAML C# Właściwości obiektów graficznych edycja właściwości

Bardziej szczegółowo

Wizualne systemy programowania. Wykład 11 Grafika. dr Artur Bartoszewski -Wizualne systemy programowania, sem. III- WYKŁAD

Wizualne systemy programowania. Wykład 11 Grafika. dr Artur Bartoszewski -Wizualne systemy programowania, sem. III- WYKŁAD Wizualne systemy programowania Wykład 11 Grafika 1 dr Artur Bartoszewski -Wizualne systemy programowania, sem. III- WYKŁAD Grafika GDI+ GDI+ - Graphics Device Interface jeden z trzech podstawowych komponentów

Bardziej szczegółowo

Wprowadzenie do QT OpenGL

Wprowadzenie do QT OpenGL Wprowadzenie do QT mgr inż. Michał Chwesiuk mgr inż. Tomasz Sergej inż. Patryk Piotrowski 1/21 - Open Graphics Library Open Graphics Library API pozwalające na wykorzystanie akceleracji sprzętowej do renderowania

Bardziej szczegółowo

Ćwiczenie 14 Dmuchawce

Ćwiczenie 14 Dmuchawce Dmuchawce Celem ćwiczenia jest wykorzystanie właściwości programu Flash do generowania animacji o charakterze losowym. Prezentowany efekt można wykorzystać do wielu różnych celów np. spadające liście,

Bardziej szczegółowo

Ćwiczenie 1 Automatyczna animacja ruchu

Ćwiczenie 1 Automatyczna animacja ruchu Automatyczna animacja ruchu Celem ćwiczenia jest poznanie procesu tworzenia automatycznej animacji ruchu, która jest podstawą większości projektów we Flashu. Ze względu na swoją wszechstronność omawiana

Bardziej szczegółowo

Tworzenie menu i authoring w programie DVDStyler

Tworzenie menu i authoring w programie DVDStyler Tworzenie menu i authoring w programie DVDStyler DVDStyler jest to wieloplatformowy program do authoringu płyt DVD (tworzenia płyt DVD z indywidualnym menu, grafiką i materiałem filmowym). Dzięki niemu

Bardziej szczegółowo

Wstęp do GIMP wycinanie obiektu z obrazka, projekt napisu. Rozpoczynamy prace w GIMP-e

Wstęp do GIMP wycinanie obiektu z obrazka, projekt napisu. Rozpoczynamy prace w GIMP-e Rozpoczynamy prace w GIMP-e 1. Odpalamy program GIMP szukamy go albo na pulpicie albo w programach (ikonka programu widoczna w prawym górnym rogu). 2. Program uruchamia się na początku widzimy tzw. Pulpit

Bardziej szczegółowo

Informatyka II. Laboratorium Aplikacja okienkowa

Informatyka II. Laboratorium Aplikacja okienkowa Informatyka II Laboratorium Aplikacja okienkowa Założenia Program będzie obliczał obwód oraz pole trójkąta na podstawie podanych zmiennych. Użytkownik będzie poproszony o podanie długości boków trójkąta.

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

Opis Edytora postaci Logomocji

Opis Edytora postaci Logomocji Opis Edytora postaci Logomocji Przyciski na pasku narzędzi Przyciski Wygląd Opis W Edytorze postaci można otwierać pliki o rozszerzeniach: Otwórz plik postaci lgf (plik Edytora postaci), imp (plik projektu

Bardziej szczegółowo

Kolejną czynnością będzie wyświetlenie dwóch pasków narzędzi, które służą do obsługi układów współrzędnych, o nazwach LUW i LUW II.

Kolejną czynnością będzie wyświetlenie dwóch pasków narzędzi, które służą do obsługi układów współrzędnych, o nazwach LUW i LUW II. Przestrzeń AutoCAD-a jest zbudowana wokół kartezjańskiego układu współrzędnych. Oznacza to, że każdy punkt w przestrzeni posiada trzy współrzędne (X,Y,Z). Do tej pory wszystkie rysowane przez nas projekty

Bardziej szczegółowo

Ćwiczenie 1 Galeria zdjęć

Ćwiczenie 1 Galeria zdjęć Galeria zdjęć Pobierz przykład (http://jsekulska.kis.p.lodz.pl/studia.htm). Krok 1 Ustawienie stołu montażowego Otwieramy nowy plik i nazywamy go (np. gallery.fla). Ustawiamy wielkość pola roboczego na

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

LIVE Gra w życie. LIVE w JavaScript krok po kroku. ANIMACJA Rozpoczynamy od podstawowego schematu stosowanego w animacji

LIVE Gra w życie. LIVE w JavaScript krok po kroku. ANIMACJA Rozpoczynamy od podstawowego schematu stosowanego w animacji LIVE Gra w życie Live jest jednym z pierwszych i najbardziej znanych tzw. automatów komórkowych. Został wymyślony w 1970 roku przez brytyjskiego matematyka Johna Conwaya. Co to takiego automat komórkowy?

Bardziej szczegółowo

Przewodnik... Tworzenie Landing Page

Przewodnik... Tworzenie Landing Page Przewodnik... Tworzenie Landing Page Spis treści Kreator strony landing page Stwórz stronę Zarządzaj stronami 2 Kreator strony landing page Kreator pozwala stworzyć własną stronę internetową z unikalnym

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

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych rk Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych pojęć, prawdopodobnie zastanawiasz się, kiedy zaczniesz

Bardziej szczegółowo

8. Dynamiczne generowanie grafiki, cz. 2

8. Dynamiczne generowanie grafiki, cz. 2 8. Dynamiczne generowanie grafiki, cz. 2 8.1. Generowanie tekstu Chociaż tekst można umieścić na grafice korzystając z HTML (używając grafiki jako tła obiektu), często wygodniej jest umieścić tekst bezpośrednio

Bardziej szczegółowo

Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2

Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2 Tematy lekcji zajęć komputerowych klasa 5b grupa 1 i grupa 2 1 Program nauczania. Przedmiotowy system oceniania. Regulamin pracowni komputerowej. - 7 punktów regulaminu potrafi powiedzieć, czego się będzie

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

Adobe InDesign lab. 3 Jacek Wiślicki,

Adobe InDesign lab. 3 Jacek Wiślicki, Spis treści 1. Zaawansowane techniki pracy...2 1.1. Tekst z wypełnieniem...2 1.2. Stosowanie przeźroczystości i oblewania tekstem...5 strona 1 z 8 1. Zaawansowane techniki pracy 1 W poprzednich instrukcjach

Bardziej szczegółowo

Języki formalne i automaty Ćwiczenia 5

Języki formalne i automaty Ćwiczenia 5 Języki formalne i automaty Ćwiczenia 5 Autor: Marcin Orchel Spis treści Spis treści... 1 Wstęp teoretyczny... 2 L-systemy... 2 Grafika żółwia... 2 Bibliografia... 5 Zadania... 6 Zadania na 3.0... 6 Zadania

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

Dodawanie grafiki i obiektów

Dodawanie grafiki i obiektów Dodawanie grafiki i obiektów Word nie jest edytorem obiektów graficznych, ale oferuje kilka opcji, dzięki którym można dokonywać niewielkich zmian w rysunku. W Wordzie możesz zmieniać rozmiar obiektu graficznego,

Bardziej szczegółowo

Projekt witryny pt. Oko

Projekt witryny pt. Oko Strona 1 Projekt witryny pt. Oko Włodzimierz Gajda Gdy znamy podstawowe cechy GIMP-a, umiemy pracować z warstwami, wprawnie operujemy selekcjami oraz wybranymi narzędziami moŝemy przystąpić do pracy nad

Bardziej szczegółowo

Cykl lekcji informatyki w klasie IV szkoły podstawowej. Wstęp

Cykl lekcji informatyki w klasie IV szkoły podstawowej. Wstęp Cykl lekcji informatyki w klasie IV szkoły podstawowej Wstęp Poniżej przedstawiam cykl początkowych lekcji informatyki poświęconym programowi Paint. Nie są to scenariusze lekcji, lecz coś w rodzaju kart

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

Wykład VII PASCAL - grafika;

Wykład VII PASCAL - grafika; Podstawy programowania Wykład VII PASCAL - grafika; 1 Procedura InitGraph() InitGraph ( var sterownik,tryb:integer; katalog:string ); biblioteka: GRAPH Służy do włączenia trybu graficznego. Możliwe sterowniki

Bardziej szczegółowo

Ćwiczenie 6 Animacja trójwymiarowa

Ćwiczenie 6 Animacja trójwymiarowa Animacja trójwymiarowa Wstęp Jedną z nowości Flasha CS4 i wyższych wersji jest tworzenie animacji 3D. Są do tego przeznaczone narzędzia Obrót 3D (W) i Translacja 3D (G). Narzędzia te działają na klipach

Bardziej szczegółowo

WAŻNE! colour.me Google Fonts tutaj

WAŻNE! colour.me Google Fonts tutaj Otwieramy dokument, ustalamy podstawowe parametry. 1. Wpisujemy liczbę stron w tym przypadku będą to 2 (przód i tył). 2. Ustalamy rozmiar docelowy w tym przypadku 85x55 mm. 3. Odznaczamy opcję: strony

Bardziej szczegółowo

Tematy lekcji informatyki klasa 4a styczeń 2013

Tematy lekcji informatyki klasa 4a styczeń 2013 Tematy lekcji informatyki klasa 4a styczeń 2013 temat 7. z podręcznika (str. 70-72); sztuczki 4. i 5. (str. 78); Narysuj ikony narzędzi do zaznaczania i opisz je. 19 Zaznaczamy fragment rysunku i przenosimy

Bardziej szczegółowo

Grafika rastrowa (bitmapa)-

Grafika rastrowa (bitmapa)- Grafika komputerowa Grafika rastrowa Grafika rastrowa (bitmapa)- sposób zapisu obrazów w postaci prostokątnej tablicy wartości, opisujących kolory poszczególnych punktów obrazu (prostokątów składowych).

Bardziej szczegółowo

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji

Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji Edycja strony: W edycję danej strony wchodzimy poprzez naciśnięcie opcji uzyskujemy widok: a. Wstawianie tekstów Tekst możemy wpisywać bezpośrednio w panelu lub wklejać do edytora. Jeśli wklejamy tekst

Bardziej szczegółowo

Adobe InDesign lab. 3 Jacek Wiślicki, Paweł Kośla

Adobe InDesign lab. 3 Jacek Wiślicki, Paweł Kośla Spis treści 1. Zaawansowane techniki pracy... 2 1.1. Tekst z wypełnieniem... 2 1.2. Stosowanie przeźroczystości i oblewania tekstem... 6 strona 1 z 9 1. Zaawansowane techniki pracy 1 W poprzednich instrukcjach

Bardziej szczegółowo

BACKUP BAZ DANYCH FIREBIRD

BACKUP BAZ DANYCH FIREBIRD BACKUP BAZ DANYCH FIREBIRD SPIS TREŚCI Informacje ogólne... 2 Tworzenie projektu... 2 Krok 1: Informacje podstawowe... 2 Krok 2: Dane... 3 Backup bazy umieszczonej na serwerze... 3 Bezpośredni backup pliku

Bardziej szczegółowo

Zad. 6: Sterowanie robotem mobilnym

Zad. 6: Sterowanie robotem mobilnym Zad. 6: Sterowanie robotem mobilnym 1 Cel ćwiczenia Utrwalenie umiejętności modelowania kluczowych dla danego problemu pojęć. Tworzenie diagramu klas, czynności oraz przypadków użycia. Wykorzystanie dziedziczenia

Bardziej szczegółowo

Informatyka dla szkoły podstawowej Klasy IV-VI Grażyna Koba

Informatyka dla szkoły podstawowej Klasy IV-VI Grażyna Koba 1 Spis treści Informatyka dla szkoły podstawowej Klasy IV-VI Grażyna Koba I. Komputery i programy Temat 1. Zastosowania komputerów 1. Bez komputera coraz trudniej 2. Komputer pomaga w pracy i nauce 3.

Bardziej szczegółowo

Jak dodać własny szablon ramki w programie dibudka i dilustro

Jak dodać własny szablon ramki w programie dibudka i dilustro Aby dodać własną ramkę otwórz moduł administracyjny dibudkaadmin.exe, wejdź do zakładki Ramki, tła, id i następnie Edycja. 1. Kliknij przycisk Dodaj ramkę 2. Określ wymiary nowej ramki Jeżeli dodajesz

Bardziej szczegółowo

Programowanie: grafika w SciLab Slajd 1. Programowanie: grafika w SciLab

Programowanie: grafika w SciLab Slajd 1. Programowanie: grafika w SciLab Programowanie: grafika w SciLab Slajd 1 Programowanie: grafika w SciLab Programowanie: grafika w SciLab Slajd 2 Plan zajęć 1. Wprowadzenie 2. Wykresy 2-D 3. Wykresy 3-D 4. Rysowanie figur geometrycznych

Bardziej szczegółowo

FORMATY PLIKÓW GRAFICZNYCH

FORMATY PLIKÓW GRAFICZNYCH FORMATY PLIKÓW GRAFICZNYCH Różnice między nimi. Ich wady i zalety. Marta Łukasik Plan prezentacji Formaty plików graficznych Grafika wektorowa Grafika rastrowa GIF PNG JPG SAV FORMATY PLIKÓW GRAFICZNYCH

Bardziej szczegółowo

CSS. Kaskadowe Arkusze Stylów

CSS. Kaskadowe Arkusze Stylów CSS Kaskadowe Arkusze Stylów CSS CSS = Cascading Style Sheets Style określają sposób wyświetlania zawartości elementów HTML Arkusz stylów jest zbiorem takich reguł Pojawiły się w HTML 4.0 by rozwiązać

Bardziej szczegółowo

Programowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska

Programowanie gier 3D w HTML5. Andrzej P.Urbański Politechnika Poznańska Programowanie gier 3D w HTML5 Andrzej P.Urbański Politechnika Poznańska Moje marzenie Od dawna jest znany pakiet Open GL napisany w C++ i bardzo ułatwiający tworzenie gier 3D Zaproponowałem kiedyś jako

Bardziej szczegółowo

STRONY INTERNETOWE mgr inż. Adrian Zapała

STRONY INTERNETOWE mgr inż. Adrian Zapała 1 STRONY INTERNETOWE mgr inż. Adrian Zapała STRONY INTERNETOWE Rodzaje stron internetowych statyczne (statyczny HTML + CSS) dynamiczne (PHP, ASP, technologie Flash) 2 JĘZYKI STRON WWW HTML (ang. HyperText

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

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

Autodesk 3D Studio MAX Teksturowanie modeli 3D

Autodesk 3D Studio MAX Teksturowanie modeli 3D Autodesk 3D Studio MAX Teksturowanie modeli 3D dr inż. Andrzej Czajkowski Instyt Sterowania i Systemów Informatycznych Wydział Informatyki, Elektrotechniki i Automatyki 25 kwietnia 2017 1 / 20 Plan Wykładu

Bardziej szczegółowo

Tworzenie dokumentacji 2D

Tworzenie dokumentacji 2D Tworzenie dokumentacji 2D Tworzenie dokumentacji technicznej 2D dotyczy określonej części (detalu), uprzednio wykonanej w przestrzeni trójwymiarowej. Tworzenie rysunku 2D rozpoczynamy wybierając z menu

Bardziej szczegółowo

Powtórzenie materiału: CSS3 Spis treści

Powtórzenie materiału: CSS3 Spis treści Powtórzenie materiału: CSS3 Spis treści Kolory...2 Jednostki...3 Czcionka...3 Elementy blokowe...3 Cienie...5 Gradient...5 Zgodność z przeglądarkami...6 Kolory Wartości kolorów w CSS podawać można na 4

Bardziej szczegółowo

Podstawy Processingu. Diana Domańska. Uniwersytet Śląski

Podstawy Processingu. Diana Domańska. Uniwersytet Śląski Podstawy Processingu Diana Domańska Uniwersytet Śląski Processing jest językiem programowania opartym na języku Java. Jest on nastawiony na aplikacje związane z grafiką, animacją. Projekt został zainicjowany

Bardziej szczegółowo

AUTOCAD MIERZENIE I PODZIAŁ

AUTOCAD MIERZENIE I PODZIAŁ AUTOCAD MIERZENIE I PODZIAŁ Czasami konieczne jest rozmieszczenie na obiekcie punktów lub bloków, w równych odstępach. Na przykład, moŝe zachodzić konieczność zlokalizowania na obiekcie punktów oddalonych

Bardziej szczegółowo

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER=1> <TR> Tabele Autorem niniejszego skryptu jest dr inż. Robert Kolud Tabele w HTML to nie tylko praktyczny sposób na przedstawianie zestawień informacji. Znacznie częściej jednak tabele są wygodnym narzędziem

Bardziej szczegółowo

I. Menu oparte o listę

I. Menu oparte o listę I. Menu oparte o listę We wcześniejszych przykładach założyliśmy, że menu posiada tylko jeden poziom nawigacji. Czasem jednak jeden poziom nie wystarczy za pomocą list elementów oraz kaskadowych arkuszy

Bardziej szczegółowo

2 Podstawy tworzenia stron internetowych

2 Podstawy tworzenia stron internetowych 2 Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) hipertekstowy język znaczników. Dokument

Bardziej szczegółowo

BOC INFORMATION TECHNOLOGIES CONSULTING. Zadania. Przykład bankowy

BOC INFORMATION TECHNOLOGIES CONSULTING. Zadania. Przykład bankowy ADONIS - Szkolenie Zadania Przykład bankowy BOC Information Technologies Consulting Sp. z o.o. Al. Jerozolimskie 109/26 02-011 Warszawa Tel: +48-22-628 00 15 Fax: +48-22-621 66 88 e-mail: boc@boc-pl.com

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. Księgarnia PWN: Roland Zimek - Swish Max3

Spis treści. Księgarnia PWN: Roland Zimek - Swish Max3 Księgarnia PWN: Roland Zimek - Swish Max3 Spis treści Wprowadzenie... 11 1. Opis programu i instalacja... 15 1.1. Nowości w SWiSH Max3... 15 1.1.1. Projekty... 15 1.1.2. Ścieżka ruchu... 16 1.1.3. Narzędzie

Bardziej szczegółowo