Write a Javascript function regularPolygonGeometry(n, innerColor, outerColor) th

Question

Write a Javascript function regularPolygonGeometry(n, innerColor, outerColor) that returns a Geometry object that represents an n-sided regular polygon. The polygon should be centered at the origin, lie in the xy-plane, and have radius 2 (the distance from the origin to each of the polygon's n vertices is equal to 2). Use your function in a three.js program that produces an 8-sided (or 12- or 16- or whatever-sided) polygon. Colors get interpolated from innerColorassigned to the polygon's center to outerColor assigned to its n vertices. The geometry of the following image was produced by regularPolygonGeometry(8, red, blue) where the variables red and blue had been assigned the obvious colors.

Explanation / Answer

function regularPolygonGeometry(n,innerColor,outerColor){

var canvas=document.getElementById("canvas"); //here canvas is the name of the html5 tag id canvas where you want to insert shape;

var canvasShape=canvas.getContext("2d"); //drawing context of the canvas

canvasShape.beginPath();//begins the path of the shape

var xCenter=100,yCenter=100;//say center of the shape is 100,100

var radius=20;//radius of the shape

canvasShape.moveTo(100,100);//center of the shape

for(var i=0;i<=n;i++){ //to get n edges of the polygon

canvasShape.lineTo(xCenter+radius* Math.cos(i * 2 * Math.PI / n), yCenter+radius* Math.sin(i * 2 * Math.PI / n));//draw line from one point to another with center distance as radius

//you can add color over here also for edge shape

}

canvasShape.closePath();//to close path of the shape

canvasShape.fillStyle = innerColor; //fill shape with innerColor provided

canvasShape.strokeStyle = outerColor;//fill shape sides with outerColor provided

canvasShape.lineWidth = 1; //shape line width

canvasShape.stroke(); //draw shape

canvasShape.fill();//to fill color in the shape

}

Related Questions

Navigate

• Browse (All)
• Browse W
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.