31:T566,contourViz = svg``32:[] 2f:{"title":"Boid Contours With SVG Filters","cells":[{"id":0,"value":"md`# Boid Contours With SVG Filters\nWe wanted to generate a sort of \"topographic map\" that would move over time and realized we could combine [d3-contour](https://observablehq.com/@fil/contour-labels-canvas) with [Boids](https://observablehq.com/@harrystevens/vanilla-boids). Our implementation was guided by [this notebook](https://observablehq.com/@efrymire/newspaper-contour-maps) as well.\n\nThis notebook adds a shadow as learned from [Lionel's awesome notebook](https://observablehq.com/@makio135/generating-svgs/18?collection=@makio135/generating-svgs).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"viewof frame = Scrubber(frames, { autoplay: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":361,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"contours = {\n return contour(flockSet[frame]);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"flockSet = {\n return frames.map(i => {\n myBoids.tick();\n // return contour(myBoids.flock);\n return myBoids.flock.map(d => ({ ...d }));\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":391,"value":"// viewof blurAmt = Scrubber(Array.from({ length: 400 }, (_, i) => i * 0.1), {\n// delay: 220\n// })\n// blurAmt = frame * 0.02\nblurAmt = 1.5","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"bgColor = weightColor(toOneScale(10))","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"weightColor = d3.scaleSequential(d3.interpolateWarm)","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"toOneScale = d3\n .scaleLinear()\n .domain([0, contour.length])\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"rotation = -0.2","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"frames = d3.range(360)","pinned":true,"hidden":false,"mode":"ojs"},{"id":234,"value":"mutable debug = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { Boids } from \"@harrystevens/vanilla-boids\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { vecmath } from \"@harrystevens/vector-math\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"myBoids = {\n const sim = new Boids();\n\n // Add 500 boids\n for (let i = 0; i < width * .5; i++) {\n sim.add();\n // yield sim\n }\n return sim;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"myBoids\n .height(height + 100)\n .alignment(0.72)\n .cohesion(0.5)\n .separation(0.85)\n .perception(20)\n .quadtree(true)\n .maxSpeed(2.75)","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"import { cwf } from \"@codingwithfire/cwf-season-2-reusable-style-elements\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":41,"value":"myBoids","pinned":true,"hidden":false,"mode":"ojs"},{"id":568,"value":"thresholds = [\n //[0.01, 0.02, 0.03, 0.04, 0.05, 0.06, 0.07, 0.08, 0.09, 0.1]\n 0.005,\n 0.01,\n 0.015,\n 0.02,\n 0.025,\n 0.03,\n 0.035,\n 0.04,\n 0.045,\n 0.05,\n 0.055,\n 0.06,\n 0.065,\n 0.07,\n 0.075,\n 0.08,\n 0.085,\n 0.09,\n 0.095,\n 0.1\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":43,"value":"contour = d3\n .contourDensity()\n .x(d => d.pos[0])\n .y(d => d.pos[1])\n // .thresholds(10)\n .thresholds(function() {\n return thresholds;\n })\n // .cellSize(1)\n .size([width, height + 100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"d3 = require(\"d3@6\", \"https://files-5ouswn75j.vercel.app/d3-contour.js\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":395,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}