"Panie, jak oni robią tę matematykę?" Cz.2

SVG (Scalable Vector Graphics) jest formatem lub technologią opartą na języku XML, który pozwala na stronie internetowej zamieszczać dwuwymiarową grafikę wektorową. Pozwala także definiować wypełnienia kształtów, gradienty, filtry efektów, transformacje oraz animacje, używając zaledwie kilku znaczników. Chociaż SVG nie supportuje efektów 3D, które są włączone w CSS3, to dostarcza wielu innych możliwości symulowania zachowania się takich obiektów. Można w nim łatwo tworzyć dowolne wielokąty, obrysy złożone z krzywych Beziera drugiego i trzeciego stopnia (nie są dostępne w CSS3), albo z fragmentów łuków elipsy. SVG jest także formatem graficznym dla obrazków, który jest lepszy w wielu aspektach od klasycznego PNG (Portable Network Graphics).

Format SVG przynosi stronom internetowym rozliczne benefity, wśród którym można wymienić brak degradacji kształtów i ostrości przy dowolnym skalowaniu (rozdzielczości, aspekcie ekranu), bardzo dobry współczynnik kompresji, brak utraty jakości w renderowaniu tekstów, oparty na XML format wymiany danych (export/import). Można używać jednego dokumentu SVG dla różnych rozdzielczości, jak powiedzmy dla ekranu w komputerze i w telefonie. Jest wprost idealny do tworzenia map, planów pomieszczeń, wykresów, schematów, szkiców inżynierskich, wzorów chemicznych, znaków firmowych, a nawet dość złożonych rysunków. Można go znaleźć zarówno w aplikacjach CAD, Google maps jak i aplikacjach naukowych. Jest w Adobe Illustratorze, Photoshopie, Corelu, Inkscapie, Sketchu, Amayi. Powiedzmy też, że można do tego formatu zrzucić własnym sumptem zrobione wykresy funkcji, wykonane programem obliczenia, nawet tak skomplikowane jak dla rozmaitości Calabi Yau i to powinno wystarczyć za jakąkolwiek dalszą rekomendację (np. takie jak w pierwszej części).

Zasadniczo SVG jest supportowany we współczesnych przeglądarkach, a także w IE8+ orazs Androidzie 2.4+. Jeśli przeglądarka nie supportuje kodu SVG, to zastępuje go plik PNG. Można to zauważyć przeglądając zasoby graficzne Wikipedii, która jest przygotowana na takie ewentualności i ma wbudowany konwerter na format PNG.

Jest wiele sposobów odwoływania się do dokumentów SVG ze stron HTML. Na przykład możemy zanurzać je bezpośrednio w stronie za pomocą znacznika <svg>...</svg>. Alternatywnie można użyć znaczników <embed>, <object>, a nawet zwykłego <img>. Można otoczyć linkiem miniaturkę obrazka w formacie JPG lub PNG, by po kliknięciu w niego otworzył się samodzielny dokument SVG. Wreszcie można przekonwertować SVG do danych w formacie Base64. Jest to jeden ze sposobów umieszczania obrazków w stronach WWW, które są wtedy reprezentowane przez blok tekstu jak w starożytnym pocztowym MIME type. Wyglądać to może tak:

<object type="image/svg+xml" data="data:image/svg+xml;base64,[data] ">
...litery i cyfry bez spacji i innych dzikich znaków...
</object>

Tu można zobaczyć przykład tego fenomenu: http://jsfiddle.net/Lsr4s/ Jeśli w tego rodzaju kodowaniu dostrzeżemy znaki inne niż wspomniałem, to najprawdopodobniej ktoś próbuje jakiegoś exploita, choć współcześnie ma szansę tylko z wyjątkowo buracką konfiguracją i programami wystruganymi z rzodkiewki.

Pamiętajmy, że bawimy się z grafiką 2D. Chociaż SVG nie posiada explicite z-indeksu (czyli głębi, warstw), można za takowy uznać kolejność elementów umieszczonych w dokumencie. Zmieniając kolejność elementów w SVG wpływamy na to, co wyświetla się w stronie HTML, czyli można w ten sposób dokonywać prostych animacji, albo sztuczek udających przestrzeń.

