Askmike.org

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 sommige IAM propedeuse studenten moeite hebben met programmeren in Action Script 3 ga ik een hoop posts maken om programmeren duidelijker te maken. Voor deeltoets 1 heb ik een sneeuw animatie gemaakt. Binnekort ga ik een post schrijven waar alle code in staat en waar ik stap voor stap uitleg wat alle code betekend. Maar eerst schrijf ik deze post waarin ik wat basis elementen vertel die mij enorm hebben geholpen.

Toen ik hier zo’n drie weken geleden aan begon had ik nauwelijks programmeerkennis, ik kon in ieder geval niet programmeren.

Hoe begin ik nou aan het maken van een animatie?

Zoals je waarschijnlijk al hebt ondervonden is programmeren best lastig, en al helemaal als je zelf iets moet gaan bedenken. Hoe begin je hier nou aan?

Het is belangrijk dat voordat je begint met coden je al weet wat je wilt gaan maken. Maak bijvoorbeeld een tekening van wat je uiteindelijk wil programmeren, je kan met pijlen aangeven dat objecten een bepaalde kant op moeten bijvoorbeeld.

Wat ik hierna heb gedaan is alles omschreven wat in mijn hoofd zit, gewoon in het Nederlands met een aantal regeltjes. Die regeltjes gaan om hoe je programmeert, dit doe je stap voor stap en heel logisch. Hier is een voorbeeld van wat ik bedoel: (het is een simpel voorbeeld, maar pas zodra je dit ECHT snapt kan je mooiere dingen maken)

Ik wil een animatie van een hond die heen en weer rent
Wat bedoel ik hiermee? Ik wil een animatie van een hond in een woonkamer die naar links rent en als hij het scherm uit is omdraait en naar rechts rent, en ga zo maar door. Als je op de hond klikt maakt hij een sprongetje.
Hoe gaat dit stap voor stap?

• In het begin is er een hond
• De hond is op het midden van het scherm
• Het scherm heeft een plaatje van een woonkamer
• De hond beweegt eerst naar rechts
• Als de hond rechts is spiegel hem en laat hem naar links gaan
• Als de hond links is spiegel hem en laat hem naar rechts gaan
• Wanneer iemand op de hond klikt, maakt de hond een sprongetje.

Als je goed kijkt zie je dat er een aantal dingen gebeuren die verband hebben met elkaar: de eerste drie stappen hebben met elkaar te maken, namelijk wanneer je animatie begint moeten deze drie dingen aanwezig zijn.

Daarna heb je een beweging en twee keer een als: we hebben van Justus geleerd dat alle beweging gaat via een of ander ENTER_FRAME event. Wat Justus heeft uitgelegd is dat animatie in flash een beetje nep is, wat er eigenlijk gebeurd is dat er een hoop net verschillende plaatjes (20 per seconde) achter elkaar worden gezet en het zo net lijkt of er animatie is. Dit plaatje heet een frame in ActionScript 3. Nu we dit weten moeten we eigenlijk ons lijstje met gebeurtenissen veranderen:

• In het begin is er een hond
• De hond is op het midden van het scherm
• Het scherm heeft een plaatje van een woonkamer
• Wanneer flash een nieuw frame maakt wordt de hond iets meer naar rechts neergezet
• Als de hond rechts is spiegel hem en laat hem naar links gaan
• Als de hond links is spiegel hem en laat hem naar rechts gaan
• Wanneer iemand op de hond klikt, maakt de hond een sprongetje.

De eerste drie stappen hebben we behandeld, vanaf de vierde stap zien we twee keer wanneer terugkomen. Dit is belangrijk: elke keer wanneer je wanneer gebruikt gebeurd er iets speciaals:

In het begin gebeurt er niks met deze stappen, alleen wanneer er IETS gebeurd ga je iets uitvoeren. Er gebeurt dus iets waar je op reageert. Dit IETS heet ook wel een event of trigger. Dit is belangrijk om even te onthouden.

Je hebt ook nog twee als stappen. in programmeren maken we hier een if statement van: dit is een “check” tooltje die “checkt” of er aan een bepaalde voorwaarde voldaan wordt. Maar wanneer moet dit check tooltje checken of de hond rechts of links het scherm uit is? Niet in het begin, want dan staat de hond nog stil. Ook niet als je klikt. Deze check moet uitgevoerd worden elke keer als je naar een nieuw frame gaat, de hond wordt immers ook elk frame van positie veranderd toch?

Hier is het vervolg waar je kan zien hoe ik dit stap voor stap in flash maak.

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.

You’ve found a dinosaur, this post is only here for archiving purposes. The content is outdated and is not applicable anymore.

this page is in Dutch because it is only relevant for Dutch IAM students.

We gaan programmeren! Veel studenten kijken hier tegenop, om dat zo veel mogelijk tegen te gaan zal ik op askmike.org veel informatie met betrekking tot Action Script 3.0 hosten. Ik ga proberen alle belangrijke informatie uit de hoorcolleges hier weer te geven zodat je alles nog rustig na kan lezen. Hier houd het niet bij op: als ik hoor dat veel mensen over bepaalde dingen heen struikelen zal ik ze hier uitgebreid proberen te behandelen zodat dit vak een eitje wordt.

Zelf kan ik nog niet programmeren, maar het idee trekt me heel erg en ik denk dat ik er later wel verder mee wil. de hoofdgedachte achter dit idee is “To teach is to learn twice” (wat ik onlangs in een hoorcollege hoorde), op deze manier probeer ik zelf beter te worden en ook nog iets af te geven aan anderen.