P5.js export to SVG

nemecsek69 · April 2018

I'm back to Processing after some time, now playing with p5.js to write a Sankey library. After fiddling with the diagram (I can drag around the nodes to read better the graph) I would like to export the image to SVG.

Giving a look around I am very confused about this "save as SVG". In Processing (Java) I was used to insert beginRecord()...endRecord() and it was done. With p5.js it doesn't look this is possible.

I found some libraries in github (i.e. zenozeng/p5.js-svg v0.6.0), an old stackoverflow discussion (https://stackoverflow.com/questions/35681381/p5js-svg-export), an old issue (https://github.com/processing/p5.js/issues/458), lot of examples that I cannot make it work at all.

Is there somewhere an example I can use as a base? Which library (if any) is the most promising? My knowledge of JS if alas very limited and it is well above my skills to go deep into this issue...

Thanks in advance

nemecsek69 · May 2018

I also found this blog that refers to p5.svg.js: https://makeyourownalgorithmicart.blogspot.de/2018/03/creating-svg-with-p5js.html?showComment=1525354208596#c4312630150660284850

nemecsek69 · May 2018

For the ones interested, this is the solution I found. It is suboptimal but enough for my use. Pay attention: if you load fonts, they will be transformed in geometry inside the SVG. This means that the SVG is huge and slow to load and visualize. Standard text font works perfectly.

I create two canvases: one normal, the second is SVG (using Zeno Zeng p5.svg.js at https://github.com/zenozeng/p5.js-svg/tree/master/dist)

SVG lives in a hidden div. When I am happy after playing with the normal canvas, I create the SVG using the latest parameters: of course they need to be global to be shared among the two objects.

<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
<script type="text/javascript" src="https://github.com/zenozeng/p5.js-svg/releases/download/v0.5.2/p5.svg.js"></script>
</head>
<body>

    <script>

        let colors = ["red", "orange", "yellow", "lime", "green", "blue", "fuchsia"];
        let idx = 0;

        let sketch = function (p) {

            p.setup = function () {

                if (p.type === "SVG") {
                    p.createCanvas(400, 400, p.SVG);
                }
                else if (p.type === "NORMAL") {
                    p.createCanvas(400, 400);
                }
                else {
                    alert("don't know which canvas to create")
                }
                p.noLoop();
            };

            p.draw = function () {
                p.background("white");
                p.fill(colors[idx]);
                p.stroke("black");
                p.strokeWeight(3);
                p.ellipse(200, 200, 200,200);

                p.fill("black");
                p.noStroke();

                p.textStyle(p.NORMAL);
                p.text("test", 100, 100);

                p.textStyle(p.BOLD);
                p.text("bold", 200, 200);

                waiting = false;
            };

            p.mousePressed = function() {
                if (p.dist(p.mouseX, p.mouseY, 200,200) < 100) {
                    idx++;
                    idx %= colors.length;
                    p.redraw();
                }
            };

            p.save_canvas = function() {
                p.draw();  // <--- redraw using latest parameters
                p.save();
            }
        };

        cvs = new p5(sketch, "my_image");
        cvs.type = "NORMAL";

        svg = new p5(sketch, "hidden_div");
        svg.type = "SVG";
    </script>

    <div id="my_image"></div>
    <div id="hidden_div" style="display:none"></div>

    <button onclick="svg.save_canvas()">Save SVG</button>

</body>
</html>

Howdy, Stranger!

Categories

In this Discussion

P5.js export to SVG

Comments