diff options
| -rw-r--r-- | package-lock.json | 9 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | public/global.css | 6 | ||||
| -rw-r--r-- | public/index.html | 4 | ||||
| -rw-r--r-- | src/algorithms/line-drawing/Bresenham.svelte | 161 | ||||
| -rw-r--r-- | src/algorithms/line-drawing/DDA.svelte | 130 |
6 files changed, 148 insertions, 165 deletions
diff --git a/package-lock.json b/package-lock.json index 48dd888..3d045f1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "svelte-app", - "version": "1.0.0", + "name": "Dorado", + "version": "0.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -525,6 +525,11 @@ "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==", "dev": true }, + "plotly.js-basic-dist-min": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/plotly.js-basic-dist-min/-/plotly.js-basic-dist-min-2.5.1.tgz", + "integrity": "sha512-BfWlZLhkoaDyicD4365NyHWrKz7rdjM5sLVWUJJOJlEuFr7xPCK2UPRSBpa2nLxeR8GeFzWzMQBaD0AfAqL1fw==" + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", diff --git a/package.json b/package.json index ec70fbf..e603567 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "CG-Algorithms", + "name": "Dorado", "version": "0.1.0", "private": true, "scripts": { @@ -18,6 +18,7 @@ "svelte": "^3.0.0" }, "dependencies": { + "plotly.js-basic-dist-min": "^2.5.1", "sirv-cli": "^1.0.0" } } diff --git a/public/global.css b/public/global.css index 6bcca5b..10978a7 100644 --- a/public/global.css +++ b/public/global.css @@ -70,9 +70,11 @@ html { body { max-width: 96ch; - margin: auto; + margin: 2ch; line-height: 1.5; } +@media only screen and (min-width: 600px) { body { margin: 3.2ch; } } +@media only screen and (min-width: 84ch) { body { margin: 4ch auto; } } h1 { color: var(--fg); } h2 { color: var(--fg-special-warm); } @@ -111,7 +113,7 @@ form, input, button { padding: .25em; } - +input { max-width: 8ch; } input, button { border: 2px solid var(--bg-alt); } diff --git a/public/index.html b/public/index.html index 526a8cd..6c7e561 100644 --- a/public/index.html +++ b/public/index.html @@ -4,9 +4,9 @@ <meta charset='utf-8'> <meta name='viewport' content='width=device-width,initial-scale=1'> - <title>CG Algorithms</title> + <title>Dorado</title> - <link rel='icon' type='image/png' href='./favicon.png'> + <link rel='icon' type='image/png' href='https://andinus.unfla.me/resources/favicon.png'> <link rel='stylesheet' href='./global.css'> <link rel='stylesheet' href='./build/bundle.css'> diff --git a/src/algorithms/line-drawing/Bresenham.svelte b/src/algorithms/line-drawing/Bresenham.svelte index e3eaff1..eb2afd6 100644 --- a/src/algorithms/line-drawing/Bresenham.svelte +++ b/src/algorithms/line-drawing/Bresenham.svelte @@ -1,15 +1,8 @@ -<svelte:head> - <script src="./plotly/plotly.min.js" on:load={plotlyLoaded}></script> -</svelte:head> <script> - let solved = false; - let invalidInput = false; + import { onMount } from "svelte"; + import Plotly from "plotly.js-basic-dist-min"; - let plotlyReady = false; - const plotlyLoaded = () => { - plotlyReady = true; - solve(); - } + let invalidInput = false; let x0 = 0, y0 = 0, x1 = 4, y1 = 4; let dx, dy, step; @@ -39,36 +32,37 @@ y_axis = [y0,]; for (let idx = 0; idx < dx; idx++) { - // x_axis.at(-1) doesn't work for some reason. - x_axis.push(x_axis[x_axis.length - 1] + 1); - if (p < 0) { - y_axis.push(y_axis[y_axis.length - 1]); - p += 2 * dy; - } else { - y_axis.push(y_axis[y_axis.length - 1] + 1); - p += step; - } + // x_axis.at(-1) doesn't work for some reason. + x_axis.push(x_axis[x_axis.length - 1] + 1); + if (p < 0) { + y_axis.push(y_axis[y_axis.length - 1]); + p += 2 * dy; + } else { + y_axis.push(y_axis[y_axis.length - 1] + 1); + p += step; + } p_vals.push(p); } // Plot the chart. - if (plotlyReady) - Plotly.newPlot('algoChart', [{ - x: x_axis, - y: y_axis, - type: 'lines', - name: 'Bresenham' - }]); - - solved = true; + Plotly.newPlot('algoChart', [{ + x: x_axis, + y: y_axis, + type: 'lines', + name: 'Bresenham' + }]); } + + onMount(() => { + solve(); + }); </script> <h2>Bresenham</h2> <form class="points"> {#if invalidInput === true} <p class="note"> - Slope must be between 0 to 1. + Invalid Input: Slope must be between 0 to 1. </p> {/if} <label for="x0">x0: </label> @@ -84,75 +78,70 @@ <button type="button" on:click={solve}>Solve</button> </form> -{#if solved === true} - <hr> - <h3>Solution</h3> +<hr> +<h3>Solution</h3> +{#if invalidInput === true} + <p class="note"> + Inavlid Input: Slope must be between 0 to 1. + </p> +{/if} + +<table> + <thead> + <tr> + <th> </th> + <th>Value</th> + </tr> + </thead> + <tbody> + <tr> + <td>dx = <code>|x1 - x0|</code></td> + <td>{dx}</td> + </tr> + <tr> + <td>dy = <code>|y1 - y0|</code></td> + <td>{dy}</td> + </tr> + <tr> + <td>step = <code>|2 * (dy - dx)|</code></td> + <td>{step}</td> + </tr> + <tr> + <td><code>2 * dy</code></td> + <td>{2 * dy}</td> + </tr> + </tbody> +</table> + +<details> + <summary> + Table + </summary> <table> <thead> <tr> - <th> </th> - <th>Value</th> + <th>Iteration (k)</th> + <th>P<sub>k</sub></th> + <th>x<sub>k + 1</sub></th> + <th>y<sub>k + 1</sub></th> </tr> </thead> + <tbody> + {#each x_axis as _, i} <tr> - <td>dx = <code>|x1 - x0|</code></td> - <td>{dx}</td> - </tr> - <tr> - <td>dy = <code>|y1 - y0|</code></td> - <td>{dy}</td> - </tr> - <tr> - <td>step = <code>|2 * (dy - dx)|</code></td> - <td>{step}</td> - </tr> - <tr> - <td><code>2 * dy</code></td> - <td>{2 * dy}</td> - </tr> - <tr> - <td>p<sub>0</sub></td> - <td>{p_vals[0]}</td> + <td>{i}</td> + <td>{p_vals[i]}</td> + <td>{x_axis[i]}</td> + <td>{y_axis[i]}</td> </tr> + {/each} </tbody> </table> +</details> - <details> - <summary> - Table - </summary> - <table> - <thead> - <tr> - <th>Iteration (k)</th> - <th>P<sub>k</sub></th> - <th>x<sub>k + 1</sub></th> - <th>y<sub>k + 1</sub></th> - </tr> - </thead> - - <tbody> - {#each x_axis as _, i} - <tr> - <td>{i}</td> - <td>{p_vals[i]}</td> - <td>{x_axis[i]}</td> - <td>{y_axis[i]}</td> - </tr> - {/each} - </tbody> - </table> - </details> - - <h3>Graph</h3> - {#if plotlyReady === false} - <p class="note"> - Cannot plot graph: Plotly is not ready. - </p> - {/if} -{/if} +<h3>Graph</h3> <div id="algoChart"></div> <style> diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte index c9f62a0..379e965 100644 --- a/src/algorithms/line-drawing/DDA.svelte +++ b/src/algorithms/line-drawing/DDA.svelte @@ -1,14 +1,6 @@ -<svelte:head> - <script src="./plotly/plotly.min.js" on:load={plotlyLoaded}></script> -</svelte:head> <script> - let solved = false; - - let plotlyReady = false; - const plotlyLoaded = () => { - plotlyReady = true; - dda(); - } + import { onMount } from "svelte"; + import Plotly from "plotly.js-basic-dist-min"; let x0 = 0, y0 = 0, x1 = 4, y1 = 4; let dx, dy; @@ -47,16 +39,17 @@ y_axis_floored = y_axis.map(function(y) {return Math.round(y)}); // Plot the chart. - if (plotlyReady) - Plotly.newPlot('algoChart', [{ - x: x_axis_floored, - y: y_axis_floored, - type: 'lines', - name: 'DDA' - }]); - - solved = true; + Plotly.newPlot('algoChart', [{ + x: x_axis_floored, + y: y_axis_floored, + type: 'lines', + name: 'DDA' + }]); } + + onMount(() => { + dda(); + }); </script> <h2>Digital differential analyzer</h2> @@ -74,61 +67,54 @@ <button type="button" on:click={dda}>Solve</button> </form> -{#if solved === true && steps > 0} - <hr> - <h3>Solution</h3> - - <label for="dx">dx = <code>|x1 - x0|</code>: </label> - <input type="text" id="dx" name="dx" value={dx} disabled><br> - <label for="dy">dy = <code>|y1 - y0|</code>: </label> - <input type="text" id="dy" name="dy" value={dy} disabled> - <br> - - <label for="steps">steps: </label> - <input type="text" id="steps" name="steps" value={steps} disabled> - <br> - - <label for="x_inc">x Increment = <code>dx / steps</code>: </label> - <input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br> - <label for="y_inc">y Increment = <code>dy / steps</code>: </label> - <input type="text" id="y_inc" name="y_inc" value={y_inc} disabled> - - <details> - <summary> - Table - </summary> - <table> - <thead> +<hr> +<h3>Solution</h3> + +<label for="dx">dx = <code>|x1 - x0|</code>: </label> +<input type="text" id="dx" name="dx" value={dx} disabled><br> +<label for="dy">dy = <code>|y1 - y0|</code>: </label> +<input type="text" id="dy" name="dy" value={dy} disabled> +<br> + +<label for="steps">steps: </label> +<input type="text" id="steps" name="steps" value={steps} disabled> +<br> + +<label for="x_inc">x Increment = <code>dx / steps</code>: </label> +<input type="text" id="x_inc" name="x_inc" value={x_inc} disabled><br> +<label for="y_inc">y Increment = <code>dy / steps</code>: </label> +<input type="text" id="y_inc" name="y_inc" value={y_inc} disabled> + +<details> + <summary> + Table + </summary> + <table> + <thead> + <tr> + <th>Iteration</th> + <th>x</th> + <th>y</th> + <th>x (plot)</th> + <th>y (plot)</th> + </tr> + </thead> + + <tbody> + {#each x_axis as _, i} <tr> - <th>Iteration</th> - <th>x</th> - <th>y</th> - <th>x (plot)</th> - <th>y (plot)</th> + <td>{i + 1}</td> + <td>{x_axis[i]}</td> + <td>{y_axis[i]}</td> + <td>{x_axis_floored[i]}</td> + <td>{y_axis_floored[i]}</td> </tr> - </thead> - - <tbody> - {#each x_axis as _, i} - <tr> - <td>{i + 1}</td> - <td>{x_axis[i]}</td> - <td>{y_axis[i]}</td> - <td>{x_axis_floored[i]}</td> - <td>{y_axis_floored[i]}</td> - </tr> - {/each} - </tbody> - </table> - </details> - - <h3>Graph</h3> - {#if plotlyReady === false} - <p class="note"> - Cannot plot graph: Plotly is not ready. - </p> - {/if} -{/if} + {/each} + </tbody> + </table> +</details> + +<h3>Graph</h3> <div id="algoChart"></div> <style> |