Trigonometric circle

doraneko · Apr 3, 2011

Please teach me how to draw trigonometric circle like a slice of cake.:sign0085:

klaus · Apr 4, 2011

Below you have a drawing routine for an arc.

B4X:

[FONT=Courier New][SIZE=2][COLOR=#0000ff]
[SIZE=2][FONT=Courier New][COLOR=#0000ff][SIZE=2][FONT=Courier New][COLOR=#0000ff]Sub [/COLOR][/FONT][/SIZE][/COLOR][/FONT][/SIZE][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]DrawArc(xc [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], yc [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], r [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], a1 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], a2 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], col [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Int[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2], Strike [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' The routine draws always in the trigonometric direction (counter clockwise) from angle a1 to a2[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] x1, y1, x2, y2 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] da, a [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Float[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]  da=[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]260[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]/r [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' calculates the angle interval As a function of the radius[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  If[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] a2<a1 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Then[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]    a2=a2+[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]360[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  End [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]If[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[SIZE=2][FONT=Courier New][SIZE=2][FONT=Courier New]  x1=xc+r*[/FONT][/SIZE][/FONT][/SIZE][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]CosD[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](a1)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]  y1=yc-r*[/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]SinD[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](a1)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]  cvsMain.DrawLine(x1,y1,xc,yc,col,Strike) [/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' draws the radius[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  For[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] a = a1+da [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]To[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] a2 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Step[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] da[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]    x2=xc+r*[/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]CosD[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](a)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]    y2=yc-r*[/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]SinD[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](a)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]    cvsMain.DrawLine(x1,y1,x2,y2,col,Strike)[/FONT][/SIZE]
[SIZE=2][FONT=Courier New]    x1=x2[/FONT][/SIZE]
[SIZE=2][FONT=Courier New]    y1=y2[/FONT][/SIZE]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]  Next[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]  x2=xc+r*[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]CosD[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](a2)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]  y2=yc-r*[/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]SinD[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2](a2)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]  cvsMain.DrawLine(x1,y1,x2,y2,col,Strike) [/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' draws the last segment[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]  cvsMain.DrawLine(x2,y2,xc,yc,Col,Strike) [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000][FONT=Courier New][SIZE=2][COLOR=#008000]' draws the radius[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]End Sub[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]

@Erel
There are some strange behaviours.
Depending on the value of the variable da there are missing parts of the arc.
With da=260dip/r OK
With da=250dip/r there are small missing parts on to and on the left
With da=1000dip there is a big missing part on top.
With Strike=2 instead of 1 it's OK.
Depending on the value of the ending angle a2, the radius is not fully drawn.

Attached the test program and a screenshot.

Best regards.

Erel · Apr 5, 2011

I see this behavior as well. I don't have a very good explanation. It is related to rounding losses that happen at the native layer. The solution is to draw with at least 2dip stroke.

klaus · Apr 5, 2011

The solution is to draw with at least 2dip stroke.

Unfortunately not

.
I thought this too that's why I tried with da = 1000/r where the stroke is about 17 pixels, anyway for one radius the stroke is much more than 2 pixels in both directions.

I agree that it seems being a rounding problem.
Setting the center coordinates to:
x0 = 160.2
y0 = 120.2 Works OK
with
x0 = 160.2dip
y0 = 120.2dip wrong.

Best regards.

doraneko · Apr 6, 2011

And more...

Thank you for DrawArc !!
Moreover, I want to fill with Color. Please help me.:sign0085:

Erel · Apr 7, 2011

Here is a different approach which uses Canvas.ClipPath to limit the drawing as required.
It draws filled arcs.
The drawing is done clockwise:

B4X:

Sub Process_Globals

End Sub

Sub Globals
    Dim canvas1 As Canvas
End Sub

Sub Activity_Create(FirstTime As Boolean)
    canvas1.Initialize(Activity)
    DrawArc(canvas1, 100dip, 100dip, 100dip, 180, 90, Colors.Blue)
    Activity.Invalidate
End Sub

Sub DrawArc(cnvs As Canvas, x As Float, y As Float, radius As Float, startAngle As Float, endAngle As Float, Color As Int)
    Dim s As Float
    s = startAngle
    startAngle = 180 - endAngle
    endAngle = 180 - s
    If startAngle >= endAngle Then endAngle = endAngle + 360
    Dim p As Path
    p.Initialize(x, y)
    For i = startAngle To endAngle Step 10
        p.LineTo(x + 2 * Radius * SinD(i), y + 2 * Radius * CosD(i))
    Next
    p.LineTo(x + 2 * Radius * SinD(endAngle), y + 2 * Radius * CosD(endAngle))
    p.LineTo(x, y)
    cnvs.ClipPath(p) 'We are limiting the drawings to the required slice
    cnvs.DrawCircle(x, y, Radius, Color, True, 0)
    cnvs.RemoveClip
End Sub

derez · Apr 7, 2011

Erel

Just for my understanding - when you have the path defined, why do you use

B4X:

cnvs.ClipPath(p) 'We are limiting the drawings to the required slice
cnvs.DrawCircle(x, y, Radius, Color, True, 0)
cnvs.RemoveClip

and not
cnvs.DrawPath( path,Color, True, strokewidth)

Erel · Apr 7, 2011

Calling DrawPath will not draw a nice circle. Try it and you will see that it draws a large, non accurate circle. The reason is that I've created the path with lines for every 10 degrees.

By clipping the drawing area we can use DrawCircle, which draws a perfect circle.

doraneko · Apr 7, 2011

Thank you for new version of DrawArc !
I'm very satisfied.

positrom2 · May 17, 2013

The coordinate systems seem to be differently defined for a Canvas and for a Path. For the Canvas, I (hopefully) understand, but how is the definition of the Path coordinate system?
Thanks, positrom2

Erel · May 18, 2013

This is an old thread. Please start a new one.

Trigonometric circle

doraneko

Member

klaus

Expert

Attachments

Erel

B4X founder

klaus

Expert

doraneko

Member

Erel

B4X founder

derez

Expert

Erel

B4X founder

doraneko

Member

positrom2

Active Member

Erel

B4X founder