Partial DDA implementation

4 files changed, 137 insertions, 77 deletions

diff --git a/public/global.css b/public/global.css
index d63c896..a7545c5 100644
--- a/public/global.css
+++ b/public/global.css
@@ -1,76 +1,77 @@
 /* Colors from Modus theme. **************************************************/
 /* Stylesheets used on https://andinus.unfla.me ******************************/
 :root {
-    --bg-main: #ffffff;
-    --bg-dim: #f8f8f8;
-    --bg-alt: #f0f0f0;
-
-    --blue-subtle-bg: #b5d0ff;
-    --cyan-subtle-bg: #c0efff;
-    --bg-hl-alt-intense: #e8dfd1;
-
-    --fg-main: #000000;
-    --fg-dim: #282828;
-    --fg-alt: #505050;
-
-    --fg-special-cold: #093060;
-    --fg-special-mild: #184034;
-    --fg-special-warm: #5d3026;
-    --fg-special-calm: #61284f;
-
-    --red: #a60000;
-    --green: #005e00;
-    --yellow: #813e00;
-    --blue: #0031a9;
-    --magenta: #721045;
-    --cyan: #00538b;
-
-    --blue-alt-other: #0000c0;
-    --yellow-nuanced-fg: #3f3000;
+  --bg-main: #ffffff;
+  --bg-dim: #f8f8f8;
+  --bg-alt: #f0f0f0;
+
+  --blue-subtle-bg: #b5d0ff;
+  --cyan-subtle-bg: #c0efff;
+  --bg-hl-alt-intense: #e8dfd1;
+
+  --fg-main: #000000;
+  --fg-dim: #282828;
+  --fg-alt: #505050;
+
+  --fg-special-cold: #093060;
+  --fg-special-mild: #184034;
+  --fg-special-warm: #5d3026;
+  --fg-special-calm: #61284f;
+
+  --red: #a60000;
+  --green: #005e00;
+  --yellow: #813e00;
+  --blue: #0031a9;
+  --magenta: #721045;
+  --cyan: #00538b;
+
+  --blue-alt-other: #0000c0;
+  --yellow-nuanced-fg: #3f3000;
 }
 @media (prefers-color-scheme: dark) {
-    :root {
-        --bg-main: #000000;
-        --bg-dim: #100f10; /* #110b11 */
-        --bg-alt: #191a1b; /* #181a20 */
-
-        --blue-subtle-bg: #10387c;
-        --cyan-subtle-bg: #00415e;
-        --bg-hl-alt-intense: #282e46;
-
-        --fg-main: #ffffff;
-        --fg-dim: #e0e6f0;
-        --fg-alt: #a8a8a8;
-
-        --fg-special-cold: #c6eaff;
-        --fg-special-mild: #bfebe0;
-        --fg-special-warm: #f8dec0;
-        --fg-special-calm: #fbd6f4;
-
-        --red: #ff8059;
-        --green: #44bc44;
-        --yellow: #eecc00;
-        --blue: #2fafff;
-        --magenta: #feacd0;
-        --cyan: #00d3d0;
-
-        --blue-alt-other: #00bcff;
-        --yellow-nuanced-fg: #dfdfb0;
-
-    }
+  :root {
+    --bg-main: #000000;
+    --bg-dim: #100f10; /* #110b11 */
+    --bg-alt: #191a1b; /* #181a20 */
+
+    --blue-subtle-bg: #10387c;
+    --cyan-subtle-bg: #00415e;
+    --bg-hl-alt-intense: #282e46;
+
+    --fg-main: #ffffff;
+    --fg-dim: #e0e6f0;
+    --fg-alt: #a8a8a8;
+
+    --fg-special-cold: #c6eaff;
+    --fg-special-mild: #bfebe0;
+    --fg-special-warm: #f8dec0;
+    --fg-special-calm: #fbd6f4;
+
+    --red: #ff8059;
+    --green: #44bc44;
+    --yellow: #eecc00;
+    --blue: #2fafff;
+    --magenta: #feacd0;
+    --cyan: #00d3d0;
+
+    --blue-alt-other: #00bcff;
+    --yellow-nuanced-fg: #dfdfb0;
+
+  }
 }
 
 ::selection { background-color: var(--bg-hl-alt-intense); }
 
 html {
-    color: var(--fg-main);
-    background-color: var(--bg-main);
-    font-family: "Iosevka Aile", sans-serif;
+  color: var(--fg-main);
+  background-color: var(--bg-main);
+  font-family: "Iosevka Aile", sans-serif;
 }
 
 body {
-    margin: 2ch;
-    line-height: 1.5;
+  max-width: 96ch;
+  margin: auto;
+  line-height: 1.5;
 }
 
 h1 { color: var(--fg); }
