WEBSITE - WIP - icon shapes - more polygon generation options

docs/assets/js/shape-editor.js

@@ -337,8 +337,8 @@
   $('se-reset').onclick = () => load(fit(PRESETS.Squircle()));
   $('se-gen').onclick = () => {
     const n = clamp(+$('se-sides').value || 6, 3, 24), inner = clamp(+$('se-inner').value || 100, 10, 100) / 100;
-    const cur = pts[Math.max(sel, 0)];
-    load(fit(polygon(n, inner, +$('se-rot').value || 0, cur.r, Math.min(cur.r, 6), cur.s)));
+    const num = (id, max) => clamp(+$(id).value || 0, 0, max); // empty or junk input counts as 0
+    load(fit(polygon(n, inner, +$('se-rot').value || 0, num('se-gen-r', 50), num('se-gen-ir', 50), num('se-gen-s', 100) / 100)));
   };
 
   $('se-show-grid').onchange = (e) => { grid.show = e.target.checked; drawGrid(); };

docs/icon-shapes.html

@@ -133,6 +133,9 @@ noindex: true    # and out of search engines
       <label>Sides <input id="se-sides" type="number" min="3" max="24" value="6"></label>
       <label>Inner radius % <input id="se-inner" type="number" min="10" max="100" value="100"></label>
       <label>Rotation° <input id="se-rot" type="number" step="15" value="0"></label>
+      <label>Tip corner size <input id="se-gen-r" type="number" min="0" max="50" step="1" value="14"></label>
+      <label>Inner corner size <input id="se-gen-ir" type="number" min="0" max="50" step="1" value="6"></label>
+      <label>Smoothing % <input id="se-gen-s" type="number" min="0" max="100" step="5" value="50"></label>
       <div class="se-row"><button id="se-gen" class="se-btn" type="button">Generate</button></div>
     </fieldset>