From 0b21a2d10f7864ffcdc911468d89dfa8cb716e88 Mon Sep 17 00:00:00 2001
From: Nicolau Manubens <none>
Date: Tue, 23 Feb 2021 11:13:47 +0000
Subject: [PATCH 1/3] Draft of displaced center.

---
 src/components/Main.vue | 90 ++++++++++++++++++++++++++++++++++++-----
 1 file changed, 81 insertions(+), 9 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index 9d5dd0f..e9e2ee8 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -75,6 +75,26 @@
                                 label="Second step" />
                         </div>
                     </div>
+                    <div class="row">
+                        <div class="col">
+                        <InputRange
+                            v-model="paramX"
+                            v-bind:min="-0.99"
+                            v-bind:max="0.99"
+                            setp="0.01"
+                            label="Center X displacement" />
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                        <InputRange
+                            v-model="paramY"
+                            v-bind:min="-0.99"
+                            v-bind:max="0.99"
+                            setp="0.01"
+                            label="Center Y displacement" />
+                        </div>
+                    </div>
                 </div>
                 <div class="col-md-8 mt-2">
                     <canvas
@@ -111,6 +131,8 @@ export default {
             paramC: colors,
             paramN1: 1,
             paramN2: 3,
+            paramX: 0.5,
+            paramY: 0.0,
             colorMode: 'multiple',
             width,
             height,
@@ -122,18 +144,60 @@ export default {
 
     computed: {
         circlePoints () {
-            const n = this.paramN;
-            const alpha = Math.PI * 2 / n;
-            const points = [];
+            # method: drawing two circles, the first centered in (0, 0) and
+            # the second centered at (x_offset, y_offset).
+            # For each point in the upper semicircle of the first circle, we draw
+            # a line joining that point with (0, 0), and intersect such line with the
+            # displaced circle
 
-            let i = -1;
+            const n_points = this.paramN;
+            const r = 1.0;
 
-            while (i < n) {
-                const theta = alpha * i;
+            // find formula of second circle (x - h) ^ 2 + (y - k) ^ 2 = r ^ 2
+            const h = this.paramX;
+            const k = this.paramY;
 
+            const alpha = Math.PI * 2 / n_points;
+            const points = [];
+
+            // loop all points of the top half of the first circle
+            // TODO: the previous loop was ranging from -1 to n-1 and adding a point each iteration (total of n+1 points)
+            //       whereas the current is ranging from 0 to n/2 and adding two points each iteration
+            //       (total of n+2 if n is even, n+1 if n is odd)
+            let i = 0;
+            while (i <= n_points / 2) {
+                const theta = alpha * i;
+                const xc1 = Math.cos(theta) * r;
+                const yc2 = Math.sin(theta) * r;
+
+                // for each point, find line y = m*x + n passing by (0,0) and (x,y)
+                const n = 0;
+                const m = (yc1 - n) / xc1;
+
+                // and find both intersections of such line with the second circle
+                // { (x - h) ^ 2 + (y - k) ^ 2 = r ^ 2
+                // { y = m * x + n
+                // -----------------------------------
+                // (1 + m^2) * x^2 + (2mn - 2h - 2mk) * x + (h^2 + n^2 + k^2 - r^2 - 2nk) = 0
+                const a = 1 + Math.pow(m, 2);
+                const b = 2 * m * n - 2 * h - 2 * m * k;
+                const c = Math.pow(h, 2) + Math.pow(n, 2) + Math.pow(k, 2) - Math.pow(r, 2) - 2 * n * k;
+                const x1 = (0 - b + Math.sqrt(Math.pow(b, 2) - 4 * a * c) ) / (2 * a);
+                const x2 = (0 - b - Math.sqrt(Math.pow(b, 2) - 4 * a * c) ) / (2 * a);
+                const y1 = m * x1 + n;
+                const y2 = m * x2 + n;
+
+                // recenter second circle to (0, 0) and store the intersections found in that circle
+                // scale the points according to rad
+                // recenter second circle to (cx, cy)
+                // store the points
                 points.push({
-                    x: (Math.cos(theta) * this.rad) + this.cx,
-                    y: (Math.sin(theta) * this.rad) + this.cy,
+                    x: (x1 - h) * this.rad + this.cx,
+                    y: (y1 - k) * this.rad + this.cy,
+                });
+                points.push({
+                    x: (x2 - h) * this.rad + this.cx,
+                    y: (y2 - k) * this.rad + this.cy,
                 });
 
                 i += 1;
@@ -213,6 +277,14 @@ export default {
             this.$nextTick(() => this.drawCanvas());
         },
 
+        paramX () {
+            this.$nextTick(() => this.drawCanvas());
+        },
+
+        paramY () {
+            this.$nextTick(() => this.drawCanvas());
+        },
+
         colorMode () {
             this.$nextTick(() => this.drawCanvas());
         },
@@ -288,4 +360,4 @@ main {
         max-width: 100%;
     }
 }
-</style>
\ No newline at end of file
+</style>

From 886ed7f2a100fb82fed4884d1acab70f3fbe9bbe Mon Sep 17 00:00:00 2001
From: nicolau-manubens <79514543+nicolau-manubens@users.noreply.github.com>
Date: Tue, 23 Feb 2021 11:19:18 +0000
Subject: [PATCH 2/3] Fix comments in Main.vue

---
 src/components/Main.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Main.vue b/src/components/Main.vue
index e9e2ee8..38d9123 100644
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -144,11 +144,11 @@ export default {
 
     computed: {
         circlePoints () {
-            # method: drawing two circles, the first centered in (0, 0) and
-            # the second centered at (x_offset, y_offset).
-            # For each point in the upper semicircle of the first circle, we draw
-            # a line joining that point with (0, 0), and intersect such line with the
-            # displaced circle
+            // method: drawing two circles, the first centered in (0, 0) and
+            // the second centered at (x_offset, y_offset).
+            // For each point in the upper semicircle of the first circle, we draw
+            // a line joining that point with (0, 0), and intersect such line with the
+            // displaced circle
 
             const n_points = this.paramN;
             const r = 1.0;

From b3a4e60419963b1d414ca7c2edeccfe4104fe0d2 Mon Sep 17 00:00:00 2001
From: Dusan Vuckovic <dusan@dvuckovic.com>
Date: Tue, 23 Feb 2021 11:51:52 +0000
Subject: [PATCH 3/3] Extended input range component so it can handle floats
 too.

---
 src/components/InputRange.vue | 18 ++++++++++++------
 tests/unit/InputRange.spec.js | 14 +++++++++++++-
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/InputRange.vue b/src/components/InputRange.vue
index 7842fd5..d4c61f1 100644
--- a/src/components/InputRange.vue
+++ b/src/components/InputRange.vue
@@ -79,14 +79,20 @@ export default {
             },
 
             set (newValue) {
-                const integerValue = parseInt(newValue, 10);
+                let castValue = newValue;
 
-                // Emit only integers that fall within the configured range.
-                if (Number.isNaN(integerValue)) return;
-                if (integerValue < this.min) return;
-                if (integerValue > this.max) return;
+                if (Number.isInteger(this.step)) {
+                    castValue = parseInt(newValue, 10);
+                }
+                else {
+                    castValue = parseFloat(newValue);
+                }
 
-                this.$emit('update:modelValue', integerValue);
+                if (Number.isNaN(castValue)) return;
+                if (castValue < this.min) return;
+                if (castValue > this.max) return;
+
+                this.$emit('update:modelValue', castValue);
             },
         },
     },
diff --git a/tests/unit/InputRange.spec.js b/tests/unit/InputRange.spec.js
index 02b1adb..d96fb3a 100644
--- a/tests/unit/InputRange.spec.js
+++ b/tests/unit/InputRange.spec.js
@@ -48,7 +48,7 @@ describe('InputRange', () => {
         delete wrapper.emitted()['update:modelValue'];
     });
 
-    it('does not emit invalid values', async () => {
+    it('does rudimentary validation of input values', async () => {
         wrapper.setProps({
             max: 5,
         });
@@ -72,6 +72,18 @@ describe('InputRange', () => {
         wrapper.find('input[type="number"]').setValue(modelValue);
 
         expect(wrapper.emitted()).toEqual({});
+
+        wrapper.setProps({
+            step: 0.01,
+        });
+
+        await wrapper.vm.$nextTick(() => {});
+
+        modelValue = 0.05;
+
+        wrapper.find('input[type="number"]').setValue(modelValue);
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([modelValue]);
     });
 
     it ('supports the label prop', async () => {