# Some p5js.org examples in Elm

**URL:** <https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781>\
**Category:** Show and Tell\
**Created:** [June 10, 2019, 6:27pm UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781 "2019-06-10T18:27:49Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![recombinant](https://avatars.discourse-cdn.com/v4/letter/r/8491ac/32.png) [@recombinant](https://discourse.elm-lang.org/u/recombinant)\
**Post date:** [June 10, 2019, 6:27pm UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/1 "2019-06-10T18:27:49Z")

</div>

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

hello p5 flocking  
[https://ellie-app.com/5MDfgjjF6rWa1](https://ellie-app.com/5MDfgjjF6rWa1)

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

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

structure recursion  
[https://ellie-app.com/5MDMzTYtnR8a1](https://ellie-app.com/5MDMzTYtnR8a1)

structure functions  
[https://ellie-app.com/5MDTbfvTyzWa1](https://ellie-app.com/5MDTbfvTyzWa1)

form structure coordinates  
[https://ellie-app.com/5MDBn2SmHbfa1](https://ellie-app.com/5MDBn2SmHbfa1)

form points and lines  
[https://ellie-app.com/5MDyQ8gPTtWa1](https://ellie-app.com/5MDyQ8gPTtWa1)

form shape primitives  
[https://ellie-app.com/5MDzxM4jN4ca1](https://ellie-app.com/5MDzxM4jN4ca1)

form triangle strip  
[https://ellie-app.com/5MDV6S3B9Wba1](https://ellie-app.com/5MDV6S3B9Wba1)

drawing continuous lines  
[https://ellie-app.com/5KQNZ3JTSSza1](https://ellie-app.com/5KQNZ3JTSSza1)

interaction follow 1  
[https://ellie-app.com/5KQTSsSnTr4a1](https://ellie-app.com/5KQTSsSnTr4a1)

interaction follow 2  
[https://ellie-app.com/5KQWsPywTS9a1](https://ellie-app.com/5KQWsPywTS9a1)

interaction follow 3  
[https://ellie-app.com/5KQXycfvk6pa1](https://ellie-app.com/5KQXycfvk6pa1)

color hue  
[https://ellie-app.com/5KQZKbKF5Rma1](https://ellie-app.com/5KQZKbKF5Rma1)

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

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

---

<div class="post-metadata">

**Author:** ![wolfadex](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/wolfadex/32/2461_2.png) [@wolfadex](https://discourse.elm-lang.org/u/wolfadex)\
**Post date:** [June 10, 2019, 9:05pm UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/2 "2019-06-10T21:05:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [June 11, 2019, 4:31am UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/3 "2019-06-11T04:31:45Z")

</div>

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](https://package.elm-lang.org/packages/joakin/elm-canvas/latest/). 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.

---

<div class="post-metadata">

**Author:** ![joakin](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/joakin/32/171_2.png) [@joakin](https://discourse.elm-lang.org/u/joakin)\
**Post date:** [June 11, 2019, 6:22am UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/4 "2019-06-11T06:22:24Z")

</div>

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) 👌

Very cool examples!

---

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [June 11, 2019, 7:50am UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/5 "2019-06-11T07:50:02Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![recombinant](https://avatars.discourse-cdn.com/v4/letter/r/8491ac/32.png) [@recombinant](https://discourse.elm-lang.org/u/recombinant)\
**Post date:** [June 11, 2019, 9:23am UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/6 "2019-06-11T09:23:20Z")

</div>

@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](http://p5js.org) examples were translated quickly to demo Elm to a friend and have had no proper review.

.

---

<div class="post-metadata">

**Author:** ![recombinant](https://avatars.discourse-cdn.com/v4/letter/r/8491ac/32.png) [@recombinant](https://discourse.elm-lang.org/u/recombinant)\
**Post date:** [June 11, 2019, 7:10pm UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/7 "2019-06-11T19:10:30Z")

</div>

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

simulate forces  
[https://ellie-app.com/5N6XgFp7kYZa1](https://ellie-app.com/5N6XgFp7kYZa1)

this was translated from  
[https://p5js.org/examples/simulate-forces.html](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.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [June 21, 2019, 7:10pm UTC](https://discourse.elm-lang.org/t/some-p5js-org-examples-in-elm/3781/8 "2019-06-21T19:10:31Z")

</div>

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