CODEWITHSUNDEEP
svgtrigonometrysnap.svg
llobet
llobet

Reputation: 2790

Circle equally part divided

Let's say I have got a circle and I want it to be dynamically divided by equal parts. I have one input that will define the number of parts(P). I know the radius(R) and the center point(C). The first piece of my circle starts in C and goes R to the top(T).

  1. What is the formula to get to N?

  2. Once I've got the first piece of the circle, I will clone it P times. How much do I have to rotate each part to get the circle fully covered?

enter image description here

I'm using Snap.svg but any trigonometry help will be also welcome.

Upvotes: 1

Views: 990

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101908

Obviously the angle for each of your parts is 360/P. Let's call that A.

  1. The coordinates of point N are

    Nx = Cx + R * sin(A)
Ny = Cy + R * cos(A)

  2. By A degrees.

Upvotes: 3

Frank Wisniewski
Frank Wisniewski

Reputation: 1224

You must calculate alpha and use the formula in the picture.

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>COS</title>
    
  </head>
    <body>
      
   <svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
 
   <g>
    <title>background</title>
    <rect fill="#fff" id="canvas_background" height="402" width="402" y="-1" x="-1"/>
    <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
     <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
    </g>
   </g>
   <g>
    <title>Layer 1</title>
    <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="387.52873" x2="184.5" y1="9" x1="184.5" stroke-width="1.5" stroke="#000" fill="none"/>
    <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="199" x2="375.58839" y1="199" x1="13.5" stroke-width="1.5" stroke="#000" fill="none"/>
    <ellipse stroke="#0f0f00" ry="138.49999" rx="138.49999" id="svg_3" cy="199.50001" cx="183.99999" stroke-width="1.5" fill="none"/>
    <line stroke-linecap="null" stroke-linejoin="null" id="svg_4" y2="81" x2="257.5" y1="200" x1="184.5" stroke-width="1.5" stroke="#ff8800" fill="none"/>
    <path id="svg_5" d="m205.5,167c27,24 16,32 16,32" opacity="0.5" stroke-width="3" stroke="#ff8800" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_6" y="192" x="198.5" stroke-width="0" stroke="#ff8800" fill="#000000">a</text>
    <line stroke-linecap="null" stroke-linejoin="null" id="svg_8" y2="82" x2="184.49306" y1="82" x1="256.5" stroke-width="1.5" stroke="#0000ff" fill="none"/>
    <line stroke-linecap="null" stroke-linejoin="null" id="svg_9" y2="197.00435" x2="257.5" y1="82" x1="257.5" fill-opacity="null" stroke-width="1.5" stroke="#0000ff" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_10" y="112" x="112.5" fill-opacity="null" stroke-width="0" stroke="#0000ff" fill="#000000">(0,sin a)</text>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_11" y="230" x="224.5" stroke-width="0" stroke="#0f0f00" fill="#000000">(cos a, 0)</text>
    <ellipse ry="9.5" rx="11.5" id="svg_12" cy="82.5" cx="184" stroke-width="1.5" stroke="#0f0f00" fill="none"/>
    <ellipse ry="9.5" rx="11.5" id="svg_13" cy="199.5" cx="258" stroke-width="1.5" stroke="#0f0f00" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_14" y="71" x="269.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">P(cos a, sin a)</text>
    <ellipse ry="9.5" rx="11.5" id="svg_15" cy="83.5" cx="256" stroke-width="1.5" stroke="#0f0f00" fill="none"/>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_16" y="327" x="284.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">d(OP)=1</text>
    <text xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_18" y="219" x="165.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">O</text>
    <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_19" y="39" x="197.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">y</text>
    <text style="cursor: move;" xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="16" id="svg_20" y="222" x="358.5" fill-opacity="null" stroke-opacity="null" stroke-width="0" stroke="#0f0f00" fill="#000000">x</text>
   </g>
  </svg>
    
   
  </body>  
  </html>

you can also use the bresenham algo...

Upvotes: -1

Related Questions