# How to round 2 Straight lines

This topic is 853 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Never mind the programming language im trying to find way to take 2 Separate straight lines and to convert the intersection to round line For example if i have this 2 straight lines (1) i want to be able programmatically be able to turn it to angle in shape 2 and 3:

[attachment=31976:bitmap.png]

##### Share on other sites
The concept you are looking for is subdivision (on lines). Have a look at this slide and the following for example.

##### Share on other sites

I wrote you some code for that problem using quadratic Bézier curves: http://no.duckdns.org/curve/index.html

<!DOCTYPE html>
<canvas id="canvas" width="800" height="800" style="border:1px solid #000000;"></canvas>
<script>

var ax = 0;
var ay = 100;
var bx = 500;
var by = 200;
var cx = 300;
var cy = 800;

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function drawLine(ax, ay, bx, by){
context.beginPath();
context.moveTo(ax, ay);
context.lineTo(bx, by);
context.stroke();
}

function drawCircle(x, y, r){
context.beginPath();
context.arc(x, y, r, 0, 2*Math.PI);
context.stroke();
}

function drawQuadraticBezierCurve(ax, ay, bx, by, cx, cy){
context.beginPath();
context.moveTo(ax, ay);

var n = 100;
for (var i = 1; i <= n; i++){
var t = i/n;
var s = 1 - t;

var x = ax*s*s + 2*bx*s*t + cx*t*t;
var y = ay*s*s + 2*by*s*t + cy*t*t;

context.lineTo(x, y);
}

context.stroke();
}

function redraw(){
context.clearRect(0, 0, canvas.width, canvas.height);

var bax = bx - ax;
var bay = by - ay;

var bcx = bx - cx;
var bcy = by - cy;

var ba = Math.sqrt(bax*bax + bay*bay);
var bc = Math.sqrt(bcx*bcx + bcy*bcy);

context.strokeStyle = "black";
drawLine(ax, ay, bx - bax, by - bay);
drawLine(bx - bcx, by - bcy, cx, cy);
context.strokeStyle = "green";
drawQuadraticBezierCurve(bx - bax, by - bay, bx, by, bx - bcx, by - bcy);
}

redraw();

window.onmousemove = function(e){
var dx = e.clientX - bx;
var dy = e.clientY - by;
redraw();
}

</script>
</body></html>



Just copy&paste into a *.txt file, rename it to *.html and open in your browser.

##### Share on other sites

Thanks you very much !!!

##### Share on other sites

Like EVIL_ENT suggests, I would start by looking at Quadratic Bezier Curves and see if they fit your requirements.

You could also calculate the transform matrix of each of the two segments, subdivide into smaller segments around the joint, then apply the transforms as a weighted sum to each subdivision point. This is basically how skinning works.

Alternatively, if you're really trying to subdivide a polygonal surface then search for Subdivision Surfaces.

Edited by dmatter

##### Share on other sites

@dmatter

well i think i don't know really if this is the case for me .

the problem is that when i needed to draw Bezier Curves with opengl lines it worked great , but now i need to be able to draw it with images .

and im not sure how , searching the web also didn't gave me any examples .

@EVIL_ENT
This is great example but my problem involve using image for the drawing , not sure how to implement it

##### Share on other sites

@dmatter

well i think i don't know really if this is the case for me .

the problem is that when i needed to draw Bezier Curves with opengl lines it worked great , but now i need to be able to draw it with images .

and im not sure how , searching the web also didn't gave me any examples .

What are you trying to do with these images?

I sense you may be trying to deform an image and bend it around?

##### Share on other sites

Once you can generate a curve (could be a bezier curve, catmull-rom spline, or whatever) then you use it build the vertices for a road surface; onto which you can apply your image using texture-mapping.

Roughly, the process I would follow is this:

1) First you calculate a 'direction' vector by sampling your curve at 2 points: your 'current' position and your 'next' position. Subtract these points to build a vector that points along the direction of the road (from the 'current' xyz position to the 'next' xyz position).

2) Use the cross-product between this 'direction' vector and an 'up' vector (which is a vector that points up to the sky and/or is perpendicular to the surface of the plane on which the road lays). This produces a vector that is "off to the side" of the curve i.e. perpendicular to both the up and direction vectors.

3) Use this "off to the side" vector to produce 2 vertices: one for each side of the road. The distance between these vertices will equal the width of the road.

4) Increment your 'current' position on the curve and go back to step 1, until you've iterated along the full length of your curve.

6) Texture the mesh with a road texture.

1. 1
2. 2
3. 3
Rutin
18
4. 4
5. 5
JoeJ
13

• 14
• 10
• 23
• 9
• 49
• ### Forum Statistics

• Total Topics
632639
• Total Posts
3007588
• ### Who's Online (See full list)

There are no registered users currently online

×

## Important Information

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!