3 ms·

I have recently been looking to try some creative coding / generative art. I've found that most libraries focus on interactive or animated applications, whereas

I have recently been looking to try some creative coding / generative art. I've found that most libraries focus on interactive or animated applications, whereas I would like to generate a static image for print. Are there any recommendations for this specific use case? E.g. maybe svg-based libraries like Paper.js are more appropriate to generate high quality files instead of canvas-based ones like P5.js?

0xdada 4y ago
There are libraries (i.e. https://github.com/zenozeng/p5.js-svg https://github.com/zenozeng/p5.js-svg) that give you a SVG runtime. I find it very useful!
mcphage 4y ago
Another tool for doing this is https://github.com/mattdesl/canvas-sketch https://github.com/mattdesl/canvas-sketch ... for example, check out https://github.com/mattdesl/canvas-sketch/blob/master/examples/pen-plotter-patchwork.js https://github.com/mattdesl/canvas-sketch/blob/master/exampl... from its examples. What you do is, run the script, and then hit Command-S (at least on a mac), and it'll save a screenshot and an SVG into your downloads folder. You can then send the SVG to your plotter however it is you do that. It doesn't require p5.js, but does play nicely with it. And you can use it with Typescript, too—although that's still rough around the edges.
nrjames 4y ago
This is easy to do with p5.js. You create a canvas at whatever size you want to print and draw to that canvas. Each frame, you take an image of the canvas and show it on screen in the browser. Wire up a key to save the full-sized canvas out to a PDF or PNG (or whatever) when you're ready to export for print. It's done very commonly by generative artists. There are several other ways to handle similar issues, too.
rikroots 4y ago
There's links to lots of canvas libraries here: https://github.com/slaylines/canvas-engines-comparison https://github.com/slaylines/canvas-engines-comparison

0xdada 4y ago

There are libraries (i.e. https://github.com/zenozeng/p5.js-svg https://github.com/zenozeng/p5.js-svg) that give you a SVG runtime. I find it very useful!

mcphage 4y ago

Another tool for doing this is https://github.com/mattdesl/canvas-sketch https://github.com/mattdesl/canvas-sketch ... for example, check out https://github.com/mattdesl/canvas-sketch/blob/master/examples/pen-plotter-patchwork.js https://github.com/mattdesl/canvas-sketch/blob/master/exampl... from its examples. What you do is, run the script, and then hit Command-S (at least on a mac), and it'll save a screenshot and an SVG into your downloads folder. You can then send the SVG to your plotter however it is you do that. It doesn't require p5.js, but does play nicely with it. And you can use it with Typescript, too—although that's still rough around the edges.

nrjames 4y ago

This is easy to do with p5.js. You create a canvas at whatever size you want to print and draw to that canvas. Each frame, you take an image of the canvas and show it on screen in the browser. Wire up a key to save the full-sized canvas out to a PDF or PNG (or whatever) when you're ready to export for print. It's done very commonly by generative artists. There are several other ways to handle similar issues, too.

rikroots 4y ago

There's links to lots of canvas libraries here: https://github.com/slaylines/canvas-engines-comparison https://github.com/slaylines/canvas-engines-comparison