P5.js to GCODE: canvas drawing calls

Hello all,

i would like to write a library that translates p5’s drawing calls of shape primitives and text to GCODE for plotters. Is there maybe a simpler way to hook p5’s drawing calls than extending p5.Renderer2D.js?

I already had a look at p5.js-svg in order to get an idea. There’s also a code snipped how to hook calls to the canvas in Javascript. Unfortunately i don’t get it to work in the p5 editor (https://editor.p5js.org/emnullfuenf/sketches/QBCIlYsdq).

The goal of the library would be printing to the Line-us ploter like in my Processing/Geomerative version:

Any help or ideas would be appreciated.

I got the canvas logger script working. It maybe could to do the job when used like Processing’s PDF Export library. Otherwise it slows down the sketch.

I’ll keep this post updated.

1 Like

@emnullfuenf any updates on this ? This interest me and maybe I could implement this as my bachelor thesis. I was thinking to use p5.js-svg library and then trying to converting the svg output to gcode using some borrowed code from the JsCut library (https://github.com/tbfleming/jscut ). I tried the JsCut and it does translate the svg to gcode. So the goal would be to find in which part of the JsCut code the transformation from svg to gcode happens, once we find that, we could wrap this functionality on a p5js extension or library. Also ideally would be awesome if the serial communication would happen as well through javascript. So the final result for the end user would be : Connect the plotter -> run some p5js code -> convert it to an svg -> convert the svg to gcode -> send the gcode to the plotter.

Do you have any thoughts on this? Do you think there could be a simpler approach?

I tried the exact approaches with p5.js-svg and JsCut. Unfortunately you would have to rewrite the code.

My current approach via canvas surprisingly works quite well. Here’s an example that exports the outlines to SVG:

I’ve got another version that exports GCODE for EleksDraw.

I’ll create a plugin that can be used similar to Processing’s PDF/SVG. But there are a lot of details to be defined, like plotter settings, typography and naming. In the meantime this sketch should work.

1 Like

I checked ! Thanks a lot for sharing it works great. As we have the same goal, would you like to meet via Zoom/ google hangouts so we could discuss what it needs to be done? and maybe start an open source github repo with issues so other developers that share our goal can also help. I mean you have already done a lot.

Sorry. I just read your message.
Sure. Let’s write that thing together.

1 Like

Sorry. I just read your messag too. Contact me via email felipe.infantino@hotmail.com or create a github repo and invite me @felipeinfantino . Im currently implementing a p5 js gcode generator in react.js so the interface can be more easily styled. Right now it is very basic but the fundamental part is there. Contact me and let’s set up a Zoom meeting and lets discuss together.

1 Like

Hi guys do you have any update of your ideas?
It would be great to have opportunity to try your code.
Process of exporting SVG and than using Ink Scape has no flow, it would be great to have straight way from P5js to Gcode.