Askmike.org

Bij het maken van erg ingewikkelde animatie’s kan je bijna niet meer om Particle Systems heen. Als je deze animatie’s toch wilt maken is het belangrijk dat je begrijpt hoe Particle Systems in elkaar zitten. In deze paper ga ik de volgende dingen behandelen:

• Wat is een Particle System? Hermeutisch onderzoek
• Metaforen Voorbeelden Sneeuw Code voorbeeld sneeuw in AS3
• Wat is een Particle System?
• Hermeutisch onderzoek

Om erachter te komen wat een Particle System is wend ik mij eerst tot het woordenboek. Het woordenboek wat ik heb gebruikt is “Webster’s New Explorer Dictionary and Thesaurus”, om te kijken wat dit woordenboek zegt over Particle Systems moeten we het begrip eerst opsplitsen.

Particle

1. A very small bit of matter.
2. A unit of speech (as an article, preposition, or conjunction) expressing some general aspect of meaning or some connective or limiting relation.

De eerste omschrijving komt heel dicht in de buurt met wat we ermee bedoelen. In het woordenboek wordt fysieke materie bedoeld. Binnen software komt dit sowieso niet voor, aangezien dit allemaal virtueel is. Wanneer we een animatie maken visualiseren we een bepaalde situatie, meestal zo echt mogelijk (zo nauw met de werkelijkheid als mogelijk). Zodat wanneer wij de animatie zien we ook kunnen inbeelden wat er op het scherm beweegt.

System

1. A group of units so combined as to form a whole and to operate in unison.
2. The body as a functioning whole; also: a group of bodily organs (as the nervous system) that together carry on some vital function.
3. A definite scheme or method of procedure of classification.
4. Regular method or order.

Ook bij Systems komt de eerste omschrijving het dichtst bij wat een Particle System is. A group of units staat in ons geval voor de particles. Wanneer een aantal dingen operate in unison dan gebeurd het tegelijk in een bepaald ritme. Dit is iets anders dan willekeurig (er kunnen wel willekeurige elementen verwerkt zijn in het systeem maar dit wordt dan gecontroleerd gedaan).

Binnen Particle Systems staat particle voor virtuele materie binnen een animatie die ons helpen bij het begrijpen van een ingewikkele animatie. En systems staat voor het feit dat al deze deeltjes met elkaar “samenwerken” om een bepaald resultaat in de vorm van een animatie te komen.

We zijn nu al een heel eind in onze ontdekking naar wat een Particle System is. We weten al dat je een Particle System kan inzetten wanneer je animatie’s maakt, dat het allemaal kleine deeltjes zijn (ala virtuele materie) die samenwerken in een systeem waardoor ze een groot geheel vormen (dit betekend niet perse dat de deeltjes niet meer visueel zijn te onderscheiden van het geheel).

Het is tenslotte ook belangrijk te weten dat een Particle System niet gelimiteerd is tot een animatie. In een statische afbeelding kan ook een Particle System zitten.

Elk particle system bestaat uit 2 onderdelen, namelijk:

• Een functie van het systeem
• De functies van de deeltjes

Voor de beeldvorming verwijs ik naar een metafoor: het menselijk lichaam. Hoewel dit niet echt een Particle System is, is het toch goed vergelijkbaar:

• De functie van je lichaam is om het lichaam in leven te houden jou in staat te stellen na te denken, rond te lopen, enz.
• Je lichaam heeft allemaal organen, in dit voorbeeld zijn deze organen alle deeltjes. Elk deeltje heeft zijn eigen functie, de longen hebben bijvoorbeeld als functie om het bloed van zuurstof te voorzien. Deze functie staat los van de functie van het lichaam om te kunnen bewegen.

Op deze manier kan je beter begrijpen dat elk deeltje zijn eigen rol heeft binnen het collectief.

Het is wel belangrijk om te weten dat bij een Particle System bijna altijd alle deeltjes dezelfde functie hebben. Maar omdat het er meer zijn geeft dit het systeem toch een andere functie. Ook is het belangrijk te beseffen dat de functie binnen een Particle System altijd is om iets te visualiseren, naar wat dat verschilt per Particle System.

Dit wordt makkelijker als we naar het metafoor van een zwerm bijen. De hele zwerm heeft als functie om het voortbestaan van zichzelf en van de koningin te garanderen. Maar elke bij heeft een aantal functies zoals eten zoeken en de koningin bevruchten. Voorbeelden van Particle Systems zijn rook, vuur, bewegend water, regen, sneeuw en vallende bladeren. Ik ga het Particle System sneeuw nader toelichten.

