Wprowadzenie

Na prośbę zaprzyjaźnionej firmy przeprowadziliśmy analizę jej strony internetowej pod kątem pozycjonowania. Choć strona ta nie powalała interfejsem i grafiką, jej budowa była zgodna z deklarowanym standardem. Google nie zgłaszało żadnych błędów. Ranking wskazywał, że strona ta znajduje się w TOP-5 dla większości wymaganych fraz.

Problem

Wygląd strony przedstawiał się następująco:

Wygląd strony przed poprawkami

Statystyki strony wskazywały na dość wysoki współczynnik odrzuceń (ok. 53%) oraz niewielki przelicznik strony/odwiedziny (rzędu 2).

Postawiliśmy hipotezę, że powodem takich statystyk jest źle przemyślany „system” menu, które mogło zostać niezauważone. Postanowiliśmy przenieść menu na górę strony oraz wprowadziliśmy dodatkowe kilka zmian kolorystycznych, dzięki którym strona zyskała na estetyce. Zrezygnowaliśmy z rozciągniętego layoutu i przeorganizowaliśmy stronę do pionowego, klasycznego układu. Rezultatem tych działań jest następujący wygląd strony głównej:

Nowy wygląd strony

Efekty

Efekty mówią same za siebie:

Współczynnik odrzuceń

Współczynnik strony/odwiedziny

Współczynnik odrzuceń niemal natychmiast zmalał poniżej 20%, zaś ilość oglądanych podstron na pojedyncze odwiedziny wzrosła do ok 10.

Wniosek

Usability nie jest tylko modnym hasłem. Radzimy to przemyśleć każdemu, kto planuje zajmować się / zlecić branżą www.

Właśnie ukończona została wstępna propozycja na showreel studia zsFilm.pl

Po dłuższym namyśle zapadła decyzja, aby docelowa aplikacja pozwalała na możliwie najłatwiejszą lokalną deformację. Innymi słowy – do zdeformowania pojedynczego fragmentu obrazu wymagane powinno być jak najmniej punktów kontrolnych (a konkretnie dwa: źródłowy i docelowy). Zadaniem algorytmu jest przesunięcie otoczenia punktu źródłowego w otoczenie punktu docelowego, z jednoczesnym zachowaniem ciągłości obrazu.

Założenia:

Informacją wejściową dla algorytmu deformującego są:

• obraz wejściowy
• punkt źródłowy (xs, ys)
• punkt docelowy (xt, yt)
• promień oddziaływania punktów (r), określający zasięg oddziaływania punktu źródłowego i docelowego
• waga deformacji (Wi), określająca siłę, z jaką „okolica punktu źródłowego” zostanie „wypchnięta” w kierunku punktu docelowego

Opis algorytmu:

Etapy opracowanego algorytmu są następujące:

1. Ustalenie równania prostej przechodzącej przez punkt źródłowy i docelowy.

2. Wyznaczenie wielkości przesunięcia na podstawie wagi deformacji (Wi). Na podstawie przesunięcia ustalany jest nowy, chwilowy (dla danej klatki animacji) punkt docelowy (xt’, yt’) (kolor czerwony na rys. 1)

3. Wyznaczenie „obszaru zainteresowania”, na podstawie wagi deformacji (Wi) (czerwona ramka na rys. 2).
Dalsze operacje przeprowadzane będą wyłącznie na tym obszarze. Obszar zainteresowania określa fragment docelowego obrazu (obszar docelowy), na który będzie rzutowany odpowiadający fragment źródłowego obrazu (obszar źródłowy).

Rys.2. Obszar zainteresowania (czerwony) oraz obszar źródłowy (niebieski)

4. Wyznaczenie obszaru źródłowego (kolor niebieski na rys.2). Punkt z tego obszaru będą rzutowane na obszar docelowy.

5. Dla każdego z pikseli należących do obszaru docelowego (xj, yj) przeprowadzana jest następująca procedura:

• Wyznaczenie wartości wagi podłużnej danego piksela (Wpj)
• Wyznaczenie wartości wagi poprzecznej danego piksela (Wtj)
• Wyznaczenie wartości wagi lokalnej (Wloc)
• „Ważone rzutowanie” obszaru źródłowego na docelowy w następujący sposób:

