diff options
Diffstat (limited to 'src/algorithms')
-rw-r--r-- | src/algorithms/line-drawing/Bresenham.svelte | 172 | ||||
-rw-r--r-- | src/algorithms/line-drawing/DDA.svelte | 1 |
2 files changed, 171 insertions, 2 deletions
diff --git a/src/algorithms/line-drawing/Bresenham.svelte b/src/algorithms/line-drawing/Bresenham.svelte index d2f81af..e3eaff1 100644 --- a/src/algorithms/line-drawing/Bresenham.svelte +++ b/src/algorithms/line-drawing/Bresenham.svelte @@ -1 +1,171 @@ -<p>Bresenham</p> +<svelte:head> + <script src="./plotly/plotly.min.js" on:load={plotlyLoaded}></script> +</svelte:head> +<script> + let solved = false; + let invalidInput = false; + + let plotlyReady = false; + const plotlyLoaded = () => { + plotlyReady = true; + solve(); + } + + let x0 = 0, y0 = 0, x1 = 4, y1 = 4; + let dx, dy, step; + + let x_inc, y_inc; + let x_axis = [], y_axis = [], p_vals = []; + + function solve() { + dx = Math.abs(x1 - x0); + dy = Math.abs(y1 - y0); + + // Early return if slope is not between 0 - 1. + if (dy > dx) { + invalidInput = true; + return; + } else { + invalidInput = false; + } + + let p = (2 * dy) - dx; + p_vals.push(p); + + step = 2 * (dy - dx); + + // Build the x axis and y axis. + x_axis = [x0,]; + 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; + } + p_vals.push(p); + } + + // Plot the chart. + if (plotlyReady) + Plotly.newPlot('algoChart', [{ + x: x_axis, + y: y_axis, + type: 'lines', + name: 'Bresenham' + }]); + + solved = true; + } +</script> + +<h2>Bresenham</h2> +<form class="points"> + {#if invalidInput === true} + <p class="note"> + Slope must be between 0 to 1. + </p> + {/if} + <label for="x0">x0: </label> + <input type="number" id="x0" name="x0" on:change={solve} bind:value={x0}> + <label for="y0">y0: </label> + <input type="number" id="y0" name="y0" on:change={solve} bind:value={y0}> + <br> + <label for="x1">x1: </label> + <input type="number" id="x1" name="x1" on:change={solve} bind:value={x1}> + <label for="y1">y1: </label> + <input type="number" id="y1" name="y1" on:change={solve} bind:value={y1}> + <br> + <button type="button" on:click={solve}>Solve</button> +</form> + +{#if solved === true} + <hr> + <h3>Solution</h3> + + <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> + <tr> + <td>p<sub>0</sub></td> + <td>{p_vals[0]}</td> + </tr> + </tbody> + </table> + + <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} +<div id="algoChart"></div> + +<style> + hr { color: var(--bg-hl-alt-intense); } + button { + margin: .8em; + padding: 0.4em 1.2em; + width: 100%; + } + details { + border: 1px solid var(--bg-alt); + border-radius: 4px; + padding: 0.8em; + margin: 1em; + } +</style> diff --git a/src/algorithms/line-drawing/DDA.svelte b/src/algorithms/line-drawing/DDA.svelte index b759cdc..c9f62a0 100644 --- a/src/algorithms/line-drawing/DDA.svelte +++ b/src/algorithms/line-drawing/DDA.svelte @@ -124,7 +124,6 @@ <h3>Graph</h3> {#if plotlyReady === false} - <p class="note"> Cannot plot graph: Plotly is not ready. </p> |