Implement as build step

[danielpost]

Would it be hard/possible to convert this to a command line script that could be run in Node? I'd like to use it as a build step in Gulp/Webpack to create SVG placeholders.

I'd like to help if possible, but not sure where to start.

[ondras]

Well, this app is <canvas>-based, so a node canvas implementation would be totally necessary. I've heard that some modules can do that, but I have zero personal experience.

Also, rendering a realistic image takes a lot of time (more than you want in your buildstep), so you should limit the output to only 10 or so triangles.

[danielpost]

@ondras I wouldn't be worried about the time (I'd use it in a static site and cache the generated images).

I wonder if there's a workaround using a node canvas without other dependencies.

[ondras]

I wonder if there's a workaround using a node canvas without other dependencies.

The canonical canvas package seems to have quite some deps: https://www.npmjs.com/package/canvas

[worc]

it's definitely do-able. the node-canvas package is a pain in the ass with the cairo dependency, but other than that, you can pretty freely pass it around in server-side code as a canvas node like you would client-side.

i'm cruising through the primitive-js code, and i'm having a hard time seeing where you could make that swap cleanly. the source is geared pretty heavily toward a web output instead of a canvas output. but, it certainly looks possible.

[ondras]

Note: I have not looked at the code for more than a year now.

But: I believe that there is actually very little browser-specific code, mostly for the UI used to configure the whole operation. In particular, these files are relevant:

• shape.js defines various shapes and has no problematic dependencies. It uses a trivial subset of the DOM API for createElement and setAttribute calls;
• canvas.js uses the mentioned HTML Canvas API;
• optimizer.js contains most of the algorithm, heavily uses Promises and the Console API (usable in nodejs as well). This file might be rewritten using async/await to dramatically improve its readability;
• state.js is a data-only structure;
• step.js is a small abstraction layer with no problematic dependencies;
• util.js is a library of (mostly mathematical) functions.

Remaining files are only necessary for the configuration UI. I strongly believe that porting to nodejs shall be straightforward once the Canvas stuff is fixed.