31:T95c,Chart = { const ctx = DOM.context2d(width, height); const canvas = d3.select(ctx.canvas) .attr("width", width) .attr("height", height) const imageData = ctx.getImageData(0, 0, width, height); const buf = new ArrayBuffer(imageData.data.length); const buf8 = new Uint8ClampedArray(buf); const data = new Uint32Array(buf); const exponent = 1; let weights = new Array(nPoints); for (let y = 0; y < height; ++y) { for (let x = 0; x < width; ++x) { let totalWeight = 0.0; for (let i = 0; i < nPoints; i++) { // For each point for each pixel in the x and y let point = points[i]; // calculate the distance between this point and the point on the canvas, squared let distanceSquared = Math.pow(point.x - x, 2) + Math.pow(point.y - y, 2); // add this value to the weights array weights[i] = 1.0 / (distanceSquared ** exponent); // add to total weight totalWeight += weights[i]; } let red = 0.0; let green = 0.0; let blue = 0.0; for (let i = 0; i < nPoints; i++) { red += points[i].rgb[0] * rgbMultiplier * weights[i]; green += points[i].rgb[1] * rgbMultiplier * weights[i]; blue += points[i].rgb[2] * rgbMultiplier * weights[i]; } data[y * width + x] = // data for the entire matrix (red / totalWeight) << rD | (green / totalWeight) << gD | (blue / totalWeight) << bD | 255 << 24; } // ends each pixel for the width loop } // ends each pixel for the height loop imageData.data.set(buf8); ctx.putImageData(imageData, 0, 0); // return ctx.canvas; const img = canvas.node().toDataURL(); const svg = d3.select(createSVG(width, height)); const goo = DOM.uid("goo"); const defs = svg.append("defs"); const turbulence = defs.append("filter").attr("id", goo.id); turbulence.append("feGaussianBlur") .attr("in", "ripples") .attr("stdDeviation", guassianBlur) .attr('result','blur'); turbulence.append('feColorMatrix') .attr('in','blur') .attr('mode','matrix') .attr('values', kernel.toString().replace(/[ ]*,[ ]*|[ ]+/g, ' ')) .attr('result','blur'); svg.append("image") .style("filter", goo) .attr("xlink:href", img); return svg.node() }32:Tbea,viewof kernel = { let ui = html`

	r	g	b	a	m
r
g
b
a

`; let inputs = ui.querySelectorAll('input'); function valid() { let sum = 0; for (let k of kernel) sum += k; console.log(sum); return sum === 16; } let kernel = [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18, -7] // let kernel = [1, 1.04, 0, 0, 0, 0, 1.24, 0, 0, 0, 0, 0.38, 1, 0, 0, 20, 11.19, 20, 20, -15.58]; // let kernel = [1, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 0]; // let kernel = [6.66, 5.09, 3.14, 1.11, 0, 8.33, -1.6, 0, -1.4, 0, 5.79, 0, 1, 0, 0, 0, 0, 0, 18, -7] kernel.forEach((k, i) => { inputs[i].value = k; inputs[i].addEventListener('input', evt => { let change = kernel[i] - +evt.target.value; kernel[i] = +evt.target.value; }); }); ui.value = kernel; ui.dispatchEvent(new CustomEvent('change')); return ui; }33:[] 2f:{"title":"Inverse Distance Weighting","cells":[{"id":0,"value":"md`# Inverse Distance Weighting`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`From [Wikipedia](https://en.wikipedia.org/wiki/Inverse_distance_weighting)... __Inverse distance weighting (IDW)__ _is a type of deterministic method for multivariate interpolation with a known scattered set of points. The assigned values to unknown points are calculated with a weighted average of the values available at the known points._`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`It can also make some pretty generative art. Thanks for the help, [John](https://twitter.com/johnbalestrieri)!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"viewof nPoints = slider({\n min: 0, \n max: 200, \n step: 1, \n value: 100, \n title: \"N Points\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":366,"value":"viewof guassianBlur = slider({\n min: 0, \n max: 10, \n step: 1, \n value: 1.2, \n title: \"Gaussian Blur\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof rgbMultiplier = slider({\n min: 0, \n max: 2000, \n step: 1, \n value: 225, \n title: \"Channel Multiplier\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"viewof rD = slider({\n min: 0, \n max: 20, \n step: 1, \n value: 0, \n title: \"Red Channel Multiplier\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof gD = slider({\n min: 0, \n max: 20, \n step: 1, \n value: 8, \n title: \"Green Channel Multiplier\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"viewof bD = slider({\n min: 0, \n max: 20, \n step: 1, \n value: 16, \n title: \"Blue Channel Multiplier\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"md`#### feColor Matrix Settings:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"md``","pinned":false,"hidden":false,"mode":"ojs"},{"id":109,"value":"points = {\n let array = [];\n\t\tfor (let i = 0; i < nPoints; i++) {\n\t\t\tarray.push(\n\t\t\t\t{\n\t\t\t\t\tx: Math.random() * width,\n\t\t\t\t\ty: Math.random() * height,\n\t\t\t\t\trgb: [Math.random(), Math.random(), Math.random()]\n\t\t\t\t}\n\t\t\t);\n\t\t}\n return array\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"width = window.innerWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"import {slider, radio, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { createSVG, d3, jitter } from \"@pstuffa/helpers\" ","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}