Merge pull request #262 from auxfuse/points

Shape Generator
zero-to-mastery · Oct 31, 2021 · c664877 · c664877
2 parents a3958a1 + 84bddb8
commit c664877
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 0 deletions.
diff --git a/src/art/auxfuse-points/icon.png b/src/art/auxfuse-points/icon.png
diff --git a/src/art/auxfuse-points/index.html b/src/art/auxfuse-points/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="style.css">
+        <title>Auxfuse - Canvaz Points to Shape</title>
+    </head>
+    <body>
+        <div class="utils">
+            <h1>Shape Generator</h1>
+
+            <p>
+                Radius determines the size of the shape. The inset will determine the inwards direction
+                and length of an edge. Points will determine the overall shape itself, 3 making a triangle,
+                4 a rectangle, 5 a pentagon (or a star if inset is set to 0.5) etc etc.
+            </p>
+
+            <p>Select the radius, the inset, and the amount of points, then click "Generate".</p>
+            <form>
+                <label for="points">Radius</label>
+                <input type="number" value="100" min="100" max="1000" id="radius">
+
+                <label for="points">Inset</label>
+                <input type="number" value="0.5" min="0.1" max="1000" id="inset">
+
+                <label for="points">Points</label>
+                <input type="number" value="7" min="1" max="1000" id="points">
+
+                <button id="submit" type="submit">Generate</button>
+            </form>
+        </div>
+
+        <canvas></canvas>
+
+        <script src="main.js"></script>
+    </body>
+</html>
diff --git a/src/art/auxfuse-points/main.js b/src/art/auxfuse-points/main.js
@@ -0,0 +1,34 @@
+const c = document.querySelector('canvas');
+const ctx = c.getContext('2d');
+const radius = document.querySelector('#radius');
+const inset = document.querySelector('#inset');
+const points = document.querySelector('#points');
+const submit = document.querySelector('#submit');
+
+c.height = window.innerHeight*0.75;
+c.width = window.innerWidth;
+
+function sides(r, inset, n){
+    ctx.beginPath();
+    ctx.save();
+    ctx.translate(c.width/2, c.height/2);
+    ctx.moveTo(0, 0 - r);
+
+    for (let i = 0; i < n; i++) {
+        ctx.rotate(Math.PI / n);
+        ctx.lineTo(0, 0 - (r * inset));
+
+        ctx.rotate(Math.PI / n);
+        ctx.lineTo(0, 0 - r);
+    };
+
+    ctx.restore();
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+};
+
+submit.addEventListener('click', e => {
+    e.preventDefault();
+    sides(radius.value, inset.value, points.value);
+});
diff --git a/src/art/auxfuse-points/meta.json b/src/art/auxfuse-points/meta.json
@@ -0,0 +1,5 @@
+{
+    "art_name": "Shape Points",
+    "author_name": "Auxfuse",
+    "author_github_url": "https://github.com/auxfuse/"
+}
diff --git a/src/art/auxfuse-points/style.css b/src/art/auxfuse-points/style.css
@@ -0,0 +1,54 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    overflow: hidden;
+}
+
+canvas {
+    width: 100%;
+    height: 60vh;
+    object-fit: contain;
+}
+
+.utils {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 1rem 2rem;
+    text-align: center;
+}
+
+.utils > p {
+    margin: 1rem;
+    padding: 0 2rem;
+}
+
+.utils > p:nth-child(3) {
+    font-weight: bold;
+}
+
+form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+form > * {
+    margin: 0.3rem;
+}
+
+form > label {
+    margin: 0;
+    font-weight: bold;
+}
+
+@media (min-width: 576px) {
+    form {
+        flex-direction: row;
+    }
+}