2d:null 2e:["$","title",null,{"children":"Artistic Halftoning | Theo Honohan | Observable"}] 33:T4b5,class Noise { static lerp(t, a, b) { return a + t * (b - a); } static grad2d(i, x, y) { const v = (i & 1) === 0 ? x : y; return (i & 2) === 0 ? -v : v; } constructor(octaves = 1) { this.p = new Uint8Array(512); this.octaves = octaves; this.init(); } init() { for (let i = 0; i < 512; ++i) { this.p[i] = Math.random() * 256; } } noise2d(x2d, y2d) { const X = Math.floor(x2d) & 255; const Y = Math.floor(y2d) & 255; const x = x2d - Math.floor(x2d); const y = y2d - Math.floor(y2d); const fx = (3 - 2 * x) * x * x; const fy = (3 - 2 * y) * y * y; const p0 = this.p[X] + Y; const p1 = this.p[X + 1] + Y; return Noise.lerp( fy, Noise.lerp( fx, Noise.grad2d(this.p[p0], x, y), Noise.grad2d(this.p[p1], x - 1, y) ), Noise.lerp( fx, Noise.grad2d(this.p[p0 + 1], x, y - 1), Noise.grad2d(this.p[p1 + 1], x - 1, y - 1) ) ); } noise(x, y) { let e = 1, k = 1, s = 0; for (let i = 0; i < this.octaves; ++i) { e *= 0.5; s += e * (1 + this.noise2d(k * x, k * y)) / 2; k *= 2; } return s; } }34:[] 31:{"id":"a852f7a2a1d54a0c","slug":"artistic-halftoning","title":"Artistic Halftoning","thumbnail":"e0e54fc1b6a4b60a2da03d2f8fe31622bbb186fc3881169b27b7672102069ed7","access_level":"public","create_time":"$D2021-08-08T08:30:47.956Z","update_time":"$D2021-08-08T11:30:34.788Z","view_time":null,"first_public_time":"$D2021-08-08T11:31:38.903Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"5e87216687e9e987","login":"theohonohan","name":"Theo Honohan","avatar_url":"https://avatars-next.observableusercontent.com/540b56e88e996da74166cc9a7f19d675ab61466950968a722a034b91d9772da7","tier":"starter_2024"},"version":291,"publish_version":291,"role":null,"authored":false,"authors":[{"type":"individual","id":"d8b135b8c3311b20","login":"theohonohan","name":"Theo Honohan","avatar_url":"https://avatars-next.observableusercontent.com/540b56e88e996da74166cc9a7f19d675ab61466950968a722a034b91d9772da7","tier":null}],"members":[{"type":"individual","id":"d8b135b8c3311b20","login":"theohonohan","name":"Theo Honohan","avatar_url":"https://avatars-next.observableusercontent.com/540b56e88e996da74166cc9a7f19d675ab61466950968a722a034b91d9772da7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Artistic Halftoning","cells":[{"id":0,"value":"# Artistic Halftoning","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof radius = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"context.canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"id = getID();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"function getID() {\n context.clearRect(0, 0, width, height);\n let id = context.getImageData(0, 0, width, height);\n return id;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"draw();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"paint = paint_square2;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"function paint_disc(x, y, ix, iy) {\n let w = size/2;\n let h = size/2;\n let offset = noise.noise(2*x/width,2*y/width) * 100;\n return Math.sqrt(Math.pow(w-ix,2) + Math.pow(h-iy,2)) < radius-offset;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"function paint_square(x, y, ix, iy) {\n let w = size/2;\n let h = size/2;\n let offset = noise.noise(2*x/width,2*y/width) * 100;\n\n return Math.max(Math.abs(w-ix),Math.abs(h-iy)) < radius-offset;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"function paint_square2(x, y, ix, iy) {\n let w = size/2;\n let h = size/2;\n let offset = noise.noise(5*x/width,5*y/width) * 100;\n\n let sq1 = Math.max(Math.abs(w-ix),Math.abs(h-iy)) < radius-offset;\n let sq2 = Math.max(Math.abs(0-ix),Math.abs(h-iy)) < radius-offset * 2.0;\n let sq3 = Math.max(Math.abs(size-ix),Math.abs(h-iy)) < radius-offset * 2.0;\n let sq4 = Math.max(Math.abs(w-ix),Math.abs(0-iy)) < radius-offset * 2.0;\n let sq5 = Math.max(Math.abs(w-ix),Math.abs(size-iy)) < radius-offset * 2.0;\n return sq1 || sq2 || sq3 || sq4 || sq5;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"function draw() {\n context.fillStyle = \"#ffffff\";\n context.fillRect(0,0,width,height);\n let d = id.data;\n for (let i = 0; i < width*height; i += 1) {\n let x = i%width;\n let y = i/width;\n if (paint(x, y, x%size, y%size)) {\n d[i*4] = 255;\n d[i*4+1] = 0;\n d[i*4+2] = 0;\n d[i*4+3] = 255;\n } else {\n d[i*4] = 255;\n d[i*4+1] = 255;\n d[i*4+2] = 255;\n d[i*4+3] = 255;\n }\n }\n context.putImageData(id, 0, 0);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"context = DOM.context2d(style_width, style_height);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"context.setTransform(1, 0, 0, 1, 0, 0);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"size = 100;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"style_width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"style_height = 400;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"width = context.canvas.width = 3200;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"height = context.canvas.height = 1600;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"noise = new Noise(1);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"