The 7 AS3Dmod modifiers

Objective of the tutorial

In this tutorial we will give a taste of all the 7 modifiers that can be used with the AS3Dmod library. We will use a simple Sandy Plane in order to show the result after applying each single modifier (one at a time).

How to

Set up

I've placed the AS3Dmod library in the first tutorial zip file. So please refer to the first tutorial or visit the official AS3Dmod website.

example042.zip

The AS Code

In this section we report the AS code as a reference, and it will be explained in the next paragraph.

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageQuality;
	import flash.display.StageScaleMode;
	import flash.events.*;

	import com.as3dmod.ModifierStack;
	import com.as3dmod.plugins.sandy3d.LibrarySandy3d;
	import com.as3dmod.modifiers.Bend;
	import com.as3dmod.modifiers.Bloat;
	import com.as3dmod.modifiers.Noise;
	import com.as3dmod.modifiers.Perlin;
	import com.as3dmod.modifiers.Skew;
	import com.as3dmod.modifiers.Taper;
	import com.as3dmod.modifiers.Twist;
	import com.as3dmod.util.ModConstant;
	import com.as3dmod.util.Phase;	
	import com.carlcalderon.arthropod.Debug;

	import sandy.core.Scene3D;
	import sandy.core.scenegraph.Camera3D;
	import sandy.core.scenegraph.Group;
	import sandy.core.scenegraph.Shape3D;
	import sandy.materials.Appearance;
	import sandy.materials.ColorMaterial;
	import sandy.materials.Material;
	import sandy.materials.attributes.LineAttributes;
	import sandy.materials.attributes.MaterialAttributes;
	import sandy.primitive.Box;
	import sandy.primitive.Plane3D;	

	public class Example042 extends Sprite {

		private var scene:Scene3D;
		private var c:Plane3D;
		
		// variable for as3Dmod
		private var choose:int = 0;
		private var m:ModifierStack;
		private var w:Twist;
		private var wph:Phase;
		private var b:Bend;
		private var bph:Phase;
		private var blt:Bloat;
		private var bltph:Phase;
		private var n:Noise;
		private var p:Perlin;
		private var s:Skew;
		private var sph:Phase;
		private var t:Taper;
		private var tph:Phase;
		
		
		
		
		
		public function Example042() {
			stage.quality = StageQuality.LOW;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			// let's add the buttons::
			var myButton01:MyTwistBtn = new MyTwistBtn();
			myButton01.name="twist"; myButton01.x = 40; myButton01.y = 50; addChild(myButton01);
			var myButton02:MyBendBtn = new MyBendBtn();
			myButton02.name="bend"; myButton02.x = 40; myButton02.y = 100; addChild(myButton02);
			var myButton03:MyBloatBtn = new MyBloatBtn();
			myButton03.name="bloat"; myButton03.x = 40; myButton03.y = 150; addChild(myButton03);
			var myButton04:MyNoiseBtn = new MyNoiseBtn();
			myButton04.name="noise"; myButton04.x = 40; myButton04.y = 200; addChild(myButton04);
			var myButton05:MyPerlinBtn = new MyPerlinBtn();
			myButton05.name="perlin"; myButton05.x = 40; myButton05.y = 250; addChild(myButton05);
			var myButton06:MySkewBtn = new MySkewBtn();
			myButton06.name="skew"; myButton06.x = 40; myButton06.y = 300; addChild(myButton06);
			var myButton07:MyTaperBtn = new MyTaperBtn();
			myButton07.name="taper"; myButton07.x = 40; myButton07.y = 350; addChild(myButton07);
		
			// add listener to buttons
			myButton01.addEventListener(MouseEvent.CLICK, myClickReaction);
			myButton02.addEventListener(MouseEvent.CLICK, myClickReaction);
			myButton03.addEventListener(MouseEvent.CLICK, myClickReaction);
			myButton04.addEventListener(MouseEvent.CLICK, myClickReaction);
			myButton05.addEventListener(MouseEvent.CLICK, myClickReaction);
			myButton06.addEventListener(MouseEvent.CLICK, myClickReaction);
			myButton07.addEventListener(MouseEvent.CLICK, myClickReaction);
		
            
			
			scene = new Scene3D("myScene", this, new Camera3D(stage.stageWidth, stage.stageHeight), new Group("root"));
			
			var materialAttr:MaterialAttributes = new MaterialAttributes(new LineAttributes(1, 0x49a51c, 1));
			var material:Material = new ColorMaterial(0x27590e, 1, materialAttr);
			
			var materialAttrb:MaterialAttributes = new MaterialAttributes(new LineAttributes(1, 0x49a51c, 1));
			var materialb:Material = new ColorMaterial(0x27590e, 1, materialAttrb);
			
			var app:Appearance = new Appearance(material, materialb);
			c = new Plane3D( "thePlane", 400, 400, 15, 15, Plane3D.XY_ALIGNED );

			
			c.enableBackFaceCulling = false;
			c.rotateZ = 90;
			c.rotateX = 60;
			c.rotateY = -45;
			c.z = 400;
			c.x = 20;
			c.appearance = app;
			
			m = new ModifierStack(new LibrarySandy3d(), c);
			
			scene.root.addChild(c);
			addEventListener(Event.ENTER_FRAME, renderAll);
		}

		private function renderAll(event:Event):void {
			if (choose==1){ 
			      wph.value += 0.10;
			      w.angle = Math.PI / 8 * wph.phasedValue; }
			else if (choose==2) {
				  bph.value += 0.10;
				  b.force = bph.phasedValue/2; }
			else if (choose==3) {
				  bltph.value += 0.10;
				  blt.x = bltph.phasedValue*150; }
			else if (choose==6) {
				  sph.value += 0.10;
				  s.force = sph.phasedValue * 600; }	  
			else if (choose==7) {
				  tph.value += 0.10;
				  t.force = tph.phasedValue; }	  
				
			m.apply();
			scene.render();
		}
		
		function myClickReaction (e:MouseEvent):void{
		  // remove previous modifier		  
		  m.clear();
		  
		  if (e.currentTarget.name == "twist")
		  {
			choose=1;
			w = new Twist(Math.PI / 2);
			wph = new Phase();
			m.addModifier(w);
		  } else if (e.currentTarget.name == "bend")
		  {
			choose=2;
			b = new Bend(0,0.5);
			bph = new Phase();
			m.addModifier(b);
		  } else if (e.currentTarget.name == "bloat") 
		  {
			choose=3;
			blt = new Bloat();
			bltph = new Phase();
			blt.x = 0; blt.y = 0; blt.z =45;
			blt.r = 100;
			m.addModifier(blt);
		  } else if (e.currentTarget.name == "noise") 
		  {
			choose=4;
			n = new Noise(40);
			//n.setFalloff(1,0);
			m.addModifier(n);
		  }  else if (e.currentTarget.name == "perlin") 
		  {
			choose=5;
			p = new Perlin(1);
			m.addModifier(p);
		  }  else if (e.currentTarget.name == "skew") 
		  {
			choose=6;
			s = new Skew(0);
			sph = new Phase();
			m.addModifier(s);
		  } else if (e.currentTarget.name == "taper") 
		  {
			choose=7;
			t = new Taper(1);
			t.power=2;
			tph = new Phase();
			m.addModifier(t);
		  }
		  
		  
		 } // end function myClickREaction
	}
}

