Draw it with arc()?

Show some code, or post in General Discussion, please. Not the first time I say that to you...

On a more positive note, Bézier can't make a real ellipse arc, but can do a decent enough approximation. There are formulae for that, I can dig one example if you want.

ok, this is what I want to draw: a shape composed of 2 lines and 2 arcs



the bezierVertex() seems to work, but as I mentioned, the curve is not strictly an arc based on ellipse:

1. Shape[] shapes = new Shape[3];
2. void setup(){
3.   size(300,300);
4.   smooth(8);
5.  
6.   float eh = 100;
7.   float ew = 200;
8.   PVector l = new PVector(100,200);
9.  
10.   shapes[2] = new Shape(eh, ew, 100.0, 100.0/3, l);
11. }
12. void draw(){
13.   background(255);
14.   strokeWeight(4);
15.   stroke(0);
16.   strokeCap(PROJECT);
17.   strokeJoin(MITER);
18.   fill(255,0,0);
19.   //shapes[2].c = color(0);
20.   shapes[2].draw();
21.  
22. }
23. class Shape{
24.   //----- variables ------
25.   float ellipseHeight;
26.   float ellipseWidth;
27.   float shapeWidth;
28.   float shapeHeight;
29.   PVector location;
30.  
31.   //----- constructor -----
32.   Shape(float eh, float ew, float sh, float sw, PVector l){
33.     ellipseHeight = eh;
34.     ellipseWidth  = ew;
35.     shapeWidth = sw;
36.     shapeHeight = sh;
37.     PVector p = l.get();
38.     location = p;
39.   }
40.  
41.   //------ draw shape -----
42.   void draw(){
43.     beginShape();
44.     vertex(location.x, location.y);
45.     vertex(location.x, location.y-shapeHeight);
46.     float theY = (ellipseHeight/2) * sin(acos(shapeWidth/(ellipseWidth/2)));
47.     bezierVertex(location.x, location.y-shapeHeight, //1st control pt
48.                  location.x+shapeWidth, location.y-shapeHeight, //2nd control pt
49.                  location.x+shapeWidth, location.y-shapeHeight+theY //anchor pt
50.                 );
51.     //arc(location.x, location.y-shapeHeight+theY, shapeWidth*2, theY*2, -PI/2,0);
52.     vertex(location.x+shapeWidth, location.y-shapeHeight+theY);
53.     vertex(location.x+shapeWidth, location.y+theY);
54.     //arc(location.x, location.y+theY, shapeWidth*2, theY*2, -PI/2,0);
55.     bezierVertex(location.x+shapeWidth, location.y+theY, //1st control pt
56.                  location.x+shapeWidth, location.y, //2nd control pt
57.                  location.x, location.y //anchor pt
58.                 );   
59.     endShape();
60.   }
61. }

But I can't get it work by using arc() inside beginShape()+endShape()

1. Shape[] shapes = new Shape[3];
2. void setup(){
3.   size(300,300);
4.   smooth(8);
5.  
6.   float eh = 100;
7.   float ew = 200;
8.   PVector l = new PVector(100,200);
9.  
10.   shapes[2] = new Shape(eh, ew, 100.0, 100.0/3, l);
11. }
12. void draw(){
13.   background(255);
14.   strokeWeight(4);
15.   stroke(0);
16.   strokeCap(PROJECT);
17.   strokeJoin(MITER);
18.   fill(255,0,0);
19.   //shapes[2].c = color(0);
20.   shapes[2].draw();
21.  
22. }
23. class Shape{
24.   //----- variables ------
25.   float ellipseHeight;
26.   float ellipseWidth;
27.   float shapeWidth;
28.   float shapeHeight;
29.   PVector location;
30.  
31.   //----- constructor -----
32.   Shape(float eh, float ew, float sh, float sw, PVector l){
33.     ellipseHeight = eh;
34.     ellipseWidth  = ew;
35.     shapeWidth = sw;
36.     shapeHeight = sh;
37.     PVector p = l.get();
38.     location = p;
39.   }
40.  
41.   //------ draw shape -----
42.   void draw(){
43.     beginShape();
44.     vertex(location.x, location.y);
45.     vertex(location.x, location.y-shapeHeight);
46.     float theY = (ellipseHeight/2) * sin(acos(shapeWidth/(ellipseWidth/2)));
47. //    bezierVertex(location.x, location.y-shapeHeight, //1st control pt
48. //                 location.x+shapeWidth, location.y-shapeHeight, //2nd control pt
49. //                 location.x+shapeWidth, location.y-shapeHeight+theY //anchor pt
50. //                );
51.     arc(location.x, location.y-shapeHeight+theY, shapeWidth*2, theY*2, -PI/2,0);
52.     vertex(location.x+shapeWidth, location.y-shapeHeight+theY);
53.     vertex(location.x+shapeWidth, location.y+theY);
54.     arc(location.x, location.y+theY, shapeWidth*2, theY*2, -PI/2,0);
55. //    bezierVertex(location.x+shapeWidth, location.y+theY, //1st control pt
56. //                 location.x+shapeWidth, location.y, //2nd control pt
57. //                 location.x, location.y //anchor pt
58. //                );   
59.     endShape();
60.   }
61. }

advices are appreciated! Thanks!

bezierpoints?

My sketch below shows how to make a very decent circle from a Bézier curve.
Try it: draw it over an ellipse, and see the difference.

http://bazaar.launchpad.net/~philho/+junk/Processing/view/head:/_QuickExperiments/_Static/CircleWithCorner/CircleWithCorner.pde

Thanks a lot, PhiLho!

I also did a small test, and I think the approximation is good enough.

1. stroke(255,0,0);
2. strokeWeight(10);
3. noFill();
4. arc(100,50,180,80, -PI,-PI/2);
5. 
   
6. stroke(0,255,0);
7. strokeWeight(5);
8. beginShape();
9. vertex(10,50);
10. bezierVertex(10,20, 70,10, 100,10);
11. endShape();