2b:null 2c:["$","title",null,{"children":"Metaballs (!meatballs) | drio | Observable"}] 31:T918,{ const ctx = DOM.context2d(width, height, pixelRatio); const randomWidth = d3.randomUniform(ctx.canvas.width); const randomHeight = d3.randomUniform(ctx.canvas.height); const balls = Array.from({length: count}, () => new Ball( randomWidth(), randomHeight(), speed, )); const scaleRadius = r => Math.min(width, height) / 2 * pixelRatio * r; const paletteSize = paletteResolution; const palette = new Uint32Array( //createPalette(d3.range(paletteSize).map(i => `hsl(${360/paletteSize},40%,50%)`) createPalette(d3.range(paletteSize).map(i => d3.interpolateRainbow(i / paletteSize)) ).buffer); const imageData = new ImageData(ctx.canvas.width, ctx.canvas.height); const {width: dataWidth, height: dataHeight} = imageData; const data = new Uint32Array(imageData.data.buffer); //const ds = d3.scaleLinear().domain([0, width]).range([0, 360]); function draw(radius = scaleRadius(viewof radius.value)) { // Method 1: using 1x1 rectangles with fillRect() /* for (let x = 0; x < width; x++) { for (let y = 0; y < height; y++) { const index = x + y * width; let sum = 0; balls.forEach((b) => { const d = b.pos.dist(Vec(x, y)); sum += (100 * b.r) / d; }); // Instead of using the fillRect approach, save the // pixel level values and then use the canvbas pixel level access // to draw all the pixels at once. ctx.fillStyle = d3.hsl(sum, 0.4, 0.5, 1).formatHex(); ctx.fillRect(x, y, 1, 1); } } */ // Method 2 = using imageData const scale = paletteSize / viewof colorInterval.value; for (let y = 0; y < dataHeight; y++) { for (let x = 0; x < dataWidth; x++) { const vec = Vec(x, y); let sum = 0; for(let i = 0; i < balls.length; i++) { //sum += radius / balls[i].pos.dist(vec); sum += Math.min(1, radius / balls[i].pos.dist(vec)); } data[x + y * dataWidth] = palette[Math.floor(sum * scale) % paletteSize]; } } ctx.putImageData(imageData, 0, 0); balls.forEach((b) => { b.update(dataWidth, dataHeight, radius); //b.show(ctx); }); } draw(); while (true) { if(viewof animateBallsON.value) draw(); yield ctx.canvas; } }32:T40d,{ const [width, height] = [200, 100]; const ctx = DOM.context2d(width, height, 1); const pos = Vec(0, 0); const pad = 10; function draw() { // get the data structure that gives you pixel level access to the canvas const id = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height); const pixels = id.data; for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const off = (y * id.width + x) * 4; const inPixel = pos.x > x - pad && pos.x < x + pad && pos.y > y - pad && pos.y < y + pad; pixels[off] = inPixel ? 0 : 255; pixels[off + 1] = 0; pixels[off + 2] = 0; pixels[off + 3] = 150; } } pos.x += pad; if (pos.x === width) { pos.x = 0; pos.y += pad; } if (pos.y === height + pad) { pos.x = 0; pos.y = 0; } ctx.putImageData(id, 0, 0); } let loop = true; while (loop) { draw(); yield ctx.canvas; loop = animateON; } }33:[] 2f:{"id":"208976c3eb976894","slug":"metaballs-not-meatballs","title":"Metaballs (!meatballs)","thumbnail":"2760aac1afb7dec88ab03a42819df5a33c10f846199576baad4d47bfeac099f4","access_level":"public","create_time":"$D2021-09-11T18:14:13.554Z","update_time":"$D2022-05-23T11:51:35.777Z","view_time":null,"first_public_time":"$D2021-09-11T18:14:48.809Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3870ffad1196a4b8","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":"starter_2024"},"version":1006,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null}],"members":[{"type":"individual","id":"afbfd522a2020b91","login":"drio","name":"drio","avatar_url":"https://avatars-next.observableusercontent.com/a9488dda74759bbfa1c5a26f529c2b0dad0ac1562092e7ba3faa61f7786705c7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Metaballs (!meatballs)","cells":[{"id":117,"value":"md`# Metaballs (!meatballs)\n\nBased on this coding train [video](https://www.youtube.com/watch?v=ccYLb7cLB1I&t=845s). Thank you, Daniel.\n\n🚧 Performance is pretty bad at the moment.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"viewof pixelRatio = Inputs.radio([.5, 1, 2, 3, 4], {\n value: 1,\n label: 'Pixel ratio',\n format: d => d === devicePixelRatio ? html`${d}` : d\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"viewof paletteResolution = Inputs.range([2, 500], {step: 1, value: 500, label: 'Palette colors'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"viewof radius = Inputs.range([0.01, 1], {value: .1, step: .01, label: 'Radius'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1001,"value":"viewof count = Inputs.range([1, 50], {value: 30, step: 1, label: 'Balls'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1000,"value":"viewof speed = Inputs.range([.1, 20], {value: 10, step: .01, label: 'Speed'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"viewof colorInterval = Inputs.range([.2, 20], {value: 2, step: .01, label: 'Color interval'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":841,"value":"viewof animateBallsON = Inputs.toggle({\n label: \"Animate 🎉\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"width = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"frameRate","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"{\n const v = p5Lib.Vector.random2D();\n const v2 = Vec(100, 100);\n v2.add(v);\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"class Ball {\n constructor(x, y, speed) {\n this.pos = Vec(x, y);\n this.vel = p5Lib.Vector.random2D();\n this.vel.mult(speed);\n }\n\n update(width, height, r) {\n const {x, y} = this.pos = this.pos.add(this.vel);\n const {x: vx, y: vy} = this.vel;\n // Only reflect if we're going in the wrong direction.\n if((x + r >= width && vx > 0) || (x < r && vx < 0)) this.vel.x *= -1;\n if((y + r >= height && vy > 0) || (y < r && vy < 0)) this.vel.y *= -1;\n }\n\n show(r) {\n const {x, y} = this.pos;\n drawCircle({\n ctx: this.ctx,\n x,\n y,\n r\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"function drawCircle({\n ctx,\n x,\n y,\n r,\n fill = \"black\",\n stroke = \"black\",\n lineWidth = 1\n}) {\n ctx.beginPath();\n ctx.arc(x, y, r, Math.PI * 2, false);\n ctx.fillStyle = fill;\n ctx.strokeStyle = stroke;\n ctx.lineWidth = lineWidth;\n //ctx.fill();\n ctx.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"md`Getting familiar with @esperanc [2d-geometry-utils](https://observablehq.com/@esperanc/2d-geometry-utils).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"{\n const v = Vec(1, 2);\n v.x = 123;\n return v.add(Vec(100, 100));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"md`Using the rect canvas api to control pixels is slow. Here is an alternative that uses the image canvas API to work at pixel level.\n\nBeware of the [DOM's context2d semantics](https://talk.observablehq.com/t/dom-context2d-vs-dom-canvas-what-am-i-doing-wrong/3836). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":826,"value":"viewof animateON = Inputs.toggle({\n label: \"Animate\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":874,"value":"{\n const [width, height] = [100, 100];\n const ctx = DOM.context2d(width, height, 1);\n ctx.fillStyle = \"blue\";\n ctx.fillRect(0, 0, 100, 100);\n const id = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n const pixelColors = [];\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n pixelColors.push(d3.hsl(Math.random() * 255, 0.4, 0.5, 1));\n }\n }\n\n drawPixels(ctx, pixelColors);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":849,"value":"/**\n * ctx: canvas context\n * pixelColors: Array of d3 colors for each pixel\n **/\nfunction drawPixelsV1(ctx, pixelColors) {\n const id = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);\n const pixels = id.data;\n\n for (let y = 0; y < height; y++) {\n for (let x = 0; x < width; x++) {\n const offData = y * id.width + x;\n const offPixel = (y * id.width + x) * 4;\n if (!pixelColors[offData]) continue;\n const { r, g, b, opacity } = pixelColors[offData].rgb();\n pixels[offPixel] = r;\n pixels[offPixel + 1] = g;\n pixels[offPixel + 2] = b;\n pixels[offPixel + 3] = opacity * 255;\n }\n }\n ctx.putImageData(id, 0, 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`This is for exploring hsl colors.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof hue = Inputs.range([0, 360], {\n value: 10,\n step: 1,\n label: \"hue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"viewof lightness = Inputs.range([0, 1], {\n value: 0.5,\n step: 0.01,\n label: \"lightness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"viewof saturation = Inputs.range([0, 1], {\n value: 0.1,\n step: 0.01,\n label: \"saturation\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"html`\n
${hue} - ${saturation} - ${lightness}
\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":858,"value":"{\n const c = d3.hsl(22, 0.4, 0.5, 1);\n const h = c.formatHex();\n return html`
${h} ${c.rgb().r} -- ${\n c.rgb().opacity\n }
`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":271,"value":"import { Vec } from \"@esperanc/2d-geometry-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"p5 = new p5Lib()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"p5Lib = require(\"p5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"import { drawPixels } from \"@drio/canvas-pixel-level\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"import { frameRate } from \"@drio/drio-utils\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"import {createPalette} from \"@mootari/sibson-interpolation\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"