SVG zawiera wiele predefiniowanych elementów (znaczników), z którym możemy korzystać bezpośrednio. Wśród nich są: odcinki prostych <line>, prostokąty <rect>, okręgi <circ>, elipsy <ellipse>, łuki, kwadratowe i kubiczne krzywe Beziera <path>, wielokąty <polygon>, łamane <polyline> itd. W zasadzie za pomocą elementu <path> można tworzyć wszystkie dowolnie złożone kształty 2D, gdyż jest on niebywale elastyczny. Później zobaczymy w jaki skuteczny sposób koduje się w nim informację o obrysach. Z kolei gradienty, czyli cieniowania i kolorowania wewnątrz obrysów, można tworzyć poprzez umieszczenie elementu <defs> przed narysowaniem kształtu lub użyciem <path>. Wtedy elegancko "ustawia się" najbardziej pożądany styl dla dalszych elementów. W celu jeszcze bardziej precyzyjnego powiązania, w elemencie <defs> można użyć elementu <pattern> (wzorzec kolorowania), <clipPath> (czyli ścieżka przycinania), albo <mask> (ścieżka maskowania), lub też <linearGradient>, <radialGradient>. Te dwa ostatnie mają jeszcze wewnątrz elementy <stop>. Są one bardzo łatwe do użycia w każdym elemencie za pomocą odpowiedniej składni. Wrócę do tego w przykładach na końcu cyklu.

SVG pozwala używać różne efekty transformujące obrazek lub jego fragmenty, jak przesunięcie, obrót, skalowanie i skrzywienie. Za ich pomocą można tworzyć proste efekty animacji, z tym, że takie sprawy są znacznie prostsze do zrobienia z użyciem JavaScriptu z CSS, albo dedykowanych bibliotek. Chodzi tu głównie o reakcje fragmentów obrazka SVG na zdarzenia związane z myszką, czyli najechanie kursorem nad element, kliknięcie, przeciągnięcie itp. Transformacje umieścić można w dowolnym elemencie jako parametr, np.: transform="translate(2.5 11.0) rotate(10 20 100) scale(0.25 2) skewX(10)". Jeśli ktoś bawił się kiedyś jakimś programem do tworzenia grafiki za pomocą kodowania, jak powiedzmy POV RAY, to będzie wiedział o co chodzi.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN" "http://www.w3.org/TR/2000/CR-S...">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<!-- sekcja optionalna -->
<defs>
    <!-- definicje -->
</defs>
<g id="grupa1">
    <!— elementy w tej grupie -->
</g>
<!-- dalej moga być kolejne grupy, nawet zagnieżdżone -->
<g id="grupa2">
    <!-- i jeszcze jedna -->
    <g>
        <!-- elementy -->
    </g>
</g>
</svg>

Pierwszymi liniami nie należy się specjalnie przejmować, gdyż to są tylko deklaracje. To co ważne zaczyna się od znacznika <svg>. Elementy <g> oznaczają grupy, które można zagnieżdżać i, jak nazwa wskazuje, służą do grupowania innych elementów oraz grup w celu np. zastosowania do wszystkich jednakowych gradientów lub transformacji. Traktujmy je po prostu jako kontenery na elementy składowe obrazka.

Początek układu współrzędnych w SVG jest lewy górny róg prostokątnej przestrzeni, w której tworzymy obraz. A oto pierwsze przykłady użycia elementów SVG:

  1. Zielone koło o środku (cx,cy) i promieniu r: <circle cx="250" cy="50" r="5" fill="green" />
  2. Odcinek od punktu (x1,y1) do (x2,y2) narysowany niebieską kreską o grubości 4: <line x1="20" y1="20" x2="100" y2="150" stroke="blue" stroke-width="4" /
  3. Kreskę można w dowolny sposób podzielić na odcinki za pomocą parametru stroke-dasharray="8 2 4 2", w celu otrzymania linii przerywanej. Jest to wzorzec, który będzie się powtarzał - kreski długości 8 i 4 oddalone o 2. Jeśli chcemy ten wzorzec rozpoczynać gdzieś w środku, to możemy użyć parametru stroke-dashoffset="6".
  4. Prostokąt o bokach 200 i 50 zaczepiony lewym górnym rogiem w punkcie (x,y), z czarnym obramowaniem grubości 4 i czerwonym wypełnieniem: <rect width="200" height="50" x="20" y="50" fill="red" stroke="black" stroke-width="4"/>
  5. Możemy też zaokrąglić rogi prostokąta używając parametrów rx i ry.
  6. Najbardziej elastyczny element path: <path d="M300,100 l100,0 l50,50 l-50,50 l-100,0 l-50,-50 z" fill="yellow" stroke="red" stroke-width="4"/>

