My current task involves creating a series of arcs using 102 lines (start point, endpoint, and 100 curve points)
However, I'm facing an issue when the start point of an arc has a higher value than the end point. For instance:
Start Point: 359
End Point: 88
In this scenario, the arc should fall within the empty area of the circle. See the example here: http://jsfiddle.net/XsjgH/1/
I have attempted various solutions, such as:
function getARC(x, y, r, a){
a = a * (Math.PI/180);
var ax = +x + +r * Math.cos(+a),
ay = +y + +r * Math.sin(+a),
res = [];
res['x'] = ax,
res['y'] = ay;
return res;
}
function DRAWarc(cx, cy, ra, sa, ea){
var arcFactor = 1;
if(+sa > +ea){
arcFactor = -1;
var material = new THREE.LineBasicMaterial({
color: 0xff00f0,
});
}else{
var material = new THREE.LineBasicMaterial({
color: 0x0000ff,
});
}
var geometry = new THREE.Geometry();
var s = getARC(cx, cy, ra, sa);
geometry.vertices.push(new THREE.Vector3(s['x'], s['y'], 0));
var step = (+ea - +sa)/100;
var pass = 0;
var reset = 0;
for(var i=1;i<=100;i++){
if(+sa > +ea && ((+sa + (+step * +i))*arcFactor) < 360 && reset == 0){
pass = 1;
}
if(((+sa + (+step * +i))*arcFactor) < sa){
reset = 1;
pass = 0;
}
if(((+sa + (+step * +i))*arcFactor) < ea || pass == 1){
var t = getARC(cx, cy, ra, ((+sa + (+step * +i))*arcFactor));
geometry.vertices.push(new THREE.Vector3(t['x'], t['y'], 0));
//alert((+sa + (+step * +i)));
}
}
reset = 0;
var f = getARC(cx, cy, ra, ea);
geometry.vertices.push(new THREE.Vector3(f['x'], f['y'], 0));
var line = new THREE.Line(geometry, material);
scene.add(line);
}