2c:null 2d:["$","title",null,{"children":"Random Walks 6 | fheyen | Observable"}] 32:T412,canvas = { const context = DOM.context2d(width, height); context.fillStyle = "black"; context.fillRect(0, 0, width, height); context.lineWidth = 1.5; const { pointsX, pointsY, actions } = 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 = 1; step < steps; ++step) { const x1 = pixelX[step - 1]; const y1 = pixelY[step - 1]; const x2 = pixelX[step]; const y2 = pixelY[step]; context.strokeStyle = d3.interpolateRainbow((step / steps) * 0.9); context.fillStyle = context.strokeStyle; const action = actions[step]; drawArc(context, x1, y1, x2, y2, action === "left", roundness); } return context.canvas; }33:T628,points = { button; const pointsX = Array.from({ length: steps }); const pointsY = Array.from({ length: steps }); const actions = Array.from({ length: steps }); let x = 0; let y = 0; // 0 - 3, right, top, left, down let currentDirection = 0; for (let step = 0; step < steps; ++step) { // Choose straight, left, right const r = Math.random(); if (r < 1 / 3) { // Go straight actions[step] = "straight"; if (currentDirection === 0) { // x += 2; x += 1; } else if (currentDirection === 1) { // y -= 2; y -= 1; } else if (currentDirection === 2) { // x -= 2; x -= 1; } else { // y += 2; y += 1; } } else if (r < 2 / 3) { // Turn left actions[step] = "left"; if (currentDirection === 0) { x++; y--; } else if (currentDirection === 1) { x--; y--; } else if (currentDirection === 2) { x--; y++; } else { x++; y++; } currentDirection = (currentDirection + 1) % 4; } else { // Turn right actions[step] = "right"; if (currentDirection === 0) { x++; y++; } else if (currentDirection === 1) { x++; y--; } else if (currentDirection === 2) { x--; y--; } else { x--; y++; } currentDirection = (currentDirection - 1 + 4) % 4; } pointsX[step] = x; pointsY[step] = y; } return { pointsX, pointsY, actions }; }34: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(); }35:[] 30:{"id":"9f792ae4acca4a21","slug":"random-walks-6","title":"Random Walks 6","thumbnail":"dc97586ea5064c55cc7d4224862aba3061f3de443b052269cfa16b5bc1f93da6","access_level":"public","create_time":"$D2021-10-10T17:42:45.538Z","update_time":"$D2021-10-11T14:44:47.236Z","view_time":null,"first_public_time":"$D2021-10-11T14:44:12.202Z","has_unpublished_edits":null,"fork":{"id":"ec056d017150a416","slug":"random-walks-5","title":"Random Walks 5","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":555,"publish_version":555,"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":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Random Walks 6","cells":[{"id":0,"value":"# Random Walks 6\n\nMore beautiful paths, by choosing between actions (straight, turn left, turn right) instead of four directions.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"viewof button = Inputs.button(\"Redraw\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":369,"value":"viewof roundness = Inputs.range([0, 1], { label: \"Roundness\", value: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"viewof steps = Inputs.range([0, 1_000], {\n label: \"Steps\",\n value: 500,\n step: 10\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"// height = width * (9 / 16)\nheight = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1"}} 31:"$30:body"