OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to find a middle point of a beizer curve?

  • Thread starter Thread starter SkillGG
  • Start date Start date
S

SkillGG

Guest
I want to make a 'named' bezier curve. I want it to be one-word named so I don't have to worry about word-wrap.

I make bezier curve via P5 bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey) function and I want a string to be shown in the middle of bezier curve. But I don't know how to find 'the middle' of curve.

For now my result looks like this (I don't know where to start picking up this problem, so I went with the easier way of just printing text on a start of curve):

r1


But I want it to look like this:

r2


This means that I need P1 and P2 coordinates:

r3


Sorry for paint, but I don't have my code yet. As soon as I will have my hands on it I will add it here.

Here is code that draws a curve:

Code:
let
b = dest.inTriangle.middle, // destination triangle
g = this.outTriangle.p3,    // tip of out triangle
c = {x:b.x-g.x,y:b.y-g.y},  // distance between objects
r1 = {},                    // bezier point 1
r2 = {};                    // bezier point 2
if(c.x > 0){
    // b is on left
    r1 = {
        x: g.x + c.x/2,
        y: g.y
    };
    r2 = {
        x: b.x - c.x/2,
        y: b.y
    };
    }
else {
    // b is on right
    r1 = {
        x: g.x - c.x/2,
        y: g.y + c.y
    };
    r2 = {
        x: b.x + c.x/2,
        y: b.y - c.y
    };
}
noFill();
stroke(0);
bezier(
    g.x, g.y,
    r1.x, r1.y,
    r2.x, r2.y,
    b.x, b.y
);
noStroke();
fill(0);
text(this.name, g.x, (g.y-this.h/2))

<p>I want to make a 'named' bezier curve. I want it to be one-word named so I don't have to worry about word-wrap.</p>

<p>I make bezier curve via P5 <code>bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey)</code> function and I want a string to be shown in the middle of bezier curve. But I don't know how to find 'the middle' of curve.</p>

<p>For now my result looks like this
(I don't know where to start picking up this problem, so I went with the easier way of just printing text on a start of curve): </p>

<p><img src="https://i.sstatic.net/xG0oq.png" alt="r1"></p>

<p>But I want it to look like this:</p>

<p><img src="https://i.sstatic.net/wXa0Q.png" alt="r2"></p>

<p>This means that I need P1 and P2 coordinates:</p>

<p><img src="https://i.sstatic.net/8MXor.png" alt="r3"></p>

<p>Sorry for paint, but I don't have my code yet. As soon as I will have my hands on it I will add it here.</p>

<p>Here is code that draws a curve:</p>

<pre><code>let
b = dest.inTriangle.middle, // destination triangle
g = this.outTriangle.p3, // tip of out triangle
c = {x:b.x-g.x,y:b.y-g.y}, // distance between objects
r1 = {}, // bezier point 1
r2 = {}; // bezier point 2
if(c.x > 0){
// b is on left
r1 = {
x: g.x + c.x/2,
y: g.y
};
r2 = {
x: b.x - c.x/2,
y: b.y
};
}
else {
// b is on right
r1 = {
x: g.x - c.x/2,
y: g.y + c.y
};
r2 = {
x: b.x + c.x/2,
y: b.y - c.y
};
}
noFill();
stroke(0);
bezier(
g.x, g.y,
r1.x, r1.y,
r2.x, r2.y,
b.x, b.y
);
noStroke();
fill(0);
text(this.name, g.x, (g.y-this.h/2))
</code></pre>
 
Top