{"id":800,"date":"2014-03-22T10:55:22","date_gmt":"2014-03-22T15:55:22","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=800"},"modified":"2014-03-22T10:55:22","modified_gmt":"2014-03-22T15:55:22","slug":"the-pixelize-jquery-plugin","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/the-pixelize-jquery-plugin\/","title":{"rendered":"The Pixelize jQuery Plugin"},"content":{"rendered":"<p>I am unabashedly and unreasonably fond of pixel art. It evokes a nostalgia for a simpler time (tinted generously with the fog of many years) when I would rush home from school, fire up my Nintendo, and try to rescue Zelda from the evil clutches of Ganon.<\/p>\n<p>To that end, I&#8217;ve created a simple jQuery plugin that can turn a JavaScript array into CSS pixel art. It looks like this:<\/p>\n<p data-height=\"329\" data-theme-id=\"4095\" data-slug-hash=\"dAEoc\" data-default-tab=\"result\" class='codepen'>See the Pen <a href='http:\/\/codepen.io\/rglazebrook\/pen\/dAEoc\/'>Pixelize jQuery Plugin<\/a> by Rob Glazebrook (<a href='http:\/\/codepen.io\/rglazebrook'>@rglazebrook<\/a>) on <a href='http:\/\/codepen.io'>CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script><!--more--><\/p>\n<p>And it works like this:<\/p>\n<p>First, you&#8217;ll need an array (of arrays) to work with. Each item in the first array acts like a row in our art, each item within the nested array acts like a column in our row. It looks like this:<\/p>\n<pre lang=\"js\">\nvar my_array = [\n  ['#f00','#0f0','#f00'],\n  ['#0f0','#f00','#0f0']\n];\n<\/pre>\n<p>That would create a 3-square-wide by 2-square-tall series of alternating red and green pixels. Sorta boring, but this is an example.<\/p>\n<p>In my experience, it&#8217;s way faster to create some color variables up front and then use those to populate the array you&#8217;re going to use. It also provides some protection against typos. So our code would now look like this:<\/p>\n<pre lang=\"js\">\nvar r = '#f00',\ng = '#0f0',\nmy_array = [\n  [r,g,r],\n  [g,r,g]\n];\n<\/pre>\n<p>Much easier to read. You can also leave spaces empty in the array to create empty pixels.<\/p>\n<p>Once you have an array, you&#8217;re done with the hard part. Now you just create an element in your HTML you want to become pixel art:<\/p>\n<pre lang=\"html5\">\n&lt;div class=\"pixely\"&gt;&lt;\/div&gt;\n<\/pre>\n<p>And then call the jQuery plugin like so:<\/p>\n<pre lang=\"js\">\n$('.pixely').pixelize(my_array);\n<\/pre>\n<p>And you&#8217;re done!<\/p>\n<h3>Gotchas and Tips<\/h3>\n<ul>\n<li>The &#8220;pixels&#8221; in your art are 1em square. To change the size of the pixels, just set a font-size on the element you&#8217;re pixelizing.<\/li>\n<li>Your element will be resized to 1em square. This is now the top-left pixel. To position your pixel art, provide some margins or positioning via CSS.<\/li>\n<\/ul>\n<h3>Download and Example<\/h3>\n<p>I&#8217;ve put the plugin up on GitHub. <a href=\"https:\/\/github.com\/rglazebrook\/pixelize\">Here it is.<\/a><\/p>\n<p>The example of usage is on CodePen. <a href=\"http:\/\/codepen.io\/rglazebrook\/pen\/dAEoc\/\">Check it out.<\/a><\/p>\n<div class=\"downb\">\n<a href=\"\/pixelize_jquery.zip\" class=\"downl\">Download Now<\/a>\n<\/div>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>I am unabashedly and unreasonably fond of pixel art. To that end, I&#8217;ve created a simple jQuery plugin that can turn a JavaScript array into CSS pixel art. [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/the-pixelize-jquery-plugin\/\" title=\"Click to read 'The Pixelize jQuery Plugin'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":805,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[171,174,184],"tags":[206,49,55,291,319],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/800"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=800"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/800\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/805"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=800"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=800"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=800"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}