Category Archives: pixel manipulation

Interesting Texture

By Zevan | August 8, 2009

Actionscript:

var canvas:BitmapData = new BitmapData(1000,1000,false, 0x000000);
addChild(new Bitmap(canvas));
scaleX = scaleY = .5;
 
var w:int = canvas.width;
var w10:int = w * 60;
var size:int = canvas.width * canvas.height;
for (var i:int = 0; i<size; i++){
    var xp:int = i % w;
     
    var yp:int = int(i / w);
    var c1:int = (255/8) * (Math.cos(xp* Math.PI/180 * 2) + Math.sin(yp*yp/w10));
    if (c1 <0) c1 = 256 - c1;
    c1 = (c1 <<1 | c1) ;
    canvas.setPixel(xp, yp, c1 <<16 | c1 <<8 | c1 );
}
var m:Matrix = new Matrix();
m.scale(1,-1);
m.translate(0,canvas.height);
var clone:BitmapData = canvas.clone();
canvas.draw(clone, m, null, BlendMode.SUBTRACT);
clone.draw(canvas);
clone.applyFilter(clone, clone.rect, new Point(0,0), new BlurFilter(10,10,1));
canvas.draw(clone, null, null, BlendMode.ADD);

Having one of those days where everything I code doesn't look right to me... took a little break from other work and created this very unoptimized abstract texture... no animation so here is a bitmap:

Also posted in BitmapData, setPixel | Tagged actionsnippet, as3, flash | Leave a comment

Perlin Outlines

By Zevan | July 31, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width = 600, height=600, backgroundColor=0xCCCCCC, frameRate=24)]
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
var blur:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight, false, 0x000000);
addChild(new Bitmap(canvas, "auto", true));
 
var w:int = canvas.width 
var hw:int = w / 2;
var size:int = w * w;
var seed:Number = Math.random()*100;
var pnt:Point = new Point();
var dy:Number = 0, dx:Number = 0;
var blr:BlurFilter = new BlurFilter(10,10,1);
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
    
    dx += (mouseX - dx) / 4;
    dy += (mouseY - dy) / 4;
    canvas.lock();
    canvas.perlinNoise(hw,hw,2,seed,false, false, 1, true, [new Point(dx, dy), new Point(-dx, -dy)]);
    var pix:Vector.<uint> = canvas.getVector(canvas.rect);
    for (var i:int = 0; i<size; i++){
        var col:uint = 255 - pix[i] <<4 & 0x00FF00;
        pix[i] = col <<8 | col | col>> 8;
    }
    canvas.setVector(canvas.rect, pix);
    blur.copyPixels(canvas, canvas.rect, pnt);
    blur.applyFilter(blur, blur.rect, pnt, blr);
    canvas.draw(blur, null, null, BlendMode.DIFFERENCE);
    canvas.draw(canvas, null, null, BlendMode.INVERT);
    canvas.unlock();
}

This is actually an optimized variation on some recent posts that made use of perlin noise. You can get a wide range of effects by changing just the BlendMode values alone.... I particularly like this combination of BlendModes because it reminds me a bit of a terrain map...

Have a look at the swf...

Also posted in BitmapData, Vector | Tagged actionscript, as3, flash | Leave a comment

Another Perlin Texture

By Zevan | July 29, 2009

CLICK HERE TO COPY

Actionscript:

var canvas:BitmapData = new BitmapData(1200,1200,false, 0x000000);
addChild(new Bitmap(canvas));
 
scaleX = scaleY = 0.5;
var w:int = canvas.width 
var hw:int = w / 2;
var hhw:int = hw / 2;
var size:int = canvas.width * canvas.width;
 
canvas.perlinNoise(hhw,hhw,1,Math.random()*100,false, false, 1, true);
 
for (var i:int = 0; i<size; i++){
    var xp:int = i % w;
    var yp:int = int(i / w);
    var col:uint =  canvas.getPixel(xp, yp) / (-20|i+xp)>> 8 & 0xFF
    canvas.setPixel(xp, yp, col <<16 | col <<8 | col);
}
 
canvas.applyFilter(canvas, canvas.rect, new Point(0,0), new BlurFilter(4,4,1));
var blur:BitmapData = canvas.clone();
blur.applyFilter(blur, blur.rect, new Point(0,0), new BlurFilter(10,10,1));
 
canvas.draw(blur, null, null, BlendMode.DARKEN);

This is a variation on yesterdays post. I think it's time to optimize this and see how it does in real time...

Here is what this snippet will draw:

Also posted in BitmapData, misc, setPixel | Tagged actionscript, as3, flash | 2 Comments

drawTriangles() Terrain

By Zevan | July 9, 2009

CLICK HERE TO COPY

Actionscript:

[SWF(width=500,height=500,backgroundColor=0x333333, frameRate=40)]
var terrain:Shape = Shape(addChild(new Shape()));
terrain.x = terrain.y = 250;
var rows:int = 60;
var size:int = rows + 1;
var vertNum:int = size * size;
var polySize:Number = 5;
var gridWidth:Number = polySize * rows;
var halfWidth:Number = gridWidth / 2;
var verts:Vector.<Number> = new Vector.<Number>();
var pVerts:Vector.<Number> = new Vector.<Number>();
var indices:Vector.<int> = new Vector.<int>();
var uvs:Vector.<Number> = new Vector.<Number>();
var uvts:Vector.<Number> = new Vector.<Number>();
var tex:BitmapData = new BitmapData(gridWidth, gridWidth, false, 0x000000);
var pix:int = gridWidth * gridWidth;
var perlin:BitmapData = new BitmapData(gridWidth, gridWidth, false, 0x000000);
// generate the texture and the terrain
function generate():void{
    tex.fillRect(tex.rect, 0x000000);
    var i:Number, xp:Number, yp:Number;
    for (i = 0; i<pix; i++){
        xp = i % gridWidth;
        yp= int(i / gridWidth);
        var dx:Number = xp - gridWidth / 2;
        var dy:Number = yp - gridWidth / 2;
        var d:Number = 255 - Math.sqrt(dx * dx + dy * dy) / halfWidth* 255;
        if (d <0) d = 0;
        if (d> 255) d = 255;
        var c:uint = uint(d);
        tex.setPixel(xp, yp, c <<16 | c <<8 | c);
    }
    perlin.perlinNoise(100,100,3,Math.random()*100,false,false,7,true);
    perlin.draw(perlin, null, null, BlendMode.SCREEN);
    tex.draw(perlin, null, null, BlendMode.MULTIPLY);
    // calculate verts, uvs and indices
    var vIndex:int = 0;
    var uvIndex:int = 0;
    indices = new Vector.<int>();
    for (i = 0; i<vertNum; i++){
        var xMod:Number = i % size;
        xp = xMod * polySize;
        yp = int(i / size) * polySize;
        verts[vIndex++] = xp - halfWidth;
        verts[vIndex++] = yp - halfWidth;
        verts[vIndex++] = tex.getPixel(xp, yp) & 0xFF;
        uvs[uvIndex++] = xp /  gridWidth;
        uvs[uvIndex++] = yp / gridWidth;
        if (xMod != rows){
              indices.push(i, i+1, i+size, i+1, i+size+1, i+size);
        }
    }
}
generate();
stage.addEventListener(MouseEvent.MOUSE_DOWN, onGenerate);
function onGenerate(evt:MouseEvent):void{ generate() };
var m:Matrix3D = new Matrix3D();
var rot:Number = 0;
addEventListener(Event.ENTER_FRAME, onLoop);
function onLoop(evt:Event):void {
        m.identity();
        var destRot:Number = mouseX / stage.stageWidth * 90;
        if (destRot <0) destRot = 0;
        if (destRot> 90) destRot = 90;
        rot += (destRot - rot) * 0.2;
        m.appendRotation(rot,Vector3D.Z_AXIS);
        m.appendRotation(60,Vector3D.X_AXIS);
        Utils3D.projectVectors(m, verts, pVerts, uvts);
        with(terrain.graphics){
            clear();
            beginBitmapFill(tex, null, false, true);
            drawTriangles(pVerts, indices, uvs, TriangleCulling.NEGATIVE);
        }
}

This snippet draws a pretty simple isometric terrain using fp10 graphics stuff and perlin noise.

Have a look at the swf here...

Also posted in BitmapData, Graphics, Vector, setPixel | Tagged actionscript, as3, flash | 4 Comments

Category Archives: pixel manipulation

Interesting Texture

Perlin Outlines

Another Perlin Texture

drawTriangles() Terrain

Search

Pages

Recent Posts

Categories

Archives

RSS Feeds