# Grid And Mask?

**URL:** <https://forum.kirupa.com/t/grid-and-mask/330629>\
**Category:** flash\
**Created:** [February 20, 2013, 6:04am UTC](https://forum.kirupa.com/t/grid-and-mask/330629 "2013-02-20T06:04:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![na\_il](https://avatars.discourse-cdn.com/v4/letter/n/bc79bd/32.png) [@na\_il](https://forum.kirupa.com/u/na_il)\
**Post date:** [February 20, 2013, 6:04am UTC](https://forum.kirupa.com/t/grid-and-mask/330629/1 "2013-02-20T06:04:31Z")

</div>

Okay so I have a grid that spans the whole canvas. I have a mc that can be dragged and snapped to each point. But don’t want the user to be able to drag across the whole canvas. So I was wondering if there is a way to use a bitmap img to mask out intersecting points on the grid and create a silhouette of the image. Or is it possible to generate a “grid silhouette” of a bitmap? Here is a simple pic to demonstrate what I’m trying to do.

Here is code

```auto

// Original content from www.flashandmath.com 
// by Doug Ensley and Barbara Kaskosz

//Part I -- Set up the board

var bWidth:Number = 400;
var bHeight:Number = 240;

var grid:Number = 40; // Size of the grid and number of lattice points in each direction
var dotsWide:Number = Math.ceil(bWidth/grid) - 1;
var dotsHigh:Number = Math.ceil(bHeight/grid) - 1;

var board:Sprite = new Sprite();
var myPoint:Sprite = new Sprite();

stage.addChild(board);
board.addChild(myPoint);

board.graphics.lineStyle(1,0);
board.graphics.beginFill(0xCCCCCC);
board.graphics.drawRect(0,0,bWidth,bHeight);
board.graphics.endFill();

// Add a bunch of circles to represent lattice points
board.graphics.beginFill(0x000000);
for (var i=1; i<=dotsHigh; i++) {
    for (var j=1; j<=dotsWide; j++) {
        board.graphics.drawCircle(j*grid,i*grid,0.5);
    }
}
board.graphics.endFill();

board.x = 10;
board.y = 10;

myPoint.graphics.lineStyle(1,0);
myPoint.graphics.beginFill(0xFF5555);
myPoint.graphics.drawCircle(0,0,8);
myPoint.graphics.endFill();
myPoint.x = goodX(50);
myPoint.y = goodY(50);

// Part II -- Add drag and drop functionality

myPoint.addEventListener(MouseEvent.MOUSE_DOWN, startMove);

function startMove(evt:MouseEvent):void {
    stage.addEventListener(MouseEvent.MOUSE_MOVE, pointMove);
}

function pointMove(e:MouseEvent):void {
    myPoint.x = goodX(board.mouseX);
    myPoint.y = goodY(board.mouseY);
    e.updateAfterEvent();
}

stage.addEventListener(MouseEvent.MOUSE_UP, stopAll);

function stopAll(e:MouseEvent):void {
    stage.removeEventListener(MouseEvent.MOUSE_MOVE, pointMove);
}

// Part III -- Helper functions to stay within boundary AND snap to grid

function goodX(inX:Number):Number {
    if (inX > grid*dotsWide) {
        return grid*dotsWide;
    }
    if (inX < grid) {
        return grid;
    }
    return grid*Math.round(inX/grid);
}

function goodY(inY:Number):Number {
    if (inY > grid*dotsHigh) {
        return grid*dotsHigh;
    }
    if (inY < grid) {
        return grid;
    }
    return grid*Math.round(inY/grid);
}

```

\*\*THANKS! \*\*(-: