You’ve found a dinosaur. This is one of my first posts about programming and the code quality is very poor, it is only here for archiving purposes.

Omdat vraagstuk 6 ingewikkeld is maar toch heel veel interesse wekt op twitter schrijf ik een artikel over hoe hij werkt. Action Script is nieuw voor mij dus verbeter mij daar waar nodig. Ook zijn er een hoop niet-gecommente stukken code. Snap jij dingen die er niet bij staan? Laat een comment achter met wat voor commentaar er bij welke code hoort!

Onder het script staat de /nog niet complete/ uitleg!

package {
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.filters.DisplacementMapFilter;
    import flash.geom.Point;

public class Vraagstuk6 extends Sprite {
    private var baseXPosition:Number;
    private var baseYPosition:Number;    
    private var numberOfOctaves:Number; 
    private var randomSeed:Number;
    private var backgroundStitching:Boolean;
    private var backgroundFractalNoise:Boolean;
    private var numberOfChannels:Number;
    private var backgroundGrayScale:Boolean;

    private var point1:Point;
    private var point2:Point;
    private var perlinOffset:Array;
    private var bitmapData:BitmapData;
    private var displacementFilter:DisplacementMapFilter;

    [Embed(source="pics/sunset.jpg")]
    private var SunsetPicture:Class;

    [Embed(source="pics/water.jpg")]
    private var WaterPicture:Class;

    private var water:Bitmap;
    private var sunset:Bitmap;
    private var perlin:Bitmap;

    public function Vraagstuk6()
    {

        stage.scaleMode = StageScaleMode.NO_SCALE;
        stage.align = StageAlign.TOP_LEFT;

        baseXPosition = 50;
        baseYPosition = 10;
        numberOfOctaves = 3;
        randomSeed = Math.random()*10;
        backgroundStitching = false;
        backgroundFractalNoise = false;  
        numberOfChannels = 1; 
        backgroundGrayScale = false;

        point1 = new Point(45, 34);
        point2 = new Point(50, 60);

        perlinOffset = new Array(point1, point2);

        sunset = new SunsetPicture();
        sunset.x = 0;
        sunset.y = 0;
        addChild(sunset);

        water = new WaterPicture();
        water.x = 0;
        water.y = sunset.height - water.height;
        addChild(water);

        bitmapData = new BitmapData(water.width, water.height, true, 0x00000000);

        addEventListener(Event.ENTER_FRAME, moveAndCalulatePerlinNoisePattern);
        addEventListener(Event.ENTER_FRAME, calculateDisplacementMapFilter);
    }

    private function moveAndCalulatePerlinNoisePattern(e:Event):void
    {
        perlinOffset[0].x-=.1;
        perlinOffset[0].y-=.4;

        perlinOffset[1].x+=.1;
        perlinOffset[1].y+=.4;

        bitmapData.perlinNoise(baseXPosition, baseYPosition, numberOfOctaves, randomSeed, backgroundStitching, backgroundFractalNoise, numberOfChannels, backgroundGrayScale, perlinOffset);
    }

    private function calculateDisplacementMapFilter(e:Event):void
    {
        displacementFilter = new DisplacementMapFilter(bitmapData, new Point(0, 0), 1, 1, 20, 20, "color");
        water.filters = [displacementFilter];
    }
}

regel 2 – 9 Hier importeer je alle benodigde classes, je boodschappenlijstje

regel 12 – 19 en 27 – 35 Hier defineer je de constante variabelen <- beetje tegenstrijdig, ik bedoel: de variabelen die niet veranderen.

regel 21 – 25 Hier defineer je de variabelen die per frame gaan veranderen

regel 40 – 41 Geef aan dat er geen scaling is, alles moet pixelbased. Ook ligt de 0 as linksboven.

regel 43 – 50 Geef waardes mee aan je constante variabelen.

regel 52 – 55 Geef aan wat de beginwaarden van je variabelen zijn (die ook echt gaan veranderen).

regel 67 Maak een plaatje net zo groot als het water met achtergrond kleur zwart ? (snapt iemand waarom?)

regel 69 – 70 Geef aan dat bij elk frame de onderstaande functie’s uitgevoerd moeten worden

regel 75 – 79 Vertel wat er per frame gaat veranderen aan de de elemtenten van de Array.

regel 81 Bouw de bitmap data opnieuw: je Array is veranderd, en dit is een eigenschap van de bitmap, als je dit nu opnieuw bouwt verandert je bitmap data omdat je Array ook veranderd is.

regel 86 Bouw de displacement filter opnieuw: je bitmap data is veranderd, en dit is een eigenschap van het displacement filter.

regel 87 Hetzelfde geldt voor water.filters

Samenvatting Wat er eigenlijk gebeurd is heel simpel. Je pakt een plaatje en bouwt er een filter overheen die noise aan het plaatje toevoegd. (zie photoshop – add noise). De noise heeft allemaal variabelen, en door de noise “positie” (variabele die iets zegt over waar de noise zich bevindt op het plaatje) elk frame te veranderen. Krijg je een geanimeerd beeld van het water. Elk frame zie je dus het plaatje met een noise filter eroverheen die elk frame veranderd.