Menu
I have the bezier curves between 2 points. I'd like to cut all curves into two equal half. One of my idea is if I can control 't' value I'll draw 2 curves by t = [0,0.5] and t = [0.5,1] but I don't know how. Below is my code. I won't mind any other idea or suggestion
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D3 test</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var Over = function(){
d3.select(this)
.style("stroke-opacity", 0.25);
}
var Out = function(){
d3.select(this)
.transition().duration(200)
.style("stroke-opacity", 0);
}
function curve(n,x1,y1,x2,y2){
var xr = (x1+x2)/2,
yr = (y1+y2)/2,
euDist = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
x3 = -y1+xr+yr, x4 = -y2+xr+yr,
y3 = x1+yr-xr, y4 = x2+yr-xr,
ctrl , curveDescription;
svg.append('path')
.attr("stroke", 'blue')
.attr('fill','none')
.style("stroke-opacity",0.25)
.attr('d', 'M'+x3+','+y3+'L'+x4+','+y4)
.attr('stroke-width',strokeWidth);
for(var j=0;j<=n;j++){
ctrl = [(x4-x3)*j/n+x3 , (y4-y3)*j/n+y3] ,
curveDescription=
'M' +x1+',' +y1+
'Q' +ctrl[0]+','+ctrl[1]+','
+x2+',' +y2;
svg.append('path')
.attr("stroke", 'blue')
.attr('fill','none')
.style("stroke-opacity",0.25)
.attr('d', curveDescription)
.attr('stroke-width',strokeWidth);
svg.append('path')
.attr("stroke", 'blue')
.attr('fill','none')
.style("stroke-opacity",0)
.on("mouseover", Over)
.on("mouseout", Out)
.attr('d', curveDescription)
.attr('stroke-width',strokeWidth*25);
}
}
</script>
</head>
<body>
<script>
var w = 1268 , h = 680 , strokeWidth = 2;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
curve(5, 100,100, 400,500);
</script>
</body>
</html>
802
Splitting a bezier into two curves is fairly simple. Look up De Casteljau's Algorithm. https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm
Update
De Casteljau is simpler than it looks. That WP article could be clearer for non-mathermeticians. So I'll explain more simply.
Imagine you have a bezier defined by the points A,B,C & D. Where A and D are the endpoints and B and C are the control points.
So, say you wanted to find the value of the curve at point 't' along the curve (where t is in the range 0..1. You can do it this way by geometry:
Find the point G that is at 't' along the straight line CD.
Find the point H that is at 't' along the straight line EF.
Find the point J that is at 't' along the straight line FG.
Finally, find the point K that is at 't' along the straight line HJ.
K is also equal to the point that is 't' along the bezier. This is De Casteljau's Algorithm.
But usefully, it also gives us the control points of the two beziers that would result if the curve was split at point K. The two bezier curves are: A,E,H,K and K,J,G,D.
In your case t=0.5, so finding the two curves is just a sequence of additions and divides-by-2.
E = (A+B)/2
F = (B+C)/2
G = (C+D)/2
H = (E+F)/2
J = (F+G)/2
K = (H+J)/2
Obviously each of these calculations has to be done for x and y.
Hope this helps.
157
The answer to this question given by Paul LeBeau was very helpful for me. I thought that others would benefit even more if there was a visual to go along with that answer, which I provide below.
The following diagram illustrates the points described in Paul LeBeau's answer. See that answer for the relevant explanation. The actual diagram shows the special case of t=0.5, but the general principles are identical for any value of t between 0 and 1. The heavy black lines show the "control lines" for the original curve while the red lines show them for the first "half-curve".
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
