Archiwa tagu: Canvas

Patternizer–biblioteka js i edytor do tworzenia tła do stron WWW

patternizer.jpg

Na stronie Patternizer.com można znaleźć bibliotekę JavaScript, która umożliwia tworzenie tła metodą canvas. Tła są dość specyficzne ponieważ polegają na łączeniu pasków różnych kolorów, grubości, przeźroczystości itp. Możemy tworzyć najrozmaitsze kraciaste wzory, a wiele przykładów znajduje się na stronie. Bardzo ciekawą sprawą jest edytor, który pozwala tworzyć wzory a następnie skopiować kod i wkleić go do naszego skryptu.

 Skrypt: https://github.com/matthewlein/patternizer.js
Aplikacja: http://patternizer.com/
Licencja: MIT

Glfx.js – biblioteka JavaScript do zaawansowanej edycji zdjęć

glfxjs_thumb.jpg

Glfx.js jest zaawansowaną biblioteką JavaScript do edytowania zdjęć. Zawiera ona  bogaty zestaw wbudowanych filtrów, takich jak kontrast, jasność, sepia, nasycenie kolorów, szumy, efekty rozmycia i wiele innych. Dodatkowo każdy filtr posiada dokładną regulacje, która można skonfigurować do tworzenia niestandardowych efektów. Biblioteka do działania wykorzystuje WebGL. Chodź jest on obsługiwany przez większość przeglądarek, nie wszystkie z nich dobrze obsługują wszystkie filtry.

Link: http://evanw.github.com/glfx.js/
Demo: http://evanw.github.com/glfx.js/demo/
Licencja: Darmowa

Web typography for the lonely– co można napisać przy pomocy Canvas

webtypographyforthelonely_thumb.jpg

Serwis którego zadaniem jest promowanie najnowszych standardów projektowania stron internetowych. W serwisie zebrane zostały przykłady wykorzystania technologii Canvas w typografii liter. W każdym przykładzie można zapoznać się z opisem kodu oraz ściągnięć przykład na swój komputer. Warto wpadać z czasem na tę stronę i sprawdzić czy nie pojawi się więcej przykładów.

 Link: http://webtypographyforthelonely.com/
Licencja: Darmowa

Chrome Experiments – Multimedialne serwisy WWW przyszłości

rome_thumb.jpg

Od pewnego czasu przyglądam się Chrome Experiments. To serwis w którym prezentowane są nowe technologie obsługiwane przez przeglądarkę Chrome. Do tych technologii należą HTML5, Canvas, SVG oraz WebGL. Jestem pod wrażaniem możliwości oraz szybkości działania niektórych eksperymentów. Można się spodziewać że tak będą wyglądać strony internetowe, pełne bogatych efektów 3D. Zapraszam do obejrzenia 3 najciekawszych prezentacji które wybrałem.

Wymagania: Przeglądarka Google Chrome
Link: http://www.chromeexperiments.com/
Demo1: http://www.allisnotlo.st/index_en.html
Demo2: http://www.ro.me/
Demo3: http://www.thewildernessdowntown.com/

jCanvaScript – biblioteka do tworzenia obrazów i animacji canvas

jCanvaScript

jCanvaScript to biblioteka JavaScript, która dostarcza metod do tworzenia obrazów i animacji w technologi Canvas, która to technologia wchodzi w skład HTML5. Biblioteka działa na każdej platformie, który obsługuje Canvas i JavaScript. Aby dodać obsługę jCanvaScript w programie Internet Explorer trzeba użyć dodatkowej biblioteki ExCanvas.

 

jCanvaScript

 

Link: http://jcscript.com/
Licencja: MIT

Subway Map Visualization – skrypt w jQuery do tworzenia schematów lini metra

subway map visualization jquery

Ciekawy skrypt w jQuery z pomocą którego wykorzystując jedynie znaczniki HTML, można utworzyć schemat linii metra. Znaczniki są przy wyświetlaniu zamieniane na linie dzięki zastosowaniu biblioteki Canvas. Możemy dodawać punkty przystankowe i odnośniki np. do opisów. Skrypt pozwala nam dowolne modyfikować kolory i kształt linii oraz wielkość samej mapy.

 

subway map visualization jquery

Framework: jQuery
Link: http://www.kalyani.com/2010/10/subway-map-visualization-jquery-plugin/
Licencja: Darmowa