Wwwebber's Blog

Free Online Mortgage Calculator

wwwebber — Tue, 24 Jan 2012 10:50:19 +0000

I wanted to write a quick post about a very cool free online mortgage calculator – If, like me, you are not the most knowledge about amortization tables, 30 vs 15 year mortgages, and the like, then this calculator might help out a bit. It not only shows the monthly payments, but also creates charts showing the amortization schedule.

Very cool. Check it out.

Box2d 2.1 How to use a b2Controller

wwwebber — Fri, 09 Jul 2010 02:51:38 +0000

Box2d 2.1 brought some awesome improvements
1) improved class structure.
2) buyouncy support
3) a set of Controller Classes that are well described by the docs as ” a convience for encapsulating common per-step functionality.” (read about them here)

These improvements were actually worth the fact that none of your prior Box2d code (and I mean none) would compile with the new class structure.

If you used earlier versions of Bo2D, you already used something like these controllers–the Gravity Vector that you passed to the world object at construction.
This was a b2Vec2 (the gravity) that the world applied to all non-static objects. Ie the walls wouldn’t be affected by the gravity vector but all the moving objects would be affected by a constant force downwards (unless your gravity had an unusual orientation)

There are several types of controllers and they all extends b2Controller . The TestBuoyancy class that comes with the TestBed shows an example of how to use the b2BuoyancyController .

All of the controllers have the following methods

AddBody(body:b2Body):void
RemoveBody(body:b2Body):void

I was interested in using a b2ConstantAccelController. There aren’t really any examples out there for this (at least that I could find) so here’s how easy it is to implement a b2ConstantAccelController–which will just apply an additional vector each time step to any bodies added to that controller.

Now, unlike the GravityVector you can arbitrarily add and remove objects from the controller. How could this be useful? Imagine that you have gusts of wind blowing sideways…you can add your objects to a Contoller and have them pushed sideways…then when the wind passes you could remove them from that controller.

How to create a b2ConstantAccelController :

//construct object and its acceleration vector
var myAccelController:b2ConstantAccelController = new b2ConstantAccelController();
const WIND_VEC :b2Vec2 = new b2Vec2(10,0);
//associate controller with vector
myAccelController.A = WIND_VEC

Henceforth, all b2bodies that are stored in myAccelController will have the WIND_VEC applied to them during the b2World.step() function .. you don’t have to do anything else except add and remove bodies to the controller.

//now let’s add something to the Controller
myAccelController.AddBody(someB2Body);

…when you want to remove the body
myAccelController.RemoveBody(someB2Body);

Actionscript 3 Tween Library Skinner’s Gtween vs Greensock’s tweenlite

wwwebber — Mon, 05 Jul 2010 12:34:19 +0000

Just wanted to add a little extra feed back for anyone who is currently trying to decide on an Actionscript 3 tween library. There are many other to choose from. I spent some time over the last month playing with both Grant Skinner’s GTween library and GreenSock’s TweenLight library . In a nutshell, you can’t go wrong with either one. Both are awesome and I’m glad someone did almost all that heavy lifting!

However, after using both libraries over the course of the development of my most recent online maths games – Rj The Robot on the topic of how to combine like terms.

First off, why both libraries ROCK!
-Awesome levels of customization of tween types (sinusodal, Bounce etc..) the differences here are small. At the time of this post, Greensock has some that the GTween library does not .
- Optimized performace.

How they Differ

Object Model
Greensock– You can use either static based methods to create tweens or use good old OOP to create tween objects.
GTween –it uses an object model, though a static based interface is also available

ie–they are pretty much the same here.

Visualizers
Greensock wins this–it comes with an awesome component that let’s you visualize tweens and will actually output the code needed to create the tween! Go Greensock (see what I mean here)
GTween–Do not think anything like this is provided.

Events
Greensock- TweenLite does not include an event system. However, if events are important to you then you just use GreenSock’s TweenMax (also free).
GTween- has a great event system.

Error reporting
Greensock- Hands down wins in the experiments I ran. If you pass Greensock a null object, it will throw an Error reporting the null reference.
GTween- In my tests, Gtween silently did nothing when I tried to tween a null object.
The winner here is clearly the Greensock library. Addendum: It turns out there is a reason for Gtween accepting null objects –read comments below. That said, Greensock allows the same chaining of events but reports null pointers.

In the end, you really can’t go wrong with either library. They both support object oriented syntax, chaining of tweens,and event dispatching and listening (Greensock only does this with the TweenMax..which is also free). Greensock does have a few extra tween types , the awesome visualizer as well as some amazing plugins –all of which led me to go with using Greensock.

If I you know of any other differences that I missed (and I know there must be many), please fire off a quick comment.

