2a:null 2b:["$","title",null,{"children":"Random Walks 5 | fheyen | Observable"}] 30:T555,canvas = { const context = DOM.context2d(width, height); context.fillStyle = "black"; context.fillRect(0, 0, width, height); context.lineWidth = 1; const { pointsX, pointsY } = points; const steps = pointsX.length; let extentX = d3.extent(pointsX); let extentY = d3.extent(pointsY); let extent = d3.extent([...pointsX, ...pointsY]); const scaleX = d3 .scaleLinear() .domain(extent) .range([10, width - 10]); const scaleY = d3 .scaleLinear() .domain(extent) .range([10, height - 10]); const pixelX = pointsX.map(scaleX); const pixelY = pointsY.map(scaleY); for (let step = 2; step < steps; ++step) { const x1 = pixelX[step - 2]; const y1 = pixelY[step - 2]; const x2 = pixelX[step - 1]; const y2 = pixelY[step - 1]; const x3 = pixelX[step]; const y3 = pixelY[step]; // Is curve? const isStraight = (x1 === x2 && x1 === x3) || (y1 === y2 && y1 === y3); context.strokeStyle = d3.interpolateRainbow((step / steps) * 0.9); if (isStraight) { drawLine(context, x1, y1, x2, y2); } else { let turnLeft = true; if (x1 < x3 && y1 < y3) { turnLeft = y1 === y2; } else if (x1 > x3 && y1 > y3) { turnLeft = y1 === y2; } drawArc(context, x1, y2, x3, y3, turnLeft, roundness); step++; } } return context.canvas; }31:T5db,function drawArc(context, x1, y1, x2, y2, turnLeft = true, roundness = 1) { context.beginPath(); context.moveTo(x1, y1); if (x1 === x2 || y1 === y2) { context.lineTo(x2, y2); context.stroke(); return; } const radius = Math.abs(x2 - x1) * roundness; let cx; let cy; if (turnLeft) { if (x1 < x2 && y1 < y2) { cx = x1 + radius; cy = y2 - radius; context.arc(cx, cy, radius, 1 * Math.PI, 0.5 * Math.PI, true); } else if (x1 > x2 && y1 < y2) { cx = x2 + radius; cy = y1 + radius; context.arc(cx, cy, radius, 1.5 * Math.PI, 1 * Math.PI, true); } else if (x1 > x2 && y1 > y2) { cx = x1 - radius; cy = y2 + radius; context.arc(cx, cy, radius, 0, 1.5 * Math.PI, true); } else { cx = x2 - radius; cy = y1 - radius; context.arc(cx, cy, radius, 0.5 * Math.PI, 0, true); } } else { if (x1 < x2 && y1 < y2) { cx = x2 - radius; cy = y1 + radius; context.arc(cx, cy, radius, 1.5 * Math.PI, 0); } else if (x1 > x2 && y1 < y2) { cx = x1 - radius; cy = y2 - radius; context.arc(cx, cy, radius, 0, 0.5 * Math.PI); } else if (x1 > x2 && y1 > y2) { cx = x2 + radius; cy = y1 - radius; context.arc(cx, cy, radius, 0.5 * Math.PI, 1 * Math.PI, false); } else { cx = x1 + radius; cy = y2 + radius; context.arc(cx, cy, radius, Math.PI, 1.5 * Math.PI, false); } } context.lineTo(x2, y2); context.stroke(); }32:[] 2e:{"id":"ec056d017150a416","slug":"random-walks-5","title":"Random Walks 5","thumbnail":"e13bcb0b9336f20cabc729f5291e75a7f92e5e4a5a3d11355c71d0d4ea2111d0","access_level":"public","create_time":"$D2021-10-09T15:05:19.704Z","update_time":"$D2021-10-09T16:27:47.941Z","view_time":null,"first_public_time":"$D2021-10-09T16:24:42.270Z","fork":{"id":"e34f3b22d5ba5f2f","slug":"random-walks-4","title":"Random Walks 4","owner":{"id":"5cbdc37d5634c888","login":"fheyen","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"5cbdc37d5634c888","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":"starter_2024"},"version":500,"publish_version":500,"role":null,"authored":false,"authors":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null}],"members":[{"type":"individual","id":"ce539535bc3f40fc","login":"fheyen","name":"","avatar_url":"https://avatars-next.observableusercontent.com/5583b3edc59d97385b9ad17f74c76e9ed15457d372ed96534dbd829f3d95ebd5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8938cec8689df6a8","slug":"art","title":"Art","owner":{"id":"5cbdc37d5634c888","login":"fheyen","name":""}},"type":"notebook","body":{"title":"Random Walks 5","cells":[{"id":0,"value":"# Random Walks 5\n\nRounded edges.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":178,"value":"viewof button = Inputs.button(\"Redraw\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":369,"value":"viewof roundness = Inputs.range([0, 1], { label: \"Roundness\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"viewof steps = Inputs.range([100, 10_000], {\n label: \"Steps\",\n value: 1000,\n step: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":467,"value":"points = {\n button;\n\n const pointsX = Array.from({ length: steps });\n const pointsY = Array.from({ length: steps });\n let x = 0;\n let y = 0;\n for (let step = 0; step < steps; ++step) {\n // Choose 1 of 4 directions at random\n const r = Math.random();\n if (r < 0.255) {\n x += 1;\n } else if (r < 0.5) {\n x -= 1;\n } else if (r < 0.755) {\n y += 1;\n } else {\n y -= 1;\n }\n pointsX[step] = x;\n pointsY[step] = y;\n }\n\n // const pointsX = [1, 2, 3, 3, 3];\n // const pointsY = [1, 1, 1, 2, 3];\n\n return { pointsX, pointsY };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":340,"value":"function drawLine(context, x1, y1, x2, y2) {\n context.beginPath();\n context.moveTo(x1, y1);\n context.lineTo(x2, y2);\n context.stroke();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":333,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"// height = width * (9 / 16)\nheight = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2f:"$2e:body"