Henry Tseng: Blog

Safari Debug Menu: Changing User Agent, Debugging JavaScript

2011-11-17T17:14:00.004-05:00

I usually don't use Safari, but here's a great item to note if you need to use it. You can enable development tools through a preference setting. Simply open up a terminal window and execute the following:

defaults write com.apple.safari IncludeDebugMenu 1

This will enable a new menu in Safari containing controls to change the user agent, disable various functions like javascript or caching, and/or start javascript debugging.

XAMPP Apache Could Not Bind to Port 80

2011-10-04T11:24:00.004-04:00

Recently, I had an issue starting up Apache. My Apache instance runs on a Windows 7 development box and also shares the box with IIS 7. Immediately I thought that it was IIS and of course that's a valid assumptions but binding IIS to port 81 did not solve the issue.

I received the following error while trying to start Apache:

D:\xampp>apache_start.bat
Diese Eingabeforderung nicht waehrend des Running beenden
Bitte erst bei einem gewollten Shutdown schliessen
Please close this command only for Shutdown
Apache 2 is starting ...
(OS 10013)An attempt was made to access a socket in a way forbidden by its access permissions.  : make_sock: could not bind to address [::]:80
(OS 10013)An attempt was made to access a socket in a way forbidden by its access permissions.  : make_sock: could not bind to address 0.0.0.0:80
no listening sockets available, shutting down
Unable to open logs

Apache konnte nicht gestartet werden
Apache could not be started
Press any key to continue . . .
D:\xampp>

Running a netstat I could see that something called SYSTEM was listening on port 80.

D:\canvas\xampp>netstat -aon | findstr :80
  TCP    0.0.0.0:80             0.0.0.0:0              LISTENING       4

It turns out that another service called SQL Server Reporting Services (SQLEXPRESS) was causing the conflict. Stopping the service through Component Services > Services allows you to start Apache on port 80.

*EDIT
On another machine at work a service called "Web Deployment Agent Service", part of Microsoft's WebMatrix, was also preventing Apache from binding to port 80.

Scaling Bitmaps In Flash ActionScript 3 (AS3)

2011-09-03T16:04:00.005-04:00

I was working on composing large Bitmaps and scaling them and noticed an optimization that might have included a bug. The images I was scaling were pixel snapping and were not smoothed. This resulted in a choppy tween.

In the past avoiding choppy image animations required setting the quality to "best". Now ActionScript allows granular control of images. In my project they were embeded as external assets and pulled from a SWF file.

[Embed(source="assets/about/gfx.jpg")]

As of Flash Player version 10.3.183.5, when scaling Bitmaps in Flash smoothing and PixelSnapping are ignored when the scale is equal to 1. In order to force smooth set the Bitmap to a scale not equal to 1.0.

For example:

var bitmap:Bitmap = new Bitmap(_bitmapData, 'never', true);
bitmap.scaleX = bitmap.scaleY = .99;

CakePHP Bake mysql.connect Error Running XAMPP

2011-01-18T12:58:00.004-05:00

I ran into the following error baking with CakePHP. I was trying to create the cake schema for ACL tables.


:$ ./cake schema create DbAcl

Warning: strtotime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EST/-5.0/no DST' instead in /htdocs/cake/libs/cache.php on line 570

Warning: strtotime(): It is not safe to rely on the system's timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected 'America/New_York' for 'EST/-5.0/no DST' instead in /htdocs/cake/libs/cache.php on line 570


Welcome to CakePHP v1.3.6 Console
---------------------------------------------------------------
App : app
Path: /htdocs/app
---------------------------------------------------------------
Cake Schema Shell
---------------------------------------------------------------

