isometric

for engraving on cnc

by tom burns

HTML

<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.draggable.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.clock.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.import.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.filter.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.export.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.easing.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.shapes.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.topath.js"></script>
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.parser.js"></script>
<div id="container">
<div id="drawing"
  style="width:600px; height: 600px; backgroundColor:white"
></div>
</div>

CSS

html, body, #drawing {
    margin: 0;
}

#container {
  backgroundColor: black;
  width: 600px;
  height: 600px;
  border: 1;
}

JavaScript

// ISOMETRIC



/* create an svg drawing */
var draw = SVG('drawing')

var points=[]
var parts = 20
var height = 300
var width = 400
var yscale = 30

for (var x = 0; x < parts; x++) {
  points.push([])
  for (var z = 0; z < parts; z++) {
    points[x].push(-1 * Math.sin((((5-Math.abs(5-x))*(5-Math.abs(5-z)))*Math.PI/60)))
  }
}
draw.rect(1000,1000)

function finalX(x, z) {
  var fX = (width/2) - (((width/2)/parts)*x);
  fX += (((width/2)/parts) * z);
  return fX
}

function finalY(x, z) {
  var fY = (height) - ((height/2)/parts)*(x+z) + (yscale * points[x][z])
    return fY
}

var lines = []

for (var x = 0; x < parts; x++) {
  var line = [];
  for (var z = 0; z < parts; z++) {
    line.push([finalX(x, z), finalY(x, z)])
  }
  lines.push(line);
}

for (var z = 0; z < parts; z++) {
  var line = [];
  for (var x = 0; x < parts; x++) {
    line.push([finalX(x, z), finalY(x, z)])
  }
  lines.push(line);
}

for (var i = 0; i < lines.length; i++) {
  draw.polyline(lines[i]).fill('none').stroke({ width: 1, color: 'white' })
}