programowanie – Uranika świat graficzny

Demo na telefonie

Jako że w zamierzchłych czasach udzielałem się na scenie komputerowej (konkretnie na amigowej), takie rzeczy mega mnie jarają:

Od 2012 roku jest organizowany konkurs na zaprogramowanie gry przeglądarkowej w javascripcie, z tym że limit wielkości pliku z grą to 13kb. Każdy rok ma jakiś temat (słowo) przewodnie, na przykład w 2018 roku takim słowem było „offline”. Wygrana jest niebagatelna, bo (obecnie) powyżej $30k, a zakwalifikowani dostają koszulki i naklejki i gadżety.
No a cały contest prowadzi Polak – Andrzej Mazur. :)

Projekt nazywa się js13kGames.

Mimo że większość gier dopuszczonych do konkursu jest powtarzalna i nieciekawa – zdarzają się mega perełki, które wciągają od pierwszego zagrania. Warto sprawdzić chociażby 3 pierwsze miejsca w każdym roku.

Może kiedyś sam wezmę udział…

Grafik proceduralny, Janusz Jurek

Grafika proceduralna (generatywna) to po prostu tworzenie grafiki kodem, a nie narzędziami graficznymi. W pewnym sensie projektowanie CSS też może być taką sztuką, na bardzo niskim poziomie. Jednak istnieją Twórcy którzy programowanie grafiki proceduralnej opanowali do perfekcji, a ich prace powodują opad szczęki.

Jakiś czas temu na Wykopie trafiłem na użytkownika prezentującego takie właśnie prace. Okazał się nim Janusz Jurek – profesjonalny grafik proceduralny. Nawet Photoshop przez jakiś czas miał na splashu jego grafikę. Warto zapoznać się z jego pracami i się zainspirować.

Tutaj sylwetka i więcej info o generative art

A tutaj strona Jurka i portfolio

Postarzanie zdjęć przez Javascript

W dzisiejszych czasach możliwości CSS, js, samych przeglądarek i związanych z nimi dodatków – są niemal nieograniczone. Można wykonać wszystko. Kwestia poświęcenia czasu i zaprogramowania rozwiązania… albo: Odnalezienia gotowego rozwiązania w necie. Bowiem większość rzeczy, które chcesz zrobić – zostało już zrobione i wystarczy dotrzeć do takiego rozwiązania.

Tak też było ze zdjęciami, które Klient chciał mieć postarzone, i to w jednym i tym samym stylu. Mogłem zrobić makro w Photoshopie, ale po co, skoro znalazłem VintageJS – skrypt do modyfikacji zdjęć w locie.

Dostępny dla jQ, Angulara i standalone. Mnóstwo fajnych opcji, można się wtopić w zabawę na długie godziny. Możemy edytować jaskrawość, kontrast, winietę, oświetlenie, kolory (nasycenie, nakładanie, parametry rgb), szum, sepię, ramkę (różnego rodzaju). To dużo opcji. Ale są też fajne gotowce, żeby na szybko coś ogarnąć. Polecam, działa świetnie.

Clippy – narzędzie do tworzenia kształtów

Clippy to wdzięczna nazwa dla bardzo przydatnego narzędzia, które jest kreatorem wizualnym kształtów/masek generującym za pomocą polecenia css clip-path (i odpowiednich prefixów) kod kształtu. Potrzebne, używane, zapisane w ulubionych.

Isotope

Świetny mechanizm graficznego filtrowania/sortowania przedstawia sobą skrypt Isotope. Wygląda to przefajnie, a możliwości ma wiele. Jesli nie do końca kumasz o co mi chodzi (bardzo możliwe – trudno w krótkim wpisie obrazowo opisać działanie Isotope) – kliknij i sprawdź sam(a).

Parallax na Twojej stronie www

Ostatnio modne są „nowoczesne” strony, w których podczas przewijania, pojawiają się i znikają paski z ilustracjami/tekstem. To tak zwany parallax effect – „fragment strony przesuwa się z inną prędkością niż pozostałe, co daje pewne złudzenie trójwymiarowości„.

U Webmastaha od jakiegoś czasu jest pożyteczny tutorial, jak taki efekt w prosty sposób wykonać. Warto się chociaż przeklikać.

Sposób na linie w js – dowolnie pochyłe

Szybciutka funkcja do rysowania dowolnych linii z punktu A do punktu B :)

function linedraw(ax,ay,bx,by)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc=Math.atan((ay-by)/(bx-ax));
    calc=calc*180/Math.PI;
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    document.body.innerHTML += "
<div id='line' style='height:" + length + "px;width:1px;background-color:
black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;
transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);
transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);
-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);
-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);
-o-transform-origin:0% 0%;'></div>"
}

Filtrowanie obrazków w locie

CanvasQuery jest biblioteką dla elementu HTML5 ‚Canvas’, która pozwala na stosowanie z jQuery. Umożliwia stosowanie różnych metod manipulacji na grafikach, przeznaczonych co prawda dla developerów gier, ale moze webdesignerzy też coś z tym zrobią… Można na przykład w locie zapodać efekt grafiki z C64 :)

Na stronie CanvasQuery znajdziemy full-wypas rozpiskę, jak stosować tą sztuczkę, gdzie stosować, oraz wdrożenia popularnych efektów.

Fajna sprawa – zerknij na demo, aby się przekonać. ;)

Pokaz animacji CSS

Wiem że zaczynam być nudny w tym temacie, ale to trzeba zobaczyć, aby wyobrazić sobie możliwości. Google opracował prostą prezentację ukazującą wszystkie podstawowe możliwości animacji i ruchu realizowanego za pomocą HTML5, CSS3 (no i JS, SVG, WebGL). I (prawie) wszystko staje się możliwe… tylko czekać na jakiś profesjonalny edytor takich animacji…

Tag: programowanie