30:T694,{ restart; const context = DOM.context2d(width, height); context.setTransform(2 * scale, 0, 0, 2 * scale, 0, 0); //, width * (1 - scale), height * (1 - scale)); const collideForce = forceCollide(); const handleCollide = (cell1, cell2) => { population.handleCollide(cell1, cell2); collideForce.radius(({ radius }) => radius); }; collideForce .onCollide(handleCollide) .radius(({ radius }) => radius); const linkForce = d3.forceLink().distance(20).strength(0.8); const simulation = d3.forceSimulation(population.cells) .force('motion', forceCellMotion()) .force('links', linkForce) .force('collide', collideForce) .force('bounds', forceScreenBounds(sWidth, sHeight)) .alphaDecay(0) .on("tick", ticked); function ticked() { context.clearRect(0, 0, sWidth, sHeight); population.tick(); for (const { source, target } of population.links) { context.strokeStyle="#ddd"; context.lineWidth=2; context.beginPath(); context.moveTo(source.x, source.y); context.lineTo(target.x, target.y); context.stroke(); } //color.domain(d3.extent(population.cells, d => d.startTime)); for (const { x, y, radius, life } of population.cells) { context.fillStyle = color(life); context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI); context.fill(); } if (population.dirty) { simulation.nodes(population.cells); linkForce.links(population.links); population.dirty = false; } } try { yield context.canvas; yield invalidation; } finally { simulation.stop(); } }31:Tb9e,class Population { constructor() { this.dirty = true; this.nextCellId = 0; this.cellMap = {}; this.linkMap = {}; this.updatePopulation = _.throttle(this.createCells, injectionCycleDelayMs); this.startTime = new Date().getTime(); this.lastTick = this.startTime; //stats this.births = 0; this.deaths = 0; this.eaten = 0; this.clones = 0; } createCells() { d3.range(injectionCellCount).forEach(() => this.createCell()); } tick() { const now = new Date().getTime(); if (now - this.lastTick > frameUpdateTimeMs) { this.lastTick = now; this.throttledTick(now); } } throttledTick() { this.updatePopulation(); this.cells .filter(d => d.life < 0.05 || d.dead === true) .forEach(d => this.destroyCell(d)); this.links.forEach(({ source, target }) => { const child = source.interact(target); if (child) { this.createCell(child); } }); } linkId(cell1, cell2) { return cell1.id < cell2.id ? cell1.id + '-' + cell2.id : cell2.id + '-' + cell1.id; } get links() { return Object.values(this.linkMap); } get cells() { return Object.values(this.cellMap); } handleCollide(source, target) { const id = this.linkId(source, target); if (!this.linkMap[id]) { const sAct = source.handleCollide(target); const tAct = source.handleCollide(source); if (sAct === 'link' && tAct === 'link') { this.link(source, target, id); } else if (sAct === tAct) { if (Math.random() > 0.5) { this.eat(target, source); } else { this.eat(source, target); } } } } eat(consumer, consummed) { consumer.life += consummed.life; consummed.life = 0; consummed.dead = true; this.eaten++; } link(source, target, id) { source.link(target); target.link(source); this.linkMap[id] = { id, source, target }; this.dirty = true; } unlink(cell1, cell2) { const id = this.linkId(cell1, cell2); delete this.linkMap[id]; cell1.unlink(cell2); cell2.unlink(cell1); this.dirty = true; } createCell(clone) { let cell = null; if (clone) { cell = clone; cell.id = this.nextCellId++; this.clones++; } else { cell = new Cell(this.nextCellId++, x(Math.random()), y(Math.random())); } this.cellMap[cell.id] = cell; this.births++; this.showStats(); this.dirty = true; } destroyCell(cell) { cell.links.forEach(other => this.unlink(cell, other)); delete this.cellMap[cell.id]; this.deaths++; this.showStats(); this.dirty = true; } showStats() { db('births', this.births); db('deaths', this.deaths); db('clones', this.clones); const pop = Object.keys(this.linkMap).length; db('pop', pop); const err = pop - (this.births - this.deaths); if (err > 0) db('err', err); } }32:Ta34,class Cell { constructor(id, x = 0, y = 0, startTime) { this.linkMap = {}; this.rScale = d3.scalePow().exponent(.5).range(radiusExtent); this.id = id; this.x = x; this.y = y; this.vx = 0; this.vy = 0; this.life = 1; this.timeOffset = Math.random() * Math.PI * 2; this.startTime = startTime; // the random stuff; this.alpha1 = d3.randomUniform(-0.5, 0.5)(); this.alpha2 = d3.randomUniform(-0.5, 0.5)(); this.maxDegree = d3.randomUniform(maxDegreeExtent[0], maxDegreeExtent[1])(); this.degreeAcceptance = d3.randomUniform(0, maxDegreeExtent[1])(); this.velocity = d3.randomUniform(-0.5, 2.5)(); } get links() { return Object.values(this.linkMap); } link(other) { this.linkMap[other.id] = other; } unlink(other) { delete this.linkMap[other.id]; } willLinkTo(other) { if (this.degree >= this.maxDegree) return false; return Math.abs(this.maxDegree - other.maxDegree) < this.degreeAcceptance; } handleCollide(other) { if (this.degree >= this.maxDegree) return 'eat'; if (Math.abs(this.maxDegree - other.maxDegree) < this.degreeAcceptance) { return 'link'; } return 'eat'; } get radius() { return this.rScale(this.life); } get degree() { return Object.keys(this.linkMap).length; } interact(other) { const [ doner, recipient ] = other.life > this.life ? [ other, this ] : [ this, other ]; this.closeGap('alpha1', other); this.closeGap('alpha2', other); this.closeGap('velocity', other); this.closeGap('timeOffset', other); const oldLife = recipient.life; const dLife = (doner.life - recipient.life) * 0.1; doner.life -= dLife; recipient.life += dLife; if (oldLife < recipient.life && recipient.life > 0.75) { return recipient.clone(); } } closeGap(field, other) { const v1 = this[field]; const v2 = other[field]; const dv = (v1 - v2) * 0.2; this[field] - dv; other[field] + dv; } clone() { const clone = Object.assign( Object.create( Object.getPrototypeOf(this)), this); clone.linkMap = {}; this.life /= 2; clone.life = this.life; } step(time) { const alpha1 = this.timeOffset + time * this.alpha1; const alpha2 = this.timeOffset + time * this.alpha2; this.vx += (Math.cos(alpha1) + Math.cos(alpha2)) * this.velocity; this.vy += (Math.sin(alpha1) + Math.sin(alpha2)) * this.velocity; this.life = Math.max(0, this.life - (this.vx * this.vx + this.vy * this.vy) * distanceToLifeFactor); } }33:Tb4b,forceCollide = { const constant = (x) => { return function() { return x; }; }; const jiggle = () => { return (Math.random() - 0.5) * 1e-6; } function x(d) { return d.x + d.vx; } function y(d) { return d.y + d.vy; } const collide = (radius) => { var nodes, radii, strength = 1, iterations = 1; let onCollide = null; if (typeof radius !== "function") radius = constant(radius == null ? 1 : +radius); function force() { var i, n = nodes.length, tree, node, xi, yi, ri, ri2; for (var k = 0; k < iterations; ++k) { tree = d3.quadtree(nodes, x, y).visitAfter(prepare); for (i = 0; i < n; ++i) { node = nodes[i]; ri = radii[node.index], ri2 = ri * ri; xi = node.x + node.vx; yi = node.y + node.vy; tree.visit(apply); } } function apply(quad, x0, y0, x1, y1) { var data = quad.data, rj = quad.r, r = ri + rj; if (data) { if (data.index > node.index) { var x = xi - data.x - data.vx, y = yi - data.y - data.vy, l = x * x + y * y; if (l < r * r) { if (onCollide) { onCollide(data, node); } if (x === 0) x = jiggle(), l += x * x; if (y === 0) y = jiggle(), l += y * y; l = (r - (l = Math.sqrt(l))) / l * strength; node.vx += (x *= l) * (r = (rj *= rj) / (ri2 + rj)); node.vy += (y *= l) * r; data.vx -= x * (r = 1 - r); data.vy -= y * r; } } return; } return x0 > xi + r || x1 < xi - r || y0 > yi + r || y1 < yi - r; } } function prepare(quad) { if (quad.data) return quad.r = radii[quad.data.index]; for (var i = quad.r = 0; i < 4; ++i) { if (quad[i] && quad[i].r > quad.r) { quad.r = quad[i].r; } } } function initialize() { if (!nodes) return; var i, n = nodes.length, node; radii = new Array(n); for (i = 0; i < n; ++i) node = nodes[i], radii[node.index] = +radius(node, i, nodes); } force.initialize = function(_) { nodes = _; initialize(); }; force.iterations = function(_) { return arguments.length ? (iterations = +_, force) : iterations; }; force.strength = function(_) { return arguments.length ? (strength = +_, force) : strength; }; force.radius = function(_) { return arguments.length ? (radius = typeof _ === "function" ? _ : constant(+_), initialize(), force) : radius; }; force.onCollide = function(_) { onCollide = _; return force; }; return force; } return collide; }34:[] 2e:{"title":"PIM Playground I","cells":[{"id":0,"value":"md`# PIM Playground I\n\nSee the [PIM Playgroud](https://docs.google.com/document/d/1tHO5UyLjRHjzuM9bFn_dfs0yoKGGHOoKkFID1MbEh3U/edit?usp=sharing) document for a detailed description of the project.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"md`# Simultation\n\nEvery ${injectionCycleDelayMs / 1000} seconds ${injectionCellCount} cells are added to the simulation. Each cell starts with a fixed amount of *life*. The cells use up life proportional to how fast they move. The life value drains with motion and ultimately runs out, where up on the cell dies and is removed from the simulation.\n\nCells are sized and colored quantity of life - most \n\nto least\n.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":241,"value":"viewof restart = button('restart')","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":618,"value":"callButton('Add 10 Cells', () => d3.range(10).forEach(() => population.createCell()))","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"callButton('Add Cell', () => population.createCell())","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"viewof db = Debug()","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"md`# Application State`","pinned":false,"hidden":false,"mode":"ojs"},{"id":482,"value":"population = {\n restart;\n return new Population();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"clock = new Clock()","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"md`# Classes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":455,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1079,"value":"class Clock {\n \n constructor() {\n this._time = 0;\n }\n \n get time() {\n return this._time;\n }\n \n advance(delta) {\n this._time += delta;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md`# Forces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"forceCellMotion = () => {\n let cells = null;\n let time = 0;\n \n const motion = () => {\n\n // this updates global \"time\" which drives cell motion\n clock.advance(0.1);\n cells.forEach(cell => cell.step(clock.time));\n }\n \n motion.initialize = _ => {\n cells = _;\n };\n \n return motion;\n}\n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"forceScreenBounds = (width, height) => {\n let cells = null;\n\n const bounds = () => {\n cells.forEach(cell => {\n const fx = cell.x + cell.vx;\n const radius = cell.radius;\n if (fx < radius || fx > (width - radius)) {\n cell.vx = 0;\n }\n\n const fy = cell.y + cell.vy;\n if (fy < radius || fy > (height - radius)) {\n cell.vy = 0;\n }\n });\n }\n bounds.initialize = _ => {\n cells = _;\n };\n\n return bounds;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"md`# Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1024,"value":"scale = 0.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"frameUpdateTimeMs = 100","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":1034,"value":"sWidth = width * (1 / scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1036,"value":"sHeight = height * (1 / scale)","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"injectionCellCount = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"maxDegreeExtent = [1, 8]","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"injectionCycleDelayMs = 4000","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"distanceToLifeFactor = 0.0001","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"radiusExtent = [1, 10]","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"x = d3.scaleLinear().range([radiusExtent[1], sWidth - radiusExtent[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"y = d3.scaleLinear().range([radiusExtent[1], sHeight - radiusExtent[1]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":460,"value":"color = {\n const curve = d3.scalePow().exponent(.4);\n const color = d3.scaleSequential(chromatic.interpolateViridis);\n \n return value => color(curve(value));\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":234,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"function callButton(label, callback) {\n const button = md``;\n button.onclick = callback;\n return button\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"import {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"chromatic = require('d3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"import { Debug } from '@trebor/debug-tool'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}