@@ -81,18 +82,29 @@ h5 { color: var(--fg-special-calm); }
 h6 { color: var(--yellow-nuanced-fg); }
 h1, h2, h3, h4, h5, h6, .title { font-family: "Iosevka Etoile", serif; }
 .title {
-    color: var(--fg-special-cold);
-    border-bottom: 1px solid var(--bg-alt);
+  color: var(--fg-special-cold);
+  border-bottom: 1px solid var(--bg-alt);
 }
 
 a { color: var(--blue-alt-other); }
 a:hover, a:focus {
-    color: var(--fg-dim);
-    background-color: var(--blue-subtle-bg);
+  color: var(--fg-dim);
+  background-color: var(--blue-subtle-bg);
 }
 
 a:visited { color: var(--cyan); }
 a:visited:hover, a:visited:focus {
-    color: var(--fg-dim);
-    background-color: var(--cyan-subtle-bg);
+  color: var(--fg-dim);
+  background-color: var(--cyan-subtle-bg);
+}
+
+form, input {
+  color: var(--fg-main);
+  background-color: var(--bg-main);
+  margin: .25em;
+  padding: .25em;
+}
+
+input {
+  border: 2px solid var(--bg-alt);
 }
diff --git a/src/App.svelte b/src/App.svelte
index f9742c5..0f4e88d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,8 +1,9 @@
 <script>
-  import Navbar from './Navbar.svelte'
-  import Home from './Home.svelte'
+  import Navbar from './Navbar.svelte';
+  import Home from './Home.svelte';
 
-  let page = Home
+  import DDA from './algorithms/line-drawing/DDA.svelte';
+  let page = DDA;
   const changePage = event => page = event.detail.page;
 </script>
 
diff --git a/src/Navbar.svelte b/src/Navbar.svelte
index 3241646..97d8348 100644
--- a/src/Navbar.svelte
+++ b/src/Navbar.svelte
@@ -1,9 +1,9 @@
 <script>
   import { createEventDispatcher } from 'svelte';
 
-  import Home from './Home.svelte'
-  import DDA from './algorithms/line-drawing/DDA.svelte'
-  import Bresenham from './algorithms/line-drawing/Bresenham.svelte'
+  import Home from './Home.svelte';
+  import DDA from './algorithms/line-drawing/DDA.svelte';
+  import Bresenham from './algorithms/line-drawing/Bresenham.svelte';
 
   const dispatch = createEventDispatcher();
 
@@ -18,19 +18,23 @@
   <div class="ddgroup">
     Line Drawing Algorithms
     <div class="ddsub">
-      <button on:click={pageDDA}>DDA</button>
+      <button on:click={pageDDA}>Digital differential analyzer</button>
       <button on:click={pageBresenham}>Bresenham</button>
     </div>
   </div>
 </nav>
 
 <style>
-  .ddmenu { display: flex; }
+  .ddmenu {
+    display: flex;
+    padding: 0.2em;
+    border-bottom: 1px solid var(--bg-alt);
+  }
 
   .ddmenu button, .ddmenu .ddgroup {
     text-align: left;
     width: 100%;
-    padding: 15px;
+    padding: 8px;
     color: var(--fg-main);
     text-decoration: none;
     background: var(--bg-alt);
@@ -56,7 +60,7 @@
   .ddgroup::after {
     content: "\27A4";
     position: absolute;
-    top: 13px; right: 10px;
+    top: 8px; right: 8px;
     transition: transform 0.2s;
   }
   .ddgroup:hover::after {
diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte
index 5295cfd..db2070a 100644
--- a/src/algorithms/line-drawing/DDA.svelte
+++ b/src/algorithms/line-drawing/DDA.svelte
@@ -1 +1,44 @@
-<p>DDA</p>
+<script>
+  let x0 = 0, y0 = 0, x1 = 4, y1 = 4;
+
+  $: dx = x1 - x0;
+  $: dy = y1 - y0;
+
+  $: steps = Math.max(...[dx, dy].map(x => Math.abs(x)));
+  $: x_inc = dx / steps;
+  $: y_inc = dy / steps;
+</script>
+
+<h2>Digital differential analyzer</h2>
+<form class="points">
+  <label for="x0">x0: </label>
+  <input type="number" id="x0" name="x0" bind:value={x0}>&nbsp;
+  <label for="y0">y0: </label>
+  <input type="number" id="y0" name="y0" bind:value={y0}>
+  <br>
+  <label for="x1">x1: </label>
+  <input type="number" id="x1" name="x1" bind:value={x1}>&nbsp;
+  <label for="y1">y1: </label>
+  <input type="number" id="y1" name="y1" bind:value={y1}>
+</form>
+<hr>
+
+<label for="dx">dx: </label>
+<input type="text" id="dx" name="dx" value={dx} disabled><br>
+<label for="dy">dy: </label>
+<input type="text" id="dy" name="dy" value={dy} disabled>
+<hr>
+
+<label for="steps">steps: </label>
+<input type="text" id="steps" name="steps" value={steps} disabled>
+<hr>
+
+<label for="x_inc">x Increment: </label>
+<input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br>
+<label for="y_inc">y Increment: </label>
+<input type="text" id="y_inc" name="y_inc" value={y_inc} disabled>
+<hr>
+
+<style>
+  hr { color: var(--bg-hl-alt-intense); }
+</style>