Imperfect Boxes
Wednesday, April 7th, 2010Today I was thinking about a simple way to draw imperfect boxes and this is what I came up with:
This technique is pretty straight forward and just uses lerp and a random offset:
Actionscript:
-
graphics.lineStyle(0,0x000000);
-
rect(this.graphics, new Rectangle(100,100,200,200));
-
rect(this.graphics, new Rectangle(320, 100, 50, 200), 3);
-
rect(this.graphics, new Rectangle(390, 100, 50, 200));
-
rect(this.graphics, new Rectangle(460, 100, 100, 100));
-
rect(this.graphics, new Rectangle(460, 210, 100, 120));
-
-
var g0:Shape = makeGrid();
-
g0.x = 200;
-
g0.y = 120;
-
-
var g1:Shape = makeGrid(15, 9, 31);
-
g1.x = 100;
-
g1.y = 320;
-
-
-
function makeGrid(num:int = 9, cols:Number=3, size:Number=30):Shape{
-
var grid:Shape = new Shape();
-
grid.graphics.lineStyle(0,0x000000);
-
-
addChild(grid);
-
var smallSize:Number = size - 10;
-
for (var i:int = 0; i<num; i++){
-
var xp:Number = (i % cols) * size;
-
var yp:Number = int(i / cols) * size;
-
rect(grid.graphics, new Rectangle(xp,yp,smallSize,smallSize), 3);
-
}
-
return grid;
-
}
-
-
function rect(g:Graphics, rect:Rectangle, res:Number = 8):void{
-
var a:Point = new Point(rect.left, rect.top);
-
var b:Point = new Point(rect.right, rect.top);
-
var c:Point = new Point(rect.right, rect.bottom);
-
var d:Point = new Point(rect.left, rect.bottom);
-
-
var diff:Number = ( b.x - a.x);
-
var dab:Number = int(diff/res);
-
var xp:Number, yp:Number;
-
var action:String;
-
trace(dab);
-
for (var i:int = 0; i<dab; i++){
-
action = "lineTo";
-
if (i == 0){
-
xp = a.x;
-
yp = a.y;
-
action = "moveTo"
-
}
-
xp = a.x + (diff) * (i/dab);
-
yp = a.y + Math.random() * 5 - 2;
-
g[action](xp, yp);
-
}
-
diff = c.y - b.y;
-
dab = int(diff / res);
-
for (i = 0; i<dab; i++){
-
xp = b.x + Math.random() * 5 - 2;
-
yp = b.y + (diff) * (i/dab);
-
g.lineTo(xp, yp);
-
}
-
diff = d.x - c.x;
-
dab = Math.abs(int(diff / res));
-
for (i = 0; i<dab; i++){
-
xp = c.x + (diff) * (i/dab);
-
yp = c.y + Math.random() * 5 - 2;
-
g.lineTo(xp, yp);
-
}
-
diff = a.y - d.y;
-
dab = Math.abs(int(diff / res));
-
for (i = 0; i<dab; i++){
-
xp = d.x + Math.random() * 5 - 2;
-
yp = d.y + (diff) * (i/dab);
-
g.lineTo(xp, yp);
-
}
-
}
