December 23, 2009

Damaged Santa Robot










I know this is not quite Christmas spirit but I just watched "City of Ember" and had this mood of rusty machine so I drew this picture.

Lines: 3176
Dots: 316
Colors: 8
Average Line Length: 1 cm
Total Line Length: 33 meters
Color Map:




Progress:

--

December 09, 2009

Box2DFlashAC3 Physics - Hello World



My first physics project using Box2DFlashAC3 library.Box2DFlashAC3 is an open source physics library by Colin Northway. Box2DFlashAC3 is an Actionscript port of Erin Catto's c++ physics library Box2D.

Source Code:
helloWorld.as
helloWorld.fla

Box2DFlashAC3:
SourceForge download >>

Step by Step:

1. Prepare the project:
Create a project folder "helloWorld"

Download Box2DFlashAC3 and extract Box2D folder into flash class folder (FLASH_INSTALL_FOLDER\en\Configuration\ActionScript 3.0\Classes\Box2D)
or copy Box2D folder into current project folder (helloWorld/Box2D)


Create a scene file "helloWorld.fla"

In property editor, set the main class name to helloWorld. This tells flash compiler to look for Actionscript file "helloWorld.as" in the same folder.

Create an Actionscript file "helloWorld.as, and start editing it

2. Create a package, and a helloWorld class with constructor function hellowWorld():
package {
 
    // Built-in flash modules
    import flash.display.Sprite;
    import flash.text.TextField;
    import flash.events.Event;
    import flash.events.MouseEvent;

    // Box2D modules
    import Box2D.Dynamics.*;
    import Box2D.Collision.*;
    import Box2D.Collision.Shapes.*;
    import Box2D.Common.Math.*;
 
    public class helloWorld extends Sprite {

        public var m_world:b2World;  // world object
        public var m_iterations:int = 10;  // iterations for verlet intergration
        public var m_timeStep:Number = 1.0/30.0;  // time step
 
        public function helloWorld() {
            
            // Implement in step 3
        }

        public function Update(e:Event):void {

            // Implement in step
        }


        public function Reset(e:Event):void {

            // Implement in step
        }
    }
}

3.1 Start to implement helloWorld(), start with printing a Hello World Message:
var myText:TextField = new TextField();
myText.text = "Hello World - Click to reset particle position";
myText.x = 10;
myText.y = 10;
myText.width = 400;
myText.height = 20;
addChild(myText);

3.2 Construct a world object
// Create bounding box (AABB)
var worldAABB:b2AABB = new b2AABB();
worldAABB.lowerBound.Set(-1000.0, -1000.0);
worldAABB.upperBound.Set(1000.0, 1000.0);

// Define gravity
var gravity:b2Vec2 = new b2Vec2(0.0, 10.0);

// Allow bodies to sleep when rest
var doSleep:Boolean = true;

// Create world object
m_world = new b2World(worldAABB, gravity, doSleep);

3.3 Define variables to create bodies or body definitions:
var body:b2Body; // for rigid body
var bodyDef:b2BodyDef; // for body definition (position, density...)
var boxDef:b2PolygonDef; // to define box collision shape
var circleDef:b2CircleDef; // to define circle collision shape

3.4 Create ground static rigid body:
// Create ground body definition
bodyDef = new b2BodyDef();
bodyDef.position.Set(0, 11);

// Create box shape
boxDef = new b2PolygonDef();
boxDef.SetAsBox(30, 3);
boxDef.friction = 0.3;
boxDef.density = 0; // static bodies require zero density

// Attach ground sprite to body definition
bodyDef.userData = new PhysGround();
bodyDef.userData.width = 30 * 2 * 30; 
bodyDef.userData.height = 30 * 2 * 3; 
addChild(bodyDef.userData);

// Create ground body
body = m_world.CreateBody(bodyDef);
body.CreateShape(boxDef);

// Set body mass
body.SetMassFromShapes();

3.5 Iterate 100 dynamic bodies:
for (var i:int = 1; i < 100; i++) {     
    // Implement step 8~9 
}

