\n| <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n | <\/td>\n<\/tr>\n<\/table>\n Which is, of course, painstakingly slow. One thing to note is that there are often repeated patterns in the code. Such as the nested rectangles at the corners, which are, in most cases, 7x7.
\nThen the next thought was if there was a way to quickly draw the typed codes into actual QR. Javascript, in this case, seemed most appropriate, not only because of its supportability but also its handy graphics library.<\/p>\n Javascripting the QR<\/h2>\nThe idea, in one equation, was essentially (\\.)(\\d*)<\/code> \u279c $1$$\\ast$$max($2,1)<\/code>. Multiple blanks or dots shall be compactly written as letter times the multiplier, repeating the very letter for the given quantity. <\/p>\nparseLine(line)<\/code><\/code><\/p>\n\n\n\n| Input<\/th>\n | Output<\/th>\n<\/tr>\n<\/thead>\n | \n\n".3"<\/code><\/td>\n"..."<\/code><\/td>\n<\/tr>\n\n"3"<\/code><\/td>\n""<\/code><\/td>\n<\/tr>\n\n"w3_2 ."<\/code><\/td>\n"www___."<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nThe initial approach was simple: double for<\/em> loops. However, step zero was to devise functions for printing the substituted outputs.<\/p>\nStep 0: printQR()<\/h3>\nFor extreme convenience, we were not going to require a fixed 2d array. Instead, as the Javascript language itself allowed, size-flexible 2d arrays were the arguments for this function.<\/p>\n function drawQR(src) {\n var lines = parseQR(src);\n drawParsedQR(lines);\n}\n\nfunction drawParsedQR(lines) {\n var myCanvas = document.getElementById("myCanvas");\n var canvasLength = getMaxSquareLength();\n myCanvas.width = canvasLength;\n myCanvas.height = canvasLength;\n\n var ctx = myCanvas.getContext("2d");\n ctx.fillStyle = '#f1f1f1';\n ctx.fillRect(0, 0, canvasLength, canvasLength);\n\n var maxLength = maxArrayLength(lines);\n var cellWidth = canvasLength \/ maxLength;\n var fillColor = "";\n\n for (var y = 0; y < lines.length; y++) {\n for (var x = 0; x < lines[y].length; x++) {\n\n if (lines[y][x] == ' ') {\n fillColor = "white";\n } else {\n fillColor = "black";\n }\n\n ctx.fillStyle = fillColor;\n ctx.fillRect(x * cellWidth, y * cellWidth, cellWidth + 1, cellWidth + 1);\n }\n }\n}<\/code><\/pre>\nFor this function, the input was at best standardized. This led to creating the below:<\/p>\n Step 0.1: Binarize<\/h4>\nAny whitespace character is replaced to a blank, and any solid, non-digit character to period. This was done by a regex search. <\/p>\n \nfunction binarize(ch) {\n if (' \\t\\n\\r\\v_'.indexOf(ch) > -1) {\n return ' ';\n }\n return '.';\n}<\/code><\/pre>\nStep 1: parseLine()<\/h3>\nWhen given a source input string like below,<\/p>\n ...3\n .\n.2<\/code><\/pre>\nEach line must be split, and each line must be parsed<\/em> using parseLine(line)<\/code><\/code>.<\/p>\nBasically, there were two schools of thought: double-loop<\/em>, or stacking<\/em>.<\/p>\nDouble-loop method<\/h4>\nThe only time a character has to be repeated multiple times is when a number -- or a multiplier -- appears during a line. Thus, until when the first number appears, the program has to remember the latest non-number<\/em>, or non-digit<\/em> char it has uttered, hence var latest_nd<\/code><\/code>. <\/p>\nThe second and last thing was that a multiplier should be recorded. When a two-or-more-digit number appears during the line, each digit should be multiplied by ten and welcome the new digit -- in a sense, shifting one left every time.<\/p>\n The first establishment is non-digit detection, which again utilized a regex test.<\/p>\n function isDigit(ch) {\n return ch != null && ' \\t\\n\\r\\v_'.indexOf(ch) == -1 && +ch == ch;\n}<\/code><\/pre>\nfunction parseLine(line) {\n var i = 0;\n var latest_nd = '';\n var sarray = "";\n\n while (i < line.length) {\n var cur = line.charAt(i);\n var multiplier = 0;\n\n while (isDigit(line.charAt(i)) && i < line.length) {\n multiplier = multiplier * 10 + +line.charAt(i);\n i++;\n }\n\n if (multiplier == 0) {\n latest_nd = binarize(cur);\n multiplier = 1;\n i++;\n } else {\n multiplier--;\n }\n\n for (var j = 0; j < multiplier; j++) {\n sarray += latest_nd;\n }\n }\n return Array.from(sarray);\n}<\/code><\/pre>\nThe multiplier<\/code><\/code> variable also serves as a flag for non-repetition. If it remains 0, there was no multiplier, and thus the current char only has to appear once.<\/p>\nWhether repeated or not, the for<\/em> loop repeats the character once or more and appends to the string array. Finally, the sarray<\/code> is converted into a char[]<\/code> and returned.<\/p>\nStacking Method<\/h4>\nAnother method might be back-tracking or tracking backward in a stack. The Array<\/code> in Javascript also serves as a Stack, having pop()<\/code> and push()<\/code> methods.<\/p>\nFirst, let it include all the chars from the source string by Array.from(line)<\/code>. Then pop one by one, seeking for number-multipliers. <\/p>\nNumber tracking starts whenever the first number digit is found, adding current digit<\/code> * powers of 10<\/code> like the former method, but only backward. <\/p>\nThe digit tracking stops when the first non-digit char is met, and the code proceeds to repeat that first nd<\/code> multiplier<\/code> times. So for a non-digit<\/em> character encounter with null multiplier<\/code>, it will assume a one-digit character without multiplier and only print it once to move on.<\/p>\nfunction parseStack(line) {\n var parsed = "";\n var stack = Arrays.from(line);\n\n var multiplier = 0;\n var digitplacer = 0;\n\n for(var i=0; i<line.length; i++){\n var last = stack.pop();\n\n if(isDigit(last)){\n multiplier += +last * Math.pow(10, digitplacer);\n digitplacer ++;\n } else {\n if(multiplier == 0){\n multiplier = 1;\n }\n last = binarize(last);\n for(var j = 0; j < multiplier; j++){\n parsed = last + parsed;\n }\n multiplier = 0;\n digitplacer = 0;\n }\n }\n return parsed;\n}<\/code><\/pre>\nConclusion<\/h2>\nWhile anyone will wonder about the practicality of this program, the very act of practicing codes was the critical part. It is often not in practicality but in the aesthetics where my code lies.<\/p>\n","protected":false},"excerpt":{"rendered":" Quick-Response Codes are Slow<\/p>\n Every year in the fall, the quad is filled with thousands of students from hundreds of clubs in the school. Technology has enabled club sign-up to be done with a quick scan of QR codes, but the delivery of such codes still relies on traditional medium — paper.<\/p>\n Betraying its name, Quick Response codes often don’t work quickly. Moreover, QR codes on curved surfaces are never read. Spending the day full of QR scans, <\/p>\n","protected":false},"author":2,"featured_media":364,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_post_was_ever_published":false},"categories":[27],"tags":[],"class_list":["post-322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programming"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/i0.wp.com\/chrisahn.com\/wp-content\/uploads\/2021\/09\/qr_code_art22.jpg?fit=315%2C315&ssl=1","_links":{"self":[{"href":"https:\/\/chrisahn.com\/index.php?rest_route=\/wp\/v2\/posts\/322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chrisahn.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chrisahn.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chrisahn.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chrisahn.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=322"}],"version-history":[{"count":5,"href":"https:\/\/chrisahn.com\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions"}],"predecessor-version":[{"id":342,"href":"https:\/\/chrisahn.com\/index.php?rest_route=\/wp\/v2\/posts\/322\/revisions\/342"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/chrisahn.com\/index.php?rest_route=\/wp\/v2\/media\/364"}],"wp:attachment":[{"href":"https:\/\/chrisahn.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chrisahn.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chrisahn.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
| | | | | |
|