Простейший пакет для веб-анимации с Haskell

Question

Я изучаю Haskell и хотел бы разработать детский проект, чтобы играть с ним. Я продвигаюсь с моделью и компонентами контроллера, но мне трудно с этим взглядом. Я бы хотел сделать веб-анимацию (которая распознает щелчки мыши, перемещает объекты и т. Д.) Посмотрел на различные пакеты (Spock, Reflex и т. Д.). Кажется, что [слишком?] Многие из них, но я нашел что им требуется больше усилий (потому что они являются RFP, что потребует от меня сначала изучить эти концепции) или кажутся простыми (например, Spock), но затем я не могу найти простой учебник по веб-анимации (просто «Hello World».)

Можно ли рекомендовать простой подход? Опять же, я хотел бы просто быстро и просто сделать материал. Мое внимание сосредоточено на изучении основ Haskell, а не на веб-программировании.

Answer 1

Подход, который сработал для меня, заключается в использовании Reflex для визуализации SVG. Reflex позволяет довольно легко визуализировать объекты DOM на веб-странице и реагировать на щелчки мышью на этих объектах. Использование SVG (вместо холста) позволяет получить доступ к визуализированным объектам после первоначального отображения, как для выбора, так и для редактирования (изменение размера, перемещение, изменение цвета, удаление).

Вот три примера «начала работы», в которых используется reflex/svg. Каждый из них включает рабочую демонстрацию (связанную с файлом readme).

Render circles in locations determined by the circle-packing package

Interactive knight's tour animation.

Rotating 3D cube

Учитывая, что эти примеры рефлекс на основе, все они написаны с использованием стиля кодирования FRP, но я старался свести к минимуму часть каждой из этих программ, в частности, использует методы FRP.

Например, у рыцарского тура и вращающегося куба есть блок рекурсивного выполнения кода, содержащий только вызовы для просмотра и обновления. В обоих случаях, этот блок кода позволяет обратную связь с целью накопления изменений состояния (foldDyn обновление)

Из вращающегося примера куба:

rec 
    view modelOrientation 
    modelOrientation <- foldDyn update initialOrientation tick 

Из примера тур рыцаря:

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

Самый простой способ, который я нашел, чтобы начать с рефлекса, - это клонирование reflex-platform github repository и запуск сценария try-reflex, содержащегося в этом репозитории, точно так же, как указано в readme для рефлекторной платформы

Для примера для упаковки в круг требуется circle-packing package. Для примера вращающегося 3d-куба требуется matrix package. Чтобы включить использование этих пакетов, включите их в packages.nix в reflex-платформу перед запуском try-reflex - снова, как указано в readme.