31:T732,transitionMaster = (transition, pathIndex) => { //Calculate the time in the world of the animation and update the global state globalState.animationCurrentTime = (d3.now() - globalState.animationStartTime); transition .delay(function(d) { return pathIndex < d.path.length ? d.path[pathIndex-1].rest : null; }) .attrTween("cx", function(d) { return pathIndex < d.path.length ? d3.interpolateNumber(this.getAttribute("cx"), d.path[pathIndex].x) : null; }) .attrTween("cy", function(d) { return pathIndex < d.path.length ? d3.interpolateNumber(this.getAttribute("cy"), d.path[pathIndex].y) : null; }) .ease(d3.easeLinear) .duration(function(d) { const rateLocal = pathIndex < d.path.length ? ( d.path[pathIndex].pathType === "robot" ? 0.1 : 0.2 ) : null; return pathIndex < d.path.length ? ( distance(d.path[pathIndex-1].x, d.path[pathIndex-1].y, d.path[pathIndex].x, d.path[pathIndex].y)/rateLocal ) : null; }) .on('end', function(d) { d.pathIndex = pathIndex }) //Fade out and remove when last path completed .transition() .styleTween("opacity", function(d) { return pathIndex >= d.path.length ? d3.interpolate(0.8, 0) : null; }) .duration(1000) .on('end', function(d) { return pathIndex >= d.path.length ? ( //The length of scrap path. Probably better way to do this. d.path.length === 4 ? globalState.scrap += 1 : updatePartsCompleted() ) : null; }) //Why does this work? .remove() }32:[] 2f:{"title":"FdM Simulation","cells":[{"id":144,"value":"md`# FdM Simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1227,"value":"md`## The Simulation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1225,"value":"//Layout field\nhtml`\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"viewof restartButton = button({\n \t\t\t\t\tvalue: \"Restart Simulation\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":726,"value":"md `## Import Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"//Install d3\nd3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":597,"value":"//Import button \nimport {button} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"md`## Supporting Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"//Pull in JSON from Gist\ndata=d3.json(\"https://gist.githubusercontent.com/tripplybrand/eb938c5d20c131869a21f2b309336c49/raw/de925eaa24a41f51a6c64b92c19fda1d9f2b581d/FdM_Animation_Data.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"distance = (x1, y1, x2, y2) => { return Math.sqrt(Math.pow((x2 - x1), 2) + Math.pow((y2 - y1), 2))}","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"rate = 0.1","pinned":false,"hidden":false,"mode":"ojs"},{"id":1444,"value":"globalState = ({\n \tanimationStartTime: 0,\n \tanimationCurrentTime: 0,\n\tcompleted: 0,\n\tscrap: 0,\n \ttimeouts: []\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1654,"value":"updatePartsCompleted = () => {\n \n //Update global state\n globalState.completed += 1 \n \n //Use global state to update DOM element\n const text = d3.select(\"#completedCount\")\n \n return text.transition()\n \t.duration(20000)\n \t.text(globalState.completed)\n \t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1740,"value":"resetPartsCompleted = () => {\n \n //Update global state\n globalState.completed = 0 \n \n //Use global state to update DOM element\n const text = d3.select(\"#completedCount\")\n \n return text.transition()\n \t.duration(20000)\n \t.text(globalState.completed)\n \t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"maxPathIndex = Math.max(...data.map(x => x.path.length))","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"pathIndexArray = Array.apply(null, Array(maxPathIndex)).map(function (_, i) {return i+1;})","pinned":false,"hidden":false,"mode":"ojs"},{"id":516,"value":"transitionMap = (g) => {\n pathIndexArray.forEach((x) => {\n g = g.transition().call(transitionMaster, x)\n }) \n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"md`## Action Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":287,"value":"startSingleAnimation = (data) => {\n \n const svg = d3.select(\"#lineMap\")\n\n //Select Field and place the players\n const circles = svg.selectAll(\"circle\")\n \t\t\t\t\t.data(data, function(d) { return d ? d.name : this.id; })\n\n return circles\n .enter().append(\"circle\")\n \t.attr(\"class\", \"agent\")\n .attr(\"cx\", function(d) { return d.path[0].x; })\n .attr(\"cy\", function(d) { return d.path[0].y; })\n .attr(\"r\", 5)\n \t.attr(\"id\", function(d) { return d.name; })\n \t.style(\"fill\", function(d) { return d.color; })\n \t.style(\"opacity\", 0)\n .transition()\n .duration(300)\n .style(\"opacity\", 0.8)\n .transition().call(transitionMap);\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1144,"value":"setStartTime = (data) => {\n var t = d3.timeout(\n function() {\n startSingleAnimation([data]);\n }, data.start)\n return t\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1154,"value":"//If you restart before all agents have finished it adds the remaining to your completed parts count\nstartAnimation = () => {\n globalState.animationStartTime = d3.now();\n \n globalState.timeouts = data.map((d) => {\n \t\treturn setStartTime(d)\n\t})\n return globalState.timeouts\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1312,"value":"restartAnimation = (data) => {\n\tconst selection = d3.selectAll(\".agent\")\n \n resetPartsCompleted()\n \tglobalState.scrap = 0;\n \n globalState.timeouts.forEach((timeout) => timeout.stop())\n \tselection.interrupt();\n \tselection.remove();\n \n \treturn startAnimation();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"md`## Button Commands`","pinned":false,"hidden":false,"mode":"ojs"},{"id":677,"value":"//Restart Simulation button command\n{\n restartButton;\n return restartAnimation(data)\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}