---
title: Basic modeling
---

<p>
    Given the fundamental models and ability to move instances of them, we can now start modeling. 
    Here are a few examples to illustrate how you might use these:
</p>

<p>House:</p>

{% highlight javascript %}
//render a simple house using ConnectTheDots and Square

var makerjs = require('makerjs');

var points = [
  [100, 0], [100, 100], [0, 175], [-100, 100], [-100, 0],
  [-20, 0], [-20, 80], [20, 80], [20, 0]
];

var house = new makerjs.models.ConnectTheDots(true, points);

var window1 = new makerjs.models.Square(40);
window1.origin = [40, 40];

var window2 = new makerjs.models.Square(40);
window2.origin = [-80, 40];

var houseWithWindows = {
  models: { "myHouse": house, "window1": window1, "window2": window2 }
};

var svg = makerjs.exporter.toSVG(houseWithWindows);

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

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

<p>Tablet mount:</p>

{% highlight javascript %}
//render a tablet frame using BoltRectangle and RoundRectangle

var makerjs = require('makerjs');

var outer = new makerjs.models.RoundRectangle(200, 280, 8);

var inner = new makerjs.models.RoundRectangle(160, 230, 8);
inner.origin = [20, 30];

var buttonhole = new makerjs.paths.Circle([100, 15], 8);

var bolts = new makerjs.models.BoltRectangle(180, 260, 2);
bolts.origin = [10, 10];

var tabletFaceMount = {
  paths: { buttonhole: buttonhole },
  models: { inner: inner, outer: outer, bolts: bolts }
};

var svg = makerjs.exporter.toSVG(tabletFaceMount);

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

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

<p>Circular adapter plate:</p>

{% highlight javascript %}
//render an adapter using Ring and BoltCircle

var makerjs = require('makerjs');

var model = {
  models: {
    ring1: new makerjs.models.Ring(40, 100),
    bc1: new makerjs.models.BoltCircle(90, 4, 10),
    bc2: new makerjs.models.BoltCircle(55, 7, 6, 30)
  }
};

var svg = makerjs.exporter.toSVG(model);

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

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

<p>Skateboard deck:</p>

{% highlight javascript %}
//render a skateboard deck using BoltRectangle and Oval

var makerjs = require('makerjs');

function truckBolts() {
  var tx = 1 + 5/8;
  var ty = 1 + 1/8;
  var bolts = new makerjs.models.BoltRectangle(tx, ty, 7/32 / 2);
  bolts.origin = [tx / -2, ty / -2];

  this.models = [bolts];
}

function deck(width, length, truckOffset) {

  var board = new makerjs.models.Oval(length, width);
  board.origin = [0, width / -2];

  var truck1 = new truckBolts();
  truck1.origin = [truckOffset, 0];

  var truck2 = new truckBolts();
  truck2.origin = [length - truckOffset, 0];

  this.models = { board: board, truck1: truck1, truck2: truck2 };
}

var svg = makerjs.exporter.toSVG(new deck(8, 32, 7));

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

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