{"id":3474,"date":"2021-03-23T13:05:30","date_gmt":"2021-03-23T13:05:30","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3474"},"modified":"2023-02-28T05:01:42","modified_gmt":"2023-02-28T05:01:42","slug":"js-tutorial-jquery-input-text-pixel-isometric-input-text-rendering","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-jquery-input-text-pixel-isometric-input-text-rendering\/","title":{"rendered":"JS Tutorial &#8211; jQuery Input Text &#8211; Pixel Isometric Input Text Rendering"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; The\u00a0<code>text-rendering<\/code>\u00a0property 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.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Pixel Isometric Input Text Rendering\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/eYrGeyG?default-tab=result&amp;theme-id=dark\" height=\"800\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/eYrGeyG\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ control bar\r\nvar ControlBar = function () {\r\n    this.size = 10;\r\n    this.height = 24;\r\n};\r\nvar con = new ControlBar();\r\nvar gui = new dat.GUI();\r\nvar conHeight = gui.add(con, 'height', 4, 100).step(1);\r\nvar conSize = gui.add(con, 'size', 6, 20).step(2);\r\nconSize.onChange(function () {\r\n    buildPrimitive();\r\n    draw();\r\n});\r\nconHeight.onChange(function () {\r\n    buildPrimitive();\r\n    draw();\r\n});\r\n\r\n\/\/ color patterns\r\nvar colorData = ['#CCFF00', '#FF0099', '#FF7CBF', '#EEEEEE', '#666666'];\r\nvar iMax = colorData.length;\r\nvar colorHtml = '';\r\n\r\nfor (var i = 0; i &lt; iMax; i++) {\r\n    colorHtml += '&lt;li style=\"background-color: ' + colorData[i] + '\"&gt;&lt;\/li&gt;';\r\n}\r\n$('#color-box').html(colorHtml);\r\n$('#color-box').find('li').on('click', function () {\r\n    var index = $(this).index();\r\n    color = parseInt(colorData[index].replace('#', '0x'), 16);\r\n    buildPrimitive();\r\n    draw();\r\n});\r\n\r\n\/\/ input field\r\nvar ipt = $('#ipt');\r\nipt.on('keyup', draw);\r\nipt.on('click', function () {\r\n    $(this).select();\r\n});\r\n\r\n\/\/ input off canvas\r\nvar offCanvas = $('#canvas-txt').get(0);\r\nvar ctx = offCanvas.getContext(\"2d\");\r\nctx.font = \"20px Helvetica,sans-serif\";\r\n\r\n\/\/ pixel view\r\nvar canvas = $('#canvas-demo');\r\nvar point = new obelisk.Point(150, 30);\r\nvar pixelView = new obelisk.PixelView(canvas, point);\r\nvar brick;\r\nvar cube;\r\nvar color = 0xCCFF00;\r\nvar threshold = 130;\r\n\r\n\/\/ build method\r\nfunction buildPrimitive() {\r\n    \/\/ floor\r\n    var colorBrick = new obelisk.SideColor(0xAAAAAA, 0xEEEEEE);\r\n    var dimensionBrick = new obelisk.BrickDimension(con.size, con.size);\r\n    brick = new obelisk.Brick(dimensionBrick, colorBrick);\r\n\r\n    \/\/ cube\r\n    var colorCube = new obelisk.CubeColor().getByHorizontalColor(color);\r\n    var dimensionCube = new obelisk.CubeDimension(con.size, con.size, con.height);\r\n    cube = new obelisk.Cube(dimensionCube, colorCube, false);\r\n}\r\n\r\nfunction draw() {\r\n    var size = con.size;\r\n    var txtWidth = offCanvas.width;\r\n    var txtHeight = offCanvas.height;\r\n\r\n    \/\/ clear everything\r\n    pixelView.clear();\r\n    ctx.clearRect(0, 0, txtWidth, txtHeight);\r\n\r\n    ctx.fillText(ipt.val(), 2, 18);\r\n    var textData = ctx.getImageData(0, 0, txtWidth, txtHeight);\r\n\r\n    for (var y = 0; y &lt;= txtHeight; y++) {\r\n        for (var x = 0; x &lt;= txtWidth; x++) {\r\n            var p3d = new obelisk.Point3D(x * (size - 2), y * (size - 2), 0);\r\n            pixelView.renderObject(brick, p3d);\r\n        }\r\n    }\r\n\r\n    for (var y = 0; y &lt; txtHeight; y++) {\r\n        for (var x = 0; x &lt; txtWidth; x++) {\r\n            \/\/ check pixel\r\n            var index = (y * textData.width + x) * 4;\r\n\r\n            if (textData.data[index + 3] &gt; threshold) {\r\n                var p3d = new obelisk.Point3D(x * (size - 2), y * (size - 2), 0);\r\n                pixelView.renderObject(cube, p3d);\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n\/\/ main\r\nbuildPrimitive();\r\ndraw();\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; The\u00a0text-rendering\u00a0property in CSS allows you to choose quality of <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-jquery-input-text-pixel-isometric-input-text-rendering\/\" title=\"JS Tutorial &#8211; jQuery Input Text &#8211; Pixel Isometric Input Text Rendering\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3824,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[349,264,263,348,347,103,227],"newstopic":[],"class_list":{"0":"post-3474","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-dat-gui-js","9":"tag-javascript-tutorial","10":"tag-js-tutorial","11":"tag-obelisk-js","12":"tag-query-js","13":"tag-web-design","14":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3474"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3474\/revisions"}],"predecessor-version":[{"id":3476,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3474\/revisions\/3476"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3824"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3474"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}