[obelisk.js] demo - Line

HTML

<script src="//nosir.github.io/obelisk.js/dist/obelisk.min.1.2.1.js"></script>
<canvas id="canvas-demo" width="400" height="400"></canvas>

CSS

#canvas-demo {
    background-color: #eee;
}

JavaScript

// get DOM or jQuery element
// like: $('#canvas-demo')
var canvas = document.getElementById('canvas-demo');

// create pixel view container in point
var point = new obelisk.Point(200, 200);
var pixelView = new obelisk.PixelView(canvas, point);

// create lines
var colorX = new obelisk.LineColor(obelisk.ColorPattern.PINK);
var colorY = new obelisk.LineColor(obelisk.ColorPattern.BLACK);
var colorZ = new obelisk.LineColor(obelisk.ColorPattern.BLUE);

var dimensionX = new obelisk.LineXDimension(340);
var dimensionY = new obelisk.LineYDimension(140);
var dimensionZ = new obelisk.LineZDimension(100);

var lineX = new obelisk.LineX(dimensionX, colorX);
var lineY = new obelisk.LineY(dimensionY, colorY);
var lineZ = new obelisk.LineZ(dimensionZ, colorZ);

// render in view
var p3D = new obelisk.Point3D(0, 0, 0);
pixelView.renderObject(lineX, p3D);
pixelView.renderObject(lineY, p3D);
pixelView.renderObject(lineZ, p3D);