Examining the code

Part of the code is responsible to react to the click of the 7 button I have placed on the library of the .fla files, but I will not go over this code since it is pretty simple too, it just sets the variable named choose to let the rendering engine know which modifier to use. So let's investigate the 7 modifiers.

The Twist Modifier

 if (e.currentTarget.name == "twist")
{
  choose=1;
  w = new Twist(Math.PI / 2);
  wph = new Phase();
  m.addModifier(w);
}
...
...
 
if (choose==1){ 
  wph.value += 0.10;
  w.angle = Math.PI / 8 * wph.phasedValue; }

The entire second tutorial of this series is devoted to this modifier, so I will not explain it here.

The Bend Modifier

  else if (e.currentTarget.name == "bend")
  {
    choose=2;
    b = new Bend(0,0.5);
    bph = new Phase();
    m.addModifier(b);
  }
...
...
 
else if (choose==2) {
  bph.value += 0.10;
  b.force = bph.phasedValue/2; }

We have learned this modifier with the first tutorial. Here we have just made dynamic the force parameter of this modifier.

The Bloat Modifier

  else if (e.currentTarget.name == "bloat") 
  {
    choose=3;
    blt = new Bloat();
    bltph = new Phase();
    blt.x = 0; blt.y = 0; blt.z =45;
    blt.r = 100;
    m.addModifier(blt);
}
...
...
 
else if (choose==3) {
  bltph.value += 0.10;
  blt.x = bltph.phasedValue*150; }

This modifier allows to transform your object with the shape of a sphere. As far as I've understood you define the center of the sphere by setting the x, y, z parameters. Then you define the radius of the sphere by setting the r parameter and the work is done. There is also an a parameter but honestly I haven't got any clue if its usage (seams like a zooming factor, but I'm not sure how it works). Anyhow in my example I'm moving the center of the sphere reproducing the example I saw that makc did!

The Noise Modifier

  else if (e.currentTarget.name == "noise") 
  {
     choose=4;
     n = new Noise(40);
     //n.setFalloff(1,0);
     m.addModifier(n);
 }

This modifier is pretty useful since it is already a dynamic modifier, since it will move randomly your object without implementing and phasing. You can set up the force of the modifier and the falloff. By playing with the last parameter I have been able to add the noise on different adages of the Plane3D.

The Perl Modifier

  else if (e.currentTarget.name == "perlin") 
  {
     choose=5;
     p = new Perlin(1);
     m.addModifier(p);
 }

Also this one is a dynamic modifier. If you read the implementation class it will move your object based on it's color. Honestly I have no clue what this means, but it has a cool effect and can be used for some fancy transformation. Maybe more expert “color” guys will teach me better how to use this modifier.

The Skew Modifier

else if (choose==6) {
  sph.value += 0.10;
  s.force = sph.phasedValue * 600; }	 
...
...
 else if (e.currentTarget.name == "skew") 
 {
   choose=6;
   s = new Skew(0);
   sph = new Phase();
  m.addModifier(s);

This modifier applied on the plane seams like a simple Blending modifier, but it is not, since if you look very carefully the object does not only bend, but it stretches too.

The Taper Modifier

else if (choose==7) {
   tph.value += 0.10;
   t.force = tph.phasedValue; }	
...
...
 else if (e.currentTarget.name == "taper") 
{
  choose=7;
  t = new Taper(1);
  t.power=2;
  tph = new Phase();
  m.addModifier(t);
}

The Taper modifier produces a tapered contour by scaling both ends of an object's geometry. I have found this article, very useful in explaining what this modifier is.

This is it! Let’s see our result now.

The output

Click on each “button” and see the result!