Created
September 20, 2019 05:52
-
-
Save motleytech/a851c82365b86e6d25ad14afa965b632 to your computer and use it in GitHub Desktop.
Geometric fun part 1 - chords in a circle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <title>Draw a line</title> | |
| <style> | |
| #DemoCanvas { | |
| border: 1px solid #ddd; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <canvas id="DemoCanvas" width="800" height="600"></canvas> | |
| <br /> | |
| <span>Number of points : </span> | |
| <input type="range" min="1" max="5000" value="200" class="slider" id="numPointsSlider" style="width:800px"> | |
| <span id="numPointsDisplay"></span> | |
| <br /> | |
| <span>Jump Size : </span> | |
| <input type="range" min="1" max="5000" value="40" class="slider" id="kJumpSlider" style="width:800px"> | |
| <span id="jumpSizeDisplay"></span> | |
| <script> | |
| let width = 1200 | |
| let height = 900 | |
| let nCirPts = 400 | |
| let kJump = 4 | |
| const wb2 = width / 2 | |
| const hb2 = height / 2 | |
| const cRadius = 0.8 * hb2 | |
| let canvas = document.getElementById('DemoCanvas'); | |
| let numPointsSlider = document.getElementById('numPointsSlider'); | |
| let kJumpSlider = document.getElementById('kJumpSlider'); | |
| let numPointsDisplay = document.getElementById('numPointsDisplay') | |
| let jumpSizeDisplay = document.getElementById('jumpSizeDisplay') | |
| canvas.setAttribute('width', width) | |
| canvas.setAttribute('height', height) | |
| numPointsSlider.oninput = function () { | |
| nCirPts = parseInt(this.value) | |
| const context = canvas.getContext('2d') | |
| context.clearRect(0, 0, canvas.width, canvas.height) | |
| numPointsDisplay.innerHTML = this.value | |
| drawFig(nCirPts, cRadius, kJump, canvas) | |
| } | |
| kJumpSlider.oninput = function () { | |
| kJump = parseFloat(this.value)/10.0 | |
| const context = canvas.getContext('2d') | |
| context.clearRect(0, 0, canvas.width, canvas.height) | |
| jumpSizeDisplay.innerHTML = kJump.toString() | |
| drawFig(nCirPts, cRadius, kJump, canvas) | |
| } | |
| //Always check for properties and methods, to make sure your code doesn't break in other browsers. | |
| function line(x1, y1, x2, y2, canvas) { | |
| if (canvas.getContext) { | |
| var context = canvas.getContext('2d'); | |
| context.beginPath(); | |
| context.moveTo(x1, y1); | |
| context.lineTo(x2, y2); | |
| context.stroke(); | |
| } | |
| } | |
| function offsetLine(p1, p2, canvas) { | |
| let [x1, y1] = p1 | |
| let [x2, y2] = p2 | |
| x1 = wb2 + x1 | |
| x2 = wb2 + x2 | |
| y1 = hb2 - y1 | |
| y2 = hb2 - y2 | |
| line(x1, y1, x2, y2, canvas) | |
| } | |
| function getCircPts(nps, radius) { | |
| const scale = 2*Math.PI/nps | |
| const points = []; | |
| [...Array(nps).keys()].forEach(x => { | |
| const xs = x*scale | |
| const px = Math.cos(xs) * radius | |
| const py = Math.sin(xs) * radius | |
| points.push([px, py]) | |
| }) | |
| return points | |
| } | |
| function drawFig(nps, radius, jump, canvas) { | |
| const cPtsLocs = getCircPts(nps, radius); | |
| [...Array(nps).keys()].forEach( x => { | |
| const l1 = x + 1 | |
| const l2 = Math.round(l1*jump) | |
| const p1 = cPtsLocs[l1 - 1] | |
| const p2 = cPtsLocs[(l2 - 1) % nps] | |
| offsetLine(p1, p2, canvas) | |
| }) | |
| } | |
| function sleep(milliseconds) { | |
| var start = new Date().getTime(); | |
| for (var i = 0; i < 1e7; i++) { | |
| if ((new Date().getTime() - start) > milliseconds) { | |
| break; | |
| } | |
| } | |
| } | |
| drawFig(nCirPts, cRadius, kJump, canvas) | |
| numPointsDisplay.innerHTML = nCirPts.toString() | |
| jumpSizeDisplay.innerHTML = kJump.toString() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment