TwelvestoneFlash

Fun with Perlin Noise, Threshold, and gradients


Sign in

  • Waiting for Godot ( 720 k posts )
    Just conversation.
  • Thunder Dome ( 23 k posts )
    Photoshop Tennis and Collabs.
  • Photography ( 4.8 k posts )
    For all you shutterbugs, sh...
  • Flash ( 18 k posts )
    ActionScripting to tweens, ...
  • Front End ( 5.8 k posts )
    general front end design an...
  • Back End ( 9.6 k posts )
    serverside scripting, progr...
  • Projects and Theory ( 12 k posts )
    This forum is for discussio...
  • FAQ ( 269 posts )
    All those nagging questions...
  • Design ( 17 k posts )
    graphics & all aspects of g...
  • Purgatory ( 3.6 k posts )
    12stone Jail, feel free to ...
es!
 
2008-07-31

This is partially an experiment I am working on in making a tile-based game, and partly, maybe, just a little bit, inspired by BIT-101's new site.

http://www.eccesignum.org/flash/tile_game/080731/agate_0.gif

http://www.eccesignum.org/flash/tile_game/080731/agate_1.gif

http://www.eccesignum.org/flash/tile_game/080731/agate_2.gif

package { import flash.display.; import flash.events.; import flash.geom.*; [SWF(width=480,height=480,frameRate=50,backgroundColor=0xffffff)] public class ColorSwitcher extends Sprite { private var mapWidth:Number = 480; private var mapHeight:Number = 480; public function ColorSwitcher() { addEventListener(Event.ENTER_FRAME,init); }

    private function init(e:Event):void {
        if(!stage) return;
        removeEventListener(Event.ENTER_FRAME,init);

        var bd:BitmapData = new BitmapData(mapWidth,mapHeight);
        bd.perlinNoise(
            mapWidth,   //  width
            mapHeight,  //  height
            8,      //  octaves
            Math.round(Math.random()*100000),   //  random seed
            false,  //  stitch
            false,  //  fractal noise
            7,      //  channels
            true    //  grayscale
        );
        var bm:Bitmap = new Bitmap(bd);
        addChild(bm);

        var gs:Shape = new Shape();
        var m:Matrix = new Matrix();
        m.createGradientBox(255,1,0,0,0);
        gs.graphics.beginGradientFill(
            GradientType.LINEAR,
            [0xffffff,0x000000,0xffffff,0x000000,0xffffff,0x000000,0xffffff,0x000000,0xffffff,0x000000,0xffffff],
            [1,1,1,1,1,1,1,1,1,1,1],
            [0,25,50,75,100,125,150,175,200,225,255],
            m
        );
        gs.graphics.drawRect(0,0,255,1);
        gs.graphics.endFill();
        gs.y = 220;

        var gb:BitmapData = new BitmapData(255,1);
        gb.draw(gs);

        for(var i:Number=0;i<255;i++) {
            var currentColor:Number = 0xff<<24 | i<<16 | i<<8 | i;
            bd.threshold(
                bd,
                new Rectangle(0,0,mapWidth,mapHeight),
                new Point(0,0),
                "==",
                currentColor,
                gb.getPixel32(i,0),
                0xffffffff,
                true
            );
        }
    }
}

}

Play around with the values in the Perlin Noise and in the arrays which build the gradient. I think they kind of look like agates.

arigato
 
2008-07-31

wow... very cool. I thought of agate right away, neato!

Arsis
 
2008-08-01

:thumbsoup:

pyrogen
 
2008-08-01

that's cool es!

es!
 
2008-08-13

add "polar distortion" to the list of things to have fun with:

http://www.eccesignum.org/flash/gyruss/080812/screenshot.jpg

This shot taken from an ongoing Gyruss clone project.

I grabbed Bit-101s Polar Distort class and tweaked it to make it twirl the image as it does its polar distort thing. Skaboom: practically infinite variations in a vortex background for a game.

bit-101
 
2008-08-13

sweet! i'm going to have to play with that twirl mod.

es!
 
2008-08-13

I posted the change on your blog. Basically, this is it:

Change this line: angle = Math.atan2(dy, dx) - seam;

to this: angle = Math.atan2(dy, dx) - seam+(Math.PI/270*dist);

Sorry, you must be a member to post to a conversation. Either log in or sign up to get involved.
TwelvestoneFlash

Fun with Perlin Noise, Threshold, and gradients