Some examples in Elm

The original JavaScript is at These are some translations from the p5js JavaScript:

hello p5 flocking

hello p5 drawing (click and drag)

structure redraw (click the mouse)

structure recursion

structure functions

form structure coordinates

form points and lines

form shape primitives

form triangle strip

drawing continuous lines

interaction follow 1

interaction follow 2

interaction follow 3

color hue

hello p5 interactivity (slider)

(Ellie gets a 10 out of 10. Brilliant.)


Should this be something added to ?

1 Like

Yeah, this collection is definitely something that we should add. I’m just not sure in what context. For now I’ve added it to the future topics list. Thanks.

These collections use joakin/elm-canvas. I would rather ask joakin if they could add them to the of the package. And then I would include a page about joakin/elm-canvas to the book.

I’m happy to take a PR to the readme, at the bottom in the examples header, that adds a link to the first post here (or an equivalent page) :ok_hand:

Very cool examples!

1 Like

That’s great to hear.

@recombinant, if that’s fine for you, I would create the PR and link it to this page.

@joakin Is there a talk/video or a good article about elm-canvas that I can link to? (For the page in the book)
If not, I might need some help to collect the basic functions of the package.

@Lucas_Payr “All code posted to Ellie is public, licensed MIT.” The links are there, do as you want. Be aware that the examples were translated quickly to demo Elm to a friend and have had no proper review.


1 Like

Another example (with some comments copied too). Click on the canvas to reset the balls.

simulate forces

this was translated from

I found it amusing when I changed the liquid to fill the center third of the canvas. The physics works well.