Area calculation

[dzy2566]

I'm not sure that this is could be considered a challenge, but I'm finding it rather difficult. So I thought maybe while I work on it, you all might want to try along with me.

I created this small program, where everything is done at run-time, that allows the user to chose a 3,4,5, or 6 sided figure. This figure can be re-sized into any shape. I want to create a function that calculates the area everytime the shape is changed.

My movie has two frames.

//frame one
var numNodes;

//custom Node Class
function NodeInfo(x,y){
this.x = x;
this.y = y;
}

//setup node "table"
//triangle info
triNode_1 = new NodeInfo (269,140);
triNode_2 = new NodeInfo (396,302);
triNode_3 = new NodeInfo (142,302);
var triangle = [triNode_1,triNode_2,triNode_3];
//square info
sqNode_1 = new NodeInfo (162,130);
sqNode_2 = new NodeInfo (369,130);
sqNode_3 = new NodeInfo (369,312);
sqNode_4 = new NodeInfo (162,312);
var square = [sqNode_1,sqNode_2,sqNode_3,sqNode_4];
//pentagon info
pentNode_1 = new NodeInfo (274,92);
pentNode_2 = new NodeInfo (401,182);
pentNode_3 = new NodeInfo (371,324);
pentNode_4 = new NodeInfo (177,324);
pentNode_5 = new NodeInfo (147,182);
var pentagon = [pentNode_1,pentNode_2,pentNode_3,pentNode_4,pentNo de_5];
//pentagon info
hexNode_1 = new NodeInfo (274,82);
hexNode_2 = new NodeInfo (435,143);
hexNode_3 = new NodeInfo (435,274);
hexNode_4 = new NodeInfo (274,348);
hexNode_5 = new NodeInfo (114,274);
hexNode_6 = new NodeInfo (114,143);
var hexagon = [hexNode_1,hexNode_2,hexNode_3,hexNode_4,hexNode_5, hexNode_6];

_root.createTextField("title",300,220,210,135,50);
title.html = true;
title.htmlText = "<font color='#990000'size='15'><b>Select a Shape</b></font>";

//create shape buttons
this.createEmptyMovieClip("tri",200);
tri.lineStyle(1);
tri.beginFill("0xE8E8E8", 50);
tri.lineTo(50,80);
tri.lineTo(-50,80);
tri.lineTo(0,0);
tri._x = 150;
tri._y = 100;
tri.onRelease = function(){
numNodes = 3;
_root.play();
}
this.createEmptyMovieClip("sq",201);
sq.lineStyle(1);
sq.beginFill("0xE8E8E8", 50);
sq.lineTo(80,0);
sq.lineTo(80,80);
sq.lineTo(0,80);
sq.lineTo(0,0);
sq._x = 350;
sq._y = 100;
sq.onRelease = function(){
numNodes = 4;
_root.play();
}
this.createEmptyMovieClip("pent",202);
pent.lineStyle(1);
pent.beginFill("0xE8E8E8", 50);
pent.lineTo(40,30);
pent.lineTo(32,80);
pent.lineTo(-32,80);
pent.lineTo(-40,30);
pent.lineTo(0,0);
pent._x = 150;
pent._y = 250;
pent.onRelease = function(){
numNodes = 5;
_root.play();
}
this.createEmptyMovieClip("hex",203);
hex.lineStyle(1);
hex.beginFill("0xE8E8E8", 50);
hex.lineTo(40,20);
hex.lineTo(40,60);
hex.lineTo(0,80);
hex.lineTo(-40,60);
hex.lineTo(-40,20);
hex.lineTo(0,0);
hex._x = 390;
hex._y = 250;
hex.onRelease = function(){
numNodes = 6;
_root.play();
}
stop();

//frame two ------------------------------------------------------------------

var mouseIsDown = 0;
//clear stage
removeMovieClip("tri");
removeMovieClip("sq");
removeMovieClip("pent");
removeMovieClip("hex");
title.removeTextField();