Teraz trzeba to dokładniej wytłumaczyć. Kiedyś w szkole średniej (a nawet podstawowej) uczono tzw. grafiki żółwia np. w języku programowania Logo. Tu mamy bardzo podobny przypadek, choć z większą liczbą słów kluczowych i operacji. Parametr d="M300,100 l100,0 l50,50 l-50,50 l-100,0 l-50,-50 z" zawiera serię dziwnych kodów, które będą opisywać przebieg naszej krzywej. Przed wszystkim zwróćmy uwagę na początkowe "M300,100". Każe ono ustawić początek rysowania w punkcie (300,100). Dalej znajduje się kod "l100,0", który rysuje prosty odcinek (oznaczenie "l" oznacza odcinek, a mała litera oznacza parametry względne). Podobnie "l50,50" kreśli odcinek do punktu (400,100) itd. Literka "z" na końcu każe dorysować odcinek pomiędzy ostatnim i pierwszym punktem, czyli zamknąć ścieżkę w obrys. Dodatkowe parametry mówią, że linie będą koloru czerwonego o grubości 4, zaś wypełnienie kształtu koloru żółtego.

Może dodam jeszcze więcej o tych tajemniczych literkach w parametrze "d", bo to też jest warte uwagi. Literka "l" jest to podana w ścieżce jako najprostszy przykład. Możliwe jest użycie innych znaczników: c - kubiczne krzywe Beziera, s - to takie uproszczone c, q - kwadratowe krzywe Beziera, t - to znowu uproszczone q, v - linia pozioma, h - linia pionowa, a (arc = łuk wycinka elipsy). Każda z nich wymaga innej liczby parametrów, np. v i h jednego, krzywe Beziera w zależności od typu ("c dx1 dy1, dx2 dy2, dx dy", "s dx2 dy2, dx dy", "q dx1 dy1, dx dy"), zaś dla a specjalny zestaw ("a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy", czyli promienie elipsy, jak obrócić elipsę, arc i sweep przyjmują wartości 0 i 1, bo trzeba wybrać z dwóch możliwości, którą część elipsy bierzemy, nad czy pod linią cięcia). Trzeba zwracać uwagę na wielkość liter, bo duże litery oznaczają współrzędne bezwzględne, czyli liczone względem początku układu współrzędnych (okna), zaś małe są wartościami względnymi (względem ostatnio postawionego punktu). Dlatego parametr po małym el "l" oznacza przesunięcie, zaś po dużym "L" współrzędne punktu docelowego. Znacznik zamknięcia ścieżki "z" może być pisany też dużą literą "Z". Jeszcze raz dla łatwiejszego zapamiętania:

    M = moveto
    L = lineto
    H = horizontal lineto
    V = vertical lineto
    C = curveto
    S = smooth curveto
    Q = quadratic Bézier curve
    T = smooth quadratic Bézier curveto
    A = elliptical Arc
    Z = closepath

Jeśli ktoś z czytelników kiedyś przez przypadek interesował się starym systemem operacyjnym DOS albo 16-bitowym formatem pliku wykonywalnego (EXE), to wie, że te literki "M" i "Z" nie są tu "przypadkowe". To są w DOS-ie oznaczenia bloków pamięci pośrednich oraz ostatniego, a w nagłówku pliku sygnatura "MZ" na początku, zaś ogólnie jako inicjały pewnego znanego informatyka z wczesnej ery komputeryzacji. Zapewne da się jeszcze wygooglować jego pełne nazwisko w jakiejś encyklopedii pecetologii. :)

Co to jest krzywa Beziera? Z matematycznego punktu widzenia są to wizualne realizacje wielomianów Bernsteina, jednej z szeregu ważnych rodzin wielomianów, jak powiedzmy wielomiany Bernoulliego, Czebyszewa, Legendre’a lub Laguerre’a. Pojawiają się one w niezliczonej liczbie zagadnień, od aproksymacji, przez równania różniczkowe, po zagadnienia własne dla operatorów. Nie ważne. Zamiast kopać się ze wzorami, najlepiej popatrzeć na animacje w Wikipedii, a wszystko z miejsca stanie się jasne. Czy widać już jak się wszystko gładko ślizga po prowadnicach?

No właśnie o to tu chodzi ;)