Using Actionscript to make Subscripts with Flash’s Text Layout Framework

wwwebber — Sat, 05 Jun 2010 01:10:05 +0000

Here’s a quick post on on some new Actionscript functionality that takes advantage of Flash’s new Text Layout FrameWork to create subscript and superscipt in the new types of text fields that you can create–These new things aren’t the TextField() that you are used to but rather are part of this whole new, much more sophisticated framework.. I used Flash CS5, but this should work with CS4 also. Apparently, the Text Layout Framework (which is just a component that you can install with the extension manager) will work with CS4.

This post will show you how to use Actionscript to perform this task. There are already lots of videos up on web showing designers how to use the Flash IDE to do this..so here’s how to code it.

What our code will produce:

I have made several math based flash programs, and it has always been a pain in the butt to deal with exponents and subscripts. It has definitely been a long time coming–the ability to create sub and superscripts in a Flash. Now with the new TextLayout Framework you can do all sorts of things including subscripts!. I needed to learn how to do this for a new maths game I was working on Rj The Robot-Since this was a math game, I needed to be able to write exponents in dynamic text fields…so let’s make some subscripts in Flash!

Just Tell me the Steps

Step 1) Download The Text Layout Component here (http://labs.adobe.com/downloads/textlayout.html) Note: do not install the ‘open source’ version, go down the page a bit to get the “text layout component“

Step 2) use the Flash Extension Manager to install the “Text Layout Flash Component.mxp” file…and then restart flash.

Step 3) Open up a Flash File , then open up the components panel (window-> components) and open up the “standard components” and drag an instance of the “textlayout” component onto the stage. (After you have done this you can actually delete the component from the stage…we just needed to make sure the component was in our library…I assume you could also just drag the component directly to the library to achieve this )

Ok, now you can use all of the cool text layout features that we will need to be able to make a Subscript in Flash.

Step 4) Now a bit of Actionscript. I am not going to go over all of the details of how the Text Frame Work works(the two links below explain the framework in greater detail).

Download the Source Code here

Good links on TextLayout
Adobe Docs
link 1
link 2

Here’s the code for Main

package
{
import flash.display.LineScaleMode;
import flash.display.Sprite;
import flashx.textLayout.elements.ParagraphElement;
import flashx.textLayout.elements.SpanElement;
import flashx.textLayout.elements.TextFlow;
import flashx.textLayout.formats.CharacterFormat;

import flash.display.DisplayObject;
import fl.controls.TextLayout;

/* textLayout_flash is the base class for the Text Layout component. If you bring up the properties on the TextLayout Component in the library, you will see this.*/

public class MainTxt extends Sprite
{

public function MainTxt()
{

var myTextComponent:TextLayout;
// Instantiate the textLayout_flash class to create a TextLayout Component.
myTextComponent = new TextLayout();

// Add the new component to the Stage.
var myTextComponentOnStage:DisplayObject = addChild(myTextComponent);
// Get the Text Flow from the TextLayout Component.
var textFlow:Object = myTextComponent.textFlow;
var span0:SpanElement = textFlow.getFirstLeaf();
span0.text = “E=MC”;

//get reference to ‘root’ ParagraphElement of the TextFlow
var rootParagraphElement:ParagraphElement = textFlow.getChildAtIndex(0);

var span2:SpanElement = new SpanElement();
span2.text =”2″;
rootParagraphElement.addChild(span2);

var span3:SpanElement = new SpanElement();
span3.text =”\n\nLog”;
rootParagraphElement.addChild( span3 );

var span4:SpanElement = new SpanElement();
span4.text =”2″;
rootParagraphElement.addChild( span4);

var span5:SpanElement = new SpanElement();
span5.text =” = 3″;
rootParagraphElement.addChild( span5 );

var cf:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
cf.fontSize = 20;
textFlow.characterFormat = cf;

var superScriptFormat:CharacterFormat = new CharacterFormat(textFlow.characterFormat);

superScriptFormat.baselineShift = flashx.textLayout.formats.BaselineShift.SUPERSCRIPT;
span2.characterFormat = superScriptFormat;

var subScript:CharacterFormat = new CharacterFormat(textFlow.characterFormat);
subScript.baselineShift = flashx.textLayout.formats.BaselineShift.SUBSCRIPT;
span4.characterFormat = subScript;
}

}

}

Box2d 2.1 b2world.QueryPoint() and iterating over a b2fixture list

wwwebber — Thu, 20 May 2010 10:47:59 +0000

