Belated 4th July Fireworks Demo using P5 Pack

We have just released our new PROCESSING.org Pack that allows coders to easily create graphics, videos, 3d objects, sound inside their Coda documents using the amazing P5.js extension to the Javascript language.

7 Likes

It is never too late for fireworks :blush:! Oh my, your p5 pack sounds wildly intriguing! I’ll be staying tuned for all the creative ways you’ll end up using it :tada:!

Very pretty ! What else could we use P5 in coda for @Xyzor_Max ?

@Harry_Roper ,

this is the first of a series of packs i am working on that i call “WIDGETS”.

a regular coda pack runs on the coda server, so it has no access to the users display, mouse, or keyboard. and it cannot do anything with html, css or javascript.

these “WIDGETS” on the other hand, run on the client-side, inside your browser, right on the coda page. they can display html & css elements, they can get inputs from the keyboard, they can track mouse movements and clicks - they are essentially little web apps running in their own iframe.

and by using the webhook trigger mechanism, they can exchange data with your coda workflow (in a safe way).

over the next few days i will post a few examples of the USEFUL things it can do like…

create widgets for inputting passwords, multi-line text-boxes, vertical sliders, sound players, animated buttons, signature capture, etc etc.

the type of javascript involved is way simpler and easier than the typescript needed to build conventional coda packs.

my ultimate motivation is to be able to build “explainables”, gizmos that help to display data in an interactive way - like they use in Brilliant, students at The Coder Dojo use coda to build notebooks containing p5.js runnable graphics code blocks as they learn to program, just like you do with Jupyter Python Notebooks

watch this space

3 Likes

Here is another WIDGET type Coda Pack that plays sounds and audio-files Audio Pack Plugin

1 Like

I have added a new twist to the FIREWORKS demo.
You can click anywhere on the graphics canvas to create a firework explosion at that point.
It will also store the clicked position in the X and Y control-values in the document
Just to demo how the WIDGET can detect mouse clicks & pass data back to the document.

Max

1 Like

Oh my, this is even better! Serves as a wonderful way to drive home the point that capturing the mouse inputs will reveal an avalanche of possibilties! Thank you for always sharing your findings and passion with the community (and for never exploring new possible ways of pushing Coda further!)

just added sound effects when you click the screen via our new AUDIO widget

1 Like