How to draw a 2d arc

Question

I am trying to input some known acr values from another program and reproduce them in three.js

Right now I am using the following code I found on this site. It draw the arc fine, although it may not be the best option.

function DRAWarc(){
            // smooth my curve over this many points
            var numPoints = 100;

            spline = new THREE.SplineCurve3([
               new THREE.Vector3(0, 0, 0),
               new THREE.Vector3(0, 200, 0),
               new THREE.Vector3(150, 150, 0)
            ]);

            var material = new THREE.LineBasicMaterial({
                color: 0xff00f0,
            });

            var geometry = new THREE.Geometry();
            var splinePoints = spline.getPoints(numPoints);

            for(var i = 0; i < splinePoints.length; i++){
                geometry.vertices.push(splinePoints[i]);  
            }

            var line = new THREE.Line(geometry, material);
            scene.add(line);

        }

The following are the known variables.

Center point (X,Y) (if the are was a complete circle, the center of the circle)
radius (if it were a circle)
start angle (I'm not positive, but I think this is the degree, if it were a circle, going counter-clockwise, with 0 being to the right of the circle)
end angle (see above)

more code!

         ///////////
    // SCENE //
    ///////////
    scene = new THREE.Scene();

    ////////////
    // CAMERA //
    ////////////

    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;

    viewsize = 900;
    camera = new THREE.OrthographicCamera(
        SCREEN_WIDTH / - 2, SCREEN_WIDTH / 2,
        SCREEN_HEIGHT / 2, SCREEN_HEIGHT / - 2,
        1, 1e6 );
 camera.position.z = 2000;

    scene.add(camera);


    camera.lookAt(new THREE.Vector3(2100, 3600, 0));

    //////////////
    // RENDERER //
    //////////////

    // create and start the renderer
    if ( Detector.webgl ){
        renderer = new THREE.WebGLRenderer();
        //alert('no problem.');
    }else{
        renderer = new THREE.CanvasRenderer(); 
        alert('problem.');
    }
    renderer.setClearColor("white", 1);
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);


    container = document.body;

    container.appendChild( renderer.domElement );

    ////////////
    // EVENTS //
    ////////////

    // automatically resize renderer
    THREEx.WindowResize(renderer, camera);
    // toggle full-screen on given key press
    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });

    ///////////
    // STATS //
    ///////////

    // displays current and past frames per second attained by scene
    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );

    ///////////
    // LIGHT //
    ///////////

    // create a light
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,250,0);
    scene.add(light);
    var ambientLight = new THREE.AmbientLight(0x111111);
    // scene.add(ambientLight);

    //////////////
    // GEOMETRY //
    //////////////

    // most objects displayed are a "mesh":
    //  a collection of points ("geometry") and
    //  a set of surface parameters ("material")

    doWork();


}
function animate() 
{
    requestAnimationFrame( animate );
    render();       
    update();
}

function update()
{
    // delta = change in time since last call (in seconds)
    var delta = clock.getDelta(); 

    // functionality provided by THREEx.KeyboardState.js
    if ( keyboard.pressed("1") )
        document.getElementById('message').innerHTML = ' Have a nice day! - 1'; 
    if ( keyboard.pressed("2") )
        document.getElementById('message').innerHTML = ' Have a nice day! - 2 ';    

    //controls.update();
    stats.update();
}

function render() 
{                   
    renderer.render( scene, camera );
}`

Could we see the rest of your code, please? Perhaps as a jsFiddle? — jameslafferty, Jan 20 '14 at 06:35
dude i've got like 28000 lines of code :P what do you want to see? After thinking about it this is basically a math question... I need an algorithm to convert my data into three points, then the above code will fit my needs. btw that code is fine just wanted to show what i was trying — contehhh, Jan 20 '14 at 06:45
28k lines is probably overkill. I'm just looking for an example that fully illustrates what you're trying to do. For instance, I don't know where ```scene``` is coming from, or whether making ```spline``` global has any significance. On the basis of what you've got here, it feels tough to fully answer the question. — jameslafferty, Jan 20 '14 at 06:49
Updated my post with a big copypasta with a lot of pieces taken out. sorry for the formatting! — contehhh, Jan 20 '14 at 06:58
Circle or ellipse segment can't be represented with non-rational spline. With NURBS it's possible. Try http://www.geometrictools.com/Documentation/NURBSCircleSphere.pdf. I'd _guess_ that one could produce an arc by _sampling_ the NURBS parameters (x,y,w) for a quadrant at the start and end angles. — Aki Suihkonen, Jan 20 '14 at 07:20
@AkiSuihkonen Huh. Your right, i guess i won't get a perfect fraction if i am using a spline a with manual number of points. However, what if i had the coords of the start angle and the end angle, and lets say every whole degree in between. then i could make a relatively circular fragment, no? — contehhh, Jan 20 '14 at 07:41

score 1 · Accepted Answer · answered Jan 21 '14 at 12:10

1

You can draw arc with the circle geometry

// compute angle between p1 and p2
var angle = Math.acos(p1.dot(p2)/(p1.length()*p2.length()));
// create arc
var geometry = new THREE.CircleGeometry(radius, nbSegments, 0, angle);
// remove center vertex
geometry.vertices.splice(0,1);
// TODO: move the arc to the good place in the scene
// add arc to the scene
scene.add(new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff00f0 }));

answered Jan 21 '14 at 12:10

Troopers

5,127
1
37
64

cool dude! im not at the code right now, but i was up till 5am working on that roundabout method lol...... also had problems with certain arcs – contehhh Jan 21 '14 at 19:58
Do you know a way to draw an arc given the endpoints x/y and the radius? – contehhh Jan 28 '14 at 19:15
You can compute the startAngle between x axis and x point, something like this : var startAngle = Math.acos(p0.dot(p1)/(p0.length()*p1.length())); where p0.X = p1.X and p0.Y = 0. Then create geometry : var geometry = new THREE.CircleGeometry(radius, nbSegments, startAngle, angle); – Troopers Jan 29 '14 at 07:54

score 0 · Answer 2 · edited May 23 '17 at 12:14

So after a little research I found the following post.

How do I calculate a point on a circle’s circumference?

which led me to this bit of math that can be adapted to any language:

x = cx + r * cos(a)
y = cy + r * sin(a)

Where r is the radius, cx,cy the origin, and a the angle from 0..2PI radians or 0..360 degrees.

and heres some fun reading material!
http://en.wikipedia.org/wiki/Circle#Equations

EDIT: just completed the rough draft for this project. enjoi!

i does not draw a spline, instead it draws a line with 102 points. the start of the arc, the end, and 100 evenly spaced points in between. it works well, and i will add a variable to the number of lines to reduce memory if needed.

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 cx = '2473.5737';
            var cy = '3145.1300';
            var ra = '47.5538';
            var sa = '2';
            var ea = '91';

            var material = new THREE.LineBasicMaterial({
                color: 0xff00f0,
            });

            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;

                for(var i=1;i<=100;i++){
                    var t = getARC(cx, cy, ra, (+sa + (+step * +i)));
                    geometry.vertices.push(new THREE.Vector3(t['x'], t['y'], 0));
                    //alert((+sa + (+step * +i)));
                }

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

        }

How to draw a 2d arc

2 Answers2