• Advertisement
Sign in to follow this  

How to round 2 Straight lines

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

If you intended to correct an error in the post then please contact us.

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 this post


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

Share this post


Link to post
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>
<html><head><meta charset="utf-8"><title>Curve</title></head><body>
<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 radius = 200;

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);

	bax *= radius/ba;
	bay *= radius/ba;
	bcx *= radius/bc;
	bcy *= radius/bc;

	context.strokeStyle = "black";
	drawLine(ax, ay, bx - bax, by - bay);
	drawLine(bx - bcx, by - bcy, cx, cy);
	drawCircle(bx, by, radius);
	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;
	radius = Math.sqrt(dx*dx + dy*dy);
	redraw();
}

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

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

Share this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

 

5) All these road-side vertices can be assembled into tris/quads to create a road mesh.

 

6) Texture the mesh with a road texture.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement