# orthogonal

DSL for describing simple vector graphics

## Usage no npm install needed!

``````<script type="module">
import orthogonal from 'https://cdn.skypack.dev/orthogonal';
</script>`````` Orthogonal is a DSL for describing simple vector graphics. It can be used in JavaScript or any compiles-to-JavaScript language. The following examples are written in CoffeeScript.

Here’s “Hello, world” in Orthogonal:

``````orthogonal = require 'orthogonal'

square = (orthogonal.R 2)(orthogonal.D 2)(orthogonal.L 2)(orthogonal.U 2)
``````

Right two, down two, left two, up two. This “draws” a 2×2 square.

It’s possible to extend the global object to make the R, D, L, and U functions (and their lower-case counterparts) easier to reference:

``````require('orthogonal').extend(global)

square = (R 2)(D 2)(L 2)(U 2)
``````

Now for something a bit more advanced: Note: The image above is actually a PNG created from the SVG created from the CoffeeScript source file. (GitHub no longer renders SVGs.)

The source code is in octocat.coffee.

### API

#### orthogonal.{R,D,L,U}(magnitude)

“Draw” a line in the direction determined by the function (e.g. right in the case of orthogonal.R). A filled region can be described by “drawing” several line segments in succession.

#### orthogonal.{r,d,l,u}(magnitude)

Move in the direction determined by the function (e.g. right in the case of orthogonal.r). These functions reposition the “pen”, making it possible to describe multiple filled regions.

#### orthogonal.extend(object)

Attach orthogonal.{R,D,L,U,r,d,l,u} to the provided object. Extending the global object is recommended.

#### orthogonal.bounds([[x0,y0],[x1,y1],...,[xN,yN]])

Determine the bounds — expressed as [left,top,right,bottom] — for the provided array of coordinates.

#### orthogonal.formatters.svg(path, scale = 1)

Get the SVG representation of the provided path.

``````orthogonal.formatters.svg (r 8)(d 8)(R 2)(D 2)
# => 'm 8,8 l 2,0 l 0,2'
``````