CODEWITHSUNDEEP
javascriptmathsvg
Guido
Guido

Reputation: 387

Create SVG circles in a circular path programmatically keeping even distance from objects

I want to create a JavaScript function that will dynamically generate an SVG image as the following:

enter image description here

The image represents a table that has many seats and a label. The code I used to generate this table is the following:

<g id="svg_23">
     <ellipse sid="0" ry="34"  rx="34"  id="svg_13" cy="73"   cx="228" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="1" ry="7.5" rx="7.5" id="svg_17" cy="26"   cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="2" ry="7.5" rx="7.5" id="svg_19" cy="37"   cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="3" ry="7.5" rx="7.5" id="svg_16" cy="72"   cx="275" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="4" ry="7.5" rx="7.5" id="svg_18" cy="106"  cx="260" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="5" ry="7.5" rx="7.5" id="svg_14" cy="120"  cx="228" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="6" ry="7.5" rx="7.5" id="svg_21" cy="107"  cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <ellipse sid="7 "stroke="#000" ry="7.5" rx="7.5" id="svg_15" cy="73" cx="181" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" fill="#fff"/>
     <ellipse sid="8" ry="7.5" rx="7.5" id="svg_20" cy="40" cx="194" fillOpacity="null" strokeOpacity="null" strokeWidth="1.5" stroke="#000" fill="#fff"/>
     <text xmlSpace="preserve" textAnchor="start" fontFamily="Helvetica, Arial, sans-serif" fontSize="24" id="svg_22" y="80.5" x="219.5" fillOpacity="null" strokeOpacity="null" strokeWidth="0" stroke="#000" fill="#000000">B</text>
    </g>

I want to be able to generate it in a Javascript Function that will receive Y and X coordinates for the image and also a number of seats. From 2 to 10 seats, for example.

The function would return the seats evenly disposed around the table. My initial idea was to calculate the circumference of the outer circle where the seats would be placed and divide by the number of seats. The problem here would be how to calculate each seat X and Y position.

Any ideas?

Upvotes: 0

Views: 275

Answers (1)

3176243
3176243

Reputation: 569

After calculating angles for circles (360/number_of_circles*index) you just need to offset it by angle and distance

"Here's the equations for that.

X=distance*cos(angle)

Y=distance*sin(angle)

But this is an angle and distance from the origin (0,0), usually you want the position (x,y) an angle and distance from another position (x0, y0).

X=distance*cos(angle) +x0

Y=distance*sin(angle) +y0 "

(copy paste from https://www.construct.net/pl/forum/construct-2/how-do-i-18/how-do-i-calculate-position-x-78314 - pretty basic trig math ;) )

One note though - angle is in radians, not degrees, so 

var toRadians = function (degree) {
    return degree * (Math.PI / 180);
};

Upvotes: 2

Related Questions