2020 day 12 + visualisation

2020-12-12 18:34:40 +00:00 · 2020-12-12 18:34:40 +00:00 · 171802a184
commit 171802a184
parent 29b64b4715
8 changed files with 1038 additions and 3 deletions
--- a/2020/12/part2/index.html
+++ b/2020/12/part2/index.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>day 12 visualisation</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+  </head>
+  <body>
+    <canvas id="can" width="500" height="500"></canvas>
+    <br>
+    <label for="scalerange">scale</label>
+    <input name="scalerange" type="range" min="-1" max="1.5" step="0.01" value="0" id="scale">
+    <label for="speedrange">speed</label>
+    <input name="speedrange" type="range" min="15" max="1000" step="1" value="1000" id="speed" onchange="setSpeed()">
+    <textarea rows="5" id="input" onchange="reset();setSpeed()">F10
+N3
+F7
+R90
+F11</textarea>
+    <label for="loopbox">loop?</label>
+    <input type="checkbox" id="loop" name="loopbox" checked="true" onchange="setSpeed()">
+    <div id="output"></div>
+    <button id="clearbutton">clear</button>
+    <script src="script.js"></script>
+  </body>
+</html>
--- a/2020/12/part2/script.js
+++ b/2020/12/part2/script.js
@ -0,0 +1,149 @@
+const canvas = document.getElementById('can')
+const c = canvas.getContext('2d');
+const out = document.getElementById('output')
+let instructions=document.getElementById('input').value.split('\n');
+
+let wpx = 10;
+let wpy = -1;
+let shipX = 0;
+let shipY = 0;
+let i = 0
+
+function reset () {
+  instructions = document.getElementById('input').value.split('\n');
+  wpx = 10;
+  wpy = -1;
+  shipX = 0;
+  shipY = 0;
+  i = 0
+  print('reset')
+}
+function stop() {
+  document.getElementById('loop').checked = false
+  clearInterval(loopInterval);
+  reset()
+}
+function iterate(i) {
+  instruction = instructions[i]
+  if (!instruction) {print('oops there is no instruction no '+ i); return}
+  action = instruction[0].toUpperCase();
+  arg = Number(instruction.slice(1));
+  if (isNaN(arg)){
+    print('instruction no '+(i+1)+': "'+instruction.slice(1)+'" is not a number')
+    stop();
+    return
+  }
+  switch (action) {
+    case 'N':
+      wpy-=arg;
+      break;
+    case 'S':
+      wpy+=arg;
+      break;
+    case 'E':
+      wpx+=arg;
+      break;
+    case 'W':
+      wpx-=arg;
+      break;
+    case 'L':
+      switch (arg) {
+        case 90:
+          bx = wpx
+          by = wpy
+          wpx = by
+          wpy = -bx
+          break;
+        case 180:
+          wpx *= -1;
+          wpy *= -1;
+          break;
+        case 270:
+          bx = wpx
+          by = wpy
+          wpx = -by
+          wpy = bx
+          break;
+        case 0:
+          break;
+        default:
+          print('tried to rotate '+ arg+ ' degrees. can only rotate in right angles');
+          stop()
+          return
+      }
+      break;
+    case 'R':
+      switch (arg) {
+        case 90:
+          bx = wpx
+          by = wpy
+          wpx = -by
+          wpy = bx
+          break;
+        case 180:
+          wpx *= -1;
+          wpy *= -1;
+          break;
+        case 270:
+          bx = wpx
+          by = wpy
+          wpx = by
+          wpy = -bx
+          break;
+        case 0:
+          break;
+        default:
+          print('tried to rotate '+ arg+ ' degrees. can only rotate in right angles');
+          stop()
+          return
+      }
+      break;
+    case 'F':
+      shipX += wpx*arg;
+      shipY -= wpy*arg;
+      break;
+    default:
+      print('instruction no '+ (i+1) + ': "' + action+'" invald')
+      stop()
+      return
+  }
+  
+  print('instruction no '+ (i+1) + ': "'+instruction+'" ship at ('+shipX+', '+shipY+') pointing ('+wpx+', '+-wpy+')')
+}
+
+function clear() {
+  out.innerHTML = ""
+}
+document.getElementById('clearbutton').onclick = clear;
+
+setInterval(()=>{
+  scale = Math.pow(100, document.getElementById('scale').value)
+  c.clearRect(0,0,canvas.width,canvas.height);
+  c.fillStyle = 'green'
+  c.fillRect(canvas.width/2+(shipX)/scale-5, canvas.height/2-(shipY)/scale-5, 10,10);
+  c.fillStyle = 'yellow'
+  c.fillRect(canvas.width/2+(shipX+wpx)/scale-2, canvas.height/2-(shipY-wpy)/scale-2,4,4);
+}, 30)
+
+let loopInterval = setInterval(loop, 1000)
+
+function loop () {
+  if (i<instructions.length) {
+    iterate(i)
+    i++
+  } else {
+    print('ended at ('+shipX+', '+shipY+') with manhattan distance of '+(Math.abs(shipX)+Math.abs(shipY)))
+    reset();
+    if (!document.getElementById('loop').checked)
+      clearInterval(loopInterval);
+  }
+}
+
+function setSpeed () {
+  clearInterval(loopInterval);
+  loopInterval = setInterval(loop, document.getElementById('speed').value)
+}
+
+function print(str) {
+  out.innerHTML=str+'<br>'+out.innerHTML
+}
--- a/2020/12/part2/style.css
+++ b/2020/12/part2/style.css
@ -0,0 +1,27 @@
+#output {
+  display: block;
+  overflow-y: scroll;
+  height: 100px;
+}
+
+#input {
+  position: absolute;
+  top: 8px;
+  left: 516px;
+  height: 500px;
+}
+
+input {
+  direction: rtl;
+}
+
+canvas, #output {
+  background-color: #10101a;
+  border: 1px solid #333340;
+}
+
+body {
+  background-color: #0f0f23;
+  color: #cccccc;
+  font-family: "Source Code Pro", monospace;
+}