2b:null 2c:["$","title",null,{"children":"Manhattan Particles | Emery Carr | Observable"}] 31:T653,canvas = { const context = DOM.context2d(width, height); const n = preset.particles; const minDist = preset.minDist; const maxDist = minDist + preset.distRange; const wrap = function(value, size) { const tooLow = value < -maxDist; const tooHigh = value > size + maxDist; return (tooLow ? 1 : tooHigh ? -1 : 0) * (size + maxDist * 2); } while (true) { context.save(); context.fillStyle = preset.bgColor; context.globalAlpha = 1.0 - (.01 * preset.ghosting); context.fillRect(0, 0, width, height); for (var i = 0; i < n; ++i) { const p = particles[i]; p.x += p.vx; p.y += p.vy; p.vx += preset.jitter * (Math.random() - .5) - preset.inertia * p.vx; p.vy += preset.jitter * (Math.random() - .5) - preset.inertia * p.vy; p.x += wrap(p.x, width); p.y += wrap(p.y, height); draw.circle(context, p.x, p.y, preset.size, preset.fillColor, preset.fillAlpha, preset.strokeColor, preset.strokeAlpha); } for (let i = 0; i < n; ++i) { for (let j = i + 1; j < n; ++j) { const pi = particles[i]; const pj = particles[j]; const d = Math.abs(pi.x - pj.x) + Math.abs(pi.y - pj.y); if (d < maxDist) { const alpha = d > minDist ? Math.pow((maxDist - d) / preset.distRange, 3) : 1; draw.connection(context, pi.x, pi.y, pj.x, pj.y, preset.lineColor, alpha); } } } context.restore(); yield context.canvas; } }32:T8d4,viewof preset = { const params = (keys, vals) => makeDict(keys.map((key, i) => [key, vals[i]])); const opt = { slider: (vals) => slider(params(['title','min','max','step','value'], vals)), color: (vals) => color(params(['title','value'], vals)), }; const options = { // title min max step default particles: opt.slider( ["Number of Particles", 1, maxParticles, 1, 140 ]), size: opt.slider( ["Particle Size", .1, 50, .1, 2.5 ]), jitter: opt.slider( ["Particle Jitter", 0, 1, .1, .3 ]), inertia: opt.slider( ["Particle Inertia", 0, .2, .01, .01 ]), minDist: opt.slider( ["Minimum Distance", 0, 200, 1, 50 ]), distRange: opt.slider( ["Distance Range", 0, 200, 1, 50 ]), fillAlpha: opt.slider( ["Particle Fill Opacity", 0, 1, .05, .35 ]), strokeAlpha: opt.slider( ["Particle Stroke Opacity", 0, 1, .05, 1 ]), ghosting: opt.slider( ["Ghosting", 0, 100, 1, 0 ]), // title default bgColor: opt.color( ["Background Color", "#1d252e"]), lineColor: opt.color( ["Line Color", "#9be9ff"]), fillColor: opt.color( ["Particle Fill Color", "#3d97da"]), strokeColor: opt.color( ["Particle Stroke Color", "#ffffff"]), }; const element = html`

${values(options)}

`; element.oninput = function() { const result = {}; for (var x in options) { result[x] = options[x].value } element.value = result; } element.oninput(); return element; }33:[] 2f:{"id":"a0f3d158a05338b1","slug":"manhattan-particles","title":"Manhattan Particles","thumbnail":"a6e8939694bf1832d0d6870ab568f6f5b697b870cf72801360538af7da32ae2e","access_level":"public","create_time":"$D2019-03-27T03:25:07.903Z","update_time":"$D2019-12-03T09:06:00.577Z","view_time":null,"first_public_time":"$D2019-04-29T01:21:03.984Z","fork":{"id":"7335bdad4ae41461","slug":"connected-particles-iii","title":"Connected Particles III","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":37,"starred":false,"owner":{"type":"team","id":"59e5c740fff02d09","login":"emerycarr","name":"Emery Carr","avatar_url":"https://avatars-next.observableusercontent.com/86a9bdd1b24253d4d0dcca36f3d8802973844c56ee8c56a671d5f838405e393a","tier":"starter_2024"},"version":438,"publish_version":438,"role":null,"authored":false,"authors":[{"type":"individual","id":"c8216fb9c8a33cc0","login":"emerycarr","name":"Emery Carr","avatar_url":"https://avatars-next.observableusercontent.com/86a9bdd1b24253d4d0dcca36f3d8802973844c56ee8c56a671d5f838405e393a","tier":null}],"members":[{"type":"individual","id":"c8216fb9c8a33cc0","login":"emerycarr","name":"Emery Carr","avatar_url":"https://avatars-next.observableusercontent.com/86a9bdd1b24253d4d0dcca36f3d8802973844c56ee8c56a671d5f838405e393a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Manhattan Particles","cells":[{"id":0,"value":"md`# Manhattan Particles\n\nParticles on a random walk, with lines connecting nearby particles under the [Manhattan metric](https://en.wikipedia.org/wiki/Taxicab_geometry).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"md`## Settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":39,"value":"maxParticles = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":168,"value":"particles = {\n const result = new Array(maxParticles);\n for (let i = 0; i < result.length; i++) {\n result[i] = {\n x: width * Math.random(),\n y: height * Math.random(),\n vx: 0,\n vy: 0, \n };\n }\n return result; \n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"md`## Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":406,"value":"makeDict = (pairs) => Object.assign({}, ...Array.from(pairs, ([key, val]) => ({[key]: val}) )); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"values = function(dict) {\n const result = [];\n for (var x in dict) {\n result.push(dict[x]); \n };\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":366,"value":"draw = {\n return {\n circle: function(ctx, x, y, radius, fillColor, fillAlpha, strokeColor, strokeAlpha) {\n ctx.beginPath(); \n ctx.arc(x, y, radius, 0, 2 * Math.PI); \n ctx.globalAlpha = strokeAlpha;\n ctx.strokeStyle = strokeColor;\n ctx.stroke(); \n ctx.globalAlpha = fillAlpha;\n ctx.fillStyle = fillColor;\n ctx.fill();\n },\n connection: function(ctx, x1, y1, x2, y2, lineColor, lineAlpha) {\n ctx.globalAlpha = lineAlpha;\n ctx.beginPath();\n ctx.moveTo(x1, y1);\n ctx.lineTo(x2, y1);\n ctx.lineTo(x2, y2); \n ctx.strokeStyle = preset.lineColor;\n ctx.stroke(); \n },\n };\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":196,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"import { slider, color } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"