3.6 Generic properties for dynamic rigid bodies:
// Create dynamic body definition
bodyDef = new b2BodyDef();
bodyDef.position.x = Math.random() * 13;
bodyDef.position.y = Math.random() * 5;

// Set random x/y for later
var rX:Number = Math.random() * 0.4 + 0.3;
var rY:Number = Math.random() * 0.4 + 0.3;

3.7 50% chance to create a box:
// If we are creating a box
if (Math.random() < 0.5) {

// Create shape definition
boxDef = new b2PolygonDef();
boxDef.SetAsBox(rX, rY);
boxDef.density = 1.0;
boxDef.friction = 0.5;
boxDef.restitution = 0.2;

// Attach library item to body definition
bodyDef.userData = new PhysBox();
bodyDef.userData.width = rX * 2 * 30; 
bodyDef.userData.height = rY * 2 * 30; 

// Create box body
body = m_world.CreateBody(bodyDef);
body.CreateShape(boxDef);
} 

3.8 Another 50% we create a circle:
// Else we create a circle
else {

// Create circle shape definition
circleDef = new b2CircleDef();
circleDef.radius = rX;
circleDef.density = 1.0;
circleDef.friction = 0.5;
circleDef.restitution = 0.2

// Attach library graphic to body definition
bodyDef.userData = new PhysCircle();
bodyDef.userData.width = rX * 2 * 30; 
bodyDef.userData.height = rX * 2 * 30; 

// Create circle body
body = m_world.CreateBody(bodyDef);
body.CreateShape(circleDef);
}

3.9 Finishing dynamic bodies creation
// Set body mass
body.SetMassFromShapes();

// Add user data to stage
addChild(bodyDef.userData);

4. Implement Update()
public function Update(e:Event):void {
// Update current step

    // Advent solver to next step
    m_world.Step(m_timeStep, m_iterations);
   
    // Go through body list and update sprite positions/rotations
    for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next){
        if (bb.m_userData is Sprite){
            bb.m_userData.x = bb.GetPosition().x * 30;
            bb.m_userData.y = bb.GetPosition().y * 30;
            bb.m_userData.rotation = bb.GetAngle() * (180/Math.PI);
        }
    }
}

5. Implement Reset()
public function Reset(e:Event):void {
// Reset body positions

// Go through body list and update sprite positions/rotations
    for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next){
        if (bb.m_userData is Sprite && bb.IsDynamic()){
            var newPos = new b2Vec2( Math.random() * 13,
                                     Math.random() * 5 );
            bb.SetXForm(newPos, 0);
        }
    }
}


--

December 08, 2009

Christmas Tree in front of Century Theater


Christmas Tree in front of Century Theater
Originally uploaded by foundway

This is when they finished decorating the tree.

San Mateo Christmas Tree


San Mateo Christmas Tree
Originally uploaded by foundway


I happened to see they using fire fighter's ladder truck to decorate the Christmas tree. The tree is not that tall... I can't help to wonder: can't they just use a ladder?
--

Christmas Cookie Decoration


Christmas Cookie Decoration
Originally uploaded by foundway

We did this at work. My cookie is not so happy though...

December 01, 2009

Sitting Alone













I drew this very fast just wanted to try drawing something different. Keeping the background simple so I can wrap it up quickly.


Media: Facebook Graffiti, Wacom Tablet CTE-430
Dimensions
: 580x270 pixel
Model:
 N/A

Lines:
 1609
Dots: 63
Colors: 14
Average Line Length: 1 cm
Total Line Length: 51 meters
Draw Time: about 10 min

Color Map:


Progress:

--

ActionScript Cheat Sheet

Very useful ActionScript 3 cheat sheet stealing from actionscriptcheatsheet.com:
--

    Box2DFlashAS3

    Box2DFlashAS3 is an open source port of Erin Catto's powerful c++ physics library Box2D. It seems like a good start for me to start my own physics games.

    Links:
    Tutorials:
    --