Deprecated!

I now recommend canvas-hpgl alongside canvas-polyline which matches the HTML Canvas API and produces HPGL.

d3-hpgl

D3-hpgl is a adaptor with the same API as d3-path which outputs HPGL which is used with pen plotters and other equipment.

Say you have some code that draws to a 2D canvas:

function drawCircle(context, radius) {
  context.moveTo(radius, 0);
  context.arc(0, 0, radius, 0, 2 * Math.PI);
}

The d3-hpgl module lets you take this exact code and additionally render to HPGL. It works by serializing CanvasPathMethods calls to HPGL.

Please note, since HPGL doesn't directly support beziers, they are implemented as a series of lineTo commands using adaptive-bezier-curve.

See also d3-multi-context for rendering to multiple contexts.

So far I've only tested the output HPGL with my plotter which is a Roland DPX-3300. Please let me know if you have problems or success with other plotters.

var context = d3.hpgl();
drawCircle(context, 40);
console.log(context.toString()));

Now code you write once can be used with any HPGL compatible device along with both Canvas (for performance) and SVG (for convenience). For a practical example of shapes you can create, see d3-shape.

See (and try plotting) the example.hpgl and example.svg for reference.

Installing

If you use NPM, npm install d3-hpgl. Otherwise, download the latest release. AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

var path = d3.hpgl();
path.moveTo(1, 2);
path.lineTo(3, 4);
path.closePath();

Coordinate System

The plotting coordinate system is same as for Canvas. This means positive x goes right and positive y goes down. The actual HPGL which is output is reversed so if you read the HPGL which is output the Y axis coordinates and degree output for arcs will be inverted. You shouldn't need to think about this unless you're debugging the HPGL output.

API Reference

# d3.hpgl() <>

Constructs a new path serializer that implements CanvasPathMethods.

# hpgl.moveTo(x, y) <>

Move to the specified point ⟨x, y⟩. context.moveTo and SVG’s “moveto” command.

# hpgl.closePath() <>

Ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. Equivalent to context.closePath and SVG’s “closepath” command.

# hpgl.lineTo(x, y) <>

Draws a straight line from the current point to the specified point ⟨x, y⟩. Equivalent to context.lineTo and SVG’s “lineto” command.

# hpgl.quadraticCurveTo(cpx, cpy, x, y) <>

Draws a quadratic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control point ⟨cpx, cpy⟩. Equivalent to context.quadraticCurveTo and SVG’s quadratic Bézier curve commands.

# hpgl.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y) <>

Draws a cubic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control points ⟨cpx1, cpy1⟩ and ⟨cpx2, cpy2⟩. Equivalent to context.bezierCurveTo and SVG’s cubic Bézier curve commands.

# hpgl.arcTo(x1, y1, x2, y2, radius) <>

Draws a circular arc segment with the specified radius that starts tangent to the line between the current point and the specified point ⟨x1, y1⟩ and ends tangent to the line between the specified points ⟨x1, y1⟩ and ⟨x2, y2⟩. If the first tangent point is not equal to the current point, a straight line is drawn between the current point and the first tangent point. Equivalent to context.arcTo and uses SVG’s elliptical arc curve commands.

# hpgl.arc(x, y, radius, startAngle, endAngle[, anticlockwise]) <>

Draws a circular arc segment with the specified center ⟨x, y⟩, radius, startAngle and endAngle. If anticlockwise is true, the arc is drawn in the anticlockwise direction; otherwise, it is drawn in the clockwise direction. If the current point is not equal to the starting point of the arc, a straight line is drawn from the current point to the start of the arc. Equivalent to context.arc and uses SVG’s elliptical arc curve commands.

# hpgl.rect(x, y, w, h) <>

Creates a new subpath containing just the four points ⟨x, y⟩, ⟨x + w, y⟩, ⟨x + w, y + h⟩, ⟨x, y + h⟩, with those four points connected by straight lines, and then marks the subpath as closed. Equivalent to context.rect and uses SVG’s “lineto” commands.

# hpgl.toString() <>

Returns the string representation of this path in HPGL.

Contributors

• Julian Burgess
• Brittany Harris