Mazakiem po WWW czyli kilka słów o obiekcie «canvas»
|
|
- Jadwiga Pawlak
- 8 lat temu
- Przeglądów:
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 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ółowoMultimedia 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ółowoZaję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ółowonarzę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ółowoWprowadzenie 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ółowoSieciowe 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ółowoWidż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ółowoSieciowe 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ółowoDokumentacja 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ółowoAnimacje 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ółowoAdobe 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ółowoZ 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ółowoI. Wstawianie rysunków
I. Wstawianie rysunków Wstawiane rysunku Bez parametrów: Tekst alternatywny Tytuł obrazka
Bardziej szczegółowoZadania 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 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ółowoSpis 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ółowoPokażę 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ółowo1 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ółowoObsł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ółowoProjekt 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ółowoPyX 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ółowoDruga 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ółowoSystemy 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ółowoktó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ółowoAllegro5 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ółowoScenariusz 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ółowoPolitechnika 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ółowoMaskowanie 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ółowoObsł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ółowoMateriał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ółowoMicrosoft 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ółowoINSTRUKCJA 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ółowoBaltie 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ółowoMicrosoft 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ółowo4. 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ółowoGraż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ółowoWASM 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ółowoTWORZENIE 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ółowoSzybkie 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ółowoAnimacje 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ółowoCSS + 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ółowoCzęść 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ółowoSkalowanie 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 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ółowoJarosł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ółowoWizualne 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ółowoWprowadzenie 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
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
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ółowoTworzenie 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ółowoWstę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ółowoInformatyka 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) 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ółowoOpis 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ółowoKolejną 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ęć
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ółowoJak 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ółowoLIVE 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ółowoPrzewodnik... 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ółowoKod ź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ółowoPo 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ółowo8. 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ółowoTematy 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ółowoTworzenie 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ółowoAdobe 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ółowoJę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ółowoKGGiBM 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ółowoDodawanie 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ółowoProjekt 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ółowoCykl 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ółowoRysowanie 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ółowoWykł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
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ółowoWAŻ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ółowoTematy 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ółowoGrafika 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ółowoEdycja 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ółowoAdobe 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ółowoBACKUP 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ółowoZad. 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ółowoInformatyka 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ółowoJak 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ółowoProgramowanie: 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ółowoFORMATY 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ółowoCSS. 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ółowoProgramowanie 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ółowoSTRONY 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ółowoPyGame 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ółowoGrafika 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ółowoAutodesk 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ółowoTworzenie 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ółowoPowtó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ółowoPodstawy 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ółowoAUTOCAD 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ółowoTabele. 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ółowoI. 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ółowo2 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ółowoBOC 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ółowoSpis 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ółowoSpis 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