---
title: Wireframe technique
---

<p>
    Creating a wireframe and using expansion may save you a lot of work. We will demonstrate by creating a wireframe of a truss:
</p>

{% highlight javascript %}
//create a simple truss

var m = require('makerjs');

function trussWireframe(w, h) {

  this.models = {
    frame: new m.models.ConnectTheDots(true, [ [0, h], [w, 0], [0, 0] ])
  };

  var angled = this.models.frame.paths.ShapeLine1;

  var bracepoints = [
    [0, 0],
    m.point.middle(angled, 1/3),
    [w/2 , 0],
    m.point.middle(angled, 2/3)
  ];

  this.models.brace = new m.models.ConnectTheDots(false, bracepoints);
}

var truss = new trussWireframe(200, 50);

var svg = m.exporter.toSVG(truss);

document.write(svg);
{% endhighlight %}

<script>
    LiveDoc.evalLastCode();
</script>

<p>
    Next we will expand the paths:
</p>

{% highlight javascript %}
//expand a truss wireframe

var m = require('makerjs');

function trussWireframe(w, h) {

  this.models = {
    frame: new m.models.ConnectTheDots(true, [ [0, h], [w, 0], [0, 0] ])
  };

  var angled = this.models.frame.paths.ShapeLine1;

  var bracepoints = [
    [0, 0],
    m.point.middle(angled, 1/3),
    [w/2 , 0],
    m.point.middle(angled, 2/3)
  ];

  this.models.brace = new m.models.ConnectTheDots(false, bracepoints);
}

var truss = new trussWireframe(200, 50);
var expansion = m.model.expandPaths(truss, 3, 1);

var svg = m.exporter.toSVG(expansion);

document.write(svg);
{% endhighlight %}

<script>
    LiveDoc.evalLastCode();
</script>