1. Wyznaczenie odległości (d) pomiędzy pikselem obszaru docelowego (rys.3. kolor błękitny) a odpowiadającym mu pikselem obszaru źródłowego (rys.3. kolor czarny).
2. Wyliczenie wagi (W) jako iloczynu W = Wi*Wtj*Wpj.
3. Wyznaczenie nowej wartości przesunięcia (rys. 3) – W*d.
4. Rzutem punktu j jest piksel przesunięty od niego o odległość W*d.

Rys.3. Zasada ważonego rzutowania

Zasada działania:

Najpierw rozważmy brak wag przy operacji rzutowania. Wówczas prostokąt źródłowy zostałby rozciągnięty na obszar docelowy. Na krawędziach powstałaby nieciągłość informacji obrazowej, co wyraźnie rzucałoby się w oczy.

Z tego powodu wprowadzone zostały wagi poprzeczne i podłużne. Służą one zapewnieniu ciągłości obrazu na krawędziach obszaru zainteresowania, gdzie przyjmują wartość zerową. W miarę oddalania od krawędzi wartość tych wag rośnie do 1.

Waga lokalna (Wloc) służy zapewnieniu płynności rzutowania. W pobliżu punktu docelowego przyjmuje wartość 1. Im dalej od punktu docelowego – tym mniejsza jest wartość wagi lokalnej. Maleje do zera na krawędzi leżącej po drugiej stronie punktu źródłowego.

Rezultat:

Przykładowy rezultat działania algorytmu przedstawiają rysunek 4 oraz 5. Uzyskany efekt jest zbliżony do znanego z popularnego, komercyjnego zestawu do edycji zdjęć oraz montażu video.

Rys.4. Ilustracja działania algorytmu: punkt źródłowy (a), punkt docelowy oraz funkcja wagi (b), efekt końcowy (c)

Rys.5. Efekt działania algorytmu deformacji

Podsumowanie:

Poprawa rezultatów polega głównie na dobraniu odpowiednich funkcji wagi. W przedstawianym przykładzie użyte zostały możliwie najprostsze – odcinkami liniowe. Dobierając kształt funkcji poszczególnych wag można w stosunkowo prosty sposób zmieniać charakter działania i rodzaj deformacji.

Kolor materiału zawsze należy wybierać przy świetle dziennym. Powód postaram się wyjaśnić na kilku wykreasach.

Czym jest światło?

1. Widmo światła czerwonego

Światło jest falą elektromagnetyczną, w związku z czym można mu przypisać długość fali. Z długoscią fali jest powiązana barwa. Przedział widzialny dla oka ludzkiego zawiera się w zakresie od 380 nm do 780 nm. Wszystkie przedstawiane tu wykresy są wyłącznie przykładowe i nie mają związku z fizycznie uzyskiwanymi charakterystykami.

Światło można opisać charakterystyką przedstawiającą rozkład natężenia promieniowania w zależności od długości fali. Powstanie wówczas widmo promieniowania elektromagnetycznego, które dalej nazywane będzie widmem. Przykładowe widma światła barwy czerwonej oraz zielonej przedstawione zostało na wykresach 1 oraz 2.

2. Widmo światła zielonego

Jak działa oko/kamera?

Najpierw przyjrzyjmy się przykładowej (hipotetycznej) charakterystyce detektora. Może nim być przetwornik kamery, aparatu lub oko ludzkie. Najważniejsze, co musimy o detektorze wiedzieć jest to, że składa się z trzech „elementów” odpowiadających w przybliżeniu barwie czerwonej, zielonej i niebieskiej.

3. Hipotetyczna czułość detektora

Ich zakresy czułości częściowo pokrywają się. Oznacza to, że światło o długości przykładowo 620 nm zostanie rozpoznane jako „częściowo niebieskie” oraz „częściowo zielone”. Przykładowa charakterystyka czułości przedstawiona została na wykresie 3.

4. Widmo światła białego emitowanego przez 3 źródła składowe

