Drawing a smooth curved arc() between two points

Question

I'm trying to draw a smooth curved arc between two points in canvas, I have set up the points as sutch note these are dynamic and can change. ``` var p1 = { x=100, y=100 } var p2 = { x=255, y=255 } ``` The curve would look something like this Here my started code, I can't get my head around the math/logic of this function: ``` function curveA2B(a,b){ var mindpoint = { x: (a.x+b.x)/2, y: (a.y+b.y)/2, d: Math.sqrt(Math.pow(b.x-a.x,2) + Math.pow(b.y-a.y,2)) }; context.beginPath(); context.arc( a.x, a.y, mindpoint.d/2, 1.5*Math.PI, 0, false ); context.arc( b.x, b.y, mindpoint.d/2, 1*Math.PI, 0.5*Math.PI, true ); context.context.stroke(); } ``` The dynamic examples is here: http://jsfiddle.net/CezarisLT/JDdjp/6/

Accepted Answer

I created a function that would be easily modifiable to many needs called plot_curve that gives you an idea of the breakdown of your problem.

A quick DEMO: http://jsfiddle.net/LVFat/

```
function plot_curve(x,y,xx,yy, target,color)
{
    var startX=x;  
    var startY=y;

var endX=xx;  
    var endY=yy;

var diff_x = xx - x;
    var diff_y = yy - y;

var bezierX=x;  // x1
    var bezierY=yy; // y2

console.log("bx:"+bezierX);
    console.log("by:"+bezierY);

var cx,cy, t;

for(t=0.0; t<=1; t+=0.01)  
    {  
        cx =  Math.round(  (1-t)*(1-t)*startX + 2*(1-t) * t * bezierX + t*t*endX);  
        cy =  Math.round(  (1-t)*(1-t)*startY + 2*(1-t) * t * bezierY + t*t*endY);

// change this part to whatever you are trying to manipulate to the curve
        plot_pixel( Math.round(cx), Math.round(cy), target, color);
    }  
}
```

example... (works with a divCanvas function I made.. check out jsfiddle link...)

```
plot_curve(25,25,5,5, ".divCanvas","blue");
```

if you just want the coords for the curve between the two points, try this:

```
function plot_curve(x,y,xx,yy)
{
    // returns an array of x,y coordinates to graph a perfect curve between 2 points.
    var startX=x;  
    var startY=y;

var endX=xx;  
    var endY=yy;

var diff_x = xx - x;
    var diff_y = yy - y;

var xy = [];
    var xy_count = -1;

var bezierX=x;  // x1
    var bezierY=yy; // y2

var t;

for(t=0.0; t<=1; t+=0.01)  
    {
      xy_count++;
      xy[xy_count] = {};
      xy[xy_count].x = Math.round(  (1-t)*(1-t)*startX + 2*(1-t) * t * bezierX + t*t*endX);
      xy[xy_count].y = Math.round(  (1-t)*(1-t)*startY + 2*(1-t) * t * bezierY + t*t*endY);
    }

return xy; // returns array of coordinates
}
```

Drawing a smooth curved arc() between two points

Solution

Problem

Related problems