repl.it
@uint9000_t/

RatioPlotter

HTML, CSS, JS

Plots ratios in a few different ways, great for demonstrating the significance of the golden ratio

fork
loading
Files
  • index.html
  • favicon.ico
  • favicon.png
  • frown.png
  • script.js
  • style.css
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Pretty Ratio Plotter</title>
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <canvas width="500" height="500" id="canny">
      <img src="frown.png">
      Your browser doesn't support HTML5 Canvas
    </canvas>
    <div id="controls">
      <div>Controls</div><br>
      <div id="wrap-weight">
        <label for="weight">Line Weight: <span id="w-label-value">3</span>px</label><br>
        <input type="range" id="weight" min="1" max="10" step="1" onchange="updateInputs()" value="3">
      </div>
      <div id="wrap-delta">
        <label for="delta">Step: <span id="d-label-value">3px</span></label><br>
        <input type="number" id="delta" min="0" max="10" step="0.1" value="0.1" onchange="updateInputs()">
      </div>
      <div id="wrap-theta">
        <label for="theta" id="th-label">Rotation (rad)</label><br>
        <input type="number" id="theta" min="-6.2831" max="6.2831" step="0.001" value="1.618" onchange="updateInputs()">
      </div>
      <div>
        <label for="gtype">Graph Type</label><br>
        <select id="gtype" onchange="drawPlot()">
          <option value="scatter">Scatter</option>
          <option value="spiral">Spiral</option>
          <option value="circs">Circles</option>
        </select>
      </div>
      <div>
        <button type="button" onclick="anime()">Animate!</button>
      </div>
      <div>
        <input type="checkbox" checked id="grid" onchange="updateInputs()">
        <label for="grid">Show Gridlines</label>
      </div>
      <div id="norm-prst-wrap" >
        Presets<br>
        <button class="piover" onclick="preset(2)">Pi / </button>
        <input type="number" step="1" max="20" min="0.1" id="denom" class="piover"><br>
        <button onclick="preset(1)">Golden Ratio</button><br>
        <button onclick="preset(3)">Root 2</button><br>
        <button onclick="preset(4)">Euler's Constant</button>
      </div>
      <div style="display:none;" id="line-prst-wrap">
        <select id="func" onchange="lineUpdate()">
          <option value="csc">r=|csc(&theta;)|</option>
          <option value=""></option>
        </select> <!--This does nothing but removing it breaks things I think? TODO I guess -->
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>
result
console
?