Przyjmijmy, że światło zostanie rozpoznane jako białe, gdy wszystkie elementy detektora (odpowiadające za poszczególne barwy) wykryją promieniowanie o zbliżonym poziomie. Wystarczy zatem, aby obserwowane widmo miało postać pokazaną na wykresie 4. Na tym zjawisku opierają się popularne metody wyświetlania informacji: monitory CRT, LCD, PLD a nawet kolorowy druk.

5. Widmo światła "idealnie" białego

Czym różni się światło białe od białego?

Ale czy to oznacza, że takie światło jest białe? Otóż – „białe białemu nierówne”. Na nasze potrzeby przyjmijmy, że idealnie białe światło składa się w jednakowym stopniu z wszystkich widzialnych barw. Graficznie można to zilustrować widmem, które jest „płaskie” w całym zakresie widzialnym (wykres 5). Źródłem takiego promieniowania „idealnie białego” może być np. słońce lub żarówka tradycyjna.

6. Współczynnik odbicia dla przedmiotu czerwonego

Co to znaczy, że przedmiot ma jakąś barwę?

Oznacza to, że najlepiej odbija promieniowanie leżące w zakresie długości fali, którym odpowiada dana barwa. Dla przykładu: przedmiot czerwony odbija promieniowanie o długości fali zbliżonej do 730nm. Dla każdego przedmiotu można zatem przedstawić wykres zależności współczynnika odbicia od długości fali. Dla przedmiotu czerwonego zależność ta przedstawiona została na wykresie 6, zaś dla przedmiotu żółtego – na wykresie 7.

7. Współczynnik odbicia dla przedmiotu żółtego

Dlaczego białe różni się od białego?

Wiedząc już czym jest widmo, czułość i współczynnik odbicia – można przejść do odpowiedzi na pytanie : dlaczego technologia LED przegrywa z oświetleniem żarowym?

Dwa źródła światła oświetlają żółty przedmiot. Pierwsze źródło jest „idealne” (wykres 5), drugie zaś to trzy diody LED (wykres 4). Odbicie promieniowania od przedmiotu graficznie można interpretować jako „nakładanie” się wykresu widma padającego oraz współczynnika odbicia.

8. Powstawanie barwy przedmiotu w świetle "idealnie białym"

Rezultatem będzie część wspólna dwóch charakterystyk (rysunek 8). W przypadku oświetlenia żółtego przedmiotu „idealnym światłem białym” odbicie promieniowania od powierzchni nie zmienia kształtu widma. Inaczej sytuacja wygląda, gdy oświetlenie będzie składało się z trzech kolorowych diod (widmo z wykresu 4). Odbicie, które graficznie przedstawione jest jako nakładanie (mnożenie, część wspólna) wykresów – zmienia kształt widma – i to nie tylko jego wysokość, lecz zmienić może się również położenie maksimum widma odbitego. (rysunek 9).

9. Powstawanie barwy przedmiotu w świetle "nieidealnie białym"

Jak widać na powyższym rysunku – światło o nieciągłym widmie powoduje zmianę postrzeganej barwy. Przedmiot o barwie żółtej będzie wydawał się zielony.

Podsumowanie

Na każdym z przedstawionych etapów dokonane zostały znaczne uproszczenia. Prezentowane charakterystyki są wyłącznie przykładowe, niemniej pozwalają na uzasadnienie przyczyny zmiany barwy obserwowanego przedmiotu.

Obecna technologia LED nie polega na wytwarzaniu osobno trzech składowych, lecz na konwersji promieniowania, podobnie jak w popularnych świetlówkach. Emitowane widmo może być ciągłe, jednak jego wyraźnie niemonotoniczny kształt również ma wpływ na odwzorowanie barw. Parametrem określającym jakość wytwarzanego widma jest współczynnik oddania barw. Dla każdego źródła termicznego jego wartość jest maksymalna, gdyż świecą one zawsze widmem ciągłym. Z tego powodu oświetlenie żarowe zawsze wierniej odda barwę.

Po przeglądzie dostępnych rozwiązań wybrane zostało środowisko QT na licencji LGPL, co oznacza, że źródła projektu zostaną udostępnione.

