SM2220 Generative Art & Literature

The original Karl Sims particle video.

Impossible Nature - Jon McCormack

Topic 2: Ball class re-visit

Remember we have used this Class definition in the 6th class.

package sm2220 {
                     
   import flash.display.Sprite;
   import flash.events.Event;

   public class Ball extends Sprite {
 
      private var vx:Number;
      private var vy:Number;
      private var r:int;
      private var source:Object;
                   
      public function Ball(_p:Object, _x:int, 
         _y:int) {
         x = _x;
         y = _y;
         vx = Math.random()*20-10;
         vy = Math.random()*20-10;
         r = 20;
         source = _p;
         source.addChild(this);
         this.addEventListener(Event.ENTER_FRAME,
            onLoop);
         drawBall();
      }
                   
      private function onLoop(e:Event):void {
         x += vx;
         y += vy;
         if (x<r) {
             x = r;
             vx = -vx;
         } else if (x>stage.stageWidth-r) {
             x = stage.stageWidth-r;
             vx = -vx;
         }
         if (y<r) {
             y = r;
             vy = -vy;
         } else if (y>stage.stageHeight-r) {
             y = stage.stageHeight-r;
             vy = -vy;
         }
      }
                   
      private function drawBall():void {
         this.graphics.beginFill(0xffaa00,1);
         this.graphics.drawCircle(0,0,r);
      }
   }
}

Create a new Flash CS3 movie and create one instance of the Ball.

import sm2220.Ball;

var p1:Ball = new Ball(this,stage.stageWidth/2,
   stage.stageHeight/2);

Topic 3: Using the Ball class as Particle

Now rename the file Ball.as to Particle.as and replace the class name Ball to Particle.

package sm2220 {
                     
   import flash.display.Sprite;
   import flash.events.Event;

   public class Particle extends Sprite {
 
      private var vx:Number;
      private var vy:Number;
      private var r:int;
      private var source:Object;
                   
      public function Particle(_p:Object, _x:int, 
         _y:int) {
         x = _x;
         y = _y;
         vx = Math.random()*20-10;
         vy = Math.random()*20-10;
         r = 20;
         source = _p;
         source.addChild(this);
         this.addEventListener(Event.ENTER_FRAME,
            onLoop);
         drawParticle();
      }
                   
      private function onLoop(e:Event):void {
         x += vx;
         y += vy;
         if (x<r) {
             x = r;
             vx = -vx;
         } else if (x>stage.stageWidth-r) {
             x = stage.stageWidth-r;
             vx = -vx;
         }
         if (y<r) {
             y = r;
             vy = -vy;
         } else if (y>stage.stageHeight-r) {
             y = stage.stageHeight-r;
             vy = -vy;
         }
      }
                   
      private function drawParticle():void {
         this.graphics.beginFill(0xffaa00,1);
         this.graphics.drawCircle(0,0,r);
      }
   }
}

In the next step, we introduce the concept of life to the Particle class. We need one more variable,

life

The variable life can be a random integer within a specified range. For each ENTER_FRAME loop, it decrements 1. When it reaches 0, its life ends.

We should think of removing the object when its life comes to zero.

Topic 4: Remove an object instance

In the Particle class definition, we add the following:

Constructor Particle()

life = 10 + Math.round(Math.random()*50);

You can choose your own numbers to specify the minimum and maximum values for the life span.

Function onLoop()

life--;
if (life<0) {

   this.removeEventListener(Event.ENTER_FRAME,

      onLoop);

   source.removeChild(this);

}

Note the use of the two remove statements. The first one removes the event listener from the Particle. The second one asks the parent (source) to remove itself from the display.

It is not perfect. The object instance still exists in the memory even though it is not displayed on the stage. In order to have the garbage collection, we have to ask the parent to set itself to null.

We introduce a function removeParticle() in the main Flash movie. In the Particle class, it calls back the removeParticle() function to remove itself from the memory.

In the Flash movie, we have,

function removeParticle(_p:Particle):void {
  _p = null;
}

In the Particle class, we have,

life--;
if (life<0) {

   this.removeEventListener(Event.ENTER_FRAME,

      onLoop);

   source.removeChild(this);
   source.removeParticle(this);

}

Topic 5: Change the appearance

We introduce another variable step (Number) to decrease the alpha of the particle in each frame.

In the Constructor function,

step = 1.0/life;

In the onLoop() function,

alpha -= step;

We'll use the mouse to introduce interactivity by clicking on a point to create the particles.

import sm2220.Particle;

function removeParticle(_p:Particle):void {
   _p = null;
}

function makeParticles(e:MouseEvent):void {
   for (var i:int=0; i<MAX; i++) {
        var p:Particle = new Particle(this,e.stageX,
           e.stageY);
   }
}

final var MAX:int = 10;
stage.addEventListener(MouseEvent.CLICK,
   makeParticles);

Here is the movie.

Topic 6: Variation and creativity

The simple particle system is in place. All we have to do is to modify some of the details in the class definition to play with.

Let's save the the Particle class file into another name Particle2.

We introduce another set of variables:

ax, ay - acceleration
df - damping factor

ax = 0;
ay = 0.8;
df = 0.98;

vx += ax;
vy += ay;
vx *= df;
vy *= df;
x += vx;
y += vy;

Here is the movie of firework simulation.

In the Flash movie, we have changed the action to create the particles at the mouse location. We use a Boolean variable pressed to indicate if the mouse button is on or not. And two integer variables: mousex and mousey to store the current mouse location.

var pressed:Boolean = false;
var mousex:int = 0;
var mousey:int = 0;

stage.addEventListener(MouseEvent.MOUSE_DOWN,
toStart);
stage.addEventListener(MouseEvent.MOUSE_UP,
toStop);
stage.addEventListener(MouseEvent.MOUSE_MOVE,
toMove);
stage.addEventListener(Event.ENTER_FRAME,
makeParticles);

Try to implement above functions: toStart, toStop, toMove and makeParticles.

Topic 7: Another version

Save a new copy of the class into the name Particle3.

Change the ax, ay, vx, vy, such that the particles move upwards without the effect of gravity.

Modify the value of x in the construction function Particle3(), such that it may have a random offset from the mousex location.

Here is the movie for the flame simulation.

The last effect in the above movie is the blur filter. Here is the way to introduce filter to the stage.

var filter:BlurFilter = new BlurFilter(4,4,
BitmapFilterQuality.MEDIUM);
this.filters = [filter];

Topic 8: The use of force

In the above example, we have used a fixed force such as gravity, which is a constant value for ay. In this example, we introduce the use of force which may depend on other factors.

We add a forces() function call to the onLoop() function.

In this example, the defintion of forces() is,

private function forces():void {
   var dx:Number = source.mousex-x;
   var dy:Number = source.mousey-y;
   var td:Number = Math.sqrt(dx*dx+dy*dy);
   var ta:Number = Math.atan2(dy,dx);
   ax = td*0.005*Math.cos(ta);
   ay = td*0.005*Math.sin(ta);
}