12 \u00d7 12 Two Colour BMP Grid<\/title><\/p>\n<style>\n* {\n box-sizing: border-box;\n}<\/p>\nbody {\n margin: 0;\n padding: 30px;\n font-family: Arial, sans-serif;\n background: #f2f2f2;\n color: #222;\n}<\/p>\nh1 {\n text-align: center;\n margin: 0 0 10px 0;\n}<\/p>\n.instructions {\n text-align: center;\n margin-bottom: 25px;\n}<\/p>\n\/* =========================================\n MAIN WORKSPACE\n ========================================= *\/<\/p>\n.workspace {\n display: flex;\n justify-content: center;\n align-items: flex-start;\n gap: 20px;<\/p>\n width: 100%;\n max-width: 900px;<\/p>\n margin: 0 auto;\n}<\/p>\n\/* =========================================\n BINARY PANEL - LEFT\n ========================================= *\/<\/p>\n.binary-panel {\n flex: 0 0 260px;<\/p>\n background: white;\n border: 1px solid #ccc;\n border-radius: 8px;<\/p>\n padding: 15px;<\/p>\n height: 570px;\n}<\/p>\n.binary-panel h2 {\n margin: 0 0 15px 0;\n text-align: center;\n font-size: 20px;\n}<\/p>\n\/* Binary data *\/<\/p>\n#output {\n width: 100%;<\/p>\n padding: 10px;<\/p>\n background: #fafafa;\n border: 1px solid #ddd;<\/p>\n font-family: monospace;\n font-size: 14px;\n line-height: 1.75;<\/p>\n white-space: pre;<\/p>\n overflow: auto;\n}<\/p>\n\/* =========================================\n DRAWING GRID - CENTRE\n ========================================= *\/<\/p>\n.drawing-area {\n flex: 0 0 auto;\n}<\/p>\n\/* 12 \u00d7 12 grid *\/<\/p>\n.grid {\n display: grid;<\/p>\n grid-template-columns: repeat(12, 42px);\n grid-template-rows: repeat(12, 42px);<\/p>\n gap: 2px;<\/p>\n padding: 2px;<\/p>\n background: #555;<\/p>\n width: max-content;\n height: max-content;\n}<\/p>\n\/* Individual pixel *\/<\/p>\n.cell {\n width: 42px;\n height: 42px;<\/p>\n background: white;\n color: black;<\/p>\n border: 1px solid #aaa;<\/p>\n display: flex;\n align-items: center;\n justify-content: center;<\/p>\n font-family: monospace;\n font-size: 15px;\n font-weight: bold;<\/p>\n cursor: pointer;\n user-select: none;\n}<\/p>\n\/* Black pixel *\/<\/p>\n.cell.black {\n background: black;\n color: white;\n border-color: #333;\n}<\/p>\n\/* =========================================\n COLOUR SELECTOR - RIGHT\n ========================================= *\/<\/p>\n.colour-selector {\n flex: 0 0 180px;<\/p>\n background: white;<\/p>\n border: 1px solid #ccc;\n border-radius: 8px;<\/p>\n padding: 15px;\n}<\/p>\n.colour-selector h2 {\n margin: 0 0 15px 0;\n text-align: center;\n font-size: 20px;\n}<\/p>\n\/* Colour buttons *\/<\/p>\n.colour-button {\n width: 100%;<\/p>\n display: flex;\n align-items: center;<\/p>\n padding: 10px;<\/p>\n margin-bottom: 10px;<\/p>\n background: white;<\/p>\n border: 2px solid #ccc;\n border-radius: 5px;<\/p>\n cursor: pointer;<\/p>\n font-size: 14px;\n font-weight: bold;<\/p>\n text-align: left;\n}<\/p>\n.colour-button:hover {\n background: #eee;\n}<\/p>\n\/* Selected colour *\/<\/p>\n.colour-button.selected {\n border: 3px solid #222;\n background: #e8e8e8;\n}<\/p>\n\/* Colour preview *\/<\/p>\n.colour-preview {\n width: 30px;\n height: 30px;<\/p>\n margin-right: 10px;<\/p>\n border: 1px solid #777;<\/p>\n flex-shrink: 0;\n}<\/p>\n.white-preview {\n background: white;\n}<\/p>\n.black-preview {\n background: black;\n}<\/p>\n\/* Selected colour display *\/<\/p>\n#selectedColour {\n margin-top: 15px;<\/p>\n padding: 10px;<\/p>\n background: #eee;<\/p>\n border-radius: 5px;<\/p>\n text-align: center;<\/p>\n font-size: 14px;\n}<\/p>\n\/* =========================================\n CLEAR BUTTON\n ========================================= *\/<\/p>\n.controls {\n text-align: center;\n margin-top: 20px;\n}<\/p>\n.reset {\n padding: 10px 25px;<\/p>\n border: none;\n border-radius: 5px;<\/p>\n background: #333;\n color: white;<\/p>\n font-size: 16px;<\/p>\n cursor: pointer;\n}<\/p>\n.reset:hover {\n background: #555;\n}<\/p>\n\/* =========================================\n RESPONSIVE LAYOUT\n ========================================= *\/<\/p>\n\/*\n Stack sections if the screen\n becomes too narrow.\n*\/<\/p>\n@media (max-width: 800px) {<\/p>\n .workspace {\n flex-wrap: wrap;\n justify-content: center;\n }<\/p>\n}<\/p>\n\/*\n Small screens\n*\/<\/p>\n@media (max-width: 600px) {<\/p>\n body {\n padding: 15px;\n }<\/p>\n .workspace {\n flex-direction: column;\n align-items: center;\n }<\/p>\n .binary-panel {\n width: 100%;\n max-width: 400px;\n height: auto;\n }<\/p>\n .drawing-area {\n width: 100%;\n overflow-x: auto;<\/p>\n display: flex;\n justify-content: center;\n }<\/p>\n .colour-selector {\n width: 100%;\n max-width: 300px;\n }<\/p>\n}<\/p>\n<\/style>\n<\/head><\/p>\n<body><\/p>\n<h1>12 \u00d7 12 Two-Colour BMP Image<\/h1>\n<div class=\"instructions\">\n 1.<\/strong> Select a colour. \n <\/p>\n 2.<\/strong> Click the squares to draw your image.<\/p>\n<\/div>\n<\/p>\n<div class=\"workspace\">\n <\/p>\n<div class=\"binary-panel\">\n<h2>Binary Image<\/h2>\n<div id=\"output\"><\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"drawing-area\">\n<div class=\"grid\" id=\"grid\"><\/div>\n<\/p><\/div>\n <\/p>\n<div class=\"colour-selector\">\n<h2>Select Colour<\/h2>\n <\/p>\n <button\n class=\"colour-button selected\"\n data-state=\"0\"\n onclick=\"selectColour(0)\"\n ><\/p>\n<div class=\"colour-preview white-preview\"><\/div>\n \n White \n 0<\/small> \n <\/span><\/p>\n <\/button><\/p>\n <\/p>\n <button\n class=\"colour-button\"\n data-state=\"1\"\n onclick=\"selectColour(1)\"\n ><\/p>\n<div class=\"colour-preview black-preview\"><\/div>\n \n Black \n 1<\/small> \n <\/span><\/p>\n <\/button><\/p>\n<div id=\"selectedColour\">\n Selected:<\/p>\n White (0)<\/strong><\/p><\/div>\n<\/p><\/div>\n<\/div>\n<\/p>\n<div class=\"controls\">\n <button\n class=\"reset\"\n onclick=\"clearGrid()\"\n > \n Clear Grid \n <\/button><\/p>\n<\/div>\n<script><\/p>\n\/*\n TWO COLOUR VALUES<\/p>\n 0 = White\n 1 = Black\n*\/<\/p>\nconst colours = [<\/p>\n {\n name: \"White\",\n binary: \"0\",\n className: \"\"\n },<\/p>\n {\n name: \"Black\",\n binary: \"1\",\n className: \"black\"\n }<\/p>\n];<\/p>\nlet selectedColour = 0;<\/p>\nconst grid =\n document.getElementById(\"grid\");<\/p>\nconst output =\n document.getElementById(\"output\");<\/p>\nconst selectedColourDisplay =\n document.getElementById(\"selectedColour\");<\/p>\n\/*\n CREATE 12 \u00d7 12 GRID\n*\/<\/p>\nfor (let row = 0; row < 12; row++) {\n\n for (let col = 0; col < 12; col++) {\n\n const cell =\n document.createElement(\"div\");\n\n cell.classList.add(\"cell\");\n\n\n \/\/ Start as White (0)\n\n cell.dataset.state = \"0\";\n\n cell.textContent = \"0\";\n\n\n \/*\n Paint the cell using\n the currently selected colour.\n *\/\n\n cell.addEventListener(\"click\", function() {\n\n cell.dataset.state =\n selectedColour;\n\n updateCell(cell);\n\n updateOutput();\n\n });\n\n\n grid.appendChild(cell);\n\n }\n\n}\n\n\n\/*\n SELECT COLOUR\n*\/\n\nfunction selectColour(colourNumber) {\n\n selectedColour = colourNumber;\n\n\n \/*\n Remove selected state\n from all buttons.\n *\/\n\n const buttons =\n document.querySelectorAll(\n \".colour-button\"\n );\n\n\n buttons.forEach(button => {<\/p>\n button.classList.remove(\"selected\");<\/p>\n });<\/p>\n \/*\n Highlight selected button.\n *\/<\/p>\n const selectedButton =\n document.querySelector(\n `.colour-button[data-state=\"${colourNumber}\"]`\n );<\/p>\n selectedButton.classList.add(\"selected\");<\/p>\n \/*\n Update selected colour message.\n *\/<\/p>\n selectedColourDisplay.innerHTML =\n \"Selected: \" +\n colours[colourNumber].name +\n \" (\" +\n colours[colourNumber].binary +\n \")<\/strong>\";<\/p>\n}<\/p>\n\/*\n UPDATE CELL\n*\/<\/p>\nfunction updateCell(cell) {<\/p>\n const state =\n parseInt(cell.dataset.state);<\/p>\n \/*\n Remove old colour.\n *\/<\/p>\n cell.classList.remove(\"black\");<\/p>\n \/*\n Apply new colour.\n *\/<\/p>\n if (colours[state].className !== \"\") {<\/p>\n cell.classList.add(\n colours[state].className\n );<\/p>\n }<\/p>\n \/*\n Display 0 or 1.\n *\/<\/p>\n cell.textContent =\n colours[state].binary;<\/p>\n}<\/p>\n\/*\n UPDATE BINARY IMAGE\n*\/<\/p>\nfunction updateOutput() {<\/p>\n const cells =\n document.querySelectorAll(\".cell\");<\/p>\n let binaryImage = \"\";<\/p>\n cells.forEach((cell, index) => {<\/p>\n binaryImage +=\n cell.textContent + \" \";<\/p>\n \/*\n Start a new line\n after every 12 pixels.\n *\/<\/p>\n if ((index + 1) % 12 === 0) {<\/p>\n binaryImage += \"\\n\";<\/p>\n }<\/p>\n });<\/p>\n output.textContent =\n binaryImage;<\/p>\n}<\/p>\n\/*\n CLEAR GRID\n*\/<\/p>\nfunction clearGrid() {<\/p>\n const cells =\n document.querySelectorAll(\".cell\");<\/p>\n cells.forEach(cell => {<\/p>\n cell.dataset.state = \"0\";<\/p>\n updateCell(cell);<\/p>\n });<\/p>\n updateOutput();<\/p>\n}<\/p>\n\/*\n INITIAL DISPLAY\n*\/<\/p>\nupdateOutput();<\/p>\n<\/script><\/p>\n<\/body> \n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"12 \u00d7 12 Two Colour BMP Grid 12 \u00d7 12 Two-Colour BMP Image 1. Select a colour. 2. Click the squares to draw your image. Binary Image Select Colour White 0 Black 1 Selected: White (0) Clear Grid<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-629","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/629","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/comments?post=629"}],"version-history":[{"count":1,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/629\/revisions"}],"predecessor-version":[{"id":631,"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/pages\/629\/revisions\/631"}],"wp:attachment":[{"href":"https:\/\/mrcottle.co.uk\/WP\/wp-json\/wp\/v2\/media?parent=629"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":629,"date":"2026-10-02T10:12:43","date_gmt":"2026-10-02T10:12:43","guid":{"rendered":"https:\/\/mrcottle.co.uk\/WP\/?page_id=629"},"modified":"2026-10-02T10:12:43","modified_gmt":"2026-10-02T10:12:43","slug":"binaryspaceinvader1","status":"publish","type":"page","link":"https:\/\/mrcottle.co.uk\/WP\/binaryspaceinvader1\/","title":{"rendered":"BinarySpaceInvader1"},"content":{"rendered":"

\n
\n
\n
\n<\/p>\n