45:["$","title",null,{"children":"Dithering on Non-Square Pixels | Matt Dzugan | Observable"}] 4d:T422,polys = { const zoom = zoomlevel; const asp = width / height; const h = 6.0 * zoom; const w = asp * h * zoom; const sc = height / (2*h); const M = mul( [1, 0, width/2.0, 0, 1, height/2.0], [sc, 0, 0, 0, -sc, 0] ); var polys = [] const COLS = ["#457b9d","#1d3557","#a8dadc"] for( let i of a_tiling.fillRegionBounds( -w-5.0, -h-5.0, w+5.0, h+5.0 ) ) { const TT = i.T; const T = mul( M, TT ); const col_id = a_tiling.getColour( i.t1, i.t2, i.aspect ); var poly = []; var iii = 0; for( let v of tile_shape ) { const P = mul( T, v ); poly.push(P) iii++; } const centroid = mul(T, tile_shape_centroid); const minx = d3.min(poly.map(v=>v.x)), maxx = d3.max(poly.map(v=>v.x)), miny = d3.min(poly.map(v=>v.y)), maxy = d3.max(poly.map(v=>v.y)); const b = 2000; // buffer const nearCanvas = (maxx>-b)&(minx-b)&(miny**Diffuse errors to the _A_ closest neighbors (within _B_ distance), at a factor inversely proportional to each neghbor's distance^(_C_), exagerated by _D_.** And you'll find those 4 sliders below. `50:T42f,sorted_polys = { // first we sort the polygons function myRound(x){ return(Math.round(x*10)) } var s = polys.slice() .sort((a, b) => d3.ascending(myRound(a.centroid.y), myRound(b.centroid.y)) || d3.ascending(myRound(a.centroid.x), myRound(b.centroid.x))) // then, since these polygons aren't on a grid, // we need to identify which other polygons we will diffuse errors to. // let's look for the next N polygons in the sort, and track the close ones var N = s.length; for (var ii=0; ii d3.rgb(gradientscale((x.centroid.y+(width-x.centroid.x)/5)/(height+width/5)))) var desiredColors = sorted_polys.map(x => d3.rgb(gradientscale((x.centroid.y+(width-x.centroid.x)/5)/(height+width/5)))) var ditheredColorID = sorted_polys.map(x => x.closestColorId) var N = sorted_polys.length; for(let ii=0; ii d3.ascending(a.dist, b.dist)); var NN = neighbors.length; if(NN>0){ var dists = sorted_neighbors.map(x => Math.max(1,x.dist)) var invdists2 = dists.map(x => Math.pow(x,-DistDecayExp)) var suminvd = d3.sum(invdists2); var weights = invdists2.map(x => x/suminvd); for (let jj=0; jjx/100))\n .range(gradientcolors)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof N_colorPalette = slider({\n min: 2, \n max: 16, \n step: 1, \n value: 5, \n title: \"Number of Colors in Dithering Palette\",\n description: \"These colors will be evenly spaced across the gradient's color-space\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"ditherPalette = d3.range(N_colorPalette).map(x=>gradientscale(x/(N_colorPalette-1)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"{\n const canvas = DOM.canvas(width, 30);\n var context = canvas.getContext(\"2d\");\n \n var N = ditherPalette.length;\n var w = width/N;\n for (var ii of d3.range(N)){\n context.fillStyle = ditherPalette[ii];\n context.fillRect(ii*w,0,w+1,30);\n }\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"md`## Defining the Tiling\nThanks to Tactile.js\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"viewof tilingID = slider({\n min: 0, \n max: numTypes-1, \n step: 1, \n value: 31, \n title: \"Pick any of the 81 Tiling Types\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"tiling = new IsohedralTiling( tilingTypes[ tilingID ] );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"tt_params = tiling.getParameters();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"md`See my notebook [Hello Tactile.js](https://observablehq.com/@mattdzugan/hello-tactile-js-a-library-for-eascher-esque-isohedron-tess?collection=@mattdzugan/tilings) for a bit more info on these parameters. In fact some tilings take no paramaters:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"viewof params_in = {\n if(!tt_params.length) return Object.assign(html``, {value: []});\n const form = verticalSliders({\n names: tt_params.map((_,i) => `p${i}`),\n labels: tt_params.map((_,i) => html`Param ${i+1}`),\n values: tt_params,\n mins: tt_params.map((_,i) => 0),\n maxs: tt_params.map((_,i) => 1),\n steps: tt_params.map((_,i) => .001),\n });\n form.querySelector('table').style.width = 'auto';\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"a_tiling = {\n let params = tiling.getParameters();\n if (tiling.numParameters()>0) params[ 0 ] = params_in.p0;\n if (tiling.numParameters()>1) params[ 1 ] = params_in.p1;\n if (tiling.numParameters()>2) params[ 2 ] = params_in.p2;\n if (tiling.numParameters()>3) params[ 3 ] = params_in.p3;\n if (tiling.numParameters()>4) params[ 4 ] = params_in.p4;\n if (tiling.numParameters()>5) params[ 5 ] = params_in.p5;\n tiling.setParameters( params );\n return(tiling)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"edges = {\n // set edges\n const edges = [];\n\tfor( let idx = 0; idx < a_tiling.numEdgeShapes(); ++idx ) {\n\t\tvar ej = [{ x: 0, y: 0 }, { x: 1, y: 0 }];\n\t\tedges.push( ej );\n\t}\n return(edges)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"tile_shape = {\n // set tile_shape\n const tile_shape = [];\n\tfor( let i of a_tiling.parts() ) {\n\t\tconst ej = edges[i.id];\n\t\tlet cur = i.rev ? (ej.length-2) : 1;\n\t\tconst inc = i.rev ? -1 : 1;\n\n\t\tfor( let idx = 0; idx < ej.length - 1; ++idx ) {\n\t\t\ttile_shape.push( mul( i.T, ej[cur] ) );\n\t\t\tcur += inc;\n\t\t}\n\t}\n return tile_shape\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"md`While we're computing the tiling, we can also compute the centroid of the proto-tile.\nWith this, we'll be able to transform the centroid along with each tile, giving us the centroid of each tile in the plane. This is what we'll ultimately use in the dithering calculation. Each tile will be represented as a point.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"tile_shape_area = {\n var A = 0;\n var N = tile_shape.length\n for (var ii=0; ii LabDistance(d3.lab(x), d3.lab(Input)))\n //var diffVec = Palette.map(x => rgbDistance(d3.rgb(x), d3.rgb(Input)))\n var minIndex = d3.minIndex(diffVec);\n return(minIndex)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"function CentroidDist(X, Y){\n return(Math.sqrt( Math.pow(X.x - Y.x, 2)+\n Math.pow(X.y - Y.y, 2)));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":612,"value":"md`This is a little hack number that controls how many neighbors to check for \"nearby neighbors\". If I was more clever, I'd do like a quadtree or hashing thing... but this is good enough for now.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"viewof MaxNeighborQty = slider({\n min: 5, \n max: 2000, \n step: 5, \n value: 1000, \n title: \"Number of Subsequent Polys to Scan for nearness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"chroma = require('chroma-js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"import {color, slider, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"import {verticalSliders} from '@tomlarkworthy/vertical-sliders'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"import {ramp} from \"@d3/sequential-scales\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`## Import Tactile-JS\nfrom https://github.com/isohedral/tactile-js\n\\`\\`\\`\n/*\n * Tactile-JS\n * Copyright 2018 Craig S. Kaplan, csk@uwaterloo.ca\n *\n * Distributed under the terms of the 3-clause BSD license. See the\n * file \"LICENSE\" for more information.\n */\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"import {EdgeShape, numTypes, mul, tilingTypes, tiling_type_data, makePoint, makeMatrix, M_orients, TSPI_U, TSPI_S, IsohedralTiling} from \"@mattdzugan/hello-tactile-js-a-library-for-eascher-esque-isohedron-tess\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W52","stdlib":"1"}} 44:null