Pokazywanie postów oznaczonych etykietą grafika. Pokaż wszystkie posty
Pokazywanie postów oznaczonych etykietą grafika. Pokaż wszystkie posty

piątek, 6 marca 2009

Obrazek "inline" w HTML

Warto czasem pamiętać o różnych dziwnych sztuczkach. Na przykład o wstawianiu grafiki bezpośrednio w tekście HTML. Poniższy obrazek jest tu bezpośrednio wklejony w żródle HTML:

Aby to zrobić, trzeba użyć schematu "data" zdefiniowanego w RFC 2397. Ponieważ schemat ten obsługuje kodowanie base64, można wstawić dowolną grafikę.

Można także wstawić zagnieżdżoną stronę HTML, tym razem już bez kodowania base64, ale Internet Explorer odmówi renderowania elementu "data" z "nawigowalną treścią" - chodzi o względy bezpieczeństwa - filtry zabezpieczające różnorakie aplikacje internetowe przed atakiem typu cross-side scripting prawdopodobnie nie rozpoznałyby javascriptu zagnieżdżonego w elemencie zakodowanym w "data". A jak spreparować taki obrazek ? Po prostu użyć polecenia "base64" dostępnego w uniksie, a także w bibliotekach różnych języków ...

Używając tego mechanizmu Jeff Epler zaimplementował w JavaScript funkcje służące do generowania obrazków w locie po stronie klienta.

niedziela, 25 stycznia 2009

Sztuka bezkontekstowa i sztuka algorytmiczna

Natknąłem się przypadkowo na interesujący program graficzny - Context Free - narzędzie służące do tworzenia algorytmicznej grafiki.

Używa się go w niestandardowy sposób, mianowicie nie rysuje się nic na ekranie, ani na kartce - zamiast tego zadaniem artysty jest stworzenie opisu grafiki w specjalnym języku programowania. Pomysł ten jest krewniakiem idei muzyki algorytmicznej, o której pisałem przy okazji omawiania csound'a . Przypomniałem sobie o swoich starych eksperymentach z tworzeniem algorytmicznej grafiki bezpośrednio w języku C: oto wizerunek "tęczowej planety" i fragment kodu programu, który go narysował. Dość złożony obraz powstaje w wyniku działania tak prostej funkcji !

#define tfi(x) (0.5*(x+1))

float calc_color( float x, float y, int rgb )
{
        float d, K;

        d = (x-0.4) * (y-0.3) - 0.04;

        if ( d < 0 ) 
                K = 0;
        else if ( d < 0.03 ) {
                K = 1 - (0.03 - d)/0.03;
        }
        else
                K = 1;

        switch ( rgb ) {
                case 0:
                        return K * tfi(sin( 41 * x*y ));
                case 1:
                        return K * tfi(cos( 13 * x ));
                default:
                        return K * tfi(cos( 28 * y ));
        }
}