squircle

commit 0f37fbac90768944027ce1d5962e6ab34ca057b6
parent aa3079026bcf24edea7502e04322a76e8ae92db0
Author: George Francis <georgedoescode@gmail.com>
Date:   Wed,  8 Jul 2020 14:48:53 +0100

hook up detail control to polygon settings

Diffstat:
M
src/components/GeneratorControls.vue
 | 
15
+++++++++++++--
M
src/components/TheGenerator.vue
 | 
7
++++++-

2 files changed, 19 insertions(+), 3 deletions(-)
diff --git a/src/components/GeneratorControls.vue b/src/components/GeneratorControls.vue
@@ -13,7 +13,6 @@ export default {
             required: true,
         },
     },
-
     data() {
         return {
             fill: this.initialFill,
@@ -22,16 +21,19 @@ export default {
                     id: 'low',
                     label: 'Low',
                     checked: false,
+                    value: 0.1,
                 },
                 {
                     id: 'med',
                     label: 'Med',
                     checked: true,
+                    value: 0.05,
                 },
                 {
                     id: 'high',
                     label: 'High',
                     checked: false,
+                    value: 0.01,
                 },
             ],
         };
@@ -46,7 +48,10 @@ export default {
     },
     methods: {
         handleControlChange(e) {
-            this.$emit('controls-changed', e.target);
+            this.$emit('controls-changed', {
+                id: e.target.id,
+                value: e.target.value,
+            });
         },
         handleDetailChange(e) {
             const { id } = e.target;
@@ -56,6 +61,11 @@ export default {
 
                 if (state.id === id) {
                     state.checked = true;
+
+                    this.$emit('controls-changed', {
+                        id: 'detail',
+                        value: state.value,
+                    });
                 } else {
                     state.checked = false;
                 }
@@ -192,6 +202,7 @@ export default {
 
     .generator-controls__inputs {
         grid-row-gap: var(--spacing-5);
+        grid-auto-rows: minmax(var(--spacing-5), max-content);
     }
 
     .generator-controls__label {
diff --git a/src/components/TheGenerator.vue b/src/components/TheGenerator.vue
@@ -15,6 +15,7 @@ export default {
             squircleOpts: {
                 curvature: 8,
                 scale: 50,
+                detail: 0.01,
                 fill: '#1f2933',
             },
             points: [],
@@ -26,7 +27,11 @@ export default {
     methods: {
         setPoints() {
             this.points = [];
-            for (let angle = 0; angle < Math.PI * 2; angle += 0.01) {
+            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) *