Oto użyteczny przykład pokazujący element <path> złożony z krzywych Beziera i prowadnice (czerwone):

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
<style>
path {
    stroke:black;
    fill:transparent;
}
line {
    stroke:red;
}
</style>
  <path d="M 10 10 C 20 20, 40 20, 50 10" />
  <line x1=10 y1=10 x2=20 y2=20 />
  <line x1=50 y1=10 x2=40 y2=20 />
 
  <path d="M 70 10 C 70 20, 120 20, 120 10" />
  <line x1=70 y1=10 x2=70 y2=20 />
  <line x1=120 y1=10 x2=120 y2=20 />
 
  <path d="M 130 10 C 120 20, 180 20, 170 10" />
  <line x1=130 y1=10 x2=120 y2=20 />
  <line x1=170 y1=10 x2=180 y2=20 />
 
  <path d="M 10 60 C 20 80, 40 80, 50 60" />
  <line x1=10 y1=60 x2=20 y2=80 />
  <line x1=50 y1=60 x2=40 y2=80 />
 
  <path d="M 70 60 C 70 80, 110 80, 110 60" />
  <line x1=70 y1=60 x2=70 y2=80 />
  <line x1=110 y1=60 x2=110 y2=80 />
 
  <path d="M 130 60 C 120 80, 180 80, 170 60" />
  <line x1=130 y1=60 x2=120 y2=80 />
  <line x1=170 y1=60 x2=180 y2=80 />
 
  <path d="M 10 110 C 20 140, 40 140, 50 110" />
  <line x1=10 y1=110 x2=20 y2=140 />
  <line x1=50 y1=110 x2=40 y2=140 />
 
  <path d="M 70 110 C 70 140, 110 140, 110 110" />
  <line x1=70 y1=110 x2=70 y2=140 />
  <line x1=110 y1=110 x2=110 y2=140 />
 
  <path d="M 130 110 C 120 140, 180 140, 170 110" />
  <line x1=130 y1=110 x2=120 y2=140 />
  <line x1=170 y1=110 x2=180 y2=140 />

</svg>

Kolejne możliwe elementy, które z braku miejsca omówię tylko w przypadku, gdy się o nie potknę, to <polygon>, <polyline>, i ta cała reszta. Proszę niecierpliwych o sięgnięcie do dokumentacji.

Wreszcie dotarliśmy do tekstów. Mamy tu element <text> oraz wewnątrz niego jeden lub całą serię elementów <tspan>. Najprostszy tekst musi mieć współrzędne początku i ewentualnie kolor. Z tekstem można robić też różne inne rzeczy. Dodanie parametru style="..." da nam możliwość zmiany wyglądu czcionki, zaś parametr transform="..." pozwoli nam go powiedzmy obrócić: <text x="50" y="20" fill="blue" style="direction: rtl; unicode-bidi: bidi-override; fill:#0000C0;" transform="rotate(10 20,0)">Test</text>. To coś po fill, to jest HTML-owy sposób kodowania koloru szesnastkowo w systemie RGB. Możemy też zmieniać style za pomocą klas, tak samo jak w CSS. Wtedy przed użyciem elementów <text> możemy wstawić element <style> i zdefiniować tam parę stylów na zaś.

<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
    .ita { font: italic 12px sans-serif; }
    .bld { font: bold 12px sans-serif; }
    .reds { font: italic 30px serif; fill: red; }
</style>

<text x="10" y="20" class="ita">POchylony</text>
<text x="30" y="25" class="bld">POgrubiony</text>
<text x="50" y="30" class="reds">Niechybnie czerwony</text>
</svg>

Parametr viewBox w elemencie <svg> służy głównie do określenia wielkości obrazka i nie należy się nim zbytnio przejmować. Nie musimy też przejmować się konwenansami, bo teksty można formatować także bezpośrednio w elemencie <text> za pomocą dodatkowych parametrów. Mają one nazwy bardzo podobne lub nawet identyczne jak w HTML i CSS, np. font-size, font-family, albo wewnętrzny styl style="...". tylko jedno warto zapamiętać, że w SVG nie używa się typowego dla HTML+CSS parametru color, lecz fill:

<text x="20" y="150"
  font-size="24" font-family="serif"
  style="font-family: impact, georgia, times, serif; font-weight: normal; font-style: italic"
  fill="blue" stroke="black" stroke-width="2">
    Coś strasznego!
</text>

Aby nie wprowadzać zbyt wielu niepotrzebnych elementów <text>, a jednocześnie zachować możliwość transformowania go jako całości i osobnego definiowania stylów dla jego fragmentów, wprowadzono element <tspan>. Czyli są to po prostu fragmenty tekstu wyjściowego trochę inaczej wypozycjonowane i/lub sformatowane:

<text x="10" y="25" font-size="12">
  <tspan x="10" dy="20" font-family="serif" fill="grey">Pierwszy</tspan>
  <tspan x="10" dy="20" font-family="cursive">Drugi</tspan>
</text>

Może nie jest to najdoskonalszy przykład, ale sugeruje, że można też teksty nakładać na siebie, robiąc coś w rodzaju cienia albo ozdobnej obwódki. Wszystko jest dopuszczalne. Bardziej przydatny przykład formatowania tekstu pokazuje jak za pomocą poznanych środków utworzyć indeksy dolne (sub) lub górne (super):

<text x="10" y="25" font-size="20">
  <tspan>e = mc
    <tspan baseline-shift="super">2</tspan>
  </tspan>
  <tspan x="10" y="60">X
    <tspan baseline-shift="sub">i+2</tspan>
    =X
    <tspan baseline-shift="sub">i</tspan>
    + X
    <tspan baseline-shift="sub">i+1</tspan>
  </tspan>
