2a:null 2b:["$","title",null,{"children":"Polka Dot Darkness | Dmitry Baranovskiy | Observable"}] 30:T49e,demo1 = { const a = 200; const h = a * sq3; const r = demoR; return html`

`; }31:[] 2e:{"id":"0f9e2549d294ac2c","slug":"halftone","title":"Polka Dot Darkness","thumbnail":"654e17ce5f2b93a4effd871a91b6820a6ba84d489aa10488dff2028872060a1a","access_level":"public","create_time":"$D2020-07-04T11:59:10.529Z","update_time":"$D2022-11-28T05:09:37.822Z","view_time":null,"first_public_time":"$D2020-07-05T00:43:46.772Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":"starter_2024"},"version":396,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null}],"members":[{"type":"individual","id":"230ca2847200ccc9","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy","avatar_url":"https://avatars-next.observableusercontent.com/c31e7f084a49a6e09f7724ab70028e1f8a03923326f084b8f9e86a014705daf0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"861bdd2cf0693695","slug":"blog","title":"Blog","owner":{"id":"e3672025b6b6f436","login":"dmitrybaranovskiy","name":"Dmitry Baranovskiy"}},"type":"notebook","body":{"titling":"auto","title":"Polka Dot Darkness","cells":[{"id":0,"value":"md`# Polka Dot Darkness`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":391,"value":"A bit of research around infamous polka dot pattern.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":386,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"text1 = md`\nThis pattern is very common. What I am trying to find out is how dark or light the pattern is for a given dot radius and distance between them. It is clear that dots are arranged in equilateral triangles. Technically it means that we have rows of circles width horizontal step ${tex`a`} and vertical step ${tex`\\frac{a\\sqrt{3}}{2}`}. Our tessellation area is rectangle with width equal to ${tex`a`} and height ${tex`a\\sqrt{3}`}. See the diagram below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"text2 = md`You can drag the black dot to change the radius of the circle. As long as circles are not colliding, i.e. ${tex`r<\\frac{a}{2}`} the area taken by circles could be calculated as ${tex`2πr^2`}. As soon as they overlap we can see 6 “lens” shapes. Total area of those shapes could be calculated using this formula: ${tex.block`l=12\\left(r^{2}\\arccos\\left(\\frac{a}{2r}\\right)-\\frac{a}{2}\\sqrt{r^2-\\frac{a^2}{4}}\\right)`} The maximum value of the radius is ${tex`\\frac{a\\sqrt{3}}{3}`}. After this value we can’t see any gaps between circles.\n\nDarkness rate of the pattern is simply a relation of dark area to the whole area and we can calculate it like so:${tex.block`R=\\frac{2πr^2-l}{a^2\\sqrt{3}}`} Of course if circles do not overlap, ${tex`l=0`}.\n\nAnd the final demo. Drag the siders for spacing and radius and see how colour of big circle changes to reflect the colour of the pattern itself.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"viewof a = slider({\n min: 5,\n max: 200,\n step: 1,\n value: 50,\n title: \"Spacing\",\n description: \"Distance between dots\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"viewof r = slider({\n min: 5,\n max: 50,\n step: 1,\n value: 12,\n title: \"Radius\",\n description: \"Radius of dots\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"output = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`Radius: **${r}**\\n\nDistance: **${a}**\\n\nShade: \\`${chroma(rgb, rgb, rgb).hex()}\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"mutable demoR = 50;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"dragging = {\n const circle = demo1.querySelector(\"circle.drag\");\n const isDrag = { x: 0, y: 0, r: demoR, dx: 0, dy: 0 };\n const mousemove = (e) => {\n isDrag.dx = isDrag.x - e.x;\n isDrag.dy = isDrag.y - e.y;\n mutable demoR = Math.max(\n 0,\n Math.min(isDrag.r + isDrag.y - e.y, (200 * sq3) / 3)\n );\n };\n\n const mouseup = () => {\n document.removeEventListener(\"mousemove\", mousemove);\n document.removeEventListener(\"mouseup\", mouseup);\n const newr = isDrag.r + isDrag.dy;\n isDrag.x = 0;\n isDrag.y = 0;\n isDrag.r = demoR;\n isDrag.dx = 0;\n isDrag.dy = 0;\n };\n\n const mousedown = (e) => {\n isDrag.x = e.x;\n isDrag.y = e.y;\n document.addEventListener(\"mousemove\", mousemove);\n document.addEventListener(\"mouseup\", mouseup);\n };\n\n circle.addEventListener(\"mousedown\", mousedown);\n invalidation.then(() => {\n circle.removeEventListener(\"mousedown\", mousedown);\n });\n return html`Dragging…`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"sq3 = Math.sqrt(3);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"areaBlack = 2 * Math.PI * r ** 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"area = a ** 2 * sq3;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"overlap = (2 * r - a) / 2;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"max = a * sq3 / 3;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"rate = (r >= max ? 1 : (areaBlack - (overlap > 0 ? 12 * (r ** 2 * Math.acos(1 - overlap / r) - (r - overlap) * Math.sqrt(2 * r * overlap - overlap ** 2)) : 0)) / area);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"rgb = 255 - 255 * rate;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"chroma = require('chroma-js@1.3.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"