2c:null 2d:["$","title",null,{"children":"Lines on circle example | Amit Patel | Observable"}] 32:[] 30:{"id":"b766a28110312552","slug":"unwind-circle-example","title":"Lines on circle example","thumbnail":"0d10b88fa69c32cc8a202823397c354116ef2b7bce2e0a8a78079d6c163eaa15","access_level":"public","create_time":"$D2020-02-12T18:49:27.349Z","update_time":"$D2021-01-31T04:07:12.685Z","view_time":null,"first_public_time":"$D2020-02-12T19:12:56.539Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":"starter_2024"},"version":86,"publish_version":86,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null}],"members":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Lines on circle example","cells":[{"id":0,"value":"md`# Lines on circle example\n\nReproducing one diagram from https://ciechanow.ski/gears/ but with ObservableHQ`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof unwind = slider({\n min: 0, \n max: 1,\n value: 0,\n step: 0.01, \n description: \"Unwind the circle\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"viewof num_arcs = slider({\n min: 2, \n max: 10,\n value: 5,\n step: 1,\n description: \"Number of lines\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"colored_lines = {\n let svg = \"\";\n for (let i = 0; i < num_arcs; i++) {\n let radius = 50 * i / num_arcs;\n let hue = (i / num_arcs) * 240 | 0;\n let color = `hsl(${360-hue}, 50%, 50%)`;\n let x = radius * Math.cos(unwind * 2*Math.PI), y = -radius * Math.sin(unwind * 2*Math.PI);\n svg += `0.5?1:0},0,${x},${y}\" stroke=\"${color}\" stroke-width=\"1.5\" fill=\"none\"/>`\n svg += ``;\n let horiz = 200*unwind * (i/num_arcs), vert = (i / num_arcs) * 50;\n svg += ``;\n svg += ``;\n }\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"