</text>

Dochodzimy wreszcie do gradientów i filtrów. Ale to już w części trzeciej.

Uwaga! Przykłady z tekstami mogą nie wyświetlać się poprawnie. Sytuacja z tego rodzaju formatami jest obecnie bardzo dynamiczna, gdyż nie wszystkie przeglądarki zaimplementowały pełen zestaw znaczników SVG, a jeśli nawet, to nie ze wszystkimi ich możliwościami opisywanymi w dokumentacji. Nawet w przypadku podanych wyżej bardzo prostych przykładów są one odmiennie wyświetlane ze względu na przeglądarkę. Dlatego przy wykorzystywaniu tej technologii trzeba bardzo uważać i testować własny kod możliwie często i zawsze na jak największej liczbie browserów (z uwzględnieniem ich wersji). Być może za jakiś czas sytuacja się ustabilizuje, a wspólnie przyjęty przez producentów standard będzie dysponował oczekiwaną przez użytkowników siłą wyrazu oraz elastycznością. Kto wie. Może też być tak, że format SVG odejdzie do lamusa, zastąpiony przez jakiś poręczniejszy język, ale to jest najmniej prawdopodobna sytuacja.

"We accept the reality of the world in which we are presented. It's as simple as that."

Życzę czytelnikom mojego bloga Wszystkiego Najlepszego w Nowym Roku 2019!

YouTube: 
Forum jest miejscem wymiany opinii użytkowników, myśli, informacji, komentarzy, nawiązywania kontaktów i rodzenia się inicjatyw. Dlatego eliminowane będą wszelkie wpisy wielokrotne, zawierające wulgarne słowa i wyrażenia, groźby karalne, obrzucanie się obelgami, obrażanie forumowiczów, członków redakcji i innych osób. Bezwzględnie będziemy zwalczali trollowanie, wszczynanie awantur i prowokowanie. Jeśli czyjaś opinia nie została dopuszczona, to znaczy, że zaliczona została do jednej z wymienionych kategorii. Jednocześnie podkreślamy, iż rozumiemy, że nasze środowisko chce mieć miejsce odreagowywania wielu lat poniżania i ciągłej nagonki na nas przez obóz "miłości", ale nie upoważnia to do stosowania wulgarnego języka. Dopuszczalna jest natomiast nawet najostrzejsza krytyka, ale bez wycieczek osobistych.

Komentarze

Obrazek użytkownika admin

31-12-2018 [19:36] - admin | Link:

Wszystkiego Najlepszego Imć Waszeciu! Zbyt trudny temat jak na Sylwestra :)

Obrazek użytkownika Imć Waszeć

31-12-2018 [21:28] - Imć Waszeć | Link:

Wszystkiego Najlepszego Nasz Drogi Adminie.

Temat faktycznie jest trochę skomplikowany i miałem już go porzucić w wakacje, ale w końcu zdecydowałem się na publikację, bo zwrot "cz. 1" w tytule ział jakąś straszną niekonsekwencją. Główną przyczyną wstrzymania publikacji były ogromne problemy z kompatybilnością (niektóre wspomniane przykłady trzeba robić pod konkretną przeglądarkę, a inne już pominięte w ogóle w części przeglądarek nie pracują), a także mnogość możliwych (lub częściej niemożliwych) opcji. Część trzecią też mam rozgrzebaną i opracowaną w jakichś 30% i nie wiem nawet czy uda mi się to kiedykolwiek skończyć :). Miała w założeniu dotyczyć połączenia opisanych technik w celu publikacji znacznie bardziej skomplikowanych wzorów, tabel, rysunków oraz schematów w celu systemowej prezentacji treści matematycznych na stronach WWW. Jak dotąd udało mi się rozgrzebać kod skryptu MathJaxa, zrozumieć główną ideę działania (prototypowanie, callbacki), znaleźć miejsca "wrażliwe", gdzie można byłoby zrobić jakiś modding. Nawet funkcje są obiektami w Javascript, do których można dynamicznie dodawać nowe właściwości. Mi chodziło "tylko" o dodanie takiego kawałka kodu, który wraz z poprawionymi typowymi matematycznymi wzorami (realizującymi lepsze skalowanie, pozycjonowanie, obracanie, kolorowanie itp.) byłby w stanie dodatkowo dostarczyć na stronę także nowe funkcje do strukturalizowania wzorów (bloki), formatowania tych bloków i wstawiania obrazów zbudowanych np. z krzywych Beziera. Temacik nie w kij dmuchał, ale co to dla harcerza. Właściwy poziom wyzwania można sobie uświadomić po obejrzeniu np. takiej pracy:

http://www.fuw.edu.pl/~kosteck...

