I am trying to populate a var "polyCenter" with the latlon for the center of a polygon and its driving me insane..
var paths = MapToolbar.features["shapeTab"]["shape_1"].getPath();
var i;
for (i = 0; i < paths.length; i++) {
bounds.extend(paths[i]);
}
polyCenter = bounds.getCenter();
alert(polyCenter);
It keeps returning (0,-180) for some reason..
Mathematically an irregular polygon does not have a center. They do however have a centroid (center of gravity) that is usually the approximate center.
Here is the equation to calculate the centroid of a polygon:
The equation in JavaScript:
function GetCentroid(paths){
var f;
var x = 0;
var y = 0;
var nPts = paths.length;
var j = nPts-1;
var area = 0;
for (var i = 0; i < nPts; j=i++) {
var pt1 = paths[i];
var pt2 = paths[j];
f = pt1.lat() * pt2.lng() - pt2.lat() * pt1.lng();
x += (pt1.lat() + pt2.lat()) * f;
y += (pt1.lng() + pt2.lng()) * f;
area += pt1.lat() * pt2.lng();
area -= pt1.lng() * pt2.lat();
}
area /= 2;
f = area * 6;
return new google.maps.LatLng(x/f, y/f);
}
Here is an updated fiddle based on #Argiropoulos answer.
Take a look at an example although this is not the center of a polygon except if it's a rectangle
Related
I new in the game dev and cocos.
So, I have following grid:
1|2|3|4
5|6|7|8
9|1|2|3
User can scroll row or columns around.
For example, if user scroll first row by one position we got following grig:
4|1|2|3
5|6|7|8
9|1|2|3
How I can do in with cocos2d js? Which components use for that?
Now I try create grid:
for (var i = 0; i < 16; i++) {
var tile = new NumberTile(i);
tile.pictureValue = gameArray[i];
this.addChild(tile, 0);
tile.setPosition(49 + i % 4 * 74, 400 - Math.floor(i / 4) * 74);
}
And add to game Layer.
NumberTile - its sprite with number. But I don't know how to scroll rows and columns around.
use a vertical scrollview as container, add add horizontal scrollviews into it.
var HelloWorldLayer = cc.Layer.extend({
sprite: null,
ctor: function() {
// 1. super init first
this._super();
var count = 10;
var size = cc.winSize;
var w = size.width;
var h = size.height / 4;
var c_container = new cc.Node();
c_container.setContentSize(cc.size(w, h * count));
var container = new cc.ScrollView(size, c_container);
container.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);
for (var i = 0; i < count; i++) {
var child = new cc.Node();
child.setContentSize(cc.size(w, h));
this.createSubScrollView(child);
child.setPosition(cc.p(0, h * i));
container.addChild(child);
}
var f1 = container.getAnchorPoint();
container.setPosition(cc.p(0, 0));
this.addChild(container);
return true;
},
createSubScrollView: function(container) {
var size = container.getContentSize();
var count = 10;
var w = size.width / 4;;
var h = size.height;
var c_container = new cc.Node();
c_container.setContentSize(cc.size(w * count, h));
var scroll = new cc.ScrollView(size, c_container);
scroll.setDirection(cc.SCROLLVIEW_DIRECTION_HORIZONTAL);
for (var i = 0; i < count; i++) {
var child = new cc.Node();
child.setContentSize(cc.size(w, h));
var color = i % 2 == 0 ? cc.color.RED : cc.color.GREEN;
var c = new cc.LayerColor(color, w, h);
child.addChild(c);
var label = new cc.LabelTTF("" + i, "Arial", 20);
label.setPosition(cc.p(w * 0.5, h * 0.5));
child.addChild(label);
child.setPosition(cc.p(w * i, 0));
scroll.addChild(child);
}
container.addChild(scroll);
},
});
add here is what it acts
I am placing 4 objects through a for-loop on the y-axis. Each object is placed randomly on the y-axis using the following method:
myObject.y = stage.stageHeight * Math.random();
The problem is sometimes the objects are too far from each other and other times they are over lapping each other. What I want to achieve is to always have some distance between each of the two objects. I want that distance to be always greater than a specific value. I have been trying to work this out for 2 days but couldn't figure it out.
Here is what I tried to get rid of overlapping:
function createObstacles():void
{
var currentElements:Array = [];
var myRect:Obstacle;
for(var k:int = 0; k < 4; k++)
{
myRect = new Obstacle();
addChild(myRect);
myRect.x = stage.stageWidth + 30;
myRect.y = stage.stageHeight * Math.random();
obstacles.push(myRect);
currentElements.push(myRect);
}
checkOverlap(myRect,currentElements);
}
function checkOverlap(rect:Obstacle, elements:Array)
{
for(var n:uint = 0; n < elements.length; n++)
{
if(rect.hitTestObject(elements[n]))
{
rect.y = stage.stageHeight * Math.random();
}
}
}
The elements still overlap. About always keeping a distance between each of the two objects, I just couldn't get my head around that. I googled but nothing relevant returned. Any kind of help would be greatly appreciated.
You can set the object's y based on the previous object'y value.
function createObstacles():void
{
var currentElements:Array = [];
var myRect:Obstacle;
var minDistance:int = 5;//the min distance between two objects
var maxDistance:int = 10;//the max distance between two objects.
for(var k:int = 0; k < 4; k++)
{
myRect = new Obstacle();
addChild(myRect);
myRect.x = stage.stageWidth + 30;
if (k == 0)
{
// make sure four objects in one page
myRect.y = stage.stageHeight/2 * Math.random();
}
else
{
var distance:int = (maxDistance - minDistance)*Math.random() + minDistance;
myRect.y = obstacles[k - 1].y + distance;
}
obstacles.push(myRect);
currentElements.push(myRect);
}
}
I am making a tool which obscures an image with squares. What I want to happen is to have a bouncing ball which hits the squares and makes them disappear. However, the removeChild command isn't working right. I set it up to populate the image with empty movie clips and colorize them. However, when I click the square, I am running into problems with the parent/child. I keep running into this error. "The supplied DisplayObject must be a child of the caller." I cannot think of a good way to assign the eventListeners to each individual squares. I'm sure it is obvious. Here is my code. Thank you in advance
EDIT:If I get it to work, it deletes all instances of the square, not just the one I clicked.
Here is my code
var mc:MovieClip = bgIMG;
var bd:BitmapData = new BitmapData(mc.width,mc.height);
bd.draw(mc);
var _img:Bitmap = new Bitmap(bd);
var _imgNodes:Array = [];
var _tiledImg:MovieClip = container_tiled_img;
var pad:int = 0;
var rows:int = 10;
var cols:int = 10;
var zero:Point = new Point();
createImgNodeGrid(rows, cols, pad);
pixelateNodes(_imgNodes);
function removeMC(e:MouseEvent)
{//removes the movie clip
trace(e.currentTarget.x);
stage.removeChild(e.currentTarget.parent.parent);
}
function pixelateNodes(nodes:Array = null):void
{
for each (var node:Bitmap in nodes)
{
node.bitmapData.fillRect(node.bitmapData.rect, avgColor(node.bitmapData));
}
}
function avgColor(src:BitmapData):uint
{
var A:Number = 0;
var R:Number = 0;
var G:Number = 0;
var B:Number = 0;
var idx:Number = 0;
var px:Number;
for (var x:int = 0; x < src.width; x++)
{
for (var y:int = 0; y < src.height; y++)
{
px = src.getPixel32(x,y);
A += px >> 24 & 0xFF;
R += px >> 16 & 0xFF;
G += px >> 8 & 0xFF;
B += px & 0xFF;
idx++;
}
}
A /= idx;
R /= idx;
G /= idx;
B /= idx;
return A << 24 | R << 16 | G << 8 | B;
}
function createImgNodeGrid(rows:int = 1, cols:int = 1, pad:Number = 0):void
{
var w:Number = _img.width / rows;
var h:Number = _img.height / cols;
var numNodes:int = rows * cols;
_imgNodes = [];
var nodeCount:int = 0;
for (var i:int = 0; i < rows; i++)
{
for (var j:int = 0; j < cols; j++)
{
// get area of current image node
var sourceRect:Rectangle = new Rectangle(i * w, j * h, w, h);
// copy bitmap data of current image node
var tempBd:BitmapData = new BitmapData(w,h,true);
tempBd.copyPixels(_img.bitmapData, sourceRect, zero);
// place image node bitmap data into sprite
var imgNode:Bitmap = new Bitmap(tempBd);
imgNode.x = i * (w + pad);
imgNode.y = j * (h + pad);
// store each image node
//_imgNodes.push(imgNode);
_imgNodes[nodeCount++] = imgNode;
// add each image node to the stage
_tiledImg.addChild(imgNode);
_tiledImg.addEventListener(MouseEvent.CLICK,removeMC);
}
}
}
The problem you have is your are adding the event to the parent of the node(_tiledImg).
function createImgNodeGrid(rows:int = 1, cols:int = 1, pad:Number = 0):void
{
var w:Number = _img.width / rows;
var h:Number = _img.height / cols;
var numNodes:int = rows * cols;
_imgNodes = [];
var nodeCount:int = 0;
for (var i:int = 0; i < rows; i++)
{
for (var j:int = 0; j < cols; j++)
{
// get area of current image node
var sourceRect:Rectangle = new Rectangle(i * w, j * h, w, h);
// copy bitmap data of current image node
var tempBd:BitmapData = new BitmapData(w,h,true);
tempBd.copyPixels(_img.bitmapData, sourceRect, zero);
// place image node bitmap data into sprite
var imgNode:Bitmap = new Bitmap(tempBd);
imgNode.x = i * (w + pad);
imgNode.y = j * (h + pad);
// store each image node
//_imgNodes.push(imgNode);
_imgNodes[nodeCount++] = imgNode;
// you need a container since you can not attach event listeners to a BitMap
var sprite:Sprite = new Sprite()
sprite.mouseChildren = false;
sprite.addEventListener(MouseEvent.CLICK,removeMC);
sprite.addChild(imgNode);
// add each image node to the stage
_tiledImg.addChild(sprite);
// _tiledImg.addEventListener(MouseEvent.CLICK,removeMC);
}
}
}
function removeMC(e:MouseEvent)
{
var target:Sprite = event.currentTarget as Sprite;
target.parent.removeChild(target)
}
If I am following correctly, you are trying to remove an imgNode on MouseClick. If that is the case, you should change removeMC function to this:
function removeMC(e:MouseEvent)
{
//removes the movie clip
trace(e.target);
_tiledImg.removeChild(event.currentTarget);
}
Also, you shouldn't add the listener within the for loop, but instead add it outside of the for loops (since you are just adding the listener to _tiledImg and that doesn't change in the for loops).
A easy way to always remove a child from the right parent is to do as following
function removeMC(e:MouseEvent)
{
//removes the movie clip
var target:Sprite = event.currentTarget as Sprite;
target.parent.removeChild(target)
}
I am trying to solve the 8 queens problem (where you select a space and it will put down 8 queens so that none of them will hit each other) but i am having trouble making the chess board.
right now i have this
var chessBoard:Array = new Array();
chessBoard["row1"] = [1,0,1,0,1,0,1,0];
chessBoard["row2"] = [0,1,0,1,0,1,0,1];
chessBoard["row3"] = [1,0,1,0,1,0,1,0];
chessBoard["row4"] = [0,1,0,1,0,1,0,1];
chessBoard["row5"] = [1,0,1,0,1,0,1,0];
chessBoard["row6"] = [0,1,0,1,0,1,0,1];
chessBoard["row7"] = [1,0,1,0,1,0,1,0];
chessBoard["row8"] = [0,1,0,1,0,1,0,1];
and i need to know two things
a) will i be able to use this for the problem (will i be able to have it check if any queens will collide by its array coordinates)
b) how do i draw the squares on the chess board to correspond with the numbers
var chessBoard:Array = new Array();
// Setup the array
for(var i:int = 0; i < 4; i++)
{
chessBoard.push(new Array(1,0,1,0,1,0,1,0));
chessBoard.push(new Array(0,1,0,1,0,1,0,1));
}
// Size of the tile
var tileSize:int = 20;
function createChessBoard():void
{
// Itterate through the "chessBoard"-array
for(var i:int = 0; i < chessBoard.length; i++)
{
// Itterate through the arrays in the "chessBoard"-array
for(var j:int = 0; j < chessBoard[i].length; j++)
{
// Create new tile
var tile:Sprite = new Sprite();
// Create the color variable and check to see what value to put
// in it dependingin the value of the current itteration - 1 or 0
var tileColor:int = chessBoard[i][j] * 0xffffff;
// Tile-coloring-setup-thingie-routine
tile.graphics.beginFill(tileColor);
tile.graphics.drawRect(0, 0, tileSize, tileSize);
tile.graphics.endFill();
// Tile positioning
tile.x = j * tileSize;
tile.y = i * tileSize;
// Adding tile to the displaylist
addChild(tile);
}
}
}
// Run function
createChessBoard();
You can assume that cell is black when sum of its coordinates is odd and white if even:
function getColor(x, y) {
return (x + y) % 2 == 0 ? 0 : 1;
}
// or even
function getColor(x, y) {
return (x + y) % 2;
}
You could start with creating a Square class, this would enable you to give specific properties to each Square. You want to avoid having two pieces on one square for instance, you want to set the color, also you would need to know the coordinates such as a1, c4 etc...
To draw your Chessboard, you could create rows of Squares.
private function squares:Array = [];
private function addRow( black:Boolean , _y:int , rowName:String ):void
{
for( var i:int ; i < 8 ; ++i )
{
var sq:Square = new Square();
//alternate colors
if( black )
sq.color = 0;
else
sq.color = 0xffffff;
black = !black;
sq.x = i* sq.width;
sq.y = _y;
//save square Chess coordinates
sq.coord = {letter: rowName , number: i + 1}
addChild(sq);
//add the Square instance to an Array for further reference
squares.push( sq );
}
}
Then simply add the rows
private function createBoard():void
{
var black:Boolean;
var letters:Array = [ a , b , c , d , e , f , g , h ]
for( var i:int ; i < 8 ; ++i )
{
addRow( black , i * squareSize , letters[i] );
black = !black;
}
}
To add a Queen to a specific Square instance , use the squares Array.
I have several markers on my map and want to center dynamily each time I click on a selected point which show a bunch of markers group.
Does anyone know how to do that in As3?
You could try to use the a formula to get the centroid of the polygon drawn by your markers, assuming it's a polygon. If not, and they're a bunch of scattered points, you need to get the ones on that form the outer bounding segments first.Also, the code assumes the polygon is closed(loops), so the last point is your first point again.
function centreOfMass(polyPoints:Array):Point{
var cx:Number = 0;
var cy:Number = 0;
var area:Number = area(polyPoints);
var result:Point = new Point();
var i:Number,j:Number,n:Number = polyPoints.length;
var factor:Number = 0;
for(i = 0; i < n ; i++){
j = (i+1) % n;
factor = polyPoints[i].x * polyPoints[j].y - polyPoints[j].x * polyPoints[i].y;
cx += polyPoints[i].x + polyPoints[j].x * factor;
cy += polyPoints[i].y + polyPoints[j].y * factor;
}
area *= 6.0;
factor = 1 / area;
cx *= factor;
cy *= factor;
result.offset(cx,cy);//sets x and y to cx and cy
return result;
}
function area(polyPoints:Array):Number{
var i:int,j:int,n:int = polyPoints.length;
var area:Number = 0;
for(i = 0; i < n; i++){
j = (i+1) % n;
area += polyPoints[i].x * polyPoints[j].y;
area -= polyPoints[j].x * polyPoints[i].y;
}
area *= 0.5;
return area;
}
You create an array of points and you use the lat/lon coords as x,y coords. If you're using flash player 10, feel free to change the array into a Vector. and don't forget to do the import.flash.geom.Point.
I didn't come up with the code, I just ported what was on the amazing Paul Bourke website. Tons of handy stuff there.