28:null 29:["$","title",null,{"children":"XBR Scaling | Josh | Observable"}] 2e:T73b,doubleImage = ( image ) => { // if (process.argv.length < 4) { // console.error('Usage: test.js in.png out.png'); // process.exit(1); // } // const fs = require('fs'); // const Canvas = require('canvas'); // const superxbr = require('./index'); // const Image = Canvas.Image; // var file = fs.readFileSync(process.argv[2]); // var image = new Image(); // image.src = file; // const canvas = new Canvas(); const canvas = document.createElement(`canvas`) const ctx = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0, image.width, image.height); // Compress RGBA into single integers const count = image.width * image.height; const data = ctx.getImageData(0, 0, image.width, image.height).data; const original = new Array(count); for (let i = 0; i < count; i++) { const index = i << 2; original[i] = (data[index + 3] << 24) + (data[index + 2] << 16) + (data[index + 1] << 8) + data[index]; } const result = superxbr(original, image.width, image.height); canvas.width *= 2; canvas.height *= 2; // Convert integers back to RGBA const newImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); const dest = newImageData.data; for (let i = 0; i < count * 4; i++) { const index = i << 2; dest[index] = result[i] & 255; dest[index + 1] = (result[i] >> 8) & 255; dest[index + 2] = (result[i] >> 16) & 255; dest[index + 3] = (result[i] >> 24) & 255; } ctx.putImageData(newImageData, 0, 0); const img = document.createElement("img"); img.src = canvas.toDataURL("image/png"); // const stream = canvas.pngStream(); // const outStream = fs.createWriteStream(process.argv[3]); // stream.on('data', function(chunk) { // outStream.write(chunk); // }); return img }2f:T30a8,{ // superxbr = { const wgt1 = 0.129633; const wgt2 = 0.175068; const w1 = -wgt1; const w2 = wgt1 + 0.5; const w3 = -wgt2; const w4 = wgt2 + 0.5; function df(a, b) { return Math.abs(a - b); } function clamp(x, floor, ceil) { return Math.max(Math.min(x, ceil), floor); } function matrix4() { // Surprisingly, using Uint8Arrays ends up being slower. return [[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0]]; } /* P1 |P0|B |C |P1| C F4 |a0|b1|c2|d3| |D |E |F |F4| B F I4 |b0|c1|d2|e3| |e1|i1|i2|e2| |G |H |I |I4| P0 E A I P3 |c0|d1|e2|f3| |e3|i3|i4|e4| |P2|H5|I5|P3| D H I5 |d0|e1|f2|g3| G H5 P2 sx, sy -1 -1 | -2 0 (x+y) (x-y) -3 1 (x+y-1) (x-y+1) -1 0 | -1 -1 -2 0 -1 1 | 0 -2 -1 -1 -1 2 | 1 -3 0 -2 0 -1 | -1 1 (x+y) (x-y) ... ... ... 0 0 | 0 0 0 1 | 1 -1 0 2 | 2 -2 1 -1 | 0 2 ... 1 0 | 1 1 1 1 | 2 0 1 2 | 3 -1 2 -1 | 1 3 ... 2 0 | 2 2 2 1 | 3 1 2 2 | 4 0 */ function diagonal_edge(mat, wp) { let dw1 = wp[0]*(df(mat[0][2], mat[1][1]) + df(mat[1][1], mat[2][0]) + df(mat[1][3], mat[2][2]) + df(mat[2][2], mat[3][1])) + wp[1]*(df(mat[0][3], mat[1][2]) + df(mat[2][1], mat[3][0])) + wp[2]*(df(mat[0][3], mat[2][1]) + df(mat[1][2], mat[3][0])) + wp[3]*df(mat[1][2], mat[2][1]) + wp[4]*(df(mat[0][2], mat[2][0]) + df(mat[1][3], mat[3][1])) + wp[5]*(df(mat[0][1], mat[1][0]) + df(mat[2][3], mat[3][2])); let dw2 = wp[0]*(df(mat[0][1], mat[1][2]) + df(mat[1][2], mat[2][3]) + df(mat[1][0], mat[2][1]) + df(mat[2][1], mat[3][2])) + wp[1]*(df(mat[0][0], mat[1][1]) + df(mat[2][2], mat[3][3])) + wp[2]*(df(mat[0][0], mat[2][2]) + df(mat[1][1], mat[3][3])) + wp[3]*df(mat[1][1], mat[2][2]) + wp[4]*(df(mat[1][0], mat[3][2]) + df(mat[0][1], mat[2][3])) + wp[5]*(df(mat[0][2], mat[1][3]) + df(mat[2][0], mat[3][1])); return (dw1 - dw2); } ///////////////////////// Super-xBR scaling // perform super-xbr (fast shader version) scaling by factor f=2 only. return function superxbr(data, w, h) { const f = 2; const outw = w*f, outh = h*f; const wp = [2.0, 1.0, -1.0, 4.0, -1.0, 1.0]; const out = new Array(outw * outh); // First Pass const r = matrix4(), g = matrix4(), b = matrix4(), a = matrix4(), Y = matrix4(); let rf, gf, bf, af, ri, gi, bi, ai; let d_edge; let min_r_sample, max_r_sample; let min_g_sample, max_g_sample; let min_b_sample, max_b_sample; let min_a_sample, max_a_sample; for (let y = 0; y < outh; ++y) { for (let x = 0; x < outw; ++x) { const cx = x / f, cy = y / f; // central pixels on original images // sample supporting pixels in original image for (let sx = -1; sx <= 2; ++sx) { for (let sy = -1; sy <= 2; ++sy) { // clamp pixel locations let csy = clamp(sy + cy, 0, h - 1); let csx = clamp(sx + cx, 0, w - 1); // sample & add weighted components let sample = data[csy*w + csx]; r[sx + 1][sy + 1] = ((sample)>> 0)&0xFF; g[sx + 1][sy + 1] = ((sample)>> 8)&0xFF; b[sx + 1][sy + 1] = ((sample)>> 16)&0xFF; a[sx + 1][sy + 1] = ((sample)>> 24)&0xFF; Y[sx + 1][sy + 1] = (0.2126*r[sx + 1][sy + 1] + 0.7152*g[sx + 1][sy + 1] + 0.0722*b[sx + 1][sy + 1]); } } min_r_sample = Math.min(r[1][1], r[2][1], r[1][2], r[2][2]); min_g_sample = Math.min(g[1][1], g[2][1], g[1][2], g[2][2]); min_b_sample = Math.min(b[1][1], b[2][1], b[1][2], b[2][2]); min_a_sample = Math.min(a[1][1], a[2][1], a[1][2], a[2][2]); max_r_sample = Math.max(r[1][1], r[2][1], r[1][2], r[2][2]); max_g_sample = Math.max(g[1][1], g[2][1], g[1][2], g[2][2]); max_b_sample = Math.max(b[1][1], b[2][1], b[1][2], b[2][2]); max_a_sample = Math.max(a[1][1], a[2][1], a[1][2], a[2][2]); d_edge = diagonal_edge(Y, wp); if (d_edge <= 0) { rf = w1*(r[0][3] + r[3][0]) + w2*(r[1][2] + r[2][1]); gf = w1*(g[0][3] + g[3][0]) + w2*(g[1][2] + g[2][1]); bf = w1*(b[0][3] + b[3][0]) + w2*(b[1][2] + b[2][1]); af = w1*(a[0][3] + a[3][0]) + w2*(a[1][2] + a[2][1]); } else { rf = w1*(r[0][0] + r[3][3]) + w2*(r[1][1] + r[2][2]); gf = w1*(g[0][0] + g[3][3]) + w2*(g[1][1] + g[2][2]); bf = w1*(b[0][0] + b[3][3]) + w2*(b[1][1] + b[2][2]); af = w1*(a[0][0] + a[3][3]) + w2*(a[1][1] + a[2][2]); } // anti-ringing, clamp. rf = clamp(rf, min_r_sample, max_r_sample); gf = clamp(gf, min_g_sample, max_g_sample); bf = clamp(bf, min_b_sample, max_b_sample); af = clamp(af, min_a_sample, max_a_sample); ri = clamp(Math.ceil(rf), 0, 255); gi = clamp(Math.ceil(gf), 0, 255); bi = clamp(Math.ceil(bf), 0, 255); ai = clamp(Math.ceil(af), 0, 255); out[y*outw + x] = out[y*outw + x + 1] = out[(y + 1)*outw + x] = data[cy*w + cx]; out[(y+1)*outw + x+1] = (ai << 24) | (bi << 16) | (gi << 8) | ri; ++x; } ++y; } // Second Pass wp[0] = 2.0; wp[1] = 0.0; wp[2] = 0.0; wp[3] = 0.0; wp[4] = 0.0; wp[5] = 0.0; for (let y = 0; y < outh; ++y) { for (let x = 0; x < outw; ++x) { // sample supporting pixels in original image for (let sx = -1; sx <= 2; ++sx) { for (let sy = -1; sy <= 2; ++sy) { // clamp pixel locations const csy = clamp(sx - sy + y, 0, f*h - 1); const csx = clamp(sx + sy + x, 0, f*w - 1); // sample & add weighted components const sample = out[csy*outw + csx]; r[sx + 1][sy + 1] = ((sample)>> 0)&0xFF; g[sx + 1][sy + 1] = ((sample)>> 8)&0xFF; b[sx + 1][sy + 1] = ((sample)>> 16)&0xFF; a[sx + 1][sy + 1] = ((sample)>> 24)&0xFF; Y[sx + 1][sy + 1] = (0.2126*r[sx + 1][sy + 1] + 0.7152*g[sx + 1][sy + 1] + 0.0722*b[sx + 1][sy + 1]); } } min_r_sample = Math.min(r[1][1], r[2][1], r[1][2], r[2][2]); min_g_sample = Math.min(g[1][1], g[2][1], g[1][2], g[2][2]); min_b_sample = Math.min(b[1][1], b[2][1], b[1][2], b[2][2]); min_a_sample = Math.min(a[1][1], a[2][1], a[1][2], a[2][2]); max_r_sample = Math.max(r[1][1], r[2][1], r[1][2], r[2][2]); max_g_sample = Math.max(g[1][1], g[2][1], g[1][2], g[2][2]); max_b_sample = Math.max(b[1][1], b[2][1], b[1][2], b[2][2]); max_a_sample = Math.max(a[1][1], a[2][1], a[1][2], a[2][2]); d_edge = diagonal_edge(Y, wp); if (d_edge <= 0) { rf = w3*(r[0][3] + r[3][0]) + w4*(r[1][2] + r[2][1]); gf = w3*(g[0][3] + g[3][0]) + w4*(g[1][2] + g[2][1]); bf = w3*(b[0][3] + b[3][0]) + w4*(b[1][2] + b[2][1]); af = w3*(a[0][3] + a[3][0]) + w4*(a[1][2] + a[2][1]); } else { rf = w3*(r[0][0] + r[3][3]) + w4*(r[1][1] + r[2][2]); gf = w3*(g[0][0] + g[3][3]) + w4*(g[1][1] + g[2][2]); bf = w3*(b[0][0] + b[3][3]) + w4*(b[1][1] + b[2][2]); af = w3*(a[0][0] + a[3][3]) + w4*(a[1][1] + a[2][2]); } // anti-ringing, clamp. rf = clamp(rf, min_r_sample, max_r_sample); gf = clamp(gf, min_g_sample, max_g_sample); bf = clamp(bf, min_b_sample, max_b_sample); af = clamp(af, min_a_sample, max_a_sample); ri = clamp(Math.ceil(rf), 0, 255); gi = clamp(Math.ceil(gf), 0, 255); bi = clamp(Math.ceil(bf), 0, 255); ai = clamp(Math.ceil(af), 0, 255); out[y*outw + x + 1] = (ai << 24) | (bi << 16) | (gi << 8) | ri; for (let sx = -1; sx <= 2; ++sx) { for (let sy = -1; sy <= 2; ++sy) { // clamp pixel locations const csy = clamp(sx - sy + 1 + y, 0, f*h - 1); const csx = clamp(sx + sy - 1 + x, 0, f*w - 1); // sample & add weighted components const sample = out[csy*outw + csx]; r[sx + 1][sy + 1] = ((sample)>> 0)&0xFF; g[sx + 1][sy + 1] = ((sample)>> 8)&0xFF; b[sx + 1][sy + 1] = ((sample)>> 16)&0xFF; a[sx + 1][sy + 1] = ((sample)>> 24)&0xFF; Y[sx + 1][sy + 1] = (0.2126*r[sx + 1][sy + 1] + 0.7152*g[sx + 1][sy + 1] + 0.0722*b[sx + 1][sy + 1]); } } d_edge = diagonal_edge(Y, wp); if (d_edge <= 0) { rf = w3*(r[0][3] + r[3][0]) + w4*(r[1][2] + r[2][1]); gf = w3*(g[0][3] + g[3][0]) + w4*(g[1][2] + g[2][1]); bf = w3*(b[0][3] + b[3][0]) + w4*(b[1][2] + b[2][1]); af = w3*(a[0][3] + a[3][0]) + w4*(a[1][2] + a[2][1]); } else { rf = w3*(r[0][0] + r[3][3]) + w4*(r[1][1] + r[2][2]); gf = w3*(g[0][0] + g[3][3]) + w4*(g[1][1] + g[2][2]); bf = w3*(b[0][0] + b[3][3]) + w4*(b[1][1] + b[2][2]); af = w3*(a[0][0] + a[3][3]) + w4*(a[1][1] + a[2][2]); } // anti-ringing, clamp. rf = clamp(rf, min_r_sample, max_r_sample); gf = clamp(gf, min_g_sample, max_g_sample); bf = clamp(bf, min_b_sample, max_b_sample); af = clamp(af, min_a_sample, max_a_sample); ri = clamp(Math.ceil(rf), 0, 255); gi = clamp(Math.ceil(gf), 0, 255); bi = clamp(Math.ceil(bf), 0, 255); ai = clamp(Math.ceil(af), 0, 255); out[(y+1)*outw + x] = (ai << 24) | (bi << 16) | (gi << 8) | ri; ++x; } ++y; } // Third Pass wp[0] = 2.0; wp[1] = 1.0; wp[2] = -1.0; wp[3] = 4.0; wp[4] = -1.0; wp[5] = 1.0; for (let y = outh - 1; y >= 0; --y) { for (let x = outw - 1; x >= 0; --x) { for (let sx = -2; sx <= 1; ++sx) { for (let sy = -2; sy <= 1; ++sy) { // clamp pixel locations const csy = clamp(sy + y, 0, f*h - 1); const csx = clamp(sx + x, 0, f*w - 1); // sample & add weighted components let sample = out[csy*outw + csx]; r[sx + 2][sy + 2] = ((sample)>> 0)&0xFF; g[sx + 2][sy + 2] = ((sample)>> 8)&0xFF; b[sx + 2][sy + 2] = ((sample)>> 16)&0xFF; a[sx + 2][sy + 2] = ((sample)>> 24)&0xFF; Y[sx + 2][sy + 2] = (0.2126*r[sx + 2][sy + 2] + 0.7152*g[sx + 2][sy + 2] + 0.0722*b[sx + 2][sy + 2]); } } min_r_sample = Math.min(r[1][1], r[2][1], r[1][2], r[2][2]); min_g_sample = Math.min(g[1][1], g[2][1], g[1][2], g[2][2]); min_b_sample = Math.min(b[1][1], b[2][1], b[1][2], b[2][2]); min_a_sample = Math.min(a[1][1], a[2][1], a[1][2], a[2][2]); max_r_sample = Math.max(r[1][1], r[2][1], r[1][2], r[2][2]); max_g_sample = Math.max(g[1][1], g[2][1], g[1][2], g[2][2]); max_b_sample = Math.max(b[1][1], b[2][1], b[1][2], b[2][2]); max_a_sample = Math.max(a[1][1], a[2][1], a[1][2], a[2][2]); let d_edge = diagonal_edge(Y, wp); if (d_edge <= 0) { rf = w1*(r[0][3] + r[3][0]) + w2*(r[1][2] + r[2][1]); gf = w1*(g[0][3] + g[3][0]) + w2*(g[1][2] + g[2][1]); bf = w1*(b[0][3] + b[3][0]) + w2*(b[1][2] + b[2][1]); af = w1*(a[0][3] + a[3][0]) + w2*(a[1][2] + a[2][1]); } else { rf = w1*(r[0][0] + r[3][3]) + w2*(r[1][1] + r[2][2]); gf = w1*(g[0][0] + g[3][3]) + w2*(g[1][1] + g[2][2]); bf = w1*(b[0][0] + b[3][3]) + w2*(b[1][1] + b[2][2]); af = w1*(a[0][0] + a[3][3]) + w2*(a[1][1] + a[2][2]); } // anti-ringing, clamp. rf = clamp(rf, min_r_sample, max_r_sample); gf = clamp(gf, min_g_sample, max_g_sample); bf = clamp(bf, min_b_sample, max_b_sample); af = clamp(af, min_a_sample, max_a_sample); ri = clamp(Math.ceil(rf), 0, 255); gi = clamp(Math.ceil(gf), 0, 255); bi = clamp(Math.ceil(bf), 0, 255); ai = clamp(Math.ceil(af), 0, 255); out[y*outw + x] = (ai << 24) | (bi << 16) | (gi << 8) | ri; } } return out; }; }30:[{"id":"d9b6d443c5dc7409e723f126cf2fc496fb8045dd046df3f0d92713df2dc377706a29aff168960db62d52c9741dd06201439dbd6ea47faf6b5d3bc4a33be0612c","href":"https://static.observableusercontent.com/files/d9b6d443c5dc7409e723f126cf2fc496fb8045dd046df3f0d92713df2dc377706a29aff168960db62d52c9741dd06201439dbd6ea47faf6b5d3bc4a33be0612c","name":"eyedropper_28px.png","type":"image/png","lastModified":1591148140647.089,"size":363},{"id":"49b77698f87a3f40b6f7fe7e2b216baec15c34b64d968de31f292f70c7330e9eb039a9893511beb109cdf21c7b0137966b21b00ef9b072a7e0c2669328ee2959","href":"https://static.observableusercontent.com/files/49b77698f87a3f40b6f7fe7e2b216baec15c34b64d968de31f292f70c7330e9eb039a9893511beb109cdf21c7b0137966b21b00ef9b072a7e0c2669328ee2959","name":"mop_28px.png","type":"image/png","lastModified":1591148140641.364,"size":412},{"id":"43e73e0d909df0e376715eab615535d72920165549b54da1af1158201227f01b1d128153f0e09f483f2f4382357b92ad8a44e072fd8343738bb4a4baa3becec2","href":"https://static.observableusercontent.com/files/43e73e0d909df0e376715eab615535d72920165549b54da1af1158201227f01b1d128153f0e09f483f2f4382357b92ad8a44e072fd8343738bb4a4baa3becec2","name":"eraser_28px.png","type":"image/png","lastModified":1591148140638.386,"size":323}] 2c:{"id":"57fdcadaa7903a56","slug":"xbr-scaling","title":"XBR Scaling","thumbnail":"9ad7c473cc07ac41abd669bb9ca078025727388c3f194729d2dc8e61184138ed","access_level":"public","create_time":"$D2020-05-19T10:38:23.386Z","update_time":"$D2020-06-06T03:39:01.409Z","view_time":null,"first_public_time":"$D2020-06-03T02:11:07.429Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":"starter_2024"},"version":351,"publish_version":351,"role":null,"authored":false,"authors":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null}],"members":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"XBR Scaling","cells":[{"id":0,"value":"md`# XBR Scaling`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"viewof selection = select({\n title:'Select an image',\n description: \"As a child, which vegetables did you refuse to eat?\",\n options: Object.keys( Images ),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"// ORIGINAL","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"image28px = Images[ selection ]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"// SCALED ONCE USING SUPER-XBR","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"image56px = doubleImage( image28px )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":256,"value":"// SCALED TWICE USING SUPER-XBR","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"image112px = doubleImage( image56px )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"superxbr = (data, width, height) => min_superxbr(data, width, height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"min_superxbr = await require('https://bundle.run/super-xbr@1.0.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"Images = ({\n ERASER: await FileAttachment( `eraser_28px.png` ).image(),\n MOP: await FileAttachment( `mop_28px.png` ).image(),\n EYEDROPPER: await FileAttachment( `eyedropper_28px.png` ).image(),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"