{"id":4073,"date":"2024-02-27T12:55:45","date_gmt":"2024-02-27T18:55:45","guid":{"rendered":"https:\/\/handyvandal.com\/wphv\/?p=4073"},"modified":"2024-12-27T15:22:23","modified_gmt":"2024-12-27T21:22:23","slug":"doom-running-as-console-log-output-in-the-chrome-web-browser","status":"publish","type":"post","link":"https:\/\/handyvandal.com\/wphv\/2024\/02\/doom-running-as-console-log-output-in-the-chrome-web-browser\/","title":{"rendered":"Doom running as Console.log() output in the Chrome web browser"},"content":{"rendered":"<p><a href=\"https:\/\/handyvandal.com\/wphv\/wp-content\/uploads\/2024\/02\/ezgif-3-34c4a61049.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/handyvandal.com\/wphv\/wp-content\/uploads\/2024\/02\/ezgif-3-34c4a61049-300x143.jpg\" alt=\"Doom running as Console.log() output in the Chrome web browser\" width=\"300\" height=\"143\" class=\"alignright size-medium wp-image-4074\" srcset=\"https:\/\/handyvandal.com\/wphv\/wp-content\/uploads\/2024\/02\/ezgif-3-34c4a61049-300x143.jpg 300w, https:\/\/handyvandal.com\/wphv\/wp-content\/uploads\/2024\/02\/ezgif-3-34c4a61049-1024x490.jpg 1024w, https:\/\/handyvandal.com\/wphv\/wp-content\/uploads\/2024\/02\/ezgif-3-34c4a61049-768x367.jpg 768w, https:\/\/handyvandal.com\/wphv\/wp-content\/uploads\/2024\/02\/ezgif-3-34c4a61049.jpg 1366w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>A new web application allows you to <a href=\"https:\/\/mattcozendey.github.io\/\">play DOOM via the Console in Google Chrome browser<\/a>.<\/p>\n<blockquote><p>DOOM runs via WebAssembly in a hidden &#8220;canvas&#8221; element. I use HTMLCanvasElement.toDataURL function to turn this into a base64 encoded string. A Console.log() is called with two arguments, &#8220;%c X&#8221;, which is a random string that is going to be stylized by the next parameter, which is composed of css properties. I then attribute the base 64 into a background-url property, thus rendering it.<\/p><\/blockquote>\n<p>Via <a href=\"https:\/\/boingboing.net\/2024\/02\/26\/doom-running-as-console-log-output-in-the-chrome-web-browser.html\">Boing Boing<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>A new web application allows you to play DOOM via the Console in Google Chrome browser. DOOM runs via WebAssembly in a hidden &#8220;canvas&#8221; element. I use HTMLCanvasElement.toDataURL function to turn this into a base64 encoded string. A Console.log() is called with two arguments, &#8220;%c X&#8221;, which is a random string that is going to [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":4074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[130],"tags":[],"class_list":["post-4073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-first-person"],"_links":{"self":[{"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/posts\/4073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/comments?post=4073"}],"version-history":[{"count":2,"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/posts\/4073\/revisions"}],"predecessor-version":[{"id":4076,"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/posts\/4073\/revisions\/4076"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/media\/4074"}],"wp:attachment":[{"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/media?parent=4073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/categories?post=4073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/handyvandal.com\/wphv\/wp-json\/wp\/v2\/tags?post=4073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}