2e:null 2f:["$","title",null,{"children":"Every Other Pixel Is A Line | Sylvain Lesage | Observable"}] 34: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; }35:[{"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}] 32:{"id":"02c9aebb2a68af00","slug":"every-other-pixel-is-a-line","title":"Every Other Pixel Is A Line","thumbnail":"beb287e3d3821cf03bc01f8b1db7748b40731bbcd417580525ec59116d0337a4","access_level":"public","create_time":"$D2020-03-23T06:50:51.195Z","update_time":"$D2020-03-23T10:02:29.690Z","view_time":null,"first_public_time":"$D2020-03-23T09:51:53.568Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":247,"publish_version":247,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"66aa9589446dfa80","slug":"image","title":"Image","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`