In my last post, I showed how you can generate a simple mouse-chasing effect with Elm. That was an accidental side-effect for my true purpose: To demonstrate how to draw triangles in Elm. This post will continue along that journey, demonstrating how to generate rays from a fixed point out to the current mouse location using the standard Elm Architecture.
I won’t be introducing any new concepts here; I’ll simply be layering on a little bit more complexity on top of what we’ve learned in the previous posts.
Signals are a non-obvious concept to grasp at first glance. The Reactivity guide contains good in-depth instruction about how Signals work, but spending a little time playing with them can really help grasp how they work.
We’ll walk through a simple example to generate a snake-line line that follows the mouse. To see what we’re going to build, you can open up the demo here. (Note that this only works with a mouse, not with touch events. Exercise: Extend this example to support touch events using Elm’s Touch module.)
I’ve recently started learning Elm and I’ve been excited to find this to be a very powerful language. I thought I’d share some tips as I learn. This post will be about structuring Elm-defined CSS styles in a way that they can be easily composed together.
My target audience for this post is users new to Elm. If you’re already familiar with Elm or Haskell, this will be pretty trivial, but if you’re new to functional programming, the syntax may confuse you!
To see what we’re going to build, you can open up the demo here.