JS Tutorial – jQuery Input Text – Pixel Isometric Input Text Rendering

Rengga Dev – The text-rendering property in CSS allows you to choose quality of text over speed (or vice versa) allowing you to fine tune optimization by suggesting to the browser as to how it should render text on the screen.

// 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();