CODEWITHSUNDEEP
javascriptcanvasbezier
pieter_dv
pieter_dv

Reputation: 499

create beziers curve with only start and endpoint

I'm trying to create a html canvas where the user can define a start- and endpoint, between the start and endpoint I want to draw a waved line, I'm doing this by drawing bezierCurveTo.

a sample:

sample wave

the code I use to draw this is the following:

var wave = new Kinetic.Shape({
        drawFunc: function (canvas) {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.moveTo(50, 50);
            var waveCount = 0;
            var controlPoint1X = 55;
            var controlPoint2X = 60;
            var endPointX = 65;
            while(waveCount < 10) {
                ctx.bezierCurveTo(controlPoint1X, 35, controlPoint2X, 65, endPointX, 50);
                controlPoint1X += 20;
                controlPoint2X += 20;
                endPointX += 20;
                waveCount++;
            }
            ctx.stroke(_this);
        },
        stroke: '#000000',
        strokeWidth: 2
    });

I can make this work as long as only the x or only the y coordinate changes. Now I want to be able to create a waved line like shown above but with a different x,y coordinate. For example startpoint x: 50 y: 50 and endpoint x: 100 y: 100. I know I have to calculate the controlpoints, but I can't find out what formula I have to use. Can someone help me out?

Upvotes: 0

Views: 748

Answers (1)

Mike &#39;Pomax&#39; Kamermans
Mike &#39;Pomax&#39; Kamermans

Reputation: 53538

Let's simulate a circle and sinewave on a straight line. For a semi-circle, each "period" consists of two segments, with segment one being:

cDist = 4/3 * amplitude

(we know this from http://pomax.github.com/bezierinfo/#circles_cubic)

S = (x1, 0),
C1 = (x1, cDist)
C2 = (x2, cDist)
E = (x2, 0)

and segment two being:

S = (x2, 0),
C1 = (x2, -cDist)
C2 = (x3, -cDist)
E = (x3, 0)

For a sine wave, the control points are almost the same; the y coordinate stays at the same height, but we need to shift the x coordinates so that the shape has the corrected angle at the start and end points (for a circle they're vertical, for a sine wave they're diagonal):

S = (x1, 0),
C1 = (x1 + cDist/2, cDist)
C2 = (x2 - cDist/2, cDist)
E = (x2, 0)

and segment two is:

S = (x2, 0),
C1 = (x2+cDist, -cDist)
C2 = (x3-cDist, -cDist)
E = (x3, 0)

I put up a demonstrator of this at: http://jsfiddle.net/qcUyC/6

If you want these lines to be at a fixed angle, my advice is: rotate your context. Don't actually change your coordinates. Just use context.rotate(...) and you're done. See http://jsfiddle.net/qcUyC/7

But, if you absolutely need coordinates that aren't just drawn in the right place, but have coordinates that represent a real angled line, then start with your angle:

angle = some value you picked, in radians (somewhere between 0 and 2*pi)

with that angle, we can place our points:

dx = some fixed value we pick
dy = some fixed value we pick

ox = the x-offset w.r.t. 0 for the first coordinate in our line
oy = the y-offset w.r.t. 0 for the first coordinate in our line

x1 = ox
y1 = oy

x2 = (dx * cos(angle) - dy * sin(angle)) + ox
y2 = (dx * sin(angle) + dy * cos(angle)) + oy

x3 = (2*dx * cos(angle) - 2*dy * sin(angle)) + ox
y3 = (2*dx * sin(angle) + 2*dy * cos(angle)) + oy

...

xn = ((n-1)*dx * cos(angle) - (n-1)*dy * sin(angle)) + ox
yn = ((n-1)*dx * sin(angle) + (n-1)*dy * cos(angle)) + oy

you then have to treat your control points as vectors relative to the start point in your segments, so C1' = C1-S, and C2' = C2-S, and then you rotate those with the same transformation. You then add those vectors back up to your starting point and you now have the correctly rotated control point.

That said, don't do that. Let the canvas2d API do the rotation for you and just draw straight lines. It makes life so much easier.

Upvotes: 1

Related Questions