Warning: mysql_connect(): [2002] No such file or directory (trying to connect via unix:///var/mysql/mysql.sock) in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 552

Warning: mysql_connect(): No such file or directory in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 552

Warning: mysql_select_db() expects parameter 2 to be resource, boolean given in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 558

Warning: mysql_get_server_info() expects parameter 1 to be resource, boolean given in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 566

Warning: mysql_real_escape_string() expects parameter 2 to be resource, boolean given in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 671

Warning: mysql_real_escape_string() expects parameter 2 to be resource, boolean given in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 671

Warning: mysql_real_escape_string() expects parameter 2 to be resource, boolean given in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 671

Warning: mysql_real_escape_string() expects parameter 2 to be resource, boolean given in /htdocs/cake/libs/model/datasources/dbo/dbo_mysql.php on line 671

The issue that I didn't realize quick enough was that the CakePHP script wasn't using my XAMPP's PHP executable. Another instance of PHP was being run since it was located in my $PATH.

This can be easily corrected by correcting your $PATH with a quick visit to vi.

Taking screen captures of websites

2010-11-16T17:58:00.003-05:00

Here's a great way to programmatically create screen captures of sites. It uses a python script to access WebKit and generate a PNG. It would be fairly easy to add some logic to make it crawl a site to show clients. We had to use this to grab some shots of a site for a routing phase of a pharmaceutical project.

http://www.paulhammond.org/webkit2png/

There is also another program called Paparazzi! It provides a GUI and allows a little bit of interactivity for clicking through.

http://derailer.org/paparazzi/

Reformatting XML with TextWrangler Script

2010-09-25T11:30:00.002-04:00

Here's a great tip for reformatting XML. I'm reposting this. I use TextWrangler and use the UNIX Script.

Use Unix Filters and create the following script to use, Reformat XML.sh:

#!/bin/sh
xmllint --c14n "$*" | XMLLINT_INDENT=$'\t' xmllint --format -

Thanks Magpie.

http://magp.ie/2010/02/15/format-xml-with-textwrangler/

Fixing Font Rendering Issues in Google Chrome for Mac OSX

2010-09-02T19:37:00.003-04:00

While I'm writing this the Google Chrome browser is still a beta. But I still want to use it.

So the problem is that I open up Chrome and it runs into a font issue when I'm using fonts installed with my font management software (i.e. - Linotype FontExplorer X, FontAgent Pro, etc...).

I see the following characters:

The problem is that Chrome for Mac OSX is looking for font files at the following location:

/Library/Fonts/

Where these font management software programs install fonts to a different location. To remedy the problem simply change your font folder and Chrome should read the fonts fine.

On FontExplorer X 1.2.3, you can simply open up Preferences and go to the Advanced tab. Here you can change the location of font files. Yeah I run it because it's free.

Font Book which is provided by Apple on Leopard and up, seems to install for use with Chrome with out any issues. But then again, Font Book isn't exactly the best solution for font management when you have six thousand fonts.

How to Enable Flash Content Debugger Plugin on Google Chrome Browser for Mac OSX

2010-09-01T23:47:00.009-04:00

This is applicable to Google Chrome 5.0.375.127 for Mac OSX.

To enable the Flash Content Debugger Plugin on Google Chrome. Simple disable the plugin distributed with Chrome. Of course, you'll also need to install the content debugger version of the plugin as well.

To disable the plugin distributed with Chrome open your Preferences and select the tab entitled "Under the Hood":

Then open Content Settings:

Now click on the link "Disable Individual Plugins":

On the plugins page both the plugin distributed with Chrome and the plugin installed from Adobe are listed. Simply disable the plugin located within the Chrome files at the location:

/Applications/Google Chrome.app/Contents/Versions/5.0.375.127/Flash Player Plugin for Chrome.plugin

On PC the distributed plugin can be disabled by opening the +Details button in the upper right and then disabling the plugin individually.

Samba write error in Mac OSX

2010-04-30T17:22:00.004-04:00

I've been experiencing this write error for a long time.

And for the longest time I had no clue where it was occurring until I did some research and found a solution.

Here's the entry:

http://splatdot.com/fixing-snow-leopard-10-6-3-samba-write-access

Basically, the solution is to turn off Unix extensions in Samba's smb.conf configuration file. Add the following to the [global] section

unix extensions = off

And restart your samba server.

Popular Programming Languages for 2010

2010-01-15T16:41:00.003-05:00

Here's TIOBE's Programming Community index gives an indication of how popular some programming languages are becoming.

It is certainly surprising to see how fast some languages are rising up. Not to mention that Apple's Objective-C (which runs on the iPhone) is certainly up and rising at #12 and Google's Go language is right behind it at #13.

Also Adobe's Flash ActionScript is surprisingly rising the ranks now at #19.

Harajuku Lovers Fragrance receives FWA

2009-12-19T11:01:00.008-05:00

Harajuku Lovers Fragrance receives an FWA Site of the Day award. Woot woot.

http://www.hlfragrance.com

Neat AR Experiments

2009-11-30T18:12:00.004-05:00

Been working on Augmented Reality (AR) on a few projects and it seems that a number of other people are making great experiments. Take a look at this from zero point nine:

http://www.zeropointnine.com/blog/augmented-reality-texture-extraction-experiment/

Disc Collision - An Open Source AS3 Collision Detection System

2009-07-20T22:31:00.006-04:00

I whipped up a distance based collision detection system, dubbed Disc Collision. A very basic model for collision detection, but also very fast in comparison to the vector based hitTest() in the Flash API.

Collisions are detected by a request-only model. The collision detection simply manages a collection of points and distances associated with each point. So you could easily put this into your a game engine and run an update call to get colliding points.

The algorithm is robust and has a few things to optimize. The collection of points is subdivided into multiple lists according to a spatial grid. To reduce the amount of work required detection. Then all of our points are sorted through a BST by distance so that we always know the largest distance to use when selecting grid sections.

Hold the red button down below to create objects to test collisions.

You can get code here:
http://code.google.com/p/disccollision/

Invert the colors on your Mac

2009-07-11T23:13:00.002-04:00

Just found this out, to invert the colors on your Mac hold ctrl-option-command and press 8. This is really useful if you're staring at white screens all day long your eyes will get tired really quickly.

Motor2 Physics

2009-07-02T00:57:00.004-04:00

I bought a new Macbook Pro and got it up and running. Funny how I've been using Mac's for a while now but never owned one myself. A computer is a computer.

I've been playing around with the Motor2 physics engine. I'm working on some games using it right now. I'll post and follow up when they're ready.

For now check out this new Flash port of the Box2D engine by Eric Catto here:

http://lab.polygonal.de/motor_physics/

I suggest reading the code and using the original Box2D documentation:

http://www.box2d.org/manual.html

Enjoy.

AS3 Visual effects through BitmapData.getPixel()

2009-06-09T17:08:00.011-04:00

I know lots of other people have created similar effects too. I just haven't done it myself. Here's an interesting effect you can get from the BitmapData.getPixel().

I'm creating a grid of squares to represent an image captured from the web camera and changing the size of a squares based on the corresponding color value.

If you don't have a web camera. No web cam?

Here's the code.

How to turn off modsecurity (apache module)

2009-04-23T10:10:00.007-04:00

I'm running fc10, Fedora 10 Linux.

Newly installed server and I'm just interested in doing some development for a web application. Modsecurity is used for implementing protocol level security, but it is not for everyone. Using it requires internet security knowledge. Four reasons not to use mod_security

Here's how to turn off modsecurity. Locate in /etc/httpd/modsecurity.d the line:

SecRuleEngine On

And for "DetectionOnly" switch this to:

SecRuleEngine DetectionOnly

And of course, restart apache once you are done:

# service httpd restart

It is recommended to run modsecurity in detection only until you are comfortable with writing rule sets.

Updating Samba on Fedora 8 (fc8)

2009-03-30T12:10:00.005-04:00

I had some trouble finding this hopefully this will help other people find it easier. We have a backup server running Fedora 8. I brought the box back online with a raid 5 and got ready to install samba but ran into some errors.

In order to fix a error while installing samba:

# yum install samba-common samba samba-swat
...
Error: Missing Dependency: samba-common = 3.0.26a-6.fc8 is needed by package samba

I found an update for yum:
# yum install yum-fastestmirror yum-skip-broken

Then we can install samba:

# yum update
# yum install samba-common samba samba-swat

Remember to open up the firewall:
# system-config-firewall-tui

AS3 Dynamic Text Wrapping or Flowing Around Objects

2009-03-09T17:13:00.020-04:00

EDIT: Take a look here if you are able to use Flash Player 10. (http://labs.adobe.com/technologies/textlayout/)

The Flash community is still waiting for Adobe to implement dynamic or intelligent text wrapping into Flash. So meanwhile several programmers are creating their own solutions and work arounds.

After thinking about the problem, I did a quick search and I found that dispatchEvent.org actually had released a solution very similar to my own inital approach. So I took a look at their code and made some improves upon based off of their original dynamic text wrapping utility.

The improvements allow text to flow around multiple objects on the left and the right. It still utilizes BitmapData and transparent pixels around each slice, but simply manages a linked list of TextFormats to control the leftMargin. In addition, it will also accept a flash.geom.Rectangle as a bounding box to work in; the motivation for this function is to reduce the computational load.

Simply input a list of DisplayObjects for the $leftList and the $rightList. Here's the function prototype:

public static function bound($field:TextField, $leftList:Array, $rightList:Array, $wrapArea:Rectangle=null, $padding:Number=10):void;

To utilize it you would make an example call:
TextWrap.bound(tf,[o3,o4],[o1,o2]);

Where tf is the TextField which wraps around objects on its left o3 and o4 and warps around objects on its right o1 and o2.

Here is the code.

Of course, it's not perfect, but it's a starting point.

Removing Passwords Stored in Windows XP

2009-02-25T23:54:00.001-05:00

Windows XP gives you the ability to store user names and passwords on your local computer so you do not have to enter in your credentials each time you access different sites or resources. Of course this provides some simplicity for users that have to remember more than one user name and password. However, in terms of security, any one who sits down at your computer while you are logged on can then access sites and resources using your cached credentials.

You can view and remove the stored credentials on your computer using the following steps:

1. Click Start and select Run.
2. Type in rundll32.exe keymgr.dll, KRShowKeyMgr and Click OK.
3. The Stored User Names and Passwords dialog box will appear.
4. You can remove an entry by selecting it from the list and clicking the Remove button.
5. Click Close.

Increasing Memory Availability In Eclipse

2009-01-15T12:55:00.011-05:00

I often work with large projects in Eclipse so I'm frequently using all of the memory allocated to Eclipse. On MacOS X the configuration file is located here:

/Applications/eclipse/Eclipse.app/Contents/MacOS/eclipse.ini

By default the following memory is allocated:

...
-Xms40m
-Xmx512m
...

I've changed this to:

...
-Xms256m
-Xmx512m
...

Beginner: AS3 XMLList as a Primitive and XML as a Complex Datatypes

2008-12-18T11:46:00.004-05:00

Using Flex SDK 3.1.0 build 2710

I'm not sure if this is true across the board after doing a little searching on the web. It seems that people have had different experiences. But as far as I'm concerned right now, XML is being handled as a complex datatype and XMLList is being handled as a primitive datatype.

I'm looking to confirm this though.

Flash has two types of datatypes: primitives and complex. Primitives are datatypes such as Strings or Numbers where each type you associate them a new instance is created.

var abc:String='three wise men';
var copy:String=abc;

abc='two plain dogs';

trace(abc);
trace(copy);

This above example associates copies the variable abc into the variable copy so that changes in abc later will no be reflected in copy.

Complex datatypes, such as Objects, retain references to an original instance stored in memory.

var dog:Object = {chase:true, likes:'cars'};
var cat:Object = {chase:false, likes:'naps'};

dog=cat;

cat.likes='mice';

trace(dog.likes);
trace(cat.likes);

In the above example the variable dog will now reference the same object as the variable cat. Therefore, changing the string 'likes' to mice will change both dog.likes and cat.likes.

XML and XMLList example.

Conway's Game of Life

2008-10-06T13:42:00.002-04:00

Here's a neat implementation of Conway's Game of Life using bitmap data filters to run the logic.

"Another way to do the calculations is to use filters which perform all of the calculations that are needed for one step in the Game of Life in a few lines of Actionscript. Filters such as the blur and convolution filters determine the colour of a pixel based on its neighbour’s colours which is exactly the kind of behaviour we need to run the Game of Life calculations. All of the hard work is done behind the scenes, effectively at a lower level which makes the simulation faster.

http://www.stdio.co.uk/blog/?cat=4&paged=2

This makes me want to write my own version of Conway's Game.

Web Performance Optimizations

2008-07-25T12:43:00.003-04:00

I appologize for not blogging more, but here's a very helpful posting of web optimization:

http://stevesouders.com/hpws/rules.php

A coworker showed this to me. In this he talks about things such as making fewer HTTP requests, using content delivery networks and gzipping files.

Things You Must Do Before Unloading a SWF File

2008-07-19T02:30:00.002-04:00

Wow this is really important. It reads "Danger Will Robinson. Danger!" The following I found from a friend who referenced Colin Moock in which deactivation of a swf requires the following tasks to be disabled.

Tell any loaded .swf child assets to disable themselves.
Stop any sounds from playing.
Stop the main timeline, if it is currently playing.
Stop any movie clips that are currently playing.
Close any connected network objects, such as instances of Loader, URLLoader, Socket, XMLSocket, LocalConnection, NetConnections, and NetStream.
Release all references to cameras and microphones.
Unregister all event listeners in the .swf (particularly Event.ENTER_FRAME, and mouse and keyboard listeners)
Stop any currently running intervals (via clearInterval()).
Stop any Timer objects (via the Timer class’s instance method stop()).

Not doing so apparently allows the swf to consume resources and not get destroyed. Go here to read more:

http://www.moock.org/blog/archives/000279.html

Beginner: Understanding OOP

2008-06-23T17:00:00.001-04:00

Okay. Let talk about programming in general. First of all let's differentiate between two types: procedural and object-oriented.

What is Procedural Programming?
Procedural programming is the type of programming is the common and most intuitive method of programming. The code of a program created using this method is written linearly and is dependent on the order in which each statement of code is written. This is not to say that object-oriented programming is not also procedural at some level, what we need to identify is that the problem is solved using procedural logic. This sort of logic is similar to how people thing.

For example, imagine a clerk at a donut shop:

First, mix ingredients for dough.
Mold it into a ring.
Bake it golden brown.
Coat it with chocolate.
Sprinkle sugar.

Each of these steps must be performed in this exact order and changing any of these steps may change the entire program. If you had asked the clerk to make a bagel instead the clerk might be smart enough to see that most of the steps are the same and say substitute the donut dough for bagel dough and add onions and garlic as toppings. But if you asked the clerk to make a pretzel instead so many steps would have to be rewritten that you might as well not use the same instructions at all.

Modification of the program also requires a person to first understand all of the steps involved before making any changes to the procedure since often the state of different variables may change during the course of the procedure.

What is Object-Oriented Programming?
So then what now is object-oriented programming, or OOP? OOP is a method of breaking down problems into individual blocks of logic. The idea is that the sum of these blocks solves the problem in an elegant yet easy to understand manner.

When we change the logic in the program, of course depending on what is changed, we are also able to be more flexible in our changes. Since the code is divided up into blocks we can change certain blocks without affecting the rest of the code. Also, understanding the big picture of what each of the blocks do allows us to keep track of fewer details in the code and keep the program in general more organized.

Furthermore, the fact that we have separate blocks of logic allows us to create a separation of logic that allows multiple people to work at the same time. As long as each person understands what to expect from each other, they can easily write code that can communicate. Smaller problems being solved at the same time means that, in most cases, we are able to solve the whole problem in shorter time, this may be debated of course by many since there is the overhead of assigning tasks and dividing the problem.

Our same donut shop clerk program might be separated in to groups of tasks.
Dough Tasks:

First, mix ingredients for dough.
Mold it into a ring.

Baking Tasks:

Bake it golden brown.

Topping and Seasonings Tasks:

Coat it with chocolate.
Sprinkle sugar.

Main Donut procedure:

Dough Tasks
Baking Tasks
Topping and Seasonings Tasks

This way we could have two programmers, one to manage the dough tasks and another to manage the seasoning tasks.

Solving Problems Using Design Patterns
Object-oriented programming's main advantage is being able to solve problems through architecture. This is a tremendous advantage because we can solve problems based on different "arrangements" of code. Let's think about this more.

On the contrary, in procedural programming remember a programmer must first understand all of the code before changes are made, rely heavily on conditional logic and reuse code by copy-and-paste.

Most programming problems are common reoccurring issues. The hassle is solving these same problems over and over again when they have very small differences. OOP allows us to make common solutions. These common solutions are called design patterns and are generally architectural solutions. The challenge of OOP does not become memorizing procedures and branches but now gracefully applying design patterns and integrating them into your logic.

Lunch-time Experiments

2008-04-23T23:13:00.033-04:00

Here's some experiments I had during lunch. I'm thinking about combining these two projects so to create a module that can retell live drawn stories as they fade away. Just a concept right now.

Fades your drawing (click to draw):

Tracks mouse movements; record and playback:

Adding Subclipse (SVN) to FlexBuilder 3

2008-04-15T11:55:00.002-04:00

I'm running FlexBuilder 3 on my computer at work and to install it I needed the subversion plug-in and a few other plug-ins.

You'll need to add the following :
- Eclipse Java Development Tools
(from Europa Discovery Site)
- Eclipse Plug-in Development Environment
(from Europa Discovery Site)
- Subclipse 1.2.x (Eclipse 3.2+)
(from http://subclipse.tigris.org/update_1.2.x)

If it asks you about the Buckminister plug-in uncheck integrations in subclipse.

Nerdy Comics

2008-02-29T10:47:00.002-05:00

http://xkcd.com/

Hahahah.

No exclude.xml in Flash AS3

2008-02-05T11:19:00.000-05:00

I've been working for R/GA for some time and things have been crazy. The workload has been fairly heavy with little breathing room so I haven't been posting as much.

Here's some thoughts, by others, on some issues I've run into myself. I'm working on the Nikeplus project and one of the big issues with this project is the size of the project. The project has a much longer life than most of the experiential sites I've been working on and requires maintenance as per our client's requests. This of course creates an immediate issue: things have to be coded fast and slim, which of course means there is much less time to solve problems in elegant ways since old code needs to keep running.

One of the issues you run into is requiring classes to be kept up-to-date. In AS2 classes are overwritten when a parent SWF loads a child SWF. This is because the classes are actually created in the _global space.

Here's an AS3 solution that I've recently found that's pretty interesting using the bridge pattern:
http://www.jessewarden.com/2007/09/no-excludexml-in-flash-cs3-for-as3-solution-via-bridge-pattern.html

50 Reasons Why AS3 Kicks AS2 Butt

2008-01-22T11:10:00.000-05:00

Check this out:

http://www.gskinner.com/talks/50reasonsAS3/

Emulating 3D Bitmap Transformations (part 2)

2007-11-01T12:26:00.010-04:00

(correction)
Okay, so the first time I posted this I was definitely not thinking straight at all. Here's a correction.

So let's take a look at the math involved:

In a scale, pixels (x',y') are given by the following:
x' = x * x_scale_factor
y' = y * y_scale_factor

In a skew, pixels (x",y") are given by the following:
x" = y * x_skew_factor
y" = x * y_skew_factor

If you remember our image is partly scaled and partly skewed. Remember that the images are divided along the line f(x)=x meaning along this line pixels of the skewed picture approach the scaled picture.

So let's pull out that high school math and we'll find that means that:

x * x_scale_factor = y * x_skew_factor
y * y_scale_factor = x * y_skew_factor

By substituting in the line y=x this tells us along the line y=x pixels converge when x_scale_factor = x_skew_factor and y_scale_factor = y_skew_factor.

Emulating 3D Bitmap Transformations

2007-10-31T15:37:00.000-04:00

I've been looking into 3D through Flash and there's a lot of 3D projects going on in the community, but Flash is currently not natively 3D. Though the new upcoming version of Flash seems very promising.
Before I explain anything credit for this post goes to my friend Steve at BSS who originally showed me this.

So my goal was to figure out how Papervision initially worked. My first assumption is that people were using the flash.geom.Matrix class to perform perspective transformations on BitmapData, but this is not the case. The Matrix class in Flash is only able to create affine transformations.

First let's take a look at affine transformations:
Affine transformations are transformations where:

Collinearity between points, i.e., three points which lie on a line continue to be collinear after the transformation
Ratios of distances along a line, i.e., for distinct colinear points $p 1, p 2, p 3$ , $| | p 2 - p 1 | | / | | p 3 - p 2 | |$ is preserved

This allows us to achieve only an isometric projection. What we are looking for is to be able to create depth using a perspective projection. With perspective we need to create a vanishing point which means lines which means parallel lines can converge. So this is a dilemma.

What We Can Do
What we can do is approximate 3D transformations by approximating a perspective transformation. We'll approximate by slicing our 2D image into smaller pieces and performing transformations on those individual pieces. As a side effect the image may be distorted, but we'll be able to control the distortion if we cut the image into smaller pieces.

Let's experiment through visually. Start with a grid image and slice it into two triangles:

Now let's take a look at two particular affine transformations.

Notice that the pixels near the line P1P4 do not move very much. These are a characteristic natures of these two particular transformations, scale and skew.

So if we take the top portion of the skewed image and the bottom portion of the scale image, it's possible to arrange the image so we're able to move only P4.

Therefore, since our pixels near our slice are able to match up, performing transformations on the individual pieces to allow our lines to converge and we are able to approximate perspective transformations with a certain degree of distortion. For each of the other points we'll simply use the same affine transformations. In my explanation I've only detailed one corner P4.

Controlling Distortion
To reduce the amount of distortion we'll simply create more subdivisions, or tessellations, for some given picture. As the pieces become smaller and smaller the distances between where pixels are and should be become closer and closer.

Here is an example with draggable corners and smoothing:

Verification Mathematically:
For those that are interested, we can prove this mathematically because of the way image data is manipulated mathematically by these affine transformations. I'll talk about this next time for the real nerds.

Download the source

Advanced OOP: Semaphore Follow Up

2007-10-26T14:03:00.000-04:00

Here's an example of a test of AS3 Semaphore code.

http://www.henrytseng.com/storage/blog/semaphore.zip

You can download and use it according to the GNU General Public License as published by
the Free Software Foundation. Enjoy.

Advanced OOP: Understanding Semaphores

2007-10-13T14:21:00.000-04:00

One very useful programming algorithm that is very useful in Flash comes from concurrent programming, and is called mutual exclusion. If you've taken classes in operating systems these concepts may be familiar to you.

About Mutual Exclusion
Mutual Exclusion is all about common resources and making sure blocks of code that share these resources aren't halted when requests are made. For example, if we have 2 programs and 2 resources, both of which are required for a specific operation, both programs must take turns using the resources.

Say program 1 acquires resource 1 the same moment that program 2 acquires resource 2. Since neither program can complete their operation without the other resource; we have what we call a dead lock. This stops the program from running or creates undesired effects. Without a specific implementation to prevent this situation from occurring we have a race condition where program 1 and 2 are competing to finish their blocks of code.

What is a Semaphore
A semaphore is a classic example of an algorithm used to solve this particular situation.

Here's code for a semaphore:


class Semaphore extends EventHandler {
// events
public static var ADDED                : String = 'added';            // resource was added

// used as events and states
public static var LOCKED                : String = 'locked';        // anything locked
public static var UNLOCKED            : String = 'unlocked';        // everything unlocked

private var _lockHash                    : Object;
private var _state                        : String;            // defaults to unlocked
private var _numLocked                    : Number;
private var _numTotal                    : Number;

public function Semaphore($state:String) {
  _state=($state) ? $state : UNLOCKED;
  _lockHash={};
  _numLocked=0;
  _numTotal=0;
}

public function lock($name:String):Void {
  // change count
  if(_lockHash[$name]==undefined) _numTotal++;
  if(_lockHash[$name]!=LOCKED) _numLocked++;

  // lock item
  _lockHash[$name] = LOCKED;

  // something locked
  if(_state == UNLOCKED) {
      _state=LOCKED;
      dispatchEvent({
          type:         LOCKED,
          target:        this
      });
  }
}

public function unlock($name:String):Void {
  // change count
  if(_lockHash[$name]==undefined) _numTotal++;
  if(_lockHash[$name]==LOCKED) _numLocked--;

  // unlock item
  _lockHash[$name] = UNLOCKED;

  // everything unlocked
  if(_numLocked==0 && _state==LOCKED) {
      _state=UNLOCKED;
      dispatchEvent({
          type:        UNLOCKED,
          target:        this
      });
  }
}

public function get numLocked():Number { return _numLocked; }

public function get numTotal():Number { return _numTotal; }

public function get state():String { return _state; }

public function remove():Void {
  removeAllEventListeners();
  _lockHash=null;
}
}

In this class definition we store locks in a hash called _lockHash. We'll store things when a lock or an unlock is invoked. We'll also store the number or locks and total locks. This way we won't have to count all of the locks each time we change their values.

By default the Semaphore starts in an UNLOCKED state. If anyone requests a lock when the semaphore is in a UNLOCKED state we'll dispatch a LOCK event to tell everyone and we'll change the state to LOCKED. When the last lock is released we'll dispatch an UNLOCK event and set the state of the semaphore to UNLOCKED.

And there we have it. I'll show some more examples when I get a chance. There's some interesting applications that simplify a lot of programmatic situations.

Beginner OOP: Observer and Event Delegation Patterns (Part 2)

2007-10-09T12:45:00.000-04:00

Now remember last time we talked about the observer design pattern. The observer pattern is very useful because it centralizes information and allows coordination of the interactions between objects.

But there's more. Let's see what's behind door number 2.

The event delegation design pattern is a similar programming strategy. The difference is that this pattern allows multiple types of events. For example, if we write a program which is able to draw a piano keyboard, we might create a class to represent a single key on the keyboard. This single key object might listen to a data model. Now when our keyboard data model tells us that C# is pressed we're not interested in updating the visuals for every key on our keyboard we're only interested in one key. With the event delegation pattern we're able to dispatch a single specific event that will allow only the objects subscribed to this event to be triggered.

Let's talk about terminology. Delegates are objects interested in events. Delegates listen to a specific event fired from a dispatcher. Let's take a look at some simple code to create an event dispatcher. Our event types are actually represented using strings.

To draw an analogy between the observer pattern and the event delegation pattern: Dispatchers are like observables, delegates are like observers, and events are like updates.


class EventHandler {
private var _hash:Object;

public function EventHandler() {  }    

private function _getListenerIndex($queue:Array, $obj:Object, $listener:String):Number {
  for(var i:Number=$queue.length-1; i>=0 &&$queue; i--) {
  if($queue[i].l == $listener && $queue[i].o == $obj) return i;
}
   return -1;    // didn't find anything
}

public function addEventListener($type:String, $obj:Object, $listener:String, $useCapture:Boolean, $priority:Number, $useWeakReference:Boolean):Void {
  if(_hash===undefined)              _hash={};          
if(_hash[$type]===undefined) _hash[$type]=[];
  var i:Number=_getListenerIndex(_hash[$type], $obj, $listener);  
if(i==-1) {
  _hash[$type].push({o:$obj, l:$listener});
}
}

public function dispatchEvent($event:Object):Boolean {
  if(!hasEventListener($event.type)) return false;  
var queue:Array=_hash[$event.type];  
for(var i:Number=queue.length-1; i>=0 &&queue; i--) {      
  var obj:Object = queue[i].o;      
  var fxn:String = queue[i].l;      
  obj[fxn]($event);
}  
return true;
}

public function hasEventListener($type:String):Boolean {  
if(_hash[$type]!=null && _hash[$type].length>0) return true;  
return false;
}

public function removeEventListener($type:String, $obj:Object, $listener:String, $useCapture:Boolean):Void {
if($type!=undefined && $listener==undefined) {      
  delete(_hash[$type]);             return;
}  
var i:Number = _getListenerIndex(_hash[$type], $obj, $listener)         if(i!=-1)
_hash[$type].splice(i,1);
}    

public function removeAllEventListeners():Void { 
delete(_hash);     }
}

In the above code, we have an object, our hash, which acts as an index for our different event types. Each event type then has a list of delegates. These delegates have methods which will run in their respective scopes.

The addEventListener function will first locates the event list, then if the delegate is not already on the list, it pushes the delegate to the list. When the event occurs our dispatchEvent function locate the event list and call each delegate on the list notifying them that the event has occurred. We also include a removeEventListener function to remove delegates from events.

And there we have it.

After Thought
Now, you might ask why would anyone want to write a whole new event delegation class. Aren't there classes written in Flash which accomplish this? Partly, Flash MX and other provided classes do not run code in their intended functional scopes. This creates a large problem since event delegation is typically deployed inter-object. Classes written to satisfy this need are mostly external classes outside of Flash. Grant Skinner has written a great event class called GDispatcher.

ActionScript 3.0 now uses a similar event model which allows functions to run in their proper scope. In addition, most classes in AS3 now inherit from the EventDispatcher class.

Beginner OOP: Observer and Event Delegation Patterns (Part 1)

2007-10-08T11:43:00.001-04:00

I'm going to try to post more frequently. Apologies, my posting has been scarce by any means.

This post is for beginner programmers who want to get into object-oriented programming. Let's talk about design patterns. As you may know object oriented programming is all about objects, creating definitions of them and planning interactions between them.

Now design patterns are about common situations encountered in programming. Implementing them and using them is a common practice for programmers and is the day to day challenge of the object-oriented programmer. Of course, there's always millions of ways to hack around problems and get around things, but hacking code, producing spaghetti code, always creates problems when further changes are later required. Structuring good code while it can take more time initially to plan and carefully understand always shortens the amount of time required to later make changes. Good implementation of design patterns always directly solve problems.

It is possible to use design patterns wrong and to over-program. Remember while programming you should account for changes you will later make, but you don't have to program rules for every situation, only the ones you will encounter. It would be useless to write algorithms for situations that will never occur, all situations should obviously be understood and predetermined as use cases in advance.

The Observer Pattern
So let's talk about a common design pattern that people use frequently, the observer pattern.
Like I said earlier the observer pattern is all about interaction between your code. In the observer design pattern you have several objects which require action when a particular piece of data changes value.

That is you have an object that is observable and an object that is your observer. The object that is the center of attention is the observable, this object has data which you are interested in. When this data changes it sends an update call to all of its observers, who then execute the required actions based on this value change in the interested data.

Code for a simple Observable:

class Observable {
private var _list      :Array;
 private var _data      :String;

 public function Observable() {
    _list=[];
 }

     public function register($o:Observer):Void {
            _list.push($o);
     }

     public function set data($s:String):Void {
            _data = $s;
           _update();
     }

     public _update():Void {
            var n:int=_list.length;
           for(var i:int=0; i
     }
}

Code for a simple Observer:

public class Observer {
     public function Observer() { }

     public function update($data:Object):Void {
            /* do something exciting! */
     }
}

Now to set these classes up and use them:

// let's instantiate them
var parent:Observable = new Observable();
var child1:Observer = new Observable();
var child2:Observer = new Observable();

// let's set it up
parent.register(child1);
parent.register(child2);

// now let's get the parent to
parent.data = "new data woohoo!";

Once the parent changes its data all of its children should then change their data.

This is very useful if you want to create a class to manage your in a class dedicated to being your data model, such as when you use the Model-View-Controller design pattern.

Next time let's talk about the event delegation design pattern.

Thoughts on Flash vs. Silverlight

2007-09-20T11:35:00.001-04:00

Here’s an interesting post:

http://labs.blitzagency.com/?p=381

While the article is not all about Silverlight vs Flash it does raise an interesting point about Silverlight’s opensource tendency. It’s important to note that Blitz Agency works directly with Microsoft.

Personally, I feel that the interactive arena doesn’t need more opensource conventions but it needs stronger experiences. We need designs that speak to users and create better experience for users beyond the common web pages found all across the web. The commonality of the Web may some times be its downfall in that so many “experiences” are merely duplicates of each other; this obviously creates a big problem for brand identity.

My own opinion is that I would personally like to see the direction of the industry moving more towards the direction of Adobe AIR (platform independence, richer capability, self updating infrastructure, … of course this list isn’t mutually exclusive). AIR provides a very strong platform for interactive experiences. Creating an appropriate business model and finding out where the platform can be used is where the next steps are. The more immersive and platform independent an experience can be will ultimately allow us to create better tools and interaction with users. More visibility and more involvement can create richer impressions.

People are already watching movie trailers, catching current events, and even paying their bills with their cell phones. Why should we stop there? As someone working in the interactive industry I feel our greatest challenge is creating new breathtaking experiences.

It would be a nice dream.

AS3 Kicks Hiney!

2007-04-01T02:37:00.000-04:00

I'm working on this new project which will span a year. So it's apparent we may need to upgrade to AS3 at some point and require code migration from AS2 to AS3. Big Spaceship works closely with Adobe and we're running with Flash CS3, the next Flash Professional IDE.

Looks like I've put off learning AS3 long enough. AS3 blows AS2 out of the water. The debugging is so much more stricter, the API is cleaner, the code is more powerful, and the possibilities are endless. There's more on every front.

Guess I should probably throw in the usual shameless plug, go sign up for a preorder of Flash CS3.

The best quality Flash

2006-11-08T13:30:00.000-05:00

Recently stumbled upon a good piece of FYI at atitightinteractive.com. Quality, by default, is set to quality="high" in Flash. Setting the quality to "best" is a good allows even higher quality to be used. Especially for bitmapped images, this quality difference upgrade can get rid of aliasing, jagged edges, when your images are scaled or rotated.

<object>
...
<param name="quality" value="best">
...
<embed quality="best">
</object>

Using MVC in Flash

2006-10-30T17:53:00.000-05:00

MVC (Model-View-Controller) is a very useful programming design pattern in Flash development, but as experienced programmers know, its integration varies from implementation to implementation and programmer to programmer especially because the Flash community is such a diverse one of designers who program and developers who design.

MVC is great in small applications but large application require a programmer to be flexible and practice some ingenuity. Modified approaches such as including abstraction layers for application specific logic keep the MVC architecture cleaner and leaner.

Basic Concept
Model - Creates a programming abstraction for an applications data.

View - Inputs/Outputs an application's data. The model-view interaction allows data to have centralized management.

Controller - Processes data received from inputs and translates data to allow integration with model.

Enter the scene ActionScript 3.

2006-07-10T09:47:00.000-04:00

Enter the scene ActionScript 3.
ActionScript 3 seems to be the talk of the town these days in the Flash community. FlexBuilder 2 and the alpha version of Flash 9 Professional are out and great changes have been made to the ActionScript 3 language including runtime debugging and a host of changes to the ActionScript programming model and the Flash API.

Event Listeners.
AS3 incorporates a stronger event handling model over the previous AS2. This new event model has been consistently integrated into all of the built in objects in Flash 9 and includes triggers for changing the default behavior for some previously internal events. One of the strongest improvements is the ability to run event listeners in the scope of an object other than the event dispatching object. Another strong improvement is the ability to create weakly referenced Listeners, allowing less error prone clean up and better garbage collection.

Regular Expressions.
Of course another great improvement is the implementation of a regular expression engine. Regular expressions allow text searching and will enable better validation. Complex text applications will be much easier to write and more efficient.

E4X.
AS3's new method for handling XML, dubbed E4X is much cleaner as opposed to the previously verbose in the previous approach for handling XML. E4X's approach is consistent with ActionScript's method for accessing objects and properties.

External API.
AS3 now provides a replacement for the fscommand, an external API in the form of a class called ExternalInterface, with which to access the container hosting Flash something previously implemented using a host of solutions varying across browsers, platforms and environments.

Conclusion.
Overall, I've only graced over the surface of the new Flash API but I am excited. Good things to come, I can guarentee it.

Debian 3.1 Dell d800 Wireless

2006-01-06T17:48:00.000-05:00

For the Intel® PRO/Wireless 2200BG Driver for Linux (e.g. - ipw2200). Add to your /etc/apt/sources.list

deb http://ftp.us.debian.org/debian/ stable main non-free contrib

Remember to run the update:
# apt-get update

Add a couple of packages. I upgraded my kernel to 2.6.8-2 through the Debian package.

# apt-get install kernel-headers-2.6.8-2-686
# apt-get install kernel-image-2.6-686
# apt-get install dhcp3-client

Set it to watch all interfaces using the keyword "auto". Set it to watch hotplug devices "all". Also in /etc/network/interfaces make sure only lo is brought up.
# apt-get install ifplugd

# apt-get install wireless-tools
# apt-get install ipw2200-source

Put your firmware in /usr/local/lib/firmware. Grab the firmware from here:
http://ipw2200.sourceforge.net/firmware.php

Extract the ipw2200 driver in /usr/src

# tar -zxvf ipw2200-source.tar.gz
# cd modules/ipw2200/driver
# make KSRC=/usr/src/kernel-headers-2.6.8-2-686 install
# depmod -a
# modprobe ipw2200

Debian 3.1 on Dell d800

2006-01-05T18:41:00.000-05:00

I just got Debian 3.1 Sarge on my Dell d800. The problem was my wide screen display it just wouldn't take. I had to install the Nvidia drivers and edit the XF86Config-4 file.

XF86Config-4 (WSXGA laptop screen):

Section "Monitor"
Identifier "Generic Monitor"
HorizSync 28.0 - 107.0
VertRefresh 30.0 - 130.0
ModeLine "1680x1050" 147.1 1680 1784 1968 2256 1050 1051 1054 1087 +hsync +vsync
ModeLine "1600x1024" 198.8 1600 1712 1888 2176 1024 1027 1030 1075 +hsync +vsync
ModeLine "1440x900" 130.0 1440 1452 1572 1896 900 901 904 937 +hsync +vsync
ModeLine "960x600" 60.0 960 968 1048 1264 600 601 603 625 +hsync +vsync
Option "DPMS"
EndSection
... And of course ...

Modes "1680x1050" "1600x1024" "1440x900" "800x600" "640x480"

My d8000 is equipted with the GeForce FX Go5650. You can get the you can grab the Nvidia driver, NVIDIA-Linux-x86-1.0-8178-pkg1.run, from the Nvidia site. It's the Linux IA32 driver.