CODEWITHSUNDEEP
javascripthtmlcsssvgshapes
Lexx
Lexx

Reputation: 725

Drawing Shapes (N-gons)

I'm making a small game for university and I need to add different shapes in my project. I'm talking about Triangle, Rectangle, Pentagon, Hexagon, Heptagon, Octagon....n-gon. I need all the shapes to be convex regular polygons and being able to color the inside. I'm thinking of drawing SVG shapes, but I'm not sure what the formula should be given only the n-sides of the shape to be generated. If there is a JS plugin that I can just include with Bower and generate the shapes, that will be great. There is also the problem of coloring them and after that being able to change the color with animation, but step by step.
enter image description here

Upvotes: 0

Views: 520

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3488

Below is a method I use to build polygons. It provides a random fill color. See if this helps.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Create SVG Polygons</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Create SVG Polygons</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Create inline svg with random circles, ellipses, polygons, and rectangles used for test environment.
</div><br />
<div id="svgDiv" style='border:1px black outset'>
<svg id="mySVG" />
</div><br />
Number Of Elements:<input type=text id=elemsValue size=1 value=1200 />
&nbsp;&nbsp;SVG Width:<input type=text id=widthValue size=1 value=600 />
&nbsp;&nbsp;SVG Height:<input type=text id=heightValue size=1 value=400 />
&nbsp;&nbsp;Element Sze:<input type=text id=sizeValue size=1 value=20 />
&nbsp;&nbsp;<button onClick=go()>go</button><br />
<script>

//---button---
function go()
{
	var elems=parseInt(elemsValue.value)
	var svgWidth=parseFloat(widthValue.value)
	var svgHeight=parseFloat(heightValue.value)
	var elemSize=parseFloat(sizeValue.value)
	//---clear prevoius---
	mySVG.removeChild(document.getElementById("globG"))
	svgGLOB(elems,svgWidth,svgHeight,elemSize)

}

function svgGLOB(elems,svgWidth,svgHeight,elemSize)
{
	/*  ---fill empty inline SVG element---
		<div id="svgDiv"><svg id="mySVG" /></div>
	*/
	var NS="http://www.w3.org/2000/svg"
	mySVG.setAttribute("width",svgWidth)
	mySVG.setAttribute("height",svgHeight)
	svgDiv.style.width=svgWidth+"px"
	svgDiv.style.height=svgHeight+"px"

	var globG=document.createElementNS(NS,"g")
	globG.id="globG"
	globG.setAttribute("stroke","black")
	globG.setAttribute("stroke-width",1)
	mySVG.appendChild(globG)

	var points=randomPoints(elems,svgWidth,svgHeight,elemSize)
	var n=points.length
	var circleCnt=0
	var ellipseCnt=0
	var rectCnt=0
	var polygonCnt=0

	var RandomElems=[]
	RandomElems[0]="circle"
	RandomElems[1]="rect"
	RandomElems[2]="ellipse"
	RandomElems[3]="polygon_3"
	RandomElems[4]="polygon_4"
	RandomElems[5]="polygon_5"
	RandomElems[6]="polygon_6"
	RandomElems[7]="polygon_7"
	RandomElems[8]="polygon_8"
	RandomElems[9]="polygon_9"
	RandomElems[10]="polygon_10"
	RandomElems[11]="polygon_11"
	RandomElems[12]="polygon_12"

	for(var k=0;k<n;k++)
	{
		var rand=rdm(0,12)
		var elemStr=RandomElems[rand]

		if(!elemStr.indexOf("_"))
			var elemSt=elemStr
		else
			var elemSt=elemStr.split("_")[0]

		var elem=document.createElementNS(NS,elemSt)

		if(elemSt=="circle")
		{
			elem.setAttribute("r",elemSize)
			elem.setAttribute("fill",rcolor())
			elem.setAttribute("cx",points[k][0])
			elem.setAttribute("cy",points[k][1])
			elem.id=elemSt+(circleCnt++)
		}
		else if(elemSt=="ellipse")
		{
			elem.setAttribute("rx",elemSize)
			elem.setAttribute("ry",elemSize/2)
			elem.setAttribute("fill",rcolor())
			elem.setAttribute("cx",points[k][0])
			elem.setAttribute("cy",points[k][1])
			elem.id=elemSt+(ellipseCnt++)
		}
		else if(elemSt=="rect")
		{
			elem.setAttribute("width",elemSize)
			elem.setAttribute("height",elemSize)
			elem.setAttribute("fill",rcolor())
			elem.setAttribute("x",points[k][0])
			elem.setAttribute("y",points[k][1])
			elem.id=elemSt+(rectCnt++)
		}
		else if(elemSt=="polygon")
		{
			var pgonSides=parseInt(elemStr.split("_")[1])
			var pgonPnts=polygon(pgonSides,elemSize,points[k][0],points[k][1])
			elem.setAttribute("fill",rcolor())
			elem.setAttribute("points",pgonPnts.join())
			elem.id=elemSt+(polygonCnt++)
		}
		globG.appendChild(elem)
	}

	//---obtain a random whole number from a thru b---
	function rdm(a,b)
	{
		return a + Math.floor(Math.random()*(b-a+1));
	}

	function randomPoints(elems,svgWidth,svgHeight,elemSize)
	{
		//--return format:[ [x,y],[x,y],,, ]
		//---Generate  random points---
		function times(n, fn)
		{
			var a = [], i;
			for (i = 0; i < n; i++) {
			a.push(fn(i));
			}
			return a;
		}
		var width=svgWidth-2*elemSize
		var height=svgHeight-2*elemSize

		return 	RandomPnts = times(elems, function() { return [Math.floor(width * Math.random()) + elemSize, Math.floor(height * Math.random()) + elemSize] });
	}
    //---random color---
	function rcolor()
	{
		var letters = '0123456789ABCDEF'.split('');
		var color = '#';
		for (var i = 0; i < 6; i++ )
		{
			color += letters[Math.round(Math.random() * 15)];
		}
		return color;
	}
	function polygon(vCnt,radius,centerX,centerY)
	{
		var myPoints=[]
		var polyXPts      = Array(vCnt);
		var polyYPts      = Array(vCnt);
		var vertexAngle   = 360/vCnt;
		//---init polygon points processor---
		for(var v=0; v<vCnt; v++)
		{
			theAngle = (v*vertexAngle)*Math.PI/180;
			polyXPts[v] = radius*Math.cos(theAngle);
			polyYPts[v] = -radius*Math.sin(theAngle);
		}
		//--note points are CCW---
		for(var v=0;v<vCnt; v++)
		{
			var point=[centerX+polyXPts[v],centerY+polyYPts[v]]
			myPoints.push(point)
		}
		return myPoints
	}
}

document.addEventListener("onload",init(),false)
function init()
{

	svgGLOB(1200,600,400,20)

}
</script>

</body>
</html>

Upvotes: 1

Related Questions