Tinkering with code and algorithms for fun
input = (await FileAttachment("Avent of Code 2020 - Day 12.txt").text())
.trim()
.split('\n')
.map(line => [line[0], +line.slice(1)])
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 };
}
testAnswer1 = q1(testInput)
answer1 = q1(input)
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 };
}
q2(testInput)
answer2 = q2(input)
answer1_vis = renderPath1(answer1)
answer2_vis = renderPath2(answer2)
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 };
}
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 };
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.