Hacker News Reader

Comment by beingflo | Hacker News Reader

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?

View on HN

Another tool for doing this is https://github.com/mattdesl/canvas-sketch ... for example, check out 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.

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

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.

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

Reply on news.ycombinator.com