1d:{"title":"Fake TV Noise","cells":[{"id":1095,"value":"md`# Fake TV Noise`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1346,"value":"$1f","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"ditheringOrdered = {\n function ditheringOrdered(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n const oldPixel = clone.data[px(x, y)];\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringOrdered.label = \"Ordered\"\n return ditheringOrdered;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"ditheringFloydSteinberg = {\n\n function ditheringFloydSteinberg(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n const errors = new Int32Array(img.width * img.height);\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n let oldPixel = clone.data[px(x, y)];\n oldPixel = ((oldPixel<<4) + (oldPixel>>>4) + errors[x + y*img.width])/ 16;\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[x+1 + y*img.width] += quantError * 7;\n errors[x-1 + (y+1)*img.width] += quantError * 3;\n errors[x + (y+1)*img.width] += quantError * 5;\n errors[x+1 + (y+1)*img.width] += quantError * 1;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringFloydSteinberg.label = \"Floyd-Steinberg\";\n return ditheringFloydSteinberg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"$20","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"$21","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"$22","pinned":false,"hidden":false,"mode":"ojs"},{"id":1135,"value":"ditheringSierraLite = {\n function ditheringSierraLite(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n const errors = new Int32Array(img.width * img.height);\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n let oldPixel = clone.data[px(x, y)];\n oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[x + y*img.width])/4;\n let newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[x+1 + y*img.width] += quantError*2;\n errors[x-1 + (y+1)*img.width] += quantError;\n errors[x + (y+1)*img.width] += quantError;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringSierraLite.label = \"Sierra Lite\";\n return ditheringSierraLite;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1122,"value":"$23","pinned":true,"hidden":false,"mode":"ojs"},{"id":1210,"value":"ditheringSkipNeighbours = {\n function ditheringSkipNeighbours(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n const errors = new Int32Array(img.width * img.height);\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n let oldPixel = clone.data[px(x, y)];\n oldPixel = ((oldPixel<<2) + (oldPixel>>>6) + errors[x + y*img.width])/4;\n let newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[x+2 + y*img.width] += quantError;\n errors[x+2 + (y+1)*img.width] += quantError;\n errors[x + (y+2)*img.width] += quantError;\n errors[x+1 + (y+2)*img.width] += quantError;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringSkipNeighbours.label = '\"Skip Neighbours\"';\n return ditheringSkipNeighbours;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1228,"value":"$24","pinned":true,"hidden":false,"mode":"ojs"},{"id":1232,"value":"$25","pinned":true,"hidden":false,"mode":"ojs"},{"id":1287,"value":"ditheringStraightRight = {\n function ditheringStraightRight(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n const errors = new Int32Array(img.width * img.height);\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n const oldPixel = (clone.data[px(x, y)] + errors[x + y*img.width]);\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[x+1 + y*img.width] += quantError;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringStraightRight.label = \"Diffuse Right\";\n return ditheringStraightRight;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1288,"value":"ditheringStraightDown = {\n function ditheringStraightDown(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n const errors = new Int32Array(img.width * img.height);\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n const oldPixel = (clone.data[px(x, y)] + errors[x + y*img.width]);\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[x + (y+1)*img.width] += quantError;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringStraightDown.label = \"Diffuse Down\";\n return ditheringStraightDown;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1291,"value":"ditheringDownRight = {\n function ditheringDownRight(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n const errors = new Int32Array(img.width * img.height);\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n const oldPixel = (clone.data[px(x, y)] + errors[x + y*img.width]);\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[x+1 + (y+1)*img.width] += quantError;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringDownRight.label = \"Diffuse Down-Right\";\n return ditheringDownRight;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1293,"value":"ditheringDownLeft = {\n function ditheringDownLeft(getPixel, getThreshold) {\n let {ctx, clone} = getDitheringCtx();\n const errors = new Int32Array(img.width * img.height);\n for (let y = 0; y < img.height; y++) {\n for (let x = 0; x < img.width; x++) {\n const oldPixel = (clone.data[px(x, y)] + errors[x + y*img.width]);\n const newPixel = getPixel(oldPixel, x, y, getThreshold);\n clone.data[px(x, y)] = clone.data[px(x, y) + 1] = clone.data[px(x, y) + 2] = newPixel;\n let quantError = oldPixel - newPixel;\n errors[x-1 + (y+1)*img.width] += quantError;\n }\n }\n ctx.putImageData(clone, 0, 0);\n return ctx.canvas;\n }\n ditheringDownLeft.label = \"Diffuse Down-Left\";\n return ditheringDownLeft;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":442,"value":"function px(x, y) {\n return (x * 4) + (y * img.width * 4);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"function getDitheringCtx() {\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.canvas.style = `width: ${img.width * 2}px; image-rendering: crisp-edges; image-rendering: pixelated`;\n\n let clone = new ImageData(new Uint8ClampedArray(img.data), img.width, img.height);\n return {\n ctx,\n clone\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"getPlainThreshold = {\n function getPlainThreshold(x, y){\n return 127;\n }\n getPlainThreshold.label = \"1×1\";\n return getPlainThreshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"get2x2threshold = {\n function get2x2threshold(x, y) {\n return thresholds2x2[(x&1) + ((y&1)<<1)];\n }\n get2x2threshold.label = \"2×2\"\n return get2x2threshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"get4x4threshold = {\n function get4x4threshold(x, y) {\n return thresholds4x4[(x&3) + ((y&3)<<2)];\n }\n get4x4threshold.label = \"4×4\";\n return get4x4threshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":426,"value":"get8x8threshold = {\n function get8x8threshold(x, y) {\n return thresholds8x8[(x&7) + ((y&7)<<3)];\n }\n get8x8threshold.label = \"8×8\"\n return get8x8threshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1258,"value":"get2x2hlinethreshold = {\n function get2x2hlinethreshold(x, y) {\n return thresholds2x2hline[(x&1) + ((y&1)<<1)];\n }\n get2x2hlinethreshold.label = \"2×2 h. line\"\n return get2x2hlinethreshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1260,"value":"get2x2vlinethreshold = {\n function get2x2vlinethreshold(x, y) {\n return thresholds2x2vline[(x&1) + ((y&1)<<1)];\n }\n get2x2vlinethreshold.label = \"2×2 v. line\"\n return get2x2vlinethreshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1275,"value":"get4x4hlinethreshold = {\n function get4x4hlinethreshold(x, y) {\n return thresholds4x4hline[(x&3) + ((y&3)<<2)];\n }\n get4x4hlinethreshold.label = \"4×4 h. line\";\n return get4x4hlinethreshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1276,"value":"get4x4vlinethreshold = {\n function get4x4vlinethreshold(x, y) {\n return thresholds4x4vline[(x&3) + ((y&3)<<2)];\n }\n get4x4vlinethreshold.label = \"4×4 v. line\";\n return get4x4vlinethreshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1280,"value":"get8x8hlinethreshold = {\n function get8x8hlinethreshold(x, y) {\n return thresholds8x8hline[(x&7) + ((y&7)<<3)];\n }\n get8x8hlinethreshold.label = \"8×8 h. line\"\n return get8x8hlinethreshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1279,"value":"get8x8vlinethreshold = {\n function get8x8vlinethreshold(x, y) {\n return thresholds8x8vline[(x&7) + ((y&7)<<3)];\n }\n get8x8vlinethreshold.label = \"8×8 v. line\"\n return get8x8vlinethreshold;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":" thresholds2x2 = [0,3,2,1].map(v => 32 + v*64)","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"thresholds4x4 = [1,8,3,11,13,5,15,7,4,12,2,10,16,8,14,6].map(v => 8 + 16*(v-1))","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"thresholds8x8 = [\n 0, 48, 12, 60, 3, 51, 15, 63,\n 32, 16, 44, 28, 35, 19, 47, 31,\n 8, 56, 4, 52, 11, 59, 7, 55,\n 40, 24, 36, 20, 43, 27, 39, 23,\n 2, 50, 14, 62, 1, 49, 13, 61,\n 34, 18, 46, 30, 33, 17, 45, 29,\n 10, 58, 6, 54, 9, 57, 5, 53,\n 42, 26, 38, 22, 43, 25, 37, 21\n].map(v => 2 + 4*v)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1239,"value":"thresholds2x2hline = [0,1,3,2].map(v => 32 + v*64)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1243,"value":"thresholds2x2vline = [0,3,1,2].map(v => 32 + v*64)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1246,"value":"thresholds4x4hline = [\n 0,1,2,3,\n 11,10,9,8,\n 4,5,6,7,\n 15,14,13,12,\n].map(v => 8 + 16*v)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1250,"value":"thresholds4x4vline = [\n 0,11,4,15,\n 1,10,5,14,\n 2,9,6,13,\n 3,8,7,12 \n].map(v => 8 + 16*v)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1252,"value":"thresholds8x8hline = [\n 0, 1, 2, 3, 4, 5, 6, 7,\n 39, 38, 37, 36, 35, 34, 33, 32, \n 16, 17, 18, 19, 20, 21, 22, 23,\n 55, 54, 53, 52, 51, 50, 49, 48,\n 8, 9, 10, 11, 12, 13, 14, 15,\n 47, 46, 45, 44, 43, 42, 41, 40,\n 24, 25, 26, 27, 28, 29, 30, 31,\n 63, 62, 61, 60, 59, 58, 57, 56,\n].map(v => 2 + 4*v)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1254,"value":"thresholds8x8vline = [\n 0, 39, 16, 55, 8, 47, 24, 63,\n 1, 38, 17, 54, 9, 46, 25, 62,\n 2, 37, 18, 53, 10, 45, 26, 61,\n 3, 36, 19, 52, 11, 44, 27, 60,\n 4, 35, 20, 51, 12, 43, 28, 59,\n 5, 34, 21, 50, 13, 42, 29, 58,\n 6, 33, 22, 49, 14, 41, 30, 57,\n 7, 32, 23, 48, 15, 40, 31, 56,\n].map(v => 2 + 4*v)","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"grayscale2bit = [0, 85, 170, 255, 255]","pinned":false,"hidden":false,"mode":"ojs"},{"id":913,"value":"grayscale4bit = [0,17,34,51,68,85,102,119,136,153,170,187,204,221,238,255, 255]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1041,"value":"getPixels = [getPixel1bit, getPixel2bit, getPixel4bit];","pinned":true,"hidden":false,"mode":"ojs"},{"id":946,"value":"function getPixel1bit(oldPixel, x, y, getThreshold) {\n const treshold = getThreshold(x, y);\n return oldPixel > treshold ? 255 : 0;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":930,"value":"function getPixel2bit(oldPixel, x, y, getThreshold) {\n const threshold = (getThreshold(x, y) - 128)/256;\n return grayscale2bit[Math.round(threshold + oldPixel * 3 / 255)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":943,"value":"function getPixel4bit(oldPixel, x, y, getThreshold) {\n const threshold = (getThreshold(x, y) - 128)/256;\n return grayscale4bit[Math.round(threshold + oldPixel * 15 / 255)];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"img = {\n let img = new Image();\n img.crossOrigin = '*';\n img.src = 'https://file-hamhdaleym.now.sh/';\n img.style.width = `${img.width * 2}px`;\n img.style.imageRendering = 'crisp-edges';\n\n await new Promise(resolve => img.addEventListener('load', resolve));\n let ctx = DOM.canvas(img.width, img.height).getContext('2d');\n ctx.drawImage(img, 0, 0);\n return {\n data: ctx.getImageData(0, 0, img.width, img.height).data,\n width: img.width,\n height: img.height,\n image: img\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W26","stdlib":"1"}