{"id":1089,"date":"2016-01-02T15:45:49","date_gmt":"2016-01-02T22:45:49","guid":{"rendered":"https:\/\/dubinko.info\/blog\/?p=1089"},"modified":"2016-01-02T23:03:50","modified_gmt":"2016-01-03T06:03:50","slug":"pixel-editor","status":"publish","type":"post","link":"https:\/\/dubinko.info\/blog\/2016\/01\/pixel-editor\/","title":{"rendered":"Pixel editor"},"content":{"rendered":"<p>I did a thing.<\/p>\n<p>I am experimenting with machine learning and neural networks. To do so, I need a real-world dataset to play with. For starters, I am using a 5&#215;7 pixel array, as common in many DIY projects, representing digits 0-9. Please help me my drawing a picture of the randomly-selected digit below. All data will be released to the public domain.<\/p>\n<p>Can you help me? Take a few seconds and draw a picture of a number by clicking on pixels to toggle their value.<\/p>\n<p>Email me with any questions or suggestions.<\/p>\n<style>\n.outer-wrapper {\n    margin: 40px;\n}\n.square {\n    background-color: #fff;\n    display: inline-block;\n    border: 1px solid #ccc;\n    height: 15px;\n    width: 15px;\n}\n#form-submit {\n}\n<\/style>\n<p><script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.4\/jquery.min.js\"><\/script><\/p>\n<p><script>\nvar base32 = \"_abcdefghijkmnopqrstuvwxyz234679\";\n\/\/\nfunction row(n) {\n    var position = 1;\n    var sum = 0;\n    for (var i = 0; i <= 4; i++) {\n        var pixel = $(\"#r\" + n +  \" .col\" + (5 -i)).css('background-color').indexOf('255') == -1\n        sum = sum + position * (+pixel);\n        position = position * 2;\n    }\n    return sum;\n}\n\/\/\n$(document).ready(function(){\n    $('#digit').val(Math.floor(Math.random()*10))\n    $('.square').click(function() {\n        var oldBackground = $(this).css('background-color')\n        var newBackground = (oldBackground.indexOf('255') == -1) ? 'white' : 'black';\n        $(this).css('background-color', newBackground);\n        var bits = \"\";\n        for (var i=0; i <=6; i++) {\n            bits = bits + base32.charAt(row(i + 1));\n        }\n        $('#bitmask').val(bits);\n    });\n});\n<\/script><\/p>\n<form action=\"https:\/\/docs.google.com\/a\/micahjoel.info\/forms\/d\/1brDhGBYOAGCN8HIx18xftPHDSC_MqvY_Wz5Lzpj2egU\/formResponse\" method=\"POST\" id=\"mG61Hd\" target=\"_blank\">\n<label for=\"digit\">Your digit to draw:<\/label><input id=\"digit\" name=\"entry.42360424\" value=\"8\"><\/input><br \/>\n<br \/>\n<label for=\"bitiask\">The bit pattern you encoded:<\/label><input id=\"bitmask\" name=\"entry.1629793695\" value=\"_______\" readonly><\/input><\/p>\n<div class=\"outer-wrapper\">\n<div class=\"row\" id=\"r1\">\n    <span class=\"square col1\"> <\/span><span class=\"square col2\"> <\/span><span class=\"square col3\"> <\/span><span class=\"square col4\"> <\/span><span class=\"square col5\"> <\/span>\n  <\/div>\n<div class=\"row\" id=\"r2\">\n    <span class=\"square col1\"> <\/span><span class=\"square col2\"> <\/span><span class=\"square col3\"> <\/span><span class=\"square col4\"> <\/span><span class=\"square col5\"> <\/span>\n  <\/div>\n<div class=\"row\" id=\"r3\">\n    <span class=\"square col1\"> <\/span><span class=\"square col2\"> <\/span><span class=\"square col3\"> <\/span><span class=\"square col4\"> <\/span><span class=\"square col5\"> <\/span>\n  <\/div>\n<div class=\"row\" id=\"r4\">\n    <span class=\"square col1\"> <\/span><span class=\"square col2\"> <\/span><span class=\"square col3\"> <\/span><span class=\"square col4\"> <\/span><span class=\"square col5\"> <\/span>\n  <\/div>\n<div class=\"row\" id=\"r5\">\n    <span class=\"square col1\"> <\/span><span class=\"square col2\"> <\/span><span class=\"square col3\"> <\/span><span class=\"square col4\"> <\/span><span class=\"square col5\"> <\/span>\n  <\/div>\n<div class=\"row\" id=\"r6\">\n    <span class=\"square col1\"> <\/span><span class=\"square col2\"> <\/span><span class=\"square col3\"> <\/span><span class=\"square col4\"> <\/span><span class=\"square col5\"> <\/span>\n  <\/div>\n<div class=\"row\" id=\"r7\">\n    <span class=\"square col1\"> <\/span><span class=\"square col2\"> <\/span><span class=\"square col3\"> <\/span><span class=\"square col4\"> <\/span><span class=\"square col5\"> <\/span>\n  <\/div>\n<div>\n<p>\n<input type=\"submit\" name=\"submit\"><\/input><br \/>\n<\/form>\n<p><a href=\"http:\/\/renaissancenerd.tumblr.com\/post\/23219286900\/a-thought-experiment-pixel-art\">Inspiration<\/a><\/p>\n<p>Data collection by <a href=\"https:\/\/github.com\/heaversm\/google-custom-form\">Google Custom Forms<\/a>.<\/p>\n<p>Machine learning datasets FTW! Stay tuned for code & results.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I did a thing. I am experimenting with machine learning and neural networks. To do so, I need a real-world dataset to play with. For starters, I am using a 5&#215;7 pixel array, as common in many DIY projects, representing digits 0-9. Please help me my drawing a picture of the randomly-selected digit below. All&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-1089","post","type-post","status-publish","format-standard","hentry","category-stuff"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8eo8l-hz","_links":{"self":[{"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/posts\/1089","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/comments?post=1089"}],"version-history":[{"count":60,"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/posts\/1089\/revisions"}],"predecessor-version":[{"id":1149,"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/posts\/1089\/revisions\/1149"}],"wp:attachment":[{"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/media?parent=1089"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/categories?post=1089"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dubinko.info\/blog\/wp-json\/wp\/v2\/tags?post=1089"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}