Zastosowanie QT jest dla nas nowym wyzwaniem. We wcześniejszych projektach realizowanych na własny użytek posługiwaliśmy się narzędziami wykorzystującymi SDL i podobne biblioteki graficzne. Dlatego QT w połączeniu z C++ jest znaczącym krokiem do przodu.

Aktualnie trwają prace w obszarach:

• algorytmu deformacji obrazu
• interfejsu graficznego

O dalszych postępach postaram się informować na bieżąco.

1. Krótko opisać swój pomysł, czyli stworzyć tzw. story outline.

2. Następnie trzeba rozwinąć go w bardziej szczegółowy opis (treatment i scenariusz z podziałem na sceny).

3. Po ustaleniu poszczególnych scen dzielimy je na ujęcia.

4. Możemy teraz rozrysować storyboard, czyli scenariusz obrazkowy. Bardzo przydatny na planie, jedno spojrzenie mówi wszystko (choć rysunki nie zawsze są doskonałe

5. To już organizacja planu, rozwiesić tła, ustawić światła, załadować taśmy, ustawić aktora, krzyknąć: cisza na planie, kamera (wcisnąć rec), i AKCJA!

6. Po zdjęciach więcej zabawy ma montażysta. Musi wykluczować poszczególne ujęcia, dodać efekty 3D i werenderować cały film.

7. Udostępnić film do publicznego odtwarzania na www.zsfilm.pl bo bez tego, marny byłby cały nasz ten trud więc efekty możecie obejrzeć już sami.

Jeżeli chcesz obejrzeć gotowy film kliknij tu

Założenia wstępne:

- Dowolna ilość punktów bazujących

- Automatyczny tracking punktów bazujących, z możliwością manualnej korekty

Zastosowanie: efekty specjalne przy produkcji filmowej.

Możliwie prosty interfejs, bez zbędnych elementów. Aplikacja nie powinna być kombajnem montażowo-edycyjnym, lecz intuicyjnym narzędziem służącym wyłącznie do morphingu.

Aktualnie trwają prace nad wyborem środowiska i biblioteki graficznej. O dalszych postępach będę informował w tej kategorii.

Postanowiliśmy podjąć próbę zrealizowania CV w formie filmu.

Jako ‘królika doświadczalnego’ wykorzystamy Kasię Sałek. Po wstępnej burzy mózgów ustaliliśmy już nawet scenariusz. Następnym etapem jest rozrysowanie storyboard’u.

Jeśli produkcja zakończy się zadowalającymi efektami, postaramy się skomercjalizować tą usługę.

Film powinien zostać ukończony jeszcze przed wakacjami, o ile nie wystąpią losowe problemy, np. nieustannie zachmurzone niebo przez najbliższe 2 miesiące.

Ten sam pomysł można teoretycznie zastosować jako niekonwencjonalną formę reklamy. Wystarczy odpowiednio gęsta linijka diodowa. Należy ją przymocować do felgi (jako średnicę lub promień). Teraz troszkę matematyki:

Załóżmy, że samochód w ciągu jednego obrotu koła przejeżdża 3 metry. Przy prędkości 50km/h daje to 14m/3m czyli ok. 4 obroty koła na sekundę. To zdecydowanie za mało, aby uzyskać wrażenie płynnego wyświetlania obrazu. Jeśli jednak zamiast pojedynczego ramienia użyjemy 2 lub jeszcze lepiej – 4 gałęzi diod świecących (połączonych w krzyż) – wówczas ze względu na bezwładność oka ludzkiego uzyskamy efekt ciągłości obrazu.

I o to chodzi. Problemem pozostaje jednak sposób zasilania takiego układu. Całość elektroniki będzie obracać się razem z kołem. Nie można więc bezpośrednio podłączyć się do akumulatora samochodowego. Jedynym sensownym rozwiązaniem wydaje się zasilanie indukcyjne wykorzystujące obrót koła – czyli taka ‘prądnica’ znajdująca się przy samej piaście. Takie rozwiązanie będzie jednak wrażliwe na warunki panujące na drodze (woda, śnieg, błoto, wibracje itd.)

Poszukiwania lepszego sposobu zasilania trwają.