diff options
Diffstat (limited to 'src/algorithms/line-drawing')
| -rw-r--r-- | src/algorithms/line-drawing/Bresenham.svelte | 161 | ||||
| -rw-r--r-- | src/algorithms/line-drawing/DDA.svelte | 130 |
2 files changed, 133 insertions, 158 deletions
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> |