Widać wyraźnie regularności, które aż proszą się, żeby je objąć wzorami, czyli konstrukcjami pewnego języka. Istnieje możliwość, że do końca życia się z tym wyrobię, a jak nie, to zapiszę spadkobiercom w testamencie :))). W każdym razie jeden taki spadkobierca dumnie studiuje właśnie informatykę i zrobił taaakie oczy, że ktoś - prócz kosmitów ufoludków - na świecie się takimi rzeczami zajmuje. Naszym młodym wydaje się, że takie rzeczy to nie w Polsce. Może gdzieś w Amerykach, ale nie tu. Efekt domina w pedagogice wstydu. Nie naciskałem, bo go w sumie rozumiem. W planach Unii mamy dawać tanią siłę roboczą gospodarce niemieckiej.

Potem zająłem się czymś jeszcze innym i właśnie kończę jeden tekst. Myślę, że będzie dużo ciekawsze. :]. Dlaczego tak długo to trwa? Choćby napisanie dobrej krytyki dla teorii mnogości to niezła magisterka. A jak ktoś potrafi, to niech zrobi to szybciej ;). Przykładowo, co mówi nagminne w ZFC wyrażenie {x:P(x)} albo {x,y,z,...}? Wreszcie skąd tam te zbiory liczb wymiernych i rzeczywistych, skoro to ewidentnie zaawansowane struktury algebraiczne i relacyjne? Coś się kiedyś komuś pozajączkowało i tak trwa :)))
Rok 2019 ma być podobno ogłoszony Rokiem Matematyki, więc będzie jak znalazł.

Pozdrawiam.

Obrazek użytkownika Imć Waszeć

31-12-2018 [21:39] - Imć Waszeć | Link:

PS: Jaskrawy dowód na to, że problem realnie istnieje jest na tym oto blogu :)
https://picturethismaths.wordp...

Senat ustanowił rok 2019 Rokiem Matematyki: http://naukawpolsce.pap.pl/akt...

"Senat Rzeczypospolitej Polskiej, w uznaniu zasług polskich matematyków dla światowej nauki, upamiętniając niezwykły rozwój matematyki polskiej, jaki nastąpił po odzyskaniu przez Polskę niepodległości, a także podkreślając rolę tej dziedziny nauki w rozwoju polskiego społeczeństwa, ustanawia rok 2019 Rokiem Matematyki" - głosi uchwała.
2 kwietnia 1919 r. w gmachu Collegium Nowodworskiego Uniwersytetu Jagiellońskiego 16 osób – m.in. Stefan Banach, Leon Chwistek, Antoni Hoborski, Franciszek Leja, Otto Nikodym, Alfred Rosenblatt, Jan Śleszyński, Antoni Wilk, Stanisław Zaremba i Kazimierz Żorawski – założyło Towarzystwo Matematyczne w Krakowie, przekształcone później w Polskie Towarzystwo Matematyczne.

Obrazek użytkownika Ptr

01-01-2019 [21:10] - Ptr | Link:

Nie tylko Pan lubi takie rzeczy. Ostatnio lubię pomyśleć nad wizualizacją w 3D funkcji zespolonej G ( x,y,z.t) opisanej równaniem Laplasjan G = - i c dG/dt   c=const . G byłoby gestością zespoloną czegoś w 3D.Pozdrawiam

Obrazek użytkownika Imć Waszeć

01-01-2019 [23:28] - Imć Waszeć | Link:

Jest znany sposób (albo raczej cała rodzina sposobów) wizualizacji dla funkcji zespolonych. Trzeba pamiętać, że jest to funkcja z przestrzeni (rozmaitości) dwuwymiarowej w przestrzeń (rozmaitość) dwuwymiarową, czyli jej wykres będzie powierzchnią dwuwymiarową w przestrzeni czterowymiarowej. Nie będzie to jednak dowolny wykres, gdyż z jednej strony jego możliwy kształt ogranicza równanie ∂f/∂ž=0 (ž to sprzężenie, inaczej zapisane równania Cauchy-Riemanna), czyli warunek różniczkowalności zespolonej, a z drugiej właśnie ta geometria błony mydlanej w 4D. Przykładowo funkcja g:ℝ→ ℝ³ ma wykres, który jest linią w czterech wymiarach, zaś funkcję h:ℝ³→ ℝ można rozumieć jako "pokolorowanie" liczbami rzeczywistymi punktów przestrzeni 3-wymiarowej, czyli wykres h jest taką mapą warstwicową wymiaru 3 w wymiarze 4.

Wspomniana metoda nazywa się "domain coloring": https://en.wikipedia.org/wiki/...
Tu jest przykładowy kod programu do kolorowania: https://www.codeproject.com/Ar...

