44:["$","title",null,{"children":"Biarc path on grid | Amit Patel | Observable"}] 4c:[] 48:{"id":"e6d76fa4748f68a9","slug":"biarc-path-on-grid","title":"Biarc path on grid","thumbnail":"2607768c1583800dc11f6305119902a363a9d4df5e24c27af14e942b007a02ae","access_level":"public","create_time":"$D2021-04-17T18:09:28.969Z","update_time":"$D2021-04-18T21:47:37.276Z","view_time":null,"first_public_time":"$D2021-04-17T18:25:46.664Z","has_unpublished_edits":null,"fork":false,"stars":28,"starred":false,"owner":{"type":"team","id":"468ec444dc0eb0ae","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":"starter_2024","bio":"I work on explorable explanations, gamedev tutorials, and gamedev tools.","following":false},"version":167,"publish_version":167,"role":null,"authored":false,"authors":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"bio":"I work on explorable explanations, gamedev tutorials, and gamedev tools.","following":false}],"members":[{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null,"role":"editor"}],"comments":[{"id":"21075277b5220f1c","reply_to_id":null,"content":"Why start the range at 0.1, when 0 seems to be handled well?","create_time":"$D2021-04-18T10:49:27.750Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}},{"id":"c53d5c36a73cc2c3","reply_to_id":"21075277b5220f1c","content":"Good point! I wasn't sure if it would handle 0, but I should've started the range at 0 anyway, to find out! :-)","create_time":"$D2021-04-18T17:05:07.898Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c7764e85dbcadc6d","login":"redblobgames","name":"Amit Patel","avatar_url":"https://avatars-next.observableusercontent.com/e8ff190af9193a0b08dfdadf3fb2e93a0519966417f0c9a2063aae07a171e6b2","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Biarc path on grid","cells":[{"id":0,"value":"md`# Biarc path on grid\n\nI wanted to make a 3x2 grid area with a [biarc path](https://www.ryanjuckett.com/biarc-interpolation/), for a project I'm working on.\nBiarcs are two circular arcs glued together.\n\nReal-life roads don't use bezier curves. They use straight line segments and [circular arcs](https://en.wikipedia.org/wiki/Geometric_design_of_roads#Alignment) and glue them together with [cornu spirals](https://en.wikipedia.org/wiki/Track_transition_curve). I find that circular arcs *look* a lot nicer than bezier curves for roads. For a racing/driving game, I'd want the cornu spiral transitions between the arcs and line segments.\nFor the city-simulation style game I'm working on, I'm skipping the cornu spirals to make the geometry simpler to work with. This is a line—arc—arc—line transition curve between two parallel roads:\n`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"svg`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"viewof w = slider({\n min: 0.0,\n max: 1.5,\n step: 0.01,\n value: 1,\n description: \"width of biarc (left to center)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"r=w ** 2 + 1/4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"md`I had originally thought that the arc radius and/or angle would be the way to control different styles of curves. I implemented this page to find the radius that would look the nicest.\n\nBut it turned out that because the vertical distance by the half curve has to be 0.5, it means there's only *one* value of radius and angle that makes the tangents match. The radius I expected to work best didn't get the tangents right. I didn't notice the problem with tangents with a fixed radius; I only noticed when I made the slider so that I could try changing it. My intuition was wrong, and I would've probably implemented the wrong thing in my project.\n\nI wanted to have different styles, so I instead made the *width* variable, and then calculated the radius based on that. This worked out nicely.\n\nI'm glad I listened to my inner doubts and implemented this page *before* proceeding with my project.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"path = `M -2,-0.5 l ${2-w},0 A ${r},${r} 0,0,1 0,0 A ${r},${r} 0,0,0 ${w},0.5 l ${2-w},0`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"md`BTW, I drew roads with wide svg strokes, not fills. First draw a wide stroke in gray, then in yellow, then in gray, and that will produce the outer yellow stripes. Then draw a thin stroke in white for the center line. The same trick works for road forks and merges, with some minor issues with the road stripes:`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"path2 = `M -2,-0.5 l 4,0 M -2,0.5 l 4,0 ` + path","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"grid = {\n let output = [];\n for (let col = -2; col <= 2; col++) {\n for (let row = -2; row <= 1; row++) {\n output.push(svg``);\n }\n }\n return svg`${output}`;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"import {slider} from '@jashkenas/inputs'\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null