Graphic effects in JavaScript © Paweł Drabowicz

138 visits since 2022-04


ASTEROIDS GAME

ASTEROIDS GAME

CLICK TO VIEW

Gra Asteroids to hit firmy Atari z 1977 roku, z którego napisaniem postanowiłem się zmierzyć. Do wykonania w grze należało napisać, między innymi, kolizje statku, kolizje pocisków z asteroidami, bezwładność statku, proste efekty cząsteczkowe towarzyszące wybuchom, przesunięcia oraz rotacje wielokątów. Nie będę ukrywał, narobiłem się, nie poszło szybko i bez problemów. Cieszy mnie, że rozgrywka zachowała grywalność! Grę można znacznie rozbudować zamieniając symboliczne asteroidy na obracające się sześciany lub inne bryły trójwymiarowe.



SINUS SCROLL

SINUS SCROLL

CLICK TO VIEW

Sinus scroll to klasyk stosowany w przesuwaniu tekstu. Znośną prędkość programu uzyskałem dzięki funkcji context.drawImage (rysowanie liter) oraz context.setTransform (odbicie lustrzane). Czcionka wczytywana jest z pliku fonts.gif, falowanie tekstu powstaje przez zmianę położenia plastrów liter. Wywołanie rysowania kolejnej klatki (ramki) odbywa się za pomocą funkcji window.requestAnimationFrame(draw).



TUNNEL OFFSET VORTEX

TUNNEL OFFSET VORTEX

CLICK TO VIEW

Tunel na offsetach (Vortex) to kolejny efekt jaki chciałem napisać od dawna. Efekt tunelu uzyskujemy dzięki zwinięciu tekstury przy użyciu funkcji arcus tangens oraz pierwiastka kwadratowego. Wrażenie lotu w tunelu powstaje poprzez przesuwanie tekstury o określony offset. Najtrudniejsze w implementacji było uzyskanie akceptowalnej ilości klatek na sekundę. Niezbędną prędkość działania otrzymałem poprzez tablicowanie wyliczonych pikseli oraz przezroczystości dla cieniowania głębi tunelu. Co bardzo ważne, nie należy rysować pikseli, a zmieniać kolory istniejących! Jak zawsze dla ciekawskich komentarze w źródle strony. Efekt tunelu to dobry wstęp do teksturowania w grafice 3D.



3D CUBE POLYGON SHADER

3D CUBE POLYGON SHADER

CLICK TO VIEW

Przykład użycia JavaScript'u i Canvas 2D, rzutowanie perspektywiczne, obroty, przesunięcia, sortowanie i cieniowanie wielokątów, dla ciekawskich komentarze w źródle strony. Cieniowanie wielokątów wykonałem w oparciu o odległość wierzchołków Z od obserwatora, którą poprzednio wyliczyłem do sortowania ścian, tj. ściany najbliżej obserwatora rysujemy na końcu (odległość wielokąta od obserwatora to średnia wartość współrzędnych Z).



3D CUBE POLYGON

3D CUBE POLYGON

CLICK TO VIEW


3D CUBE OUTLINE

3D CUBE OUTLINE

CLICK TO VIEW


ALL EXAMPLES:


tunnel-offset-vortex
scroll-sine
game-asteroids
3d-cube-polygon-shader
3d-cube-polygon
3d-cube-outline



© Paweł Drabowicz