squircle

commit d75c71a7bf7d1307894eb9e623dbe88e29119d87
parent 7634a1b99c97b41d817f5f6acee132692cfa64d5
Author: George Francis <georgedoescode@gmail.com>
Date:   Thu,  9 Jul 2020 17:09:13 +0100

add simpler squircle generation

Diffstat:
M
src/components/GeneratorControls.vue
 | 
24
+++++-------------------
M
src/components/GeneratorPreview.vue
 | 
6
+++---
M
src/components/TheGenerator.vue
 | 
58
++++++++++++++++++++++++----------------------------------

3 files changed, 32 insertions(+), 56 deletions(-)
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -18,20 +18,6 @@ export default {
     data() {
         return {
             fill: this.initialFill,
-            detailToggleState: [
-                {
-                    id: 'normal',
-                    label: 'Normal',
-                    checked: true,
-                    value: 0.1,
-                },
-                {
-                    id: 'high',
-                    label: 'High',
-                    checked: false,
-                    value: 0.01,
-                },
-            ],
         };
     },
     watch: {
@@ -81,8 +67,8 @@ export default {
                 name="scale"
                 class="generator-controls__slider"
                 :min="0"
-                :max="100"
-                :value="50"
+                :max="200"
+                :value="100"
                 :step="1"
                 @change="handleControlChange"
             />
@@ -92,9 +78,9 @@ export default {
             <BaseRangeInput
                 name="curvature"
                 class="generator-controls__slider"
-                :min="1"
-                :max="15"
-                :value="8"
+                :min="0"
+                :max="1"
+                :value="0.5"
                 :step="0.01"
                 @change="handleControlChange"
             />
diff --git a/src/components/GeneratorPreview.vue b/src/components/GeneratorPreview.vue
@@ -2,8 +2,8 @@
 export default {
     name: 'GeneratorPreview',
     props: {
-        points: {
-            type: Array,
+        path: {
+            type: String,
             required: true,
         },
         fill: {
@@ -23,7 +23,7 @@ export default {
             version="1.1"
             :fill="fill"
         >
-            <polygon :points="points" transform="translate(100 100)" />
+            <path :d="path" />
         </svg>
     </div>
 </template>
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -11,50 +11,40 @@ export default {
     data() {
         return {
             squircleOpts: {
-                curvature: 8,
-                scale: 50,
-                detail: 0.1,
+                curvature: 0.5,
+                scale: 100,
                 fill: '#1f2933',
             },
-            points: [],
+            path: '',
         };
     },
     mounted() {
-        this.setPoints();
+        this.setPath(
+            this.squircleOpts.scale,
+            this.squircleOpts.scale,
+            this.squircleOpts.curvature
+        );
     },
     methods: {
-        setPoints() {
-            this.points = [];
-            for (
-                let angle = 0;
-                angle < Math.PI * 2;
-                angle += this.squircleOpts.detail
-            ) {
-                const na = 2 / this.squircleOpts.curvature;
-                const x =
-                    Math.pow(Math.abs(Math.cos(angle)), na) *
-                    this.squircleOpts.scale *
-                    this.sgn(Math.cos(angle));
-                const y =
-                    Math.pow(Math.abs(Math.sin(angle)), na) *
-                    this.squircleOpts.scale *
-                    this.sgn(Math.sin(angle));
+        setPath(w = 100, h = 100, curvature = 0.5) {
+            const shiftW = (w / 2) * (1 - curvature);
+            const shiftH = (h / 2) * (1 - curvature);
 
-                this.points.push([x, y]);
-            }
-        },
-        sgn(value) {
-            if (value > 0) {
-                return 1;
-            } else if (value < 0) {
-                return -1;
-            } else {
-                return 0;
-            }
+            this.path = `
+                M 0, ${h / 2}
+                C 0, ${shiftW} ${shiftH}, 0 ${w / 2}, 0
+                S ${w}, ${shiftH} ${w}, ${h / 2}
+                  ${w - shiftW}, ${h - 0} ${w / 2}, ${h}
+                  0, ${w - shiftH} 0, ${h / 2}
+            `;
         },
         handleControlChange({ id, value }) {
             this.squircleOpts[id] = value;
-            this.setPoints();
+            this.setPath(
+                this.squircleOpts.scale,
+                this.squircleOpts.scale,
+                this.squircleOpts.curvature
+            );
         },
     },
 };
@@ -62,7 +52,7 @@ export default {
 
 <template>
     <div class="generator">
-        <GeneratorPreview :points="points" :fill="squircleOpts.fill" />
+        <GeneratorPreview :path="path" :fill="squircleOpts.fill" />
         <GeneratorControls
             :initial-fill="squircleOpts.fill"
             @controls-changed="handleControlChange"