2e:null 2f:["$","title",null,{"children":"Hypnograph with Colors 🌈 | Luke Murray | Observable"}] 34:T55f,viewof controls = inputsGroup([ [ slider({ min: 500, max: 1000, step: 1, value: 500, title: "Height", description: "the height of the chart" }), slider({ min: 2, max: 100, step: 2, value: 50, title: "Number Circles", description: "the number of black circles to draw" }) ], [ slider({ min: -300, max: 300, step: 1, value: 3, title: "hole radius", description: "the radius of the center" }), slider({ min: 1, max: 1000, step: 1, value: 125, title: "donut radius", description: "the radius of the circles surrounding the center" }) ], [ slider({ min: 1, max: 8, step: 1, value: 2, title: "Pattern Repetitions", description: "Number of fades" }), slider({ min: 0, max: 1, step: .01, value: .4, title: "Fade Intensity", description: "Intensity of fade" }) ], [ slider({ min: 0, max: 1, step: .01, value: .9, title: "Rotation", description: "Rotation of the pattern from 0 to 1" }), checkbox({ description: "direction of the circles", options: [{ value: "invert", label: "Invert" }], value: false, title: "Direction" }) ] ])35:T7e5,function drawCircles() { // store the generated circles here let result = ``; // we draw each circle at "angle", we draw all the circles by incrementing the angle let angle = rotation * Math.PI; // the d_angle is the distance between each circle that we draw let d_angle = ((Math.PI * 2) / numCircles) * (!!invert ? 1 : -1); // iterate over all the circles we want to draw for (let i = 0; i < numCircles; i++) { // draw a circle at the current angle const circle_props = generateCircleProps(angle); // this is the meat of the visualization // we mask the circle based on cosFunc // when cosFunc returns 0 the mask_angle is 0 * d_angle so the current circle is hidden // when cosFunc returns 1 the mask_angle is 1 * d_angle so the current circle fills the entire available space // cosFunc smoothly interpolates between 0 and 1 so the amount of black circle we draw varies between // none at all and filling the available space // s is used to scale down the min and max space we fill let mask_angle_delta = cosFunc(i / numCircles, k * 2, s); const mask_angle = angle + mask_angle_delta * d_angle; const mask_props = generateCircleProps(mask_angle); // generate a unique id for the mask const maskId = uuid.v4(); // add the circle to the resulting svg result += ` `; // increment the angle so the next black circle starts at a normal distance angle += d_angle; } return svg`${result}`; }36:[{"id":"c7fcd4ff82f8b5bf1917f44245b58d54be522149f5790fef36489beef1edc61c571b341be0de5856e002f8a5400eedcbb0f94d6a34eaaa9f9edea3937355d303","href":"https://static.observableusercontent.com/files/c7fcd4ff82f8b5bf1917f44245b58d54be522149f5790fef36489beef1edc61c571b341be0de5856e002f8a5400eedcbb0f94d6a34eaaa9f9edea3937355d303","name":"ring-no-fade.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":14139},{"id":"9e8f49b392fb071924da734d6325d09a44f6b2f3303c62702a14372502cffca0a794d1f0bfad7fa5c402b173619c47aeb56faf1762065b814776598b2cdcb1fd","href":"https://static.observableusercontent.com/files/9e8f49b392fb071924da734d6325d09a44f6b2f3303c62702a14372502cffca0a794d1f0bfad7fa5c402b173619c47aeb56faf1762065b814776598b2cdcb1fd","name":"donut-semicircles-three-fade.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":47435},{"id":"0d82ec8cf80ea296ed703371fbd847a1332f009396516f492a2d55910ac182b6f5b4be60f0fd3b57522fd2412b16967eb57ef35d656df4c2d067b8883977abc5","href":"https://static.observableusercontent.com/files/0d82ec8cf80ea296ed703371fbd847a1332f009396516f492a2d55910ac182b6f5b4be60f0fd3b57522fd2412b16967eb57ef35d656df4c2d067b8883977abc5","name":"double-donut.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":18992},{"id":"6c58286aba2aea3800cde5e6cd70a6831e656d7a16ab85b44a34ed4fc5bd6bee7d6cb8cfb6a25f9dfad7dd7284f8353a82a29137826d24e23157874006f62af7","href":"https://static.observableusercontent.com/files/6c58286aba2aea3800cde5e6cd70a6831e656d7a16ab85b44a34ed4fc5bd6bee7d6cb8cfb6a25f9dfad7dd7284f8353a82a29137826d24e23157874006f62af7","name":"double-spiral.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":18937},{"id":"44421bba854c3cd7901c645e6728025c9112656a0ec9663fadc4dffc278354b3380c4a2ec6a0a3df1d0f86a2b1c392613fe036a38a2cd611c57effd36cde2697","href":"https://static.observableusercontent.com/files/44421bba854c3cd7901c645e6728025c9112656a0ec9663fadc4dffc278354b3380c4a2ec6a0a3df1d0f86a2b1c392613fe036a38a2cd611c57effd36cde2697","name":"donut-no-pattern.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":22939},{"id":"c712351d226ad44679f55535f6d65d7b3c4bdae89ef00a158152558c6498ae26e6e8bb1d566f129576fa4c178280c53696be8c14570be749e23f6fa410162fa3","href":"https://static.observableusercontent.com/files/c712351d226ad44679f55535f6d65d7b3c4bdae89ef00a158152558c6498ae26e6e8bb1d566f129576fa4c178280c53696be8c14570be749e23f6fa410162fa3","name":"ring-double-fade.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":14230},{"id":"8fb5f8b0f840da1ed0c0712b33d61653dd105b290ffc171b2b94c504df5f0f853e20eacc5fe4d0bde2c3541d5a29cb8166cb73b32854e9a36588cff8bd56bcc4","href":"https://static.observableusercontent.com/files/8fb5f8b0f840da1ed0c0712b33d61653dd105b290ffc171b2b94c504df5f0f853e20eacc5fe4d0bde2c3541d5a29cb8166cb73b32854e9a36588cff8bd56bcc4","name":"donut-semi-circles.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":47434},{"id":"942d289dbf9a4d7a44f7bdbe8dfc5719e5bb5a30c021943c9b0dae08537b63ada39b52d8c3129994ba14d04537ea68ed1eb51c5c0badfc11ebfe9d7067d77c25","href":"https://static.observableusercontent.com/files/942d289dbf9a4d7a44f7bdbe8dfc5719e5bb5a30c021943c9b0dae08537b63ada39b52d8c3129994ba14d04537ea68ed1eb51c5c0badfc11ebfe9d7067d77c25","name":"triple-donut-slight-fade.svg","type":"image/svg+xml","lastModified":1613920686333.229,"size":22938}] 32:{"id":"243cbd86202e858b","slug":"hypnograph-with-colors","title":"Hypnograph with Colors 🌈","thumbnail":"b34810b8e565822d323482bec2cc92abc657d4fc796014920a57d265ca54f69c","access_level":"public","create_time":"$D2021-02-21T15:18:06.333Z","update_time":"$D2021-02-21T15:34:37.473Z","view_time":null,"first_public_time":"$D2021-02-21T15:27:24.299Z","has_unpublished_edits":null,"fork":{"id":"0b393349906c2f19","slug":"hypnograph-eased","title":"Hypnograph Eased","owner":{"id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray"}},"stars":1,"starred":false,"owner":{"type":"team","id":"2fffccdb72a41da3","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":"starter_2024"},"version":476,"publish_version":476,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null}],"members":[{"type":"individual","id":"1d55995fe48aa1ea","login":"lukesmurray","name":"Luke Murray","avatar_url":"https://avatars-next.observableusercontent.com/71a8e2c24320cb7d8a88bd0d0ab7cb1cd2b09805978c252cbcc5facac7a97c8b","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hypnograph with Colors 🌈","cells":[{"id":0,"value":"md`# Hypnograph with Colors 🌈`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"color = {\n // return d3.interpolate(\"rgb(108,99,255)\", \"red\");\n // return d3.interpolateRdYlBu;\n // return d3.interpolateRdYlGn;\n // return d3.interpolateTurbo;\n return d3.interpolateRainbow;\n // return d3.interpolateSinebow;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":446,"value":"md`## Gallery\n\n\n${await FileAttachment(\"triple-donut-slight-fade.svg\").image()}\n${await FileAttachment(\"donut-semi-circles.svg\").image()}\n${await FileAttachment(\"ring-double-fade.svg\").image()}\n${await FileAttachment(\"donut-no-pattern.svg\").image()}\n${await FileAttachment(\"double-spiral.svg\").image()}\n${await FileAttachment(\"double-donut.svg\").image()}\n${await FileAttachment(\"donut-semicircles-three-fade.svg\").image()}\n${await FileAttachment(\"ring-no-fade.svg\").image()}\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"//https://www.desmos.com/calculator/ybayf8fhhi\nfunction cosFunc(x, k, s) {\n // cos(x) alternates between 0 and 1\n // cos(pi * x) has a frequency of 1\n // cos(pi *x) + 1 has a frequency of 1 and alternate between 0 and 2\n // (cos(pi * x) + 1) / 2 has a frequency of 1 and alternates between 0 and 1\n // (cos(pi * (x+1)) + 1) / 2 has a frequency of 1 and alternates between 0 and 1 but starts at 0\n // (cos(pi * (x * k +1)) + 1) / 2 has prev properties but alternates k times\n // s is used to scale the function between 1 - s and 0 + s\n return ((Math.cos(Math.PI * (x * k + 1)) + 1) / 2 - .5) * s + .5;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"// calculate the props for a svg circle based on the hole radius, donut radius, and width\nfunction generateCircleProps(angle) {\n const cx = Math.sin(angle) * (holeSize + donutSize) + width / 2;\n const cy = Math.cos(angle) * (holeSize + donutSize) + height / 2;\n const r = donutSize;\n return { cx, cy, r };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"height = controls[0][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"numCircles = controls[0][1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"holeSize = controls[1][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"donutSize = controls[1][1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"k = controls[2][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"s = controls[2][1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"rotation = controls[3][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"invert = controls[3][1]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { slider, checkbox } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"import { inputsGroup } from \"@bumbeishvili/input-groups\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"uuid = require('uuid@8.3.2/dist/umd/uuid.min.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"