2e:null 2f:["$","title",null,{"children":"SVG extreme values | David B. | Observable"}] 34:T129b,Node = html`

`35:[{"id":"54ddfa68dca56fb8c3467d982a9f2139b19c42273e22ec6844344f0b976d44605c6eab2ddb5ee512512b28cba8b87aba6c7656b487225b2f4f47d73ad87a96e0","href":"https://static.observableusercontent.com/files/54ddfa68dca56fb8c3467d982a9f2139b19c42273e22ec6844344f0b976d44605c6eab2ddb5ee512512b28cba8b87aba6c7656b487225b2f4f47d73ad87a96e0","name":"IMG_1407 2.jpg","type":"image/jpeg","lastModified":1607766337180.3,"size":2542969}] 32:{"id":"887dc717d6cb6c19","slug":"svg-extreme-values","title":"SVG extreme values","thumbnail":"55816bc968d612f88c0811053402b9b3aed7970c64dca6cf4aa5b905fb65fc7e","access_level":"public","create_time":"$D2020-12-05T16:12:43.458Z","update_time":"$D2020-12-13T17:20:31.761Z","view_time":null,"first_public_time":"$D2020-12-13T17:15:59.468Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":"starter_2024"},"version":376,"publish_version":376,"role":null,"authored":false,"authors":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null}],"members":[{"type":"individual","id":"5e0ddde49c696e13","login":"bumbeishvili","name":"David B.","avatar_url":"https://avatars-next.observableusercontent.com/038bfbb4eaa1c1217d83efed9948fd774126f3fa01dcce32e347fd0fd7c960d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"beac97df7de1954a","slug":"work-components","title":"Work Utils","owner":{"id":"fcd7e4188e1df970","login":"bumbeishvili","name":"David B."}},"type":"notebook","body":{"title":"SVG extreme values","cells":[{"id":0,"value":"md`# SVG extreme values`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`Sometimes we need to use extreme number values in our SVG shapes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`Turns out SVG is having hard time, with big float numbers like \\`100000000000000000000.8738217873\\`). \n\nFor the workaround, we can limit external, out of bound coordinate to stay within bounds, which SVG can handle (\\`2^26\\` or \\`67'108'864\\`) \n\nThat way we can still move forward untill we reach another limit 2^78` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"FileAttachment(\"IMG_1407 2.jpg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"sides = sidesCalc({c:{x:0,y:0},rectWidth:2**26})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"sidesCalc = ({c,rectWidth})=> ({\n left : [\n {x: c.x - rectWidth/2, y: c.y - rectWidth/2},\n {x: c.x - rectWidth/2, y: c.y + rectWidth/2},\n ],\n right :[\n {x: c.x + rectWidth/2, y: c.y - rectWidth/2},\n {x: c.x + rectWidth/2, y: c.y + rectWidth/2}\n ],\n top : [\n {x: c.x - rectWidth/2, y: c.y - rectWidth/2},\n {x: c.x + rectWidth/2, y: c.y - rectWidth/2}\n ],\n bottom : [\n {x: c.x - rectWidth/2, y: c.y + rectWidth/2},\n {x: c.x + rectWidth/2, y: c.y + rectWidth/2}\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"function intersect(a, b) {\n let da = {x: a[1].x - a[0].x, y: a[1].y - a[0].y }\n let db = {x: b[1].x - b[0].x, y: b[1].y - b[0].y }\n let s = (-da.y * (a[0].x - b[0].x) + da.x * (a[0].y - b[0].y)) / (-db.x * da.y + da.x * db.y);\n let t = ( db.x * (a[0].y - b[0].y) - db.y * (a[0].x - b[0].x)) / (-db.x * da.y + da.x * db.y);\n \n let hit = {x: 0, y: 0 }\n if (s >= 0 && s <= 1 && t >= 0 && t <= 1)\n {\n // Collision detected\n hit.x = a[0].x + (t * da.x);\n hit.y = a[0].y + (t * da.y);\n hit.t = t\n return hit\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"function hitter({o,c}) {\n let ray = [\n {x: o.x, y: o.y},\n {x: c.x, y: c.y} \n ]\n let hit\n if(hit = intersect(ray, sides.left)) { hit.side = \"left\"; return hit }\n if(hit = intersect(ray, sides.top)) { hit.side = \"top\"; return hit }\n if(hit = intersect(ray, sides.right)) { hit.side = \"right\"; return hit }\n if(hit = intersect(ray, sides.bottom)) { hit.side = \"bottom\"; return hit }\n return o;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"origin = ({ x: 100, y:2**num })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof num = slider({\n title:\"Powers of 2\",\n min:1,\n max:77,\n value:5,\n step:1,\n format: v => `2^${v} or ${(2**v).toExponential(1)} or ${2**v} `,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"