<script src="//nosir.github.io/obelisk.js/dist/obelisk.min.1.0.2.js" type="text/javascript"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js" type="text/javascript"></script>

<div class="title">■ built by obelisk.js: <a href="//github.com/nosir/obelisk.js" target="_blank">https://github.com/nosir/obelisk.js</a></div>
<div class="bar">
    <label for="ipt">Enter something here:</label>
    <input id="ipt" value="codepen.io" type="text" placeholder="" maxlength="25">
    <ul id="color-box"></ul>
</div>
<canvas id="canvas-txt" width="200" height="24"></canvas>
<canvas id="canvas-demo" width="1200" height="600" style=""></canvas>

body {
  font-family: 'helvetica', sans-serif;
}

#canvas-txt {
  visibility: hidden;
  position: absolute;
}

#ipt {
  font-family: 'helvetica', sans-serif;
  border-radius: 4px;
  border: 2px solid #dadddf;
  height: 28px;
  font-size: 14px;
  margin: 0 0 0 3px;
  padding: 0 10px;
  background-color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
label {
  font-size: 14px;
  font-weight: bold;
}
.title, .title a {
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 13px;
  color: #AAAAAA;
}
.bar {
  border-top: 1px dotted #BBB;
  padding-top: 10px;
  margin-top: 10px;
}
#color-box {
  display: inline-block;
  vertical-align: top;
  margin: 0;
  padding: 4px 0 0 10px;
}
#color-box li {
  cursor: pointer;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

// control bar
var ControlBar = function () {
    this.size = 10;
    this.height = 24;
};
var con = new ControlBar();
var gui = new dat.GUI();
var conHeight = gui.add(con, 'height', 4, 100).step(1);
var conSize = gui.add(con, 'size', 6, 20).step(2);
conSize.onChange(function () {
    buildPrimitive();
    draw();
});
conHeight.onChange(function () {
    buildPrimitive();
    draw();
});

// color patterns
var colorData = ['#CCFF00', '#FF0099', '#FF7CBF', '#EEEEEE', '#666666'];
var iMax = colorData.length;
var colorHtml = '';

for (var i = 0; i < iMax; i++) {
    colorHtml += '<li style="background-color: ' + colorData[i] + '"></li>';
}
$('#color-box').html(colorHtml);
$('#color-box').find('li').on('click', function () {
    var index = $(this).index();
    color = parseInt(colorData[index].replace('#', '0x'), 16);
    buildPrimitive();
    draw();
});

// input field
var ipt = $('#ipt');
ipt.on('keyup', draw);
ipt.on('click', function () {
    $(this).select();
});

// input off canvas
var offCanvas = $('#canvas-txt').get(0);
var ctx = offCanvas.getContext("2d");
ctx.font = "20px Helvetica,sans-serif";

// pixel view
var canvas = $('#canvas-demo');
var point = new obelisk.Point(150, 30);
var pixelView = new obelisk.PixelView(canvas, point);
var brick;
var cube;
var color = 0xCCFF00;
var threshold = 130;

// build method
function buildPrimitive() {
    // floor
    var colorBrick = new obelisk.SideColor(0xAAAAAA, 0xEEEEEE);
    var dimensionBrick = new obelisk.BrickDimension(con.size, con.size);
    brick = new obelisk.Brick(dimensionBrick, colorBrick);

    // cube
    var colorCube = new obelisk.CubeColor().getByHorizontalColor(color);
    var dimensionCube = new obelisk.CubeDimension(con.size, con.size, con.height);
    cube = new obelisk.Cube(dimensionCube, colorCube, false);
}

function draw() {
    var size = con.size;
    var txtWidth = offCanvas.width;
    var txtHeight = offCanvas.height;

    // clear everything
    pixelView.clear();
    ctx.clearRect(0, 0, txtWidth, txtHeight);

    ctx.fillText(ipt.val(), 2, 18);
    var textData = ctx.getImageData(0, 0, txtWidth, txtHeight);

    for (var y = 0; y <= txtHeight; y++) {
        for (var x = 0; x <= txtWidth; x++) {
            var p3d = new obelisk.Point3D(x * (size - 2), y * (size - 2), 0);
            pixelView.renderObject(brick, p3d);
        }
    }

    for (var y = 0; y < txtHeight; y++) {
        for (var x = 0; x < txtWidth; x++) {
            // check pixel
            var index = (y * textData.width + x) * 4;

            if (textData.data[index + 3] > threshold) {
                var p3d = new obelisk.Point3D(x * (size - 2), y * (size - 2), 0);
                pixelView.renderObject(cube, p3d);
            }
        }
    }
}

// main
buildPrimitive();
draw();