Skip to content

Draft of displaced center. #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nicolau-manubens wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Draft of displaced center. #1

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0b21a2d
Draft of displaced center.
Feb 23, 2021
886ed7f
Fix comments in Main.vue
nicolau-manubens Feb 23, 2021
b3a4e60
Extended input range component so it can handle floats too.
dvuckovic Feb 23, 2021
a375c49
Merge branch 'main' into develop-displaced-center
dvuckovic Feb 23, 2021
fce48f3
Merge branch 'main' into develop-displaced-center
dvuckovic Feb 23, 2021
24e3e20
Merge branch 'main' into develop-displaced-center
dvuckovic Mar 2, 2021
d0bf5fb
Merge branch 'main' into develop-displaced-center
dvuckovic Mar 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 89 additions & 9 deletions src/components/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,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 class="row my-3 justify-content-between">
<div class="col-12 col-xxl-4 order-3 order-xxl-1 mt-3 d-grid">
<button
Expand Down Expand Up @@ -176,6 +196,8 @@ const DEFAULT = {
PARAM_C_MULTIPLE: colors,
PARAM_N1: 1,
PARAM_N2: 3,
PARAM_X: 0.5,
PARAM_Y: 0.0,
WIDTH: 1024,
HEIGHT: 768,
};
Expand All @@ -202,6 +224,8 @@ export default {
},
paramN1: DEFAULT.PARAM_N1,
paramN2: DEFAULT.PARAM_N2,
paramX: DEFAULT.PARAM_X,
paramY: DEFAULT.PARAM_Y,
width: DEFAULT.WIDTH,
height: DEFAULT.HEIGHT,
cx: parseInt(DEFAULT.WIDTH / 2, 10),
Expand All @@ -213,18 +237,60 @@ export default {

computed: {
circlePoints () {
Copy link
Owner

@dvuckovic dvuckovic Feb 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The circlePoints computed property should return circle points sorted in logical order, because linePoints depends on that. At the moment the final result is somewhat unexpected, because lines are not correctly drawn. You can check this out by running the generator on the unmodified code, and then comparing its output with your branch, when the center x/y displacement is 0/0 (should result in the same image).

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;
Copy link
Owner

@dvuckovic dvuckovic Feb 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This variable is unused?!


// for each point, find line y = m*x + n passing by (0,0) and (x,y)
const n = 0;
const m = (yc1 - n) / xc1;
Copy link
Owner

@dvuckovic dvuckovic Feb 23, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yc1 is undefined, perhaps it should be yc2 defined above?


// 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;
Expand Down Expand Up @@ -283,6 +349,8 @@ export default {
paramC: this.paramC,
paramN1: this.paramN1,
paramN2: this.paramN2,
paramX: this.paramX,
paramY: this.paramY,
};
},

Expand Down Expand Up @@ -326,6 +394,14 @@ export default {
paramM () {
this.$nextTick(() => this.drawCanvas());
},

paramX () {
this.$nextTick(() => this.drawCanvas());
},

paramY () {
this.$nextTick(() => this.drawCanvas());
},
},

mounted () {
Expand Down Expand Up @@ -361,6 +437,8 @@ export default {
this.paramC = data.paramC;
this.paramN1 = data.paramN1;
this.paramN2 = data.paramN2;
this.paramX = data.paramX;
this.paramY = data.paramY;
this.isModified = false;
},

Expand Down Expand Up @@ -392,6 +470,8 @@ export default {
},
paramN1: DEFAULT.PARAM_N1,
paramN2: DEFAULT.PARAM_N2,
paramX: DEFAULT.PARAM_X,
paramY: DEFAULT.PARAM_Y,
});
},

Expand Down Expand Up @@ -456,4 +536,4 @@ main {
border-radius: 0.25rem;
}
}
</style>
</style>