Najprostszy pakiet do animacji internetowej z Haskellem

Question

Uczę się Haskella i chciałbym stworzyć projekt dla dzieci, aby się z nim bawić. Postępuję z modelem i komponentami kontrolera, ale mam problemy z widokiem. Chciałbym renderować animacje internetowe (które rozpoznają kliknięcia myszą, przesuwają obiekty itp.). Przyjrzałem się różnym pakietom (Spock, Reflex itp.) Wydaje się, że jest ich zbyt wiele, ale znalazłem że albo wymagają więcej wysiłku (ponieważ są to RFP, co wymagałoby ode mnie najpierw poznania tych pojęć), albo wydają się proste (jak Spock), ale potem nie mogę znaleźć prostego samouczka animacji internetowej (tylko "Hello World".)

Czy ktoś może polecić proste podejście? Ponownie, chciałbym tylko szybki i łatwy sposób renderowania rzeczy. Skupiam się na nauce podstaw Haskella, a nie programowania stron internetowych.

Answer 1

Podejście, które zadziałało dla mnie, to użycie Reflex do renderowania SVG. Reflex sprawia, że ​​renderowanie obiektów DOM na stronę WWW jest dość łatwe i reagowanie na kliknięcia myszą na te obiekty. Użycie SVG (zamiast płótna) umożliwia dostęp do renderowanych obiektów po początkowym wyświetleniu, zarówno w celu wyboru i edycji (zmiana rozmiaru, przenoszenie, zmiana koloru, usuwanie).

Oto trzy przykłady "pierwsze kroki", które używają refleksu/svg. Każda z nich zawiera działającą wersję demonstracyjną (powiązaną z plikiem readme).

Render circles in locations determined by the circle-packing package

Interactive knight's tour animation.

Rotating 3D cube

Biorąc pod uwagę, że te przykłady są oparte odruch, wszystkie one są napisane przy użyciu styl kodowania FRP ale starałem się zminimalizować część każdego z tych programów, które specyficznie używa technik FRP.

Na przykład obręcz rycerska i obracanie kostki mają blok rekursywny zawierający tylko wywołania do obejrzenia i aktualizację. W obu przypadkach, to blok kodu pozwala na informacje zwrotne od celu akumulacji zmian stanu (update foldDyn)

obracaniu przykład kostki:

rec 
    view modelOrientation 
    modelOrientation <- foldDyn update initialOrientation tick 

Od przykład wycieczki rycerskiej:

rec 
    startEvent <- view width height rowCount colCount board tour 
    tour <- foldDyn (update board) [] $ leftmost [startEvent, advanceEvent] 

Najłatwiejszy sposób na rozpoczęcie odruchu polega na sklonowaniu reflex-platform github repository i uruchomieniu skryptu try-refleksu zawartego w tym repozytorium - dokładnie tak, jak podano w readme dla platformy Reflex

Przykład wypełnienia kołowego wymaga circle-packing package. Obracający się przykład kostki 3D wymaga matrix package. Aby umożliwić korzystanie z tych pakietów, umieść je w packages.nix na platformie reflex przed uruchomieniem try-reflex - ponownie, zgodnie z opisem w readme platformy reflex.