31:T609,pixelsToLines = w => { const canvas = DOM.canvas(w, w, 1); // roof image is square const ctx = canvas.getContext('2d'); const data = texture.getContext('2d').getImageData(0, 0, 8, 8).data; const step = w / 4; // First: the tiles for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { ctx.fillStyle = colorAt(col * 2, row * 2); ctx.fillRect(step * col, step * row, step, step); } } ctx.lineWidth = lineWidth; // Then: the horizontal lines for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { ctx.beginPath(); ctx.strokeStyle = colorAt(col * 2, row * 2 + 1); ctx.moveTo(step * col, step * (row + 1)); ctx.lineTo(step * (col + 1), step * (row + 1)); ctx.stroke(); } } // Then: the vertical lines for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { ctx.beginPath(); ctx.strokeStyle = colorAt(col * 2 + 1, row * 2); ctx.moveTo(step * (col + 1), step * row); ctx.lineTo(step * (col + 1), step * (row + 1)); ctx.stroke(); } } // Finally: the corners for (let row = 0; row < 4; row++) { for (let col = 0; col < 4; col++) { ctx.beginPath(); ctx.strokeStyle = colorAt(col * 2 + 1, row * 2 + 1); ctx.moveTo(step * (col + 1), step * (row + 1) - lineWidth / 2); ctx.lineTo(step * (col + 1), step * (row + 1) + lineWidth / 2); ctx.stroke(); } } canvas.style.width = '250px'; canvas.style.height = '150px'; return canvas; }32:[{"id":"e1dab33e2ef0e94c4b616670aa2c878373897edf4ade6a052ca71755b2e7b88c69cfdd6b3bfc0872cd975aa407221c27e7e15c411a9ff2b576c2b0f228b746cb","href":"https://static.observableusercontent.com/files/e1dab33e2ef0e94c4b616670aa2c878373897edf4ade6a052ca71755b2e7b88c69cfdd6b3bfc0872cd975aa407221c27e7e15c411a9ff2b576c2b0f228b746cb","name":"every-other-pixel-is-a-line.mp4","type":"video/mp4","lastModified":1584946301446.638,"size":825661},{"id":"2b19f3cfdde6b27818449e8db6d312700c6936fc9fa897c70c135f02c12a3cad5e80919dedef8ff3bf46270a5abc77fa9772e58749bcac7133b0db3f14a77e67","href":"https://static.observableusercontent.com/files/2b19f3cfdde6b27818449e8db6d312700c6936fc9fa897c70c135f02c12a3cad5e80919dedef8ff3bf46270a5abc77fa9772e58749bcac7133b0db3f14a77e67","name":"roof-rectified@1.png","type":"image/png","lastModified":1584951759949.695,"size":382844},{"id":"f1b359c970566455b8582c78ba1c555d1d2f8e52916b4c6b576b2ea26d8c231c61698e278131e4aa7691eda1f2353d9a77a2b147f5e68c5ce99b4ce9bc39e25c","href":"https://static.observableusercontent.com/files/f1b359c970566455b8582c78ba1c555d1d2f8e52916b4c6b576b2ea26d8c231c61698e278131e4aa7691eda1f2353d9a77a2b147f5e68c5ce99b4ce9bc39e25c","name":"roof-extracted@1.png","type":"image/png","lastModified":1584951772954.158,"size":636210},{"id":"d58ef643336ed007f8d439f535e2c413d13b549d1df1a6bcbcae579319c08631a0b6127a9c79aceba637cc16225fa9a0aa58fb84a3bc43158a69d15a661c2caa","href":"https://static.observableusercontent.com/files/d58ef643336ed007f8d439f535e2c413d13b549d1df1a6bcbcae579319c08631a0b6127a9c79aceba637cc16225fa9a0aa58fb84a3bc43158a69d15a661c2caa","name":"Capture d’écran de 2020-03-23 10-41-32.png","type":"image/png","lastModified":1584956510804.343,"size":190345}] 2f:{"title":"Every Other Pixel Is A Line","cells":[{"id":0,"value":"md`# Every Other Pixel Is A Line\n\nOskar Stålberg's \"every-other-pixel-is-a-line\" technique, mentionned in https://nitter.net/OskSta/status/1241096929490149376, aims at giving an hand-drawn esthetics to walls and pavements.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"html`