[obelisk.js] demo - Pyramid

HTML

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

CSS

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

JavaScript

var canvas = document.getElementById('canvas-demo');

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

// create brick
var colorBrick = new obelisk.SideColor().getByInnerColor(obelisk.ColorPattern.GRAY);
var dimension = new obelisk.BrickDimension(250, 300);
var brick = new obelisk.Brick(dimension, colorBrick);
//// render brick in view
pixelView.renderObject(brick);
pixelView.renderObject(new obelisk.Brick(dimension, colorBrick););


// create slope color instance
var color = new obelisk.SlopeColor().getByHorizontalColor(obelisk.ColorPattern.GRAY);

// create slope dimension instance
var dimensionNorth = new obelisk.SlopeDimension(50, 40);
var dimensionEast = new obelisk.SlopeDimension(40, 50);
var dimensionSouth = new obelisk.SlopeDimension(50, 40);
var dimensionWest = new obelisk.SlopeDimension(40, 50);

// create cube primitive wihtout border
//var slopeNorth = new obelisk.SlopeNorth(dimension, color, false);

// create primitive with border
var slopeNorth = new obelisk.SlopeNorth(dimensionNorth, color);
var slopeEast = new obelisk.SlopeEast(dimensionEast, color);
var slopeSouth = new obelisk.SlopeSouth(dimensionSouth, color);
var slopeWest = new obelisk.SlopeWest(dimensionWest, color);

// render primitive to view
var p3dNorth = new obelisk.Point3D(50, 20, 0);
var p3dEast = new obelisk.Point3D(50, 150, 0);
var p3dSouth = new obelisk.Point3D(50, 85, 0);
var p3dWest = new obelisk.Point3D(50, 225, 0);

pixelView.renderObject(slopeNorth, p3dNorth);
pixelView.renderObject(slopeSouth, p3dSouth);
pixelView.renderObject(slopeEast, p3dEast);
pixelView.renderObject(slopeWest, p3dWest);