function placeNodes(){
for(i=1; i<numNodes+1; i++){
createNode(i);
if(numNodes == 3){
setNodePos(["node"+i],triangle[i-1].x,triangle[i-1].y);
}else if(numNodes == 4){
setNodePos(["node"+i],square[i-1].x,square[i-1].y);
}else if(numNodes == 5){
setNodePos(["node"+i],pentagon[i-1].x,pentagon[i-1].y);
}else{
setNodePos(["node"+i],hexagon[i-1].x,hexagon[i-1].y);
}

}

/*setNodePos("node1",70,70);
setNodePos("node2",270,70);
setNodePos("node3",270,270);
setNodePos("node4",70,270);*/
}
placeNodes();

function setNodePos(clipName, x, y){
_root[clipName]._x = x;
_root[clipName]._y = y;
}

function createNode(nc){
var node = ["node"+nc]
//trace(node);
node = this.createEmptyMovieClip(node, nc);
node.lineStyle(1);
node.moveTo(5,0);
node.beginFill("0xff0000", 50);
node.lineTo(0,5);
node.lineTo(-5,0);
node.lineTo(0,-5);
node.lineTo(5,0);
node.useHandCursor = false;
node.onPress = function (){
mouseIsDown = 1;
this.startDrag(true,21,54,528,378);
}
node.onRelease = function (){
mouseIsDown = 0;
drawLine();
calcSegs();
this.stopDrag();
}
node.createTextField("info",nc+100,5,2,75,20);
}
mouseL = new Object();
mouseL.onMouseMove = function(){
if(mouseIsDown == 1){
drawLine();
}
}
Mouse.addListener(mouseL);

function drawLine(){
_root.clear();
_root.lineStyle(1);
_root.beginFill("0xE8E8E8", 50);
_root.moveTo(node1._x, node1._y);
for(i=2;i<numNodes+1;i++){
_root.lineTo(_root["node"+i]._x,_root["node"+i]._y);
}
_root.lineTo(node1._x, node1._y);
updateNodeCoords();

}

function updateNodeCoords(){
for(i=1; i<numNodes+1; i++){
_root["node"+i].info.text = "(" + Math.floor((_root["node"+i]._x - 21)) + "," + Math.floor((_root["node"+i]._y - 54)) + ")";
if(_root["node"+i]._x >= 491){
_root["node"+i].info._x = -55;
}else{
_root["node"+i].info._x = 5;
}
if(_root["node"+i]._y >= 370){
_root["node"+i].info._y = -10;
}else{
_root["node"+i].info._y = 2;
}
}

}

function distance(xPos1,yPos1,xPos2,yPos2){
var b,h,hyp;
b = xPos1-xPos2;
h = yPos1-yPos2;
hyp = Math.floor(Math.sqrt((b*b)+(h*h)));
return hyp;
}

//segment array
var segments = new Array();
function calcSegs(){
for(i=1;i<numNodes;i++){
segments[i-1] = distance(_root["node"+i]._x,_root["node"+i]._y,_root["node"+(i+1)]._x,_root["node"+(i+1)]._y);
}
var lastSeg = distance(_root["node"+numNodes]._x,_root["node"+numNodes]._y,_root.node1._x,_root.node1._y);
segments[numNodes-1] = lastSeg;
//trace("1_2 = " + segments[0]);
//trace("2_3 = " + segments[1]);
//trace("3_1 = " + segments[2]);
}

//initial draw
drawLine();
stop();



Anyone up to the challenge?

[dzy2566]

1) The reason you find the coordinates repositioning themselves is that I drew one thing, a border. So they are written to avoid overlapping the border.

2) I thought it would be a good idea to have the program figure out the best way to divide each shape into smaller triangles. Then, it could use the law of cosines to calculate the area of each triangle. Then it would be a matter of adding the areas up.

It's a work in progress, but I thought I'd toss it into the mix. Bring it :) .