In version 2.1 (and earlier I believe) of box2d objects are stored in linked lists. A common task will be iterate over one of these linked lists. For instance if you want to iterate over a body’s b2fixture linked list. In my case, I had the following problem: I was making a kids math game on how to combine like terms called Rj The Robot , and I only wanted the robot to jump if it was standing on a ‘floor’ shape. Now all ‘foors’ in the game had a string attached to their b2fixture called ‘is_floor’. Below is some code that demonstrates how floor bodies, shapes and fixtures are creating. Note: if you don’t know what a b2fixture is read this.
//bottom wall var bottom_wallShape:b2PolygonShape = new b2PolygonShape(); var bottom_wallBd:b2BodyDef = new b2BodyDef(); bottom_wallBd.type = b2Body.b2_staticBody; var bottom_wallBody:b2Body; bottom_wallBd.position.Set(halfOfStageWidth /PIXELS_PER_METER , halfOfStage*2/ PIXELS_PER_METER- .5 ); bottom_wallShape.SetAsBox(ground_width, ground_height); bottom_wallBody = myB2World.CreateBody(bottom_wallBd);
var fd:b2FixtureDef = new b2FixtureDef(); fd.friction = 1 ; fd.shape = bottom_wallShape; fd.userData = 'is_floor'; bottom_wallBody.CreateFixture(fd);

Now, I wanted the hero to be able to tell if it was standing on a shape whose b2fixture had the string ‘is_floor’ as its userdata. The solution is to use the b2World.QueryPoint() function . This function takes the form of myb2World.QueryPoint(callbackFunction, someB2Vec) where the someB2Vec is the point to check. In the picture below I was sending the red dot, called heroFootPoint in my code, to the function. Below is the full code explained in the comments
//get hero's center point var currentCenter:b2Vec2 = _body.GetWorldCenter(); heroFootPoint.x = currentCenter.x heroFootPoint.y = currentCenter.y + 1.43    //add 1.43 so point is below Robot foot; var bIsOnFloor:Boolean = false;             //assume not standing on floor

function bOnFloorFixture(fixture:b2Fixture):Boolean    //call back function
{                                                                                                               //this call back function
var body:b2Body = b2Fixture(fixture).GetBody();            //get body of current fixture
var bsFixture:b2Fixture = body.GetFixtureList();
while (bsFixture != null )                                                                 //it
{
if (bsFixture.GetUserData() == ‘is_floor’)                  //found a fixture whose userdata is ‘is_floor’…ie are standing on the floor
{
bIsOnFloor = true;
return false;                                                                           //return false so that we don’t continue iterating over the list
}
bsFixture = bsFixture.GetNext();                              //if we got here we didn’t yet find a fixture with ‘is_floor’ userdat..

}                                                                                              //so see if body has another b2fixture attached for checking

return true;                                                                                    //callback returns true means that the queryWorld() function will check next b2Fixture at heroFootPoint
}
myB2World.QueryPoint(bOnFloorFixture, heroFootPoint);               //start queryPoint()…check all fixtures overlapping heroFootPoint

Upgrading to Box2D 2.1 (Flash)

wwwebber — Tue, 11 May 2010 08:49:03 +0000

Box2d 2.1 offers several improvements in its use of events, its object models and added features like buoyancy, over 2.02 but you’ll find that none of your code compiles anymore.

Read this post about fixtures
Read this forum post about the new and improved contact listener
2.1 a documentation
Other changes

Version 2.02 Version 2.1

myB2body.WakeUp() myB2Body.SetAwake(true)

Gone and Not Necessarily Missed

myB2Body.SetMassFromShapes() //apparently done automatically

declaring a size of your B2World() . Create a world with new b2World(GRAVITY_VECTOR, doSleep ) Notice the lack of a b2aab for the world size!

New and Very Welcome

The new contactListner is vastly improved and would take a whole post in itself to explain, but it’s a very welcome improvement

I’ll add other small feature changes as I stumble upon them while working on my new kids game: RJ the Robot ( math based platform game)

Rectangle on top of line…rotated at any angle

wwwebber — Sat, 06 Mar 2010 19:07:34 +0000

Just started a new game and i needed to have a character who could ‘walk’ on a line at any angle …even upside .

With a little trig it’s fairly easy to place a rectanguler movieclip on top of a line.

Here’s all the source code

Here’s the critical code

c1 and c2 are the endpoints of the line that you can drag around (demo)
hero is the name of my rectangular object
xOffset is how far hero should move (based off left right arrow keys). Each time the key is pressed we add or subtract from this number. So it represents a “cumulative” and current x value.

