A really simple editor for generative art in JS
Press shift-space and ^.^
Live code on the left, see the result on the right. Changes apply
onChange or
ctrl/cmd+enter.
You have access to the ctx
for the canvas, that is it. (But of course ctx.canvas
will give you the canvas element itself.)
The bottom text input component is a label for the work of art, used
to store it in localStorage.
Changing it will load whatever is at the label, or save to it if it is
blank (ctrl/cmd+enter will force saving to it).
The color input component live replaces whatever selection you have
in the text area with the chosen hex color of the form
#RRGGBB.
The canvas size is currently fixed to 1500x500. (TODO: make configurable.)
Press on the canvas to advance frames. Shift-click to keep/stop animating, or spacebar. (Shift+spacebar to enter/leave fullscreen as well.)
TODO: upscaling
TODO: make more interactive components.
TODO: autocomplete for names
TODO: proper JS editor???
ffmpeg -framerate 30 -i 'frame%04d.png' -vf scale=844:1500 -c:v libx264 -preset slow -crf 16 -profile:v high -pix_fmt yuv420p out.mp4