29:null 2a:["$","title",null,{"children":"Coverting Images to NES colors, 16 colors, 8 colors, and 2 colors. | Patrick M. Dudas | Observable"}] 2f:T490,AveragePixels = { const width = pictureDimensions.width const height = pictureDimensions.height const data = new Uint8ClampedArray(width * height * 4) for (var i = 0; i < width; i=i+pixelSize) { for (var j = 0; j < height; j=j+pixelSize) { var tmph = [], tmps = [], tmpl = []; for (var x = 0; x < pixelSize; x++) { for (var y = 0; y < pixelSize; y++) { if (((i+x) $\"Van$ \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"md`## Get Pixels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"md` First, for each pixel it finds the RGBA values and then converts these to LAB. Then using the pixelSize, calculates a mean for each this given pixel size.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":572,"value":"pictureDimensions = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"getPixels = new Promise((resolve, reject) => {\n const image = new Image;\n image.crossOrigin = \"anonymous\";\n image.onerror = reject;\n image.onload = () => {\n const height = Math.round(width * image.height / image.width);\n const context = DOM.context2d(width, height, 1);\n context.drawImage(image, 0, 0, image.width, image.height, 0, 0, width, height);\n const {data: rgba} = context.getImageData(0, 0, width, height)\n const data = new Uint8ClampedArray(width * height * 4)\n const arr2D = []\n const arr2Dreduced = new Array(Math.ceil(width/pixelSize)).fill(new Array(Math.ceil(height/pixelSize)))\n pictureDimensions.width = width \n pictureDimensions.height = height \n for (var i = 0; i < height*width*4; i=i+4) { \n var h = Math.floor((i/4)/width);\n var w = (i/4)%width\n if (w==0) arr2D.push([])\n arr2D[h].push(d3.lab(d3.rgb(rgba[i],rgba[i+1],rgba[i+2])))\n }\n \n \n resolve(arr2D);\n };\n image.src = original_image.src;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"md`### Using Average Pixelation Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"pixelSize = 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"{\n const canvas = DOM.canvas(pictureDimensions.width, pictureDimensions.height);\n const context = canvas.getContext('2d');\n const newImage = new ImageData(AveragePixels, pictureDimensions.width, pictureDimensions.height);\n context.putImageData(newImage, 0, 0);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`## Using NES Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"NESColors = {\nreturn [\n [0,0,252],\n [0,0,188],\n [68,40,188],\n [148,0,132],\n [168,0,32],\n [168,16,0],\n [136,20,0],\n [80,48,0],\n [0,120,0],\n [0,104,0],\n [0,88,0],\n [0,64,88],\n [0,120,248],\n [0,88,248],\n [104,68,252],\n [216,0,204],\n [228,0,88],\n [248,56,0],\n [228,92,16],\n [172,124,0],\n [0,184,0],\n [0,168,0],\n [0,168,68],\n [0,136,136],\n [60,188,252],\n [104,136,252],\n [152,120,248],\n [248,120,248],\n [248,88,152],\n [248,120,88],\n [252,160,68],\n [248,184,0],\n [184,248,24],\n [88,216,84],\n [88,248,152],\n [0,232,216],\n [252,252,252],\n [164,228,252],\n [184,184,248],\n [216,184,248],\n [248,184,248],\n [248,164,192],\n [240,208,176],\n [252,224,168],\n [248,216,120],\n [216,248,120],\n [184,248,184],\n [184,248,216],\n [0,252,252],\n [248,216,248],\n [248,248,248],\n [0,0,0]\n]\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"{\n const wBlock = 800\n const hBlock = 400\n var svg = d3.select(DOM.svg(wBlock, hBlock))\n .attr(\"width\", wBlock+\"px\")\n .attr(\"height\", hBlock+\"px\")\n \n const blockPlacementX = d3.scaleLinear().range([20,wBlock-20]).domain([0,NESColors.length/2])\n const blockPlacementY = d3.scaleLinear().range([20,hBlock-20]).domain([0,2])\n const rectSizeW = ((wBlock-20)-(20))/(NESColors.length/2)\n const rectSizeH = ((hBlock-20)-(20))/2\n svg.selectAll(\"rect.colors\").data(NESColors).enter().append(\"rect\")\n .attr(\"class\",\"colors\")\n .attr(\"x\",(d,i)=> blockPlacementX(i%(NESColors.length/2)))\n .attr(\"width\", rectSizeW)\n .attr(\"y\",(d,i)=> blockPlacementY(Math.floor(i/(NESColors.length/2))))\n .attr(\"height\", rectSizeH)\n .style(\"fill\",d=> d3.rgb(d[0],d[1],d[2]))\n .append(\"title\")\n .text(d=>d)\n \n yield svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n const canvas = DOM.canvas(pictureDimensions.width, pictureDimensions.height);\n const context = canvas.getContext('2d');\n const newImage = new ImageData(NESdata, pictureDimensions.width, pictureDimensions.height);\n context.putImageData(newImage, 0, 0);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"md`## Using 16 Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"sixteenColors = {\nreturn [[0,0,0], [0,0,170], [85,85,255], [0,170,0], [85,255,85], [0,170,170], [85,255,255], [170,0,0], [255,85,85], [170,0,170], [255,85,255], [170,85,0], [255,255,85], [192,192,192], [128,128,128], [255,255,255]]\n}\n ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"{\n const wBlock = 800\n const hBlock = 400\n var svg = d3.select(DOM.svg(wBlock, hBlock))\n .attr(\"width\", wBlock+\"px\")\n .attr(\"height\", hBlock+\"px\")\n \n const length = sixteenColors.length\n const blockPlacementX = d3.scaleLinear().range([20,wBlock-20]).domain([0,length/2])\n const blockPlacementY = d3.scaleLinear().range([20,hBlock-20]).domain([0,2])\n const rectSizeW = ((wBlock-20)-(20))/(length/2)\n const rectSizeH = ((hBlock-20)-(20))/2\n svg.selectAll(\"rect.colors\").data(sixteenColors).enter().append(\"rect\")\n .attr(\"class\",\"colors\")\n .attr(\"x\",(d,i)=> blockPlacementX(i%(length/2)))\n .attr(\"width\", rectSizeW)\n .attr(\"y\",(d,i)=> blockPlacementY(Math.floor(i/(length/2))))\n .attr(\"height\", rectSizeH)\n .style(\"fill\",d=> d3.rgb(d[0],d[1],d[2]))\n .append(\"title\")\n .text(d=>d)\n \n yield svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"{\n const canvas = DOM.canvas(pictureDimensions.width, pictureDimensions.height);\n const context = canvas.getContext('2d');\n const newImage = new ImageData(sixteendata, pictureDimensions.width, pictureDimensions.height);\n context.putImageData(newImage, 0, 0);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`## 8 Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":421,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"eightColors = {\nreturn [[0,0,0], [0,28,247], [0,249,60], [0,250,252], [255,56,44], [255,64,250], [255,254,75], [255,255,255]]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"{\n const wBlock = 800\n const hBlock = 400\n var svg = d3.select(DOM.svg(wBlock, hBlock))\n .attr(\"width\", wBlock+\"px\")\n .attr(\"height\", hBlock+\"px\")\n \n const length = eightColors.length\n const blockPlacementX = d3.scaleLinear().range([20,wBlock-20]).domain([0,length/2])\n const blockPlacementY = d3.scaleLinear().range([20,hBlock-20]).domain([0,2])\n const rectSizeW = ((wBlock-20)-(20))/(length/2)\n const rectSizeH = ((hBlock-20)-(20))/2\n svg.selectAll(\"rect.colors\").data(eightColors ).enter().append(\"rect\")\n .attr(\"class\",\"colors\")\n .attr(\"x\",(d,i)=> blockPlacementX(i%(length/2)))\n .attr(\"width\", rectSizeW)\n .attr(\"y\",(d,i)=> blockPlacementY(Math.floor(i/(length/2))))\n .attr(\"height\", rectSizeH)\n .style(\"fill\",d=> d3.rgb(d[0],d[1],d[2]))\n .append(\"title\")\n .text(d=>d)\n \n yield svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"{\n const canvas = DOM.canvas(pictureDimensions.width, pictureDimensions.height);\n const context = canvas.getContext('2d');\n const newImage = new ImageData(eightdata, pictureDimensions.width, pictureDimensions.height);\n context.putImageData(newImage, 0, 0);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`### Green/Black`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":470,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"amberColors = {\nreturn [[40,40,40], [51,255,51]]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"{\n const wBlock = 800\n const hBlock = 400\n var svg = d3.select(DOM.svg(wBlock, hBlock))\n .attr(\"width\", wBlock+\"px\")\n .attr(\"height\", hBlock+\"px\")\n \n const length = amberColors.length\n const blockPlacementX = d3.scaleLinear().range([20,wBlock-20]).domain([0,length/2])\n const blockPlacementY = d3.scaleLinear().range([20,hBlock-20]).domain([0,2])\n const rectSizeW = ((wBlock-20)-(20))/(length/2)\n const rectSizeH = ((hBlock-20)-(20))/2\n svg.selectAll(\"rect.colors\").data(amberColors).enter().append(\"rect\")\n .attr(\"class\",\"colors\")\n .attr(\"x\",(d,i)=> blockPlacementX(i%(length/2)))\n .attr(\"width\", rectSizeW)\n .attr(\"y\",(d,i)=> blockPlacementY(Math.floor(i/(length/2))))\n .attr(\"height\", rectSizeH)\n .style(\"fill\",d=> d3.rgb(d[0],d[1],d[2]))\n .append(\"title\")\n .text(d=>d)\n \n yield svg.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":476,"value":"{\n const canvas = DOM.canvas(pictureDimensions.width, pictureDimensions.height);\n const context = canvas.getContext('2d');\n const newImage = new ImageData(amberdata, pictureDimensions.width, pictureDimensions.height);\n context.putImageData(newImage, 0, 0);\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function closestPoint(point,list) {\n /*var r = point[0]\n var g = point[1]\n var b = point[2]\n var l = d3.lab(d3.rgb(r,g,b))\n var lab = [l.l,l.a,l.b];\n var average = d3.range(3).map(function(i){\n return d3.mean(lab.map(function(color){\n console.log(color[i])\n return color[i];\n }));\n });\n\n \n console.log(average)*/\n var minDistance = Infinity,\n value;\n\n list.forEach(function(p){\n var color = d3.rgb(p[0],p[1],p[2])\n //console.log(color)\n var distance = euclidean(point,[color.r,color.g,color.b]);\n if (distance < minDistance) {\n minDistance = distance;\n value = p;\n }\n });\n\n return value;\n\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function euclidean(a,b) {\n\n var sum = 0;\n\n a.forEach(function(val,i){\n sum += Math.pow(b[i] - val,2);\n });\n\n return Math.sqrt(sum);\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"import {input} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"import {imageInput} from \"@mbostock/file-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"