//calculate angle of line based on endpoints
var angle:Number = Math.atan2(c2.y - c1.y, c2.x - c1.x);
//rotation of MovieClips in Flash is in degrees...so convert
hero.rotation = angle * 180 / Math.PI;
//how far (dx) are we from first of the two pointsvar xFromOrigin:Number = xOffset - c1.x; //just some trig here var newY:Number = c1.y + xFromOrigin * Math.tan( angle); //get new coordinates of hero
hero.x = xOffset + h * Math.sin(angle) hero.y = newY - h * Math.cos(angle)
Meteor Based Blitter Engine wwwebber — Sun, 21 Feb 2010 21:27:38 +0000 Following up on my last post on how to dynamically, scale and apply filters to display objects and then copy these into bitmapdatas , I wanted to implement the following Source Code 1) A Meteor class that pre calculates and precaches its rotation, scale etc.. into arrays (thus gaining a performance boost ) Again, I feel the need to give a link out to 8bitrocket.com here regarding this entire idea of bitmapdata blitting for performance gains . Unlike the last post, this one would require also rotating the meteors (just a few extra lines) and storing all of the rotations into an array (I’m actually using the new Vector class…but same idea) Here’s the updated meteor class. 2) Create a Meteor Manager class (self descriptive) for adding new meteors etc.. It ended up working pretty well. Here’s about the only code you need in your main document class to get the meteors going //create a bitmapdata --which our MetoerManager can blit to var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0x0000); //create a bitmap to house the bitmapdata var bmp = new Bitmap(canvas); stage.addChild(bmp); //create the Manager object var mFact:MeteorSpawnFactory = MeteorSpawnFactory.getInstance();; //pre-cache the bitmapdata MeteorSpawn.preCache(); //let the manager know about the bitmapdata that it'll blit to mFact.canvas = super.canvas; //"spawn" a new at x = 100 and y = 200 mFact.addSpawn(100, 200); Source Code Actionscript 3: BitMapData–how to Dynamically Apply a filter, scale and then center BitmapData wwwebber — Sun, 21 Feb 2010 13:30:20 +0000 Basically, if you are wondering how to create a new BitmapData by scaling a display object and also applying a filter and you would like to keep track of the new center of your scaled bitmapdata …this example is for you. Source cs3 . demo I was working on a new game for my online math games site and I wanted to be able to create a new BitmapData that was a scaled down version of a library item. This in itself is easy but it required a bit of extra to work to also be able to scale the display object dynamically as well as dynamically apply a filter , and all the while keep track of the center of the ‘real object’ (ie the radius of a original circular meteor). Knowing the true center of the bitmapdata as well as the radius of the ‘real’ object (ie not counting the filter) is necessary for doing collision testing in the math game. I have attached a flash cs3 version of the file whose demo you can see here and download the cs3 file here. As an aside, I hate using timeline code but I wanted to provide this example in a single file…so I put all the code in the main time line. The code does all of the work and places a red dot at the calculated center of the bitmap. This sort of stuff is useful in games that requiring blitting aka 8bitrocket.com style Pseudocde 1) create instance of library item (in my case a meteor) 2) Scale down or up the item 3) apply filter around item 4) create a new bitmapdata based on the size of the scaled meteor and the size of the filter (both dynamic) 5) keep track of the ‘actual’ radius of the scaled meteor (ie sans the filter) Php Script-Process, Display and Watermark all images in a Directory wwwebber — Sun, 13 Dec 2009 13:22:10 +0000 I needed a bit of break from some large projects I’ve been working on so I made up a little script that will process, display and watermark all images in a directory. The script makes use of 2 classes. One class is a ImageViewer . This takes an image and watermerks it with whatever text you want.(font size and text is hard coded..so doesn’t work well for really small images…sorry just don’t have the time for that level of finesse at the moment) The other class processes(DisplayImageDir) a directory by –it gets a list of all images in a given directory (anything with .jpg, .jpeg, .png, or .bmp) The script will output a double columned display of all of the images in the directory with the watermark added! You can download the scirpt Here’s are some demo pages http://www.mathwarehouse.com/code/php-scripts/imagewriter/ Images of Linear Equations This script could definitely be improved and generalized. I simply wanted to make it easier for search engines and users of my site to be able to find, and if possibly download the many, many images I have over at Math Warehouse. However, I did want to ensure that there was a copyright watermark on each file. The script works right out of the box, is open source and hopefully will be useful for someone. This script ran on a Godaddy shared hosting account–about as budget as it gets so if you’re host doesn’t support the features for the script…it might be time for you to upgrade your account! Also, note that I named one of the files .php5 to ensure that it was processed by php 5–this was necessary on teh GoDaddy server…you might need to rename the file as well as teh associated variable which is located in DisplayImageDir.class.php

Version 2.02	Version 2.1
myB2body.WakeUp()	myB2Body.SetAwake(true)