2b:null 2c:["$","title",null,{"children":"Pixel Probing | Fabian Iwand | Observable"}] 31:T634,function pixelate(imgData, options = {}) { const c = DOM.context2d(imgData.width, imgData.height, 1); c.canvas.style.maxWidth = '100%'; const w = imgData.width, h = imgData.height; const ds = new Uint32Array(imgData.data.buffer); // source data const dt = new Uint32Array(ds.length); // target data const dd = new Uint32Array(ds.length); // debug data const {slices, offset, mixRatio, debug} = options; const [_sx, _sy] = slices; const [_tx, _ty] = offset; const fn = (v, s, o) => segment(v, s) + o / s; const fnx = v => fn(v, _sx, _tx); const fny = v => fn(v, _sy, _ty); const isSource = (i0, i1, d = 2) => { if(i0 === i1) return true; for(let n = 1; n < d; n++) { if(i0 - n === i1 || i0 + n === i1 || i0 - n * w === i1 || i0 + n * w === i1) return true; } return false; }; for(let i0 = 0; i0 < ds.length; i0++) { const x0 = (i0 % w) / w * 2 - 1; const y0 = (i0 / w | 0) / h * 2 - 1; const x1 = clamp(0, w-1, Math.round((fnx(x0) * .5 + .5) * w)); const y1 = clamp(0, h-1, Math.round((fny(y0) * .5 + .5) * h)); const i1 = x1 + y1 * w; if(debug && isSource(i0, i1, 4)) dd[i0] = 0xffffffff; dt[i0] = ds[i1]; } c.putImageData(new ImageData(new Uint8ClampedArray(dt.buffer), w), 0, 0); if(mixRatio < 1) { c.save(); c.globalAlpha = 1 - mixRatio; c.drawImage(dataToCanvas(imgData), 0, 0); c.restore(); } if(debug) { c.save(); c.globalCompositeOperation = 'difference'; c.drawImage(dataToCanvas(dd, w), 0, 0); c.restore(); } return c.canvas; }32:[] 2f:{"id":"0c866e1f8389be71","slug":"pixel-probing","title":"Pixel Probing","thumbnail":"d21e0304070ad60d44060a8f4e088782cc48160d5d50cadc02a71bf33f256409","access_level":"public","create_time":"$D2019-08-30T12:40:32.984Z","update_time":"$D2019-10-09T10:58:02.473Z","view_time":null,"first_public_time":"$D2019-10-08T22:15:26.254Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024"},"version":872,"publish_version":872,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"e3842c7642c32750","slug":"tools","title":"Tools & Techniques","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"title":"Pixel Probing","cells":[{"id":0,"value":"md`# Pixel Probing\n\nExplores the effects of raster size and sample offset on a downsampled image.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"pixelate(imgData, options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"viewof options = {\n const c = {\n slices: xySlider({min: 1, max: 30, step: 1}),\n offset: xySlider({min: -1, max: 1}),\n debug: Object.assign(html``, {value: true, oninput(e) {this.value = e.target.checked}}),\n mixRatio: html``,\n };\n const view = html`\n

${c.slices}

Grid size

${c.offset}

Sample position

original ${c.mixRatio} pixelated

${c.debug} show sample positions

\n `;\n view.value = linkViews({}, c);\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":788,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"imgData = {\n const a = 4/3;\n const w = 400, h = w/a;\n const c = await getFittedImage(\n //testImage(400,300).toDataURL()\n 'https://i.imgur.com/4I9n6LU.png'\n //'https://upload.wikimedia.org/wikipedia/commons/3/38/Basic_shapes.svg'\n , w, h);\n return c.getContext('2d').getImageData(0, 0, w, h);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"md`---\n## Helpers\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"// Slices -1..1 into s segments and returns segment mid offset.\nfunction segment(v, s) {\n const o = (Math.floor(s) % 2) * .5;\n const k = s / 2;\n const m = mod(v * k + o, 1) / k;\n return v - m + 1 / s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":375,"value":"function lerp(a, b, t) {\n return a + (b - a) * t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"function clamp(a,b,v) {\n return v < a ? a : v > b ? b : v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"// Properly handles negative values.\nfunction mod(v, n) {\n return ((v % n) + n) % n;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"// Converts a CSS color definition to a 4-byte integer with correct endiannes.\nfunction colorToInt32(color) {\n const c = DOM.context2d(1,1,1);\n c.fillStyle = color;\n c.fillRect(0, 0, 1, 1);\n return new Uint32Array(c.getImageData(0, 0, 1, 1).data.buffer)[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"// Converts an int8 RGBA color to a 4-byte integer with correct endianness.\nfunction rgbaToInt32(r,g,b,a) {\n return new Uint32Array(new Uint8ClampedArray([r,g,b,a]).buffer)[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"function dataToCanvas(data, stride = null) {\n const imgData = data instanceof ImageData ? data : new ImageData(new Uint8ClampedArray(data.buffer), stride);\n const c = DOM.context2d(imgData.width, imgData.height, 1);\n c.putImageData(imgData, 0, 0);\n return c.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"async function getImageData(src) {\n const img = DOM.element('img', {crossorigin: 'anonymous', src});\n await img.decode();\n const {naturalWidth: width, naturalHeight: height} = img;\n const canvas = DOM.element('canvas', {width, height});\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0);\n return ctx.getImageData(0, 0, width, height);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"function testImage(w, h) {\n const imgData = new ImageData(w, h), d = imgData.data;\n for(let y = 0; y < h; y++) {\n for(let x = 0; x < w; x++) {\n d.set([x/(w-1)*255, y/(h-1)*255, (1-(x+y)/(w+h-2))*255, 255], (x + y * w) * 4);\n }\n }\n const c = DOM.context2d(w, h, 1);\n c.putImageData(imgData, 0, 0);\n return c.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"md`---\n## Dependencies\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {getFittedImage} with {getImageData} from '6a09ad13d0daa7e5'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"import {linkViews} from '691ae3b95f02db79'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"import {xySlider} from '98bbb19bf9e859ee@301'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"md`---\n## Scraps\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"/*\nfunction render(imgData, w, h, ox = .5, oy = .5) {\n const ds = new Uint32Array(imgData.data.buffer);\n const dt = new Uint32Array(w * h);\n \n const fn = (v, s, o) => lerp(...segment(v, s), o);\n const fnx = v => fn(v, w, ox);\n const fny = v => fn(v, h, oy);\n \n for(let i0 = 0; i0 < ds.length; i0++) {\n const x0 = (i0 % w) / w * 2 - 1;\n const y0 = (i0 / w | 0) / h * 2 - 1;\n const x1 = clamp(0, w-1, Math.round((fnx(x0) * .5 + .5) * w));\n const y1 = clamp(0, h-1, Math.round((fny(y0) * .5 + .5) * h));\n const i1 = x1 + y1 * w;\n dt[i0] = ds[i1];\n }\n \n const c = DOM.context2d(w, h, 1);\n c.putImageData(new ImageData(new Uint8ClampedArray(dt.buffer), w), 0, 0);\n return c.canvas;\n}\n*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"/*\n // Remainder and floor.\n const rx = x % s, fx = (x / s | 0) * s;\n const ry = y % s, fy = (y / s | 0) * s;\n // Offset switches.\n const mx = ((x / s | 0)) % 2;\n const my = ((y / s | 0)) % 2;\n\n const tx = mod(fx + (mx ? s - rx : -s + rx) + cx, w);\n const ty = mod(fy + (my ? s - ry : -s + ry) + cy, h);\n const ti = tx + ty * w;\n dt[i] = ds[ti];\n */","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"/*{\n const cols = 10, rows = 10;\n const w = 3, h = 3, s = 10;\n \n const samples = [];\n for(let y = 0; y < rows; y++) {\n for(let x = 0; x < cols; x++) {\n const tx = x/(cols-1), ty = y/(rows-1);\n const c = render(imgData, w, h, tx, ty);\n c.style.imageRendering = 'pixelated';\n c.style.width = `${w*s}px`;\n c.style.margin = '2px';\n samples.push(c);\n }\n }\n \n return html`

${samples}`;\n}*/","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"