8

I'm learning Haskell and would like to develop a baby project to play with it. I'm progressing with the model and controller components but am having a hard time with the view. I'd like to render web-based animations (which recognize mouse clicks, moves objects, etc.) Have looked at various packages (Spock, Reflex, etc.) There seems to be [too?] many of them, but I found that they either require more effort (because they are RFP, which would require me to first learn those concepts) or seem simple (such as Spock) but then I can't find a simple web animation tutorial (just a "Hello World".)

Can anybody recommend a simple approach? Again, I would just like a quick and easy way to render stuff. My focus is on learning the Haskell basics, not web programming.

Daniel
  • 3,220
  • 2
  • 17
  • 38
  • I would love to know a great answer for this... – Libby Aug 16 '16 at 09:52
  • @Libby then how about up-voting the question? :) it may then attract more attention. – Daniel Aug 16 '16 at 09:55
  • done :) Thinking more about this question, the answer is probably Elm -- even though Elm isn't Haskell, it's close enough that you can learn a lot from it and it's basically made to be used the way you're talking about. – Libby Aug 16 '16 at 10:47

1 Answers1

3

The approach that has worked for me is to use Reflex to render SVG . Reflex makes it fairly easy to render DOM objects to a web page and respond to mouse clicks on those objects. Using SVG ( instead of canvas ) allows for access to the rendered objects after the initial display, both for selection and for editing (resizing, moving, changing color, deletion).

Here are three "getting started" examples that use reflex/svg. Each of these includes a working demo ( linked to in the readme file ).

Render circles in locations determined by the circle-packing package

Interactive knight's tour animation.

Rotating 3D cube

Given that these examples are reflex based, they all are written using an FRP coding style but I tried to minimize the portion of each of these programs that specifically uses FRP techniques.

For example, the knight's tour and rotating cube both have a recursive-do block of code containing only calls to view, and update. In both cases, this block of code enables the feedback from view to accumulation of state changes ( foldDyn update )

From rotating cube example:

rec
    view modelOrientation
    modelOrientation <- foldDyn update initialOrientation tick

From knight's tour example:

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

The easiest way that I have found to get started with reflex is by cloning the reflex-platform github repository and running the try-reflex script contained in that repository - exactly as specified on the readme for reflex-platform

The circle-packing example requires the circle-packing package . The rotating 3d cube example requires the matrix package. To enable the use of these packages, include them in packages.nix in reflex-platform before running try-reflex - again, as specified on the reflex-platform readme.

Dave Compton
  • 1,369
  • 1
  • 10
  • 18
  • Thanks. Again, the problem with Reflex is that I would need to get into Functional Reactive Programming, learning concepts like arrowizing, etc. It is something I will want to do, but right now I feel it would be a distraction from practicing and learning Haskell itself. – Daniel Aug 17 '16 at 02:20
  • 1
    I see. It almost seems like, by definition, a functional program that reacts to the passage of time (animation) and reacts to user input (mouse clicks, etc) would be functional reactive programming. Even if a package is not explicitly labeled as "FRP", if it enables the things you want, it would come pretty close to being FRP in principle, if not in name. – Dave Compton Aug 17 '16 at 03:05
  • Would it be possible to give a more specific example of a web animation that you want to implement? – Dave Compton Aug 17 '16 at 03:12
  • 2
    Maybe a baby project to play with Haskell types and functions: clicking on the screen creates either circles or pegs (depending on whether we held down the control key.) Then we could connect the pegs and the balls with "rubber bands". Once we clicked on a "go!" button the rubber bands would contract the balls and accelerate them. When the rubber bands stretched enough in the opposite direction they would contract again. So the whole System starts moving until it reaches a resting state. I think that's a very simple yet useful tutorial that can then be used for more realistic applications. – Daniel Aug 17 '16 at 03:16