Learning Three.js

or WebGL for Dummies

Particles: Online Editor for Sparks.js

This post is the second of our serie on particles. It presents sparkseditor , an online editor for sparks.js with three.js. In a few word, it is a webpage which provide an text editor with a sparks.js effect. You got the code in the editor and you see live the resulting particles effect. I like this live aspect a lot :) I think it makes your design more direct, lower latency, less overhead. More creative in a way. Try it out.

This editor has been made to lower the barrier of entry on sparks.js with three.js particles. The UI is rather simple and obvious. You can find a small presentation in the screencast below.

Live editor rocks

Sparkseditor is widely inpired by glsl editor from mrdoob and shadertoy from Inigo Quilez. On the same vibe, lea verou recently released dablet, an online editor for css. There is a clear trend here… What is it about those live editors ? A live editor produces a result immediatly. This helps design your effect faster. Be light on your foot kindof style. Very agile way to design.

Additionally, it is easy to share with others because we have bookmarkability. We do that by storing state in url. On the down side, it makes super long+ugly urls… url shortening helps us reduces this issue. In our case, we use bitly service.

This editor is purely static files. No specific server to run, no need to admin and no risk to go offline. Oh and by the way i dont not even have to pay for hosting this application. I think it shows html5 in all its power. The web is becoming something real nice :) html5 i love you!

conclusion

Under the hood, sparkseditor uses threex.sparks.js, a threex helper, to make sparks.js even easier to use. This helper will be the subject of a future post of our particles series.

The source is open-source under MIT. You can get it in its git repository. If you hit bugs, fill issues on github. Feel free to fork and modify it! That’s all folks, have fun :)

Comments