2d:null 2e:["$","title",null,{"children":"Boid Contours With Constant Density | Coding with Fire | Observable"}] 33:T566,contourViz = svg``34:[] 31:{"id":"e38a396f1710c55d","slug":"boid-contours-with-constant-density","title":"Boid Contours With Constant Density","thumbnail":"5917a923813f5cace1e3ea144538ff33cd3a51afe2342f5205a748b2e9674ddd","access_level":"public","create_time":"$D2020-12-08T22:05:29.268Z","update_time":"$D2020-12-08T22:48:33.110Z","view_time":null,"first_public_time":"$D2020-12-08T22:35:11.121Z","has_unpublished_edits":null,"fork":{"id":"d2b5c70f2c968ddd","slug":"boid-contours-with-svg-filters","title":"Boid Contours With SVG Filters","owner":{"id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire"}},"stars":0,"starred":false,"owner":{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024"},"version":644,"publish_version":644,"role":null,"authored":false,"authors":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null}],"members":[{"type":"team","id":"82bbf5c48c1a81ef","login":"codingwithfire","name":"Coding with Fire","avatar_url":"https://avatars-next.observableusercontent.com/0efd3ecc6a639fdb4fe7962b37ca4a79746ef2d2f29888495c28572970019a78","tier":"starter_2024","role":"editor"},{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Boid Contours With Constant Density","cells":[{"id":0,"value":"md`# Boid Contours With Constant Density\n\nHard-code the density thresholds based on an arbitrary frame's calculated densities.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"viewof frame = Scrubber(frames, { autoplay: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"md`We can see what the threshold array would be based on the current frame of data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"mutable debug = {\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"md`Manually set the threshold array and pass it to contourDensity`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"thresholds = [ //[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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"md`We use the default evenly spaced thresholds to surface what the thresholds would have been.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"contour = d3\n .contourDensity()\n .x(d => d.pos[0])\n .y(d => d.pos[1])\n .thresholds(function(c) {\n\n let tz = 20; // the number of thresholds to evenly space by (usually configured)\n var stop = d3.max(c);\n tz = d3.tickStep(0, stop, tz);\n tz = d3.range(0, Math.floor(stop / tz) * tz, tz);\n tz.shift();\n\n // Observable's \"console.log\", you can watch the value change above in real-time\n mutable debug = tz;\n\n // return tz;\n return thresholds;\n })\n // .cellSize(1)\n .size([width, height + 100])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"// frame = 300","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"contours = {\n return contour(flockSet[frame]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"// viewof blurAmt = Scrubber(Array.from({ length: 400 }, (_, i) => i * 0.1), {\n// delay: 220\n// })\nblurAmt = 0.9 //frame * 0.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"bgColor = weightColor(toOneScale(10))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"weightColor = d3.scaleSequential(d3.interpolateWarm)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"toOneScale = d3\n .scaleLinear()\n .domain([0, contour.length])\n .range([0, 1])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"rotation = -0.2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"frames = d3.range(360)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import { Boids } from \"@harrystevens/vanilla-boids\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"import { vecmath } from \"@harrystevens/vector-math\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import { cwf } from \"@codingwithfire/cwf-season-2-reusable-style-elements\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"myBoids","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"d3 = require(\"d3@6\", \"https://files-5ouswn75j.vercel.app/d3-contour.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"