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; } }