Introducing the p5.cljs web editor!

p5.js
1

Hi everyone! I’m not sure if this belongs to the gallery topic or here, but since it’s more related to p5js, I’m posting it here.

In the past few days, inspired by the wonderful p5 web editor and my experience with ClojureScript, I created a web editor to write p5 sketches in ClojureScript. Check it out here: https://p5cljs-editor.onrender.com/

If you’re looking to try out a new language, give this a try! The project is open source and is (in my opinion) a great start for first time contributors, since I myself am also fresh in open source.

Looking forward to hearing your thoughts and feedback!

3 Likes
2

Thanks for sharing! I just tinkered with the editor a bit and it’s a very cool project–I think this is the moment I finally learn a Lisp.

Here are a few initial thoughts and questions:

  • The tutorial’s mappings from ClojureScript to JavaScript are very helpful.
  • Consider remixing/adapting a subset of the p5.js Examples, ICM, and NOC
  • It would be helpful to display error messages directly in the editor.
  • Are there any sketches that are especially nice to write in ClojureScript?
  • Do addon libraries such as p5.sound work?
1 Like
3

Thanks for your feedback! I think adapting the examples, NOC and others are a great starting point. I’m currently making my personal sketches available as examples. If anyone would like to port the other examples to ClojureScript, they are welcome to make a PR to the README to list it :grinning:

I’m currently working on making error messages visible.

There are some things that makes it easier to write in ClojureScript. For one, my personal favorite is the threading macro. For a quick example, this:

(-> x
  (* 0.5)
  (+ 2.0)
  (* 100)
  (+ 44)
  (do-some-math)
  (/ 100))

Would be equivalent to this in JavaScript:

(doSomeMath(((x * 0.5) + 2.0) * 100) + 44) / 100)

I like how in CLJS, you see what happens to your value and can reason about processes much more confidently.

There are lots of features still missing in the editor, like onClick events, and p5.sound is not added. These are next on the features list! I’m currently still working on a way to encode the sketch more efficiently in the URL to allow longer sketches to be shared without bumping in to the URL limit.

1 Like