2a:null 2b:["$","title",null,{"children":"Day 12 - Rain Risk | Job van der Zwan | Observable"}] 30:T88c,md`Your ferry made decent progress toward the island, but the storm came in faster than anyone expected. The ferry needs to take evasive actions! Unfortunately, the ship's navigation computer seems to be malfunctioning; rather than giving a route directly to safety, it produced extremely circuitous instructions. When the captain uses the PA system to ask if anyone can help, you quickly volunteer. The navigation instructions (your puzzle input) consists of a sequence of single-character actions paired with integer input values. After staring at them for a few minutes, you work out what they probably mean: Action N means to move north by the given value. Action S means to move south by the given value. Action E means to move east by the given value. Action W means to move west by the given value. Action L means to turn left the given number of degrees. Action R means to turn right the given number of degrees. Action F means to move forward by the given value in the direction the ship is currently facing. The ship starts by facing east. Only the L and R actions change the direction the ship is facing. (That is, if the ship is facing east and the next instruction is N10, the ship would move north 10 units, but would still move east if the following action were F.) For example: \`\`\`text F10 N3 F7 R90 F11 \`\`\` These instructions would be handled as follows: F10 would move the ship 10 units east (because the ship starts by facing east) to east 10, north 0. N3 would move the ship 3 units north to east 10, north 3. F7 would move the ship another 7 units east (because the ship is still facing east) to east 17, north 3. R90 would cause the ship to turn right by 90 degrees and face south; it remains at east 17, north 3. F11 would move the ship 11 units south to east 17, south 8. At the end of these instructions, the ship's Manhattan distance (sum of the absolute values of its east/west position and its north/south position) from its starting position is 17 + 8 = 25. Figure out where the navigation instructions lead. What is the Manhattan distance between that location and the ship's starting position?`31:T48f,function q1(input) { // face maps to directions as such: // 0: East // 1: South // 2: West // 3: North let face = 0; let x = 0, y = 0; let positions = []; for (const [direction, distance] of input) { positions.push([x, y]); switch (direction) { case "N": y += distance; break; case "S": y -= distance; break; case "E": x += distance; break; case "W": x -= distance; break; case "L": face = face - distance / 90; while (face < 0) { face += 4; } break; case "R": face = (face + distance / 90) % 4; break; case "F": switch (face) { case 0: // east x += distance; break; case 1: // south y -= distance; break; case 2: // west x -= distance; break; case 3: // north y += distance; break; } break; } } positions.push([x, y]); const mhdistance = Math.abs(x) + Math.abs(y); return { positions, mhdistance }; }32:T889,md`Before you can give the destination to the captain, you realize that the actual action meanings were printed on the back of the instructions the whole time. Almost all of the actions indicate how to move a waypoint which is relative to the ship's position: Action N means to move the waypoint north by the given value. Action S means to move the waypoint south by the given value. Action E means to move the waypoint east by the given value. Action W means to move the waypoint west by the given value. Action L means to rotate the waypoint around the ship left (counter-clockwise) the given number of degrees. Action R means to rotate the waypoint around the ship right (clockwise) the given number of degrees. Action F means to move forward to the waypoint a number of times equal to the given value. The waypoint starts 10 units east and 1 unit north relative to the ship. The waypoint is relative to the ship; that is, if the ship moves, the waypoint moves with it. For example, using the same instructions as above: - F10 moves the ship to the waypoint 10 times (a total of 100 units east and 10 units north), leaving the ship at east 100, north 10. The waypoint stays 10 units east and 1 unit north of the ship. - N3 moves the waypoint 3 units north to 10 units east and 4 units north of the ship. The ship remains at east 100, north 10. - F7 moves the ship to the waypoint 7 times (a total of 70 units east and 28 units north), leaving the ship at east 170, north 38. The waypoint stays 10 units east and 4 units north of the ship. - R90 rotates the waypoint around the ship clockwise 90 degrees, moving it to 4 units east and 10 units south of the ship. The ship remains at east 170, north 38. - F11 moves the ship to the waypoint 11 times (a total of 44 units east and 110 units south), leaving the ship at east 214, south 72. The waypoint stays 4 units east and 10 units south of the ship. After these operations, the ship's Manhattan distance from its starting position is 214 + 72 = 286. Figure out where the navigation instructions actually lead. What is the Manhattan distance between that location and the ship's starting position?`33:T471,function q2(input) { // face maps to directions as such: // 0: East // 1: South // 2: West // 3: North let face = 0; let x = 0, y = 0; // "x waypoint, y waypoint" let xw = 10, yw = 1; let positions = [], waypoints = []; for (let [direction, distance] of input) { positions.push([x, y]); waypoints.push([xw, yw]); switch (direction) { case "N": yw += distance; break; case "S": yw -= distance; break; case "E": xw += distance; break; case "W": xw -= distance; break; case "L": while (distance > 0) { [xw, yw] = [-yw, xw]; // turn left; distance -= 90; } break; case "R": while (distance > 0) { [xw, yw] = [yw, -xw]; // turn right; distance -= 90; } break; case "F": x += distance * xw; y += distance * yw; break; } } positions.push([x, y]); waypoints.push([xw, yw]); const mhdistance = Math.abs(x) + Math.abs(y); return { positions, waypoints, mhdistance }; }34:T866,function renderPath1({ positions }) { let min = { x: 0, y: 0 }; let max = { x: 0, y: 0 }; for (const [x, y] of positions) { if (x < min.x) min.x = x; if (y < min.y) min.y = y; if (x > max.x) max.x = x; if (y > max.y) max.y = y; } const w = max.x - min.x; const h = max.y - min.y; // return { min, max, w, h }; const { random, sin, PI } = Math; let rnd = () => random() + random() - random() + random() - random() + random() - random() - random(); const scale = width / w; const height = (h * scale) | 0; const ctx = DOM.context2d(width, height); let step = 400, waveOffset = 0; const render = () => { ctx.fillStyle = "aqua"; ctx.fillRect(0, 0, width, height); ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.font = "bold 20px sans"; let treshold = 0; const T = 10; // background wave ctx.fillStyle = "deepskyblue"; const wave = (x, y) => { return ( sin((waveOffset + x / 13 + y / 5 + rnd()) / T) + 0.25 * sin((step + x / 3 + y / 2 + rnd()) / T) - 0.5 * sin((step + x / 11 + y / 11 + rnd()) / T) + rnd() * 0.5 ); }; for (let x = 0; x < width; x += 5) { treshold = (treshold + rnd() * 2) / 10; for (let y = 0; y < height; y += 5) { if (wave(x, y) > treshold) { ctx.fillRect(x, y, 5, 5); } } } ctx.beginPath(); ctx.moveTo(-min.x * scale, -min.y * scale); const realStep = Math.min(step, positions.length - 1); for (let i = 0; i <= realStep; i++) { const [x, y] = positions[i]; ctx.lineTo((x - min.x) * scale, (y - min.y) * scale); } ctx.lineWidth = 1; ctx.lineWidth = "#000"; ctx.stroke(); ctx.fillText( "🚢", (positions[realStep][0] - min.x) * scale, (positions[realStep][1] - min.y) * scale ); ctx.fillStyle = "#000"; ctx.fillText( Math.min(step, positions.length) + "/" + positions.length, 50, 30 ); step = (step + 1) % (positions.length + 60); waveOffset += 3; }; render(); return { ctx, render }; }35:T92a,function renderPath2({ positions, waypoints }) { let min = { x: 0, y: 0 }; let max = { x: 0, y: 0 }; for (const [x, y] of positions) { if (x < min.x) min.x = x; if (y < min.y) min.y = y; if (x > max.x) max.x = x; if (y > max.y) max.y = y; } const w = max.x - min.x; const h = max.y - min.y; // return { min, max, w, h }; const { random, sin, PI } = Math; let rnd = () => random() + random() - random() + random() - random() + random() - random() - random(); const scale = width / w; const height = (h * scale) | 0; const ctx = DOM.context2d(width, height); let step = 400, waveOffset = 0; const render = () => { ctx.fillStyle = "aqua"; ctx.fillRect(0, 0, w, h); ctx.textBaseline = "middle"; ctx.textAlign = "center"; ctx.font = "bold 20px sans"; let treshold = 0; const T = 10; // background wave ctx.fillStyle = "deepskyblue"; const wave = (x, y) => { return ( sin((waveOffset + x / 13 + y / 5 + rnd()) / T) + 0.25 * sin((step + x / 3 + y / 2 + rnd()) / T) - 0.5 * sin((step + x / 11 + y / 11 + rnd()) / T) + rnd() * 0.5 ); }; for (let x = 0; x < width; x += 5) { treshold = (treshold + rnd() * 2) / 10; for (let y = 0; y < height; y += 5) { if (wave(x, y) > treshold) { ctx.fillRect(x, y, 5, 5); } } } ctx.beginPath(); ctx.moveTo(-min.x * scale, -min.y * scale); const realStep = Math.min(step, positions.length - 1); for (let i = 0; i <= realStep; i++) { const [x, y] = positions[i]; ctx.lineTo((x - min.x) * scale, (y - min.y) * scale); } ctx.lineWidth = 1; ctx.lineWidth = "#000"; ctx.stroke(); ctx.fillText( "🚢", (positions[realStep][0] - min.x) * scale, (positions[realStep][1] - min.y) * scale ); ctx.fillText( "🌟", (positions[realStep][0] + 50 * waypoints[realStep][0] - min.x) * scale, (positions[realStep][1] + 50 * waypoints[realStep][1] - min.y) * scale ); ctx.fillStyle = "#000"; ctx.fillText( Math.min(step, positions.length) + "/" + positions.length, 50, 30 ); step = (step + 1) % (positions.length + 60); waveOffset += 3; }; render(); return { ctx, render }; }36:[{"id":"779b6ed84067c0fea6853c881248c52ece7db077d4ba0558481b55029590bbbc87cab14d0b8801b120463000578b90e009580796e5b1ecd4c59fd54483d92b5e","href":"https://static.observableusercontent.com/files/779b6ed84067c0fea6853c881248c52ece7db077d4ba0558481b55029590bbbc87cab14d0b8801b120463000578b90e009580796e5b1ecd4c59fd54483d92b5e","name":"Avent of Code 2020 - Day 12.txt","type":"text/plain","lastModified":1607768973846.834,"size":2833}] 2e:{"id":"8f0df77bdfa2864b","slug":"day-12-rain-risk","title":"Day 12 - Rain Risk","thumbnail":"a09e874029d3bda4e060b38843de52bcfc9ef7e86c31129ec6f4a3cc263f4e6b","access_level":"public","create_time":"$D2020-12-12T10:27:57.383Z","update_time":"$D2020-12-12T14:48:07.005Z","view_time":null,"first_public_time":"$D2020-12-12T14:12:02.249Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":"starter_2024"},"version":360,"publish_version":360,"role":null,"authored":false,"authors":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null}],"members":[{"type":"individual","id":"d36034ddfb454bdd","login":"jobleonard","name":"Job van der Zwan","avatar_url":"https://avatars-next.observableusercontent.com/808373580aa09723ceabb9cb31d01ea6db287280b59eaa63618e259f5d28dd71","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"1ee60561d70e68f8","slug":"advent-of-code-2020","title":"Advent of Code 2020","owner":{"id":"3f83172cfde1e56a","login":"jobleonard","name":"Job van der Zwan"}},"type":"notebook","body":{"titling":"auto","title":"Day 12 - Rain Risk","cells":[{"id":0,"value":"md`# Day 12 - Rain Risk`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"{\n while (true) {\n yield await Promises.tick(100, answer2_vis.ctx.canvas);\n answer2_vis.render();\n await visibility();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"input = (await FileAttachment(\"Avent of Code 2020 - Day 12.txt\").text())\n .trim()\n .split('\\n')\n .map(line => [line[0], +line.slice(1)])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"testInput = `F10\nN3\nF7\nR90\nF11`\n .trim()\n .split('\\n')\n .map(line => [line[0], +line.slice(1)])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"testAnswer1 = q1(testInput)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"answer1 = q1(input)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"{\n while (true) {\n yield await Promises.tick(100, answer1_vis.ctx.canvas);\n answer1_vis.render();\n await visibility();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"q2(testInput)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"answer2 = q2(input)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"{\n while (true) {\n yield await Promises.tick(100, answer2_vis2.ctx.canvas);\n answer2_vis2.render();\n await visibility();\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":343,"value":"md`---\n## The data visualization code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"answer1_vis = renderPath1(answer1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"answer2_vis = renderPath2(answer2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"answer2_vis2 = renderPath2(answer2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 2f:"$2e:body"