Some p5js.org examples in Elm

Show and Tell
1

The original JavaScript is at https://p5js.org/examples/. These are some translations from the p5js JavaScript:

hello p5 flocking
https://ellie-app.com/5MDfgjjF6rWa1

hello p5 drawing (click and drag)
https://ellie-app.com/5Lp6V4FQwSKa1

structure redraw (click the mouse)
https://ellie-app.com/5MDLQjZMkTta1

structure recursion
https://ellie-app.com/5MDMzTYtnR8a1

structure functions
https://ellie-app.com/5MDTbfvTyzWa1

form structure coordinates
https://ellie-app.com/5MDBn2SmHbfa1

form points and lines
https://ellie-app.com/5MDyQ8gPTtWa1

form shape primitives
https://ellie-app.com/5MDzxM4jN4ca1

form triangle strip
https://ellie-app.com/5MDV6S3B9Wba1

drawing continuous lines
https://ellie-app.com/5KQNZ3JTSSza1

interaction follow 1
https://ellie-app.com/5KQTSsSnTr4a1

interaction follow 2
https://ellie-app.com/5KQWsPywTS9a1

interaction follow 3
https://ellie-app.com/5KQXycfvk6pa1

color hue
https://ellie-app.com/5KQZKbKF5Rma1

hello p5 interactivity (slider)
https://ellie-app.com/5MDJwRxr6K9a1

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

12 Likes
2

Should this be something added to https://orasund.gitbook.io/elm-cookbook/ ?

1 Like
3

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.

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

4

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
5

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.

6

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

.

1 Like
7

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

simulate forces
https://ellie-app.com/5N6XgFp7kYZa1

this was translated from
https://p5js.org/examples/simulate-forces.html

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

8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.