Sneeuw Sneeuw is een goed voorbeeld van een Particle System. Het bestaat zoals elk Particle System uit twee onderdelen:

• Het systeem: sneeuw, er wordt de illusie gewekt dat het sneeuwt.
• Deeltjes: dit wordt gedaan door een hele hoop sneeuwvlokken langzaam over het beeld te laten bewegen.

Doordat er een hoop vlokken zijn wordt het een geheel, een systeem. Dit voorbeeld heb ik gemaakt voor deeltoets 1 en is hier te bekijken: http://askmike.org/sneeuw.swf.

Ik haal een aantal truukjes uit met de vlokjes om het Systeem realistischer te maken:

1. Hoe snel de vlokken bewegen is afhankelijk van hun grootte. Dit doe ik om de illusie van diepte te creëren binnen het hele systeem.
2. Hoe ver de vlokken heen en weer bewegen is afhankelijk van hun grootte, ook om diepte te maken.
3. Hoe hard de deeltjes wegwaaien (maak een sleep beweging met de muis) is afhankelijk van hoe groot de deeltjes zijn.

Op deze manieren heb ik een extra laag binnen mijn Particle System toegevoegd met als doel het Particle System realistischer te animeren. Hierdoor is het makkelijker geworden om er sneeuw in te herkennen.

Hoe wordt zoiets gerealiseerd in ActionScript 3? Zoals je inmiddels weet is een Particle System een verzameling deeltjes. Meestal zijn het er een hoop. Om een hoop deeltjes te maken kan je gebruik maken van het datatype Array. In mijn sneeuw geval staan alle vlokken random op het scherm, dit is een techniek die vaak gebruikt wordt bij Particle Systems. Ik maak een Array aan en daar stop ik aan de hand van een for loop een hele hoop sneeuwvlokken in. Omdat bij elke vlok opnieuw een random bepaald wordt hoef ik dit niet voor elk vlokje met de hand te doen. Hoe ziet dat in code eruit?

for (var i:int = 0; i < 1000; i++) 
    {
        vlok = new Balletje();
        //maak de beginx random
        vlok.beginx = Math.random() * breedte;
        //tijdens het maken is x gelijk aan beginx
        vlok.x = vlok.beginx;
        //maak y random en zet hem 1 scherm boven het zichtbare scherm
        vlok.y = Math.random() * hoogte -- hoogte;
        //als de angle niet random is per vlok bewegen ze allemaal in dezelfde zwiep
        vlok.angle = Math.random() * 10;
        //hoe hard vlok zwiept is afhankelijk van de grootte (om diepte te creeeren)
        vlok.zwiepBeweging = vlok.grootte * 7;
        addChild(vlok);
        //stop hem in de array
        Sneeuwvlokken.push(vlok);
    }

Vervolgens ga ik elk frame de hele Array af met een for each loop om elk vlokje te verplaatsen op basis van zijn huidige positie. Hoe ziet dat eruit?

for each (var vlok:Balletje in Sneeuwvlokken) 
        {   //zwiep beweging op de x as
        vlok.x = vlok.beginx + Math.sin(vlok.angle) * vlok.zwiepBeweging;
        //val beweging op y as, de snelheid is afhankelijk van de grootte om diepte te scheppen 
        //(kleinere zijn niet kleiner maar verder weg en die zie je minder snel vallen)
        vlok.y += vlok.grootte /2;
        //tel iets bij de angle op (om zo te kijken waar in de zwiepbeweging de sneeuw moet zijn)
        //er hoeft geen modulus aan te pas te komen omdat sin een patroon is
        vlok.angle += .1;
        //neem de wind mee in de x as berekening
        vlok.beginx += wind/7*vlok.grootte;
        //als de vlok onder het scherm komt, spawn hem boven op de random x as

Misschien is het je opgevallen dat ik de for each loop niet helemaal netjes heb afgesloten. Dit komt omdat er ook nog drie checks zijn die ervoor zorgen dat de sneeuw die onder het beeld verdwijnt boven (random gepositioneerd op de x as) verschijnen. Hetzelfde geldt voor de linker en rechterkant. Dit heb ik weggelaten omdat dit niet nodig is binnen dit voorbeeld.

Ik heb sneeuw als voorbeeld genomen omdat de deeltjes (vlokken) duidelijk los te bekijken zijn en het hele systeem ook goed te begrijpen is. Het is een simpel maar effectief voorbeeld.