Delaunay Triangles ${current

2b:null 2c:["$","title",null,{"children":"Delaunay Triangles | Otávio Vasques | Observable"}] 31:T589,drawing = svg` `32:[] 2f:{"id":"16f98dba39bfa32d","slug":"delaunay-triangles","title":"Delaunay Triangles","thumbnail":"09640c4fe02042945d8951ac084497c17f685f0030197da525425cafdfc44dd9","access_level":"public","create_time":"$D2021-08-30T22:56:14.366Z","update_time":"$D2024-12-08T21:34:50.232Z","view_time":null,"first_public_time":"$D2021-09-01T01:54:23.369Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"5e8d11e509318570","login":"otaviocv","name":"Otávio Vasques","avatar_url":"https://avatars-next.observableusercontent.com/21aa1d096ad0538e8d296d94b9560d33bcd6c2c7a3046310d200f7467de1e103","tier":"starter_2024"},"version":672,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"67f6bc0db63009d0","login":"otaviocv","name":"Otávio Vasques","avatar_url":"https://avatars-next.observableusercontent.com/21aa1d096ad0538e8d296d94b9560d33bcd6c2c7a3046310d200f7467de1e103","tier":null}],"members":[{"type":"individual","id":"67f6bc0db63009d0","login":"otaviocv","name":"Otávio Vasques","avatar_url":"https://avatars-next.observableusercontent.com/21aa1d096ad0538e8d296d94b9560d33bcd6c2c7a3046310d200f7467de1e103","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Delaunay Triangles","cells":[{"id":0,"value":"md`# Delaunay Triangles\n\nThis was inspired after a short conversation with [@Artur_Machado](https://twitter.com/Artur_Machado) on Delaunay Triangles.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"viewof sets_width = slider({\n min: grid_config.min,\n max: grid_config.max,\n step: 1,\n value: valid_option ? options.grid : 5,\n title: \"Grid Size\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"viewof n_points = slider({\n min: 5,\n max: 500,\n step: 1,\n value: valid_option ? options.n_points : 10,\n title: \"Number of points per diagram\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"viewof fill_option = checkbox({\n options: [{ value: \"F\", label: \"Fill!\"}],\n value: valid_option ? options.fill : false,\n title: \"Fill?\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"viewof stroke_width = slider({\n min: stroke_config.min,\n max: stroke_config.max,\n step: 1,\n value: valid_option ? options.stroke : 3,\n //value: 0.7,\n title: \"Stroke width\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"viewof colorscheme_name = select({\n title: \"Colorscheme\",\n value: valid_option ? options.colorscheme : Object.keys(colorschemes)[0],\n options: Object.keys(colorschemes)\n}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"md`_id:_ \\`${current_id}\\`\n\n_share_: \\`https://observablehq.com/@otaviocv/delaunay-triangles${current_id}\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`# Content`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`## Config`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"grid_config = ({\n min: 1,\n max: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"n_points_config = ({\n min: 3,\n max: 250\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"stroke_config = ({min: 0, max: 99})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"md`### ID Config Decoding\n\\`\\`\\`\n#(colorscheme name)(grid size)(points per diagram)(to fill or not)(stroke width)\n#( 4 letters )( 2 digits)(4 digits )( F or V )(2 digits )\n\\`\\`\\`\n\nExamples:\n* \\`#NEON050005F01\\`\n* \\`#NICE050005F01\\`\n* \\`#NICE050005F01\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":524,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"function id_decoder(id) {\n return {\n colorscheme: id.substring(1,5).toLowerCase(),\n grid: parseInt(id.substring(5, 7)),\n n_points: parseInt(id.substring(7, 11)),\n fill: id.substring(11, 12),\n stroke: parseInt(id.substring(12, 14))\n }}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":544,"value":"function id_encoder(options) {\n const colorscheme_name = options.colorscheme.toUpperCase();\n const grid = options.grid.toString().padStart(2, \"0\")\n const n_points = options.n_points.toString().padStart(4, \"0\")\n const fill = options.fill == \"F\" ? \"F\" : \"V\"\n const stroke = options.stroke.toString().padStart(2,0)\n return `#${colorscheme_name}${grid}${n_points}${fill}${stroke}`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":490,"value":"function is_valid_option(id_options) {\n if (Object.keys(colorschemes).indexOf(id_options.colorscheme) < 0) return false\n if (id_options.grid > grid_config.max || id_options.grid < grid_config.min) return false\n if (id_options.n_points > n_points_config.max || id_options.n_points < n_points_config.min) return false\n if ([\"F\", \"V\"].indexOf(id_options.fill) < 0) return false\n if (id_options.stroke > stroke_config.max || id_options.stroke < stroke_config.min) return false\n return true\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"md`### Extractions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"hash = location.hash","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"options = id_decoder(hash)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"valid_option = is_valid_option(options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"current_options = ({\n colorscheme: colorscheme_name,\n grid: sets_width,\n n_points: n_points,\n fill: fill_option,\n stroke: stroke_width\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"current_id = id_encoder(current_options)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`## Delaunay Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"sets = sets_width ** 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"point_sets = Array(sets).fill().map((x, i) => random_points(uniform_2d, n_points))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"md`## 2D Samplers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"seed = colorscheme_name","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"random_generator = makeRandomGenerator(seed)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`### Uniform`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"function uniform_2d() {\n return [random_generator.random(), random_generator.random()]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`### Sample a lot of points`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"function random_points(sampler, n) {\n let numbers = []\n for (let i=0; i < n; i++) numbers.push(sampler())\n return numbers\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`## Shapes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"md`# Styles`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`## Colors`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"neon_colorscheme = ({\n 'background': \"black\",\n 'colors': [\"#0CECDD\", \"#FFF338\", \"#FF67E7\", \"#C400FF\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":338,"value":"nice_colorscheme = ({\n background: \"black\",\n colors: [\"#FD49A0\", \"#A16AE8\", \"#B4FEE7\", \"#603F8B\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"soft_colorscheme = ({\n background: \"white\",\n colors: [\"#0C1446\", \"#87ACA3\", \"#2B7C85\", \"#175873\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"deep_colorscheme = ({\n background: \"white\",\n colors: [\"#FF0000\", \"#BF0000\", \"#800000\", \"#400000\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"true_colorscheme = ({\n background: \"#fce4b5\",\n colors: [\"#ef807f\", \"#892ce1\", \"#7effd4\", \"#39b0a9\", \"#696969\", \"#f4a361\", \"#4b0081\", \"#348fff\", \"#add9e6\", \"#d7bfd7\", \"#98fb97\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"blog_colorscheme = ({\n background: \"#000\",\n colors: [\"#00FF55\", \"#FFB800\", \"#CC00FF\", \"#00A3FF\", \"#FF006B\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorschemes = ({\n neon: neon_colorscheme,\n nice: nice_colorscheme,\n soft: soft_colorscheme,\n deep: deep_colorscheme,\n true: true_colorscheme,\n blog: blog_colorscheme,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"colorscheme = colorschemes[colorscheme_name]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Structure`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"view_port_width = 800","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = width * 9/16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"margin = 1/7 * view_port_width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"radius = 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"md`# Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"d3delaunay = require('d3-delaunay')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"import {number, slider, checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"import { makeRandomGenerator } from \"@forresto/random-seed\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"