30:T1018,canvas = { const context = DOM.context2d(width, height) if(options.includes('gooey')) context.canvas.style.filter = filter; const n = 2000; const particles = new Array(n); const tau = Math.PI * 2 for (let i = 0; i < n; ++i) { particles[i] = { x: Math.random() * width, y: Math.random() * height, radius: 1+Math.abs(d3.randomNormal()()), vx: Math.sign(Math.random() - .5) * d3.randomNormal(2,1)(), vy: Math.sign(Math.random() - .5) * d3.randomNormal(2,1)(), thetas: new Array(5).fill(0).map(d => Math.random()*2*Math.PI), vThetas: new Array(5).fill(0).map(d => Math.sign(Math.random() - .5) * d3.randomNormal(.1,.05)()), }; } while (true) { context.save(); context.clearRect(0, 0, width, height); let cells = [] if(options.includes('voronoi')) { cells = d3.voronoi().extent([[0, 0], [width, height]]) .polygons(particles.filter((_,i)=> i < mutable num).map(d => [d.x,d.y])) } for (let i = 0; i < mutable num; ++i) { const p = particles[i]; const r = p.radius * mutable scale; const d = Math.hypot(p.x - mutable x, p.y - mutable y); const m = Math.pow(r, 1/3)/1000; const restitution = -.8; const cd = 0.47; const rho = 1.22; const a = Math.PI * m * m / 10000; let fx = -0.5 * cd * a * rho * p.vx * p.vx * p.vx / Math.abs(p.vx); let fy = -0.5 * cd * a * rho * p.vy * p.vy * p.vy / Math.abs(p.vy); fx = (isNaN(fx) ? 0 : fx); fy = (isNaN(fy) ? 0 : fy); const ax = fx / m; const ay = mutable gravity + fy / m; p.vx += ax; p.vy += ay; p.x += (p.vx * mutable speed); p.y += (p.vy * mutable speed); if (p.x < r) p.x = r, p.vx *= restitution; if (p.x > width - r) p.x = width - r, p.vx *= restitution; if (p.y < r) p.y = r, p.vy *= restitution; if (p.y > height - r) p.y = height - r, p.vy *= restitution; p.thetas.forEach((_,i) => p.thetas[i] += (p.vThetas[i]* mutable speed)) if (0 < mutable radius && d < r + mutable radius) { // active and in the zone of the cursor if (mutable y < mutable radius) mutable vy = 1; if (mutable y > height - mutable radius) mutable vy = -1; const phi = Math.PI + Math.atan2(p.y - mutable y, p.x - mutable x); mutable vx = 0.5 * Math.cos(phi); mutable vy = 0.5 * Math.sin(phi); p.vx += mutable vx; p.vy += mutable vy; p.x += mutable vx; p.y += mutable vx; } if(options.includes('points')) { context.beginPath(); context.arc(p.x, p.y, 2, 0, 2 * Math.PI); context.fillStyle = color; context.fill(); } if(options.includes('circles')) { context.beginPath(); context.arc(p.x, p.y, r, 0, 2 * Math.PI); // context.globalAlpha = .5; context.strokeStyle = color; context.stroke(); } if(options.includes('blobs')) { let points = p.thetas.map((d,i) => [ p.x + r*Math.cos(i * 2 * Math.PI/5) + 0.2*r*Math.cos(d), p.y + r*Math.sin(i * 2 * Math.PI/5) + 0.2*r*Math.sin(d) ]) points = d3.polygonHull(points) points = chaikin(points,4) context.beginPath(); points.forEach((po,i) => { if(i < 1) { context.moveTo(po[0], po[1]) } else { context.lineTo(po[0], po[1]) } }) context.closePath(); context.fillStyle = color; context.fill(); } if(options.includes('voronoi')) { let cellCoords = cells[i] cellCoords = d3.polygonHull(cellCoords) cellCoords = chaikin(cellCoords,4) context.beginPath(); cellCoords.forEach((po,i) => { if(i < 1) { context.moveTo(po[0], po[1]) } else { context.lineTo(po[0], po[1]) } }) context.closePath(); context.strokeStyle = color; context.stroke(); } } context.restore(); yield context.canvas; } }31:[] 2e:{"title":"Interactive Slime","cells":[{"id":0,"value":"md`# Interactive Slime`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1481,"value":"viewof options = Inputs.checkbox([\"points\", \"circles\", \"blobs\", \"voronoi\", \"gooey\"], {value: [\"blobs\", \"gooey\"]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1676,"value":"viewof color = Inputs.color({label: \"color\", value: '#921c1c'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"mutable speed = .1","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"speedControl = {\n var input = DOM.range(0, 1);\n input.step = 0.01;\n input.value = mutable speed;\n input.oninput = () => mutable speed = input.valueAsNumber;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"mutable scale = 16","pinned":false,"hidden":false,"mode":"ojs"},{"id":386,"value":"scaleControl = {\n var input = DOM.range(1,32);\n input.step = .1\n input.value = mutable scale;\n input.oninput = () => mutable scale = input.valueAsNumber;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":446,"value":"mutable num = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":186,"value":"numControl = {\n var input = DOM.range(0, 1000);\n input.value = mutable num;\n input.oninput = () => mutable num = Math.round(input.valueAsNumber);\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"mutable gravity = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":692,"value":"gravityControl = {\n var input = DOM.range(-.2,.2);\n input.step = 0.01\n input.value = mutable gravity;\n input.oninput = () => mutable gravity = input.valueAsNumber;\n return input;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1365,"value":"function chaikin(arr, num) {\n if (num === 0) return arr;\n const l = arr.length;\n const smooth = arr.map((c,i) => {\n return [\n [0.75*c[0] + 0.25*arr[(i + 1)%l][0],0.75*c[1] + 0.25*arr[(i + 1)%l][1]],\n [0.25*c[0] + 0.75*arr[(i + 1)%l][0],0.25*c[1] + 0.75*arr[(i + 1)%l][1]]\n ];\n }).flat();\n return num === 1 ? smooth : chaikin(smooth, num - 1);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1335,"value":"filter = {\n const svg = ``;\n \n const blob = new Blob([svg], { type: 'image/svg+xml' });\n const url = URL.createObjectURL(blob);\n //return url;\n\n const filter = `url('${url}#gooey')`;\n return filter;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":722,"value":"mutable x = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":732,"value":"mutable y = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":923,"value":"mutable vx = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":993,"value":"mutable vy = 0;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"mutable radius = 0","pinned":false,"hidden":false,"mode":"ojs"},{"id":709,"value":"mousemove = { \n return d3.select(canvas).on('pointermove', () => {\n const mouseEvent = d3.mouse(canvas);\n mutable x = mouseEvent[0];\n mutable y = Math.ceil(mouseEvent[1]);\n mutable radius = 500;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1189,"value":"mouseout = {\n return d3.select(canvas).on('mouseout', () => {\n mutable radius = 0;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":885,"value":"frame = {\n let i = 0;\n while (true) {\n xs.push(x)\n ys.push(y)\n updateVelocity()\n yield Promises.delay(1000/60, ++i);\n xs.length = 0;\n ys.length = 0;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":948,"value":"xs = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":985,"value":"ys = []","pinned":false,"hidden":false,"mode":"ojs"},{"id":964,"value":"function updateVelocity() {\n mutable vx = (xs[xs.length-1] - xs[0])/200;\n mutable vy = (ys[ys.length-1] - ys[0])/200;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"d3 = require(\"d3@^5.8\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}