How to run Processing headlessly & export your Processing visualization as an .svg with Apache Batik

benelot

Hello everyone!

I am very new to Processing and I am evaluating it for our application. So my main question is if it is possible in any way to use Processing headlessly and export .svgs from a Processing drawing. For the latter I have seen that maybe there exists a bridge to Apache Batik via the basic awt.Graphics2D, but I am hoping that somebody maybe already did this before me and can give me guidance. Thanks!

benelot

Ok. It seems that I could make it work, although a bit hacky. I just replaced the g2 JavaGraphics2D canvas with an Apache Batik SVG generator (which inherits from JavaGraphics2D and is meant to be dropped into any awt compatible drawing method). The replacing however must take place after the beginDrawing() is called, as the beginDrawing() replaces the g2.

import java.awt.Dimension;
import java.io.OutputStreamWriter;
import java.io.UnsupportedEncodingException;
import java.io.Writer;

import org.apache.batik.dom.GenericDOMImplementation;
import org.apache.batik.svggen.SVGGraphics2D;
import org.apache.batik.svggen.SVGGraphics2DIOException;
import org.w3c.dom.DOMImplementation;
import org.w3c.dom.Document;

import processing.awt.PGraphicsJava2D;
import processing.core.*;

public class MyProcessingSketch extends PApplet {

    public static void main(String[] args) {
        PApplet.main(new String[] {"MyProcessingSketch"});
    }

    @ Override
    public void settings() {
    }

    PGraphics pg;

    PGraphicsJava2D pgj;

    SVGGraphics2D svgGenerator;

    @ Override
    public void setup() {

        // Get a DOMImplementation.
        DOMImplementation domImpl =
                GenericDOMImplementation.getDOMImplementation();

        // Create an instance of org.w3c.dom.Document.
        String svgNS = "http://www.w3.org/2000/svg";
        Document document = domImpl.createDocument(svgNS, "svg", null);

        // Create an instance of the SVG Generator.
        svgGenerator = new SVGGraphics2D(document);

        svgGenerator.setSVGCanvasSize(new Dimension(400, 200));
        pg = createGraphics(400, 200, JAVA2D);

        pgj = (PGraphicsJava2D) pg;
    }


    @ Override
    public void draw() {

        pgj.beginDraw();
        pgj.g2 = svgGenerator;
        pgj.background(51);
        pgj.noFill();
        pgj.stroke(255);
        pgj.ellipse(30, 30, 60, 60);
        pgj.endDraw();

        // Finally, stream out SVG to the standard output using
        // UTF-8 encoding.
        boolean useCSS = false; // we want to use CSS style attributes

        try {
            Writer out = new OutputStreamWriter(System.out, "UTF-8");
            svgGenerator.stream(out, useCSS);
        } catch (SVGGraphics2DIOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } catch (UnsupportedEncodingException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
        System.exit(0);
    }
}

Please forgive my usage of Processing. I am very new to it. This code outputs the following on your commandline:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.0//EN'
          'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'>;
<svg fill-opacity="1" xmlns:xlink="http://www.w3.org/1999/xlink" color-rendering="auto" color-interpolation="auto" text-rendering="auto" stroke="black" stroke-linecap="square" width="400" stroke-miterlimit="10" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" height="200" xmlns="http://www.w3.org/2000/svg" font-family="'Dialog'" font-style="normal" stroke-linejoin="miter" font-size="12px" stroke-dashoffset="0" image-rendering="auto"
><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"
  /><g
  ><g fill="rgb(51,51,51)" stroke="rgb(51,51,51)"
    ><rect x="0" width="400" height="200" y="0" stroke="none"
    /></g
    ><g fill="white" stroke="white"
    ><circle fill="none" r="30" cx="30" cy="30"
    /></g
  ></g
></svg
>

Any suggestions on how to improve this? Trim off the edges that I may have overlooked?

benelot

I could turn this into some pretty beautiful examples. Check it out:

Article: http://www.sleepy-robots.org/2017/07/how-to-export-your-processing.html

Git repo: https://github.com/benelot/Processing-2-SVG