PS: Nie "czegoś" tylko "przepływu ciepła", a jakby laplasjan był równy drugiej pochodnej po czasie, to "fali" ;)

Obrazek użytkownika Ptr

02-01-2019 [14:26] - Ptr | Link:

Z jakimś zadowoleniem przyjąłem Pana odpowiedź. Chyba dlatego ,że zaskoczyła mnie merytorycznością. ( Jeżeli wzięlibyśmy porównanie alpinistyczne , to ja siedzę w obozie pod szczytami i je sobie oglądam, a Pan śmiga dla porannego roztruchtu po pomniejszych sześciotysięcznikach :).
Też zastanawialem się nad zastosowaniem barw, ale pierwszy pomysł jest taki, aby mieć widok z dowolnej perspektywy w 3D i symulowanym czasie na wartość modulu G (x,y,z,t) symbolizowaną przez gęstość punktów w przestrzeni. Program musiałby zagęszczać wyświetlanie punktów zgodnie z kwardatem modulu G. Wartość urojona G  musiałaby być wizualizowana na innym wykresie lub  jako barwy, ale trudno powiedzieć , czy miałoby to sens, czy wizualnie coś by pokazywało.
Ciekawe z tym przepływem ciepła. Ale tam czynnik urojony nie występuje. Co mógłby fizycznie symulować taki czynnik w przepływie ciepła ? 
Laplasjan po x,y,z. 
 
 

Obrazek użytkownika Imć Waszeć

03-01-2019 [14:04] - Imć Waszeć | Link:

Dlatego właśnie wziąłem wyraz "ciepło" w uszy. Jeżeli ten czynnik jest zawsze tylko czysto urojony (postaci ix) i nigdzie nie wystąpi w kwadracie, to tak, jakby był rzeczywisty, gdyż żadne inne moce tu nie działają. To jest tylko obrócenie układu współrzędnych. Podobnie jest wtedy, gdy taki współczynnik biega sobie po jakiejś mniej lub bardziej wygiętej linii w C, która nie ma samoprzecięć. To z kolei jest przejście do pewnego układu krzywoliniowego. Oczywiście nie jest to fizyczne ciepło, ale coś zachowujące się w pewnym aspekcie podobnie z matematycznego punktu widzenia. Natomiast problem pojawia się, gdy ten czynnik zaczyna zachowywać się jak wielkość dwuwymiarowa (prawdziwie zespolona). W takim przypadku ja najczęściej zaczynam myśleć o prześledzeniu właściwości takiego równania różniczkowego w jakiejś zakręconej przestrzeni funkcyjnej lub od razu w przestrzeni dystrybucji. Każde bowiem równanie różniczkowe Df=0, to jest działanie jakiegoś operatora różniczkowego, czyli liniowego na pewnej przestrzeni funkcji lub dystrybucji, którego własności ściśle zależą od cech wybranej przestrzeni. Na przykład przestrzenie Sobolewa: https://en.wikipedia.org/wiki/...
Ewentualnie Bochnera, Biesowa lub Triebela-Lizorkina, a w każdym razie takimi, które zajmują się funkcjami holomorficznymi albo harmonicznymi (one są ze sobą związane). Funkcje harmoniczne związane są też z rozwiązaniem równania Laplace'a, czyli takiego zagadnienia jednorodnego dla powyższego problemu (z zerem po prawej): http://www.math.uni.wroc.pl/~b...
Tu jest doktorat z PW na podobny temat: http://www.mini.pw.edu.pl/~pka...
Myślę, że to tylko początek tej krętej drogi, czyli przyda się na wstępie sposób widzenia równania różniczkowego jako działania operatora: https://en.wikipedia.org/wiki/... plus jakaś dobra praca o dystrybucjach: http://wms.mat.agh.edu.pl/~vla...
Dlaczego ciągle wtrącam te dystrybucje? Bowiem równania cząstkowe mają taką paskudną własność, że ich rozwiązania nie muszą być funkcjami nawet w bardzo prostych przypadkach.

Na całe szczęście poruszamy się po znanym gruncie, czyli w dziedzinach przemiennych i łącznych ;) Mogło być bowiem znacznie gorzej i problem obejmowałby uogólnienie laplasjanów na przestrzenie nad kwaternionami lub oktonionami. Skąd pomysł na kwaterniony? Ano z tego samego źródła, co pomysł na zespolone ciepło. Zaś oktoniony to już zakazany teren teorii strun ;))) Lubię sobie czasem poczytać o takich zakręconych rowerach przed snem:

1. Laplasjan i kwaterniony: https://arxiv.org/pdf/math/010...
2. Tu jest wspomniane uogólnienie na oktoniony: https://file.scirp.org/pdf/APM...

Na razie gdybam i fruwam w czystym kosmosie, ale jak trafię na coś konkretnego w sprawie pierwotnego problemu, to napiszę. Pozdrawiam :)

Obrazek użytkownika Imć Waszeć

04-01-2019 [09:22] - Imć Waszeć | Link:

PS: Jakby co, to zauważyłem, że podane równanie różni się o tę jednostkę urojoną od równania Schrodingera dla rotatora sztywnego, ale coś jest na rzeczy.
https://depot.ceon.pl/bitstrea...

Addendum: Do jutra będę chyba coś miał. O ile zachowam obecne tempo ;)
Na uwagę zasługuje hasło "Heat kernel signature": https://en.wikipedia.org/wiki/...
Poniżej w rozdziale "Relation with other methods" jest powiązanie HKS z WKS, czyli z "Wave kernel signature", wtedy gdy zamienimy równanie dyfuzji ciepła przez równanie Schrodingera. Jest tam zespolona funkcja falowa. Czyli miałem nosa, że to jest blisko związane.
Nie wiem jeszcze czy to ma związek z tematem, ale w grafice komputerowej rozważa się kolorowanie części siatek na podstawie Laplasjanów określonych na grafach. Przechodzenie do granicy w ciągach takich grafowych Laplasjanów pozwala wyliczać je dla zbiorów samopodobnych i fraktali. Przykład pracy z tej dziedziny: https://cse291-i.github.io/Lec...
Podobno służy to do automatycznego rozpoznawania 3-wymiarowych brył.
Tu jest z kolei praca doktorska o Laplasjanie na dywanie Sierpińskiego (fraktalu): http://pi.math.cornell.edu/fil...

Addendum 2: W tej pracy oba tematy są ze sobą powiązane. Czyli heat/wave kernel signature z zagadnieniem clusteringu siatek (mesh) dla obiektów 3D. Proszę porównać obrazki z obu prac: https://arxiv.org/pdf/1110.501...

Obrazek użytkownika Ptr

05-01-2019 [20:59] - Ptr | Link:

Najpierw musze to  przejrzeć, ale rzeczywiście równanie jest wersją równania Schroedingera przy wyzerowanej energii.
Taki ogólny wniosek dla tych , którzy myśla ,że świat składa się z różnych kamyków. Makroskopowe są nieco wieksze , a mikroskopowe są takimi samymi kamykami tylko malutkimi. Te duże i malutkie można opisać kilkoma prostymi liczbami rzeczywistymi.Ponadto te kamyki maja ważną cechę z punktu widzenia światopoglądowego - istniały, istnieja i będą istnieć. Mogą być postrzegane jako zjawisko pierwotne, bardziej podstawowe niż Życie na planecie Ziemia. W tym sensie my jestesmy tylko bardziej zaawansowana konfiguracją kamyków i pewnych ich oddziaływań. 
Ale nie jest prawdą , że materia jest zbudowana z małych kamyczków, cegiełek , punków materialnych. Materia jest zbudowana z czystej informacji egzystującej realnie w wirtualnych wymiarach. 

Obrazek użytkownika Zunrin

03-01-2019 [16:05] - Zunrin | Link:

A ja z trochę innej beczki niż inni komentujący. W Internetach siedzę od ponad 20 lat. O SVG słyszałem. Bo mam taką manię, że o różnych dziwnych ciekawostkach lubię wiedzieć. Tylko że ostatnio cokolwiek w tym czymś widziałem daaaawno temu. A w sumie szkoda, bo to jeden z tych formatów, który teoretycznie jest dość przydatny.

Obrazek użytkownika Imć Waszeć

03-01-2019 [16:25] - Imć Waszeć | Link:

Zanim SVG pojawił się w przeglądarkach, to funkcjonowały podobne języki w różnych programach graficznych. Nie mówię tu o Pythonie w Blenderze, ale np. o systemie do programowania scen 3D, jakim jest POV-Ray. Zupełnie inną dziedziną było pisanie filtrów i efektów np. dla Photoshopa. W każdym razie wyglądało to tak, że brało się jakieś SDK i biblioteki i pisało pod to program. No ale to już już inny poziom trudności lub raczej wyobraźni. Oto mała próbka możliwości POV-Ray-a: http://hof.povray.org/
Jest to naprawdę niezły system. Polecam.

http://www.povray.org/

Obrazek użytkownika paparazzi

16-01-2019 [17:57] - paparazzi | Link:

Czy można z panem się skontaktować przez e-mail. Pozdrawiam.

Obrazek użytkownika Imć Waszeć

20-01-2019 [14:49] - Imć Waszeć | Link:

Oczywiście, proszę wysłać adres kontaktowy na pocztę wewnętrzną NB.

PS: Chyba już nie ma poczty wewnętrznej. No to tutaj.