What i wrote is a configurator. This means the user sees a 3D model of the unit he selected and then he can equip it with different weapons and armors. In this experiments i used no cool models, only primitives and some things i found on my hard disk. Here is a Video of the result. Sometimes I had to use configurator.something instead of this.something. I think this is wrong and I will soon check out some tutorials on Javascript Classes

var configurator = {
	engine: null,
	armor: null,
	active_unit_name: null,
	active_unit_index: null,
	is_initialized: false,
	units: {},
	unit_count: 0,
	onLoad_conf: {},
	scene: null,

	// changes the weapon. (sets the selected one visible)
	weapon: function(i) {
		var unit = this.activeUnit();

		if(unit.active_weapon)
			unit.active_weapon.Visible = false;

		if(typeof(i) == "undefined")
			return;

		unit.active_weapon = this.scene.getSceneNodeFromName(unit.weapons[i]);
		unit.active_weapon.Visible = true;
	},

	// changes armor
	armor: function(i) {
		var unit = this.activeUnit();

		if(unit.active_armor)
			unit.active_armor.Visible = false;

		if(typeof(i) == "undefined")
			return;

		unit.active_armor = this.scene.getSceneNodeFromName(unit.armors[i]);
		unit.active_armor.Visible = true;
	},

	// switch to next unit in left direction
	left: function() {
		this.active_unit_index--;

		if(this.active_unit_index < 0)
			this.active_unit_index = this.unit_count-1;

		this.reload();
	},

	// switch in right direction
	right: function() {
		this.active_unit_index++;

		if(this.active_unit_index > this.unit_count-1)
			this.active_unit_index = 0;

		this.reload();
	},

	// displayes unit with index active_unit_index
	reload: function() {
		var counter=0;
		for(var key in this.units) {
			if(counter == this.active_unit_index) {
				this.showUnit(key);
				break;
			}
			counter++;
		}
	},

	// shows unit by name
	showUnit: function(unitname) {

		if (!this.is_initialized) {
			this.initialize(unitname);
			return;
		}

		this.scene.getSceneNodeFromName(this.active_unit_name).Visible = false;
		this.weapon();
		this.armor();
		this.active_unit_name = unitname;

		this.scene.getSceneNodeFromName(this.active_unit_name).Visible = true;
		this.weapon(this.activeUnit().weapon_index);
		this.armor(this.activeUnit().armor_index);
	},

	// returns the unit that is currently displayed
	activeUnit: function() {
		return this.units[this.active_unit_name];
	},

	// initialize scene
	onLoaded: function()
	{
		configurator.scene = configurator.engine.getScene();
		if (configurator.scene)
		{
			// initialize active_unit
			var unit = configurator.scene.getSceneNodeFromName(configurator.active_unit_name);
			unit.Visible = true;

			// also, force the 3d engine to update the scene every frame
			configurator.scene.setRedrawMode(Scene.REDRAW_WHEN_SCENE_CHANGED);

			// rotate scene
			configurator.scene.getSceneNodeFromName('root').addAnimator(new AnimatorRotation(new Vect3d(0, 0.2, 0)));

			// load first weapon
			configurator.weapon(configurator.activeUnit().weapon_index);
			configurator.armor(configurator.activeUnit().armor_index);
		}
	},

	// preinitialize. create canvas to draw in and load scene
	initialize: function(default_unit) {
		this.is_initialized = true;
		jQuery("#canvasContainer").prepend('<canvas id="3darea" width="730" height="450" style="background-color:#ffffff"></canvas>');
		jQuery("#configurator").fadeIn();

		this.active_unit_name = default_unit;
		var index=0;
		for(var key in this.units) {
			if(key == default_unit) break;
			index++;
		}
		this.active_unit_index = index;
		this.engine = startCopperLichtFromFile('3darea', 'copperlichtdata/configurator.ccbjs');
		this.engine.OnLoadingComplete = this.onLoaded;
	},

	// add a unit and its preconfiguartion to the configurator.
	// the last two arguments specify which items should be displayed initially
	// nodenames are the names to reference the corresponding nodes in the scene. (same as in coppercube editor)
	addUnit: function(nodeName, weaponNodeNames, armorNodeNames, weapon_index, armor_index) {
		this.units[nodeName] = {
			weapons: weaponNodeNames,
			armors: armorNodeNames,
			weapon_index: weapon_index,
			armor_index: armor_index
		};
		this.unit_count++;
	},

	destroy: function() {
		jQuery("#configurator").fadeOut();
		jQuery("#3darea").remove();
		this.is_initialized = false;
	}

};

jQuery(document).ready(function(){
	// add units to configurator
	configurator.addUnit("bird",["weapon","weapon2"],["armor1","armor2"],1,0);
	configurator.addUnit("ghoul",["ghoul_weapon1","ghoul_weapon2"],["ghoul_armor1","ghoul_armor2"],0,0);
});

Results

The first video shows an original and an encrypted video in comparison.

The second video compares the same video using different GOP sizes (10 and 50)

Error Concealment

We found out that some codecs (e.g. DirectShow) do a very good error concealment. The picture on the left shows two different videos played in two different players. As one can see, the second player reconstructs a slightly good image.

How does it work?

We are parsing the byte stream for VideoObjectPlanes which have the start code 0×000001b6. If this code is followed by two bytes that are equal to 00 the we found an I-Frame. From here on we start overwriting thy byte stream until we reach the next start code 0×000001.

Code

#include <iostream>
#include <fstream>
using namespace std;

int main() {
	ifstream ifs("in.mp4", ios::in | ios::binary);
	ofstream ofs("output.mp4", ios::out | ios::binary);
	//initialize buffer to 0xffffffff
	unsigned char buffer[4] = {0xff, 0xff, 0xff, 0xff};
	bool write = false;
	int counter=0;
	unsigned long overallcount=0;
	unsigned long writecount=0;
	while(!ifs.eof())
	{
		//Shift to make space for new read.
		buffer[0] = buffer[1];
		buffer[1] = buffer[2];
		buffer[2] = buffer[3];

		//read next byte from file
		buffer[3] = ifs.get();

		//see if the current buffer contains the start code.
		if(buffer[0]==0x00 && buffer[1]==0x00 && buffer[2]==0x01) // 0x00 00 01 b6
		{
			write = false;
			if(buffer[3]==0xb6) {
				//cout << "VOP begin" <<endl;
				//vop start code found
				//Test for I-frame
				unsigned char ch = ifs.get();
				ofs << buffer[3];
				buffer[0] = buffer[1];
				buffer[1] = buffer[2];
				buffer[2] = buffer[3];

				//read next byte from file
				buffer[3] = ch;
				int vop_coding_type = (ch & 0xc0) >> 6;   //masks out the first 2 bits and shifts them to the least significant bits of the uchar
				if(vop_coding_type == 0)
				{
					//It is an I-frame (hell yeah (: )
					write = true;
					cout << ++counter << ". Iframe =)" << endl;
				}
			}
		}
		if(write) {
			ofs << (char)0x0d;
			writecount++;
		}
		else {
			ofs << buffer[3];
			overallcount++;
		}
	}

	cout << "Read : " << overallcount << endl;
	cout << "Write: " << writecount << endl;
	cout << "Percent overwritten: " << (float)writecount/(float)overallcount*100.0f << endl;

	return 0;
}

In order to get into Android programming we wanted to test how fluid a 4 megapixel image could be moved around the screen. To be able to move such an image we needed a thread to update the position and to redraw our Canvas view.

The first idea was to have a thread which updates the coordinates where the picture should be drawn on the screen and then call a redraw() function. We soon realized that a Canvas could only be forced to redraw itself by invalidating it. But there is a security feature of android that only allows Activities to invalidate Views if it is a children of the Activity. We had a Class UpdateThread which implements the Runnable interface: (Game extends Canvas and draws our Picture)

public class main extends Activity {

private Game game;

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        game = new Game(this);
        setContentView(game);

        Thread myThread = new Thread(new UpdateThread());
        myThread.start();

    }

public class UpdateThread implements Runnable {

    	@Override
    	public void run() {
    		//... code to manipulate position
            }
    	}

    }

}

If you now try to call game.invalidate() from this run() function Android will throw an exception because game is not a child of UpdateThread. The solution is to implement a handler which can communicate with our thread – it is building a interface between our thread and the main class. We insert the following in the main class:

    public Handler updateHandler = new Handler(){
    	/** Gets called on every message that is received */
        // @Override
        public void handleMessage(Message msg) {
        	game.update();
            game.invalidate();
            super.handleMessage(msg);
        }
    };

We fill our run() method with this code:

while(true){
    main.this.updateHandler.sendEmptyMessage(0);
}

Now each thime main.this.updateHandler.sendEmptyMessage(0) is called the handler reacts. The point is that our handler now can call game.invalidate() because game is a child of main.

Here is the full code:

main.java

package muhkuh.app;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;

public class main extends Activity {

	private Game game;

    public Handler updateHandler = new Handler(){
    	/** Gets called on every message that is received */
        // @Override
        public void handleMessage(Message msg) {
        	game.update();
            game.invalidate();
            super.handleMessage(msg);
        }
    };

    /** Called when the activity is first created. */
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        game = new Game(this);
        setContentView(game);

        Thread myThread = new Thread(new UpdateThread());
        myThread.start();

    }

    public class UpdateThread implements Runnable {

    	@Override
    	public void run() {
    		 while(true){
                 main.this.updateHandler.sendEmptyMessage(0);
            }
    	}

    }

}

game.java

package muhkuh.app;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.view.View;

public class Game extends View {

	private Bitmap image;
	private Paint paint;
	private int x=0;

	public Game(Context context) {
		super(context);
		image = Bitmap.createBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.test));
		paint = new Paint();
	}

	// called every Frame
	protected void onDraw(Canvas canvas) {
		canvas.drawBitmap(image, x, 0, paint);
	}

	// called by thread
	public void update() {
		if(x < 200)
    		x++;
    	else
    		x=0;
	}

}

Check out the app on Facebook!

<fb:request-form action='index.php' method='POST' invite='true' type='Yor Application Name' content='Some comment here... <?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/musicplaylists/\" label=\"Button Caption for Accept\"") ?>' >

<fb:request-form-submit uid='xxxxx' label='%n is not using YOUR APP NAME. Klick here to invite him/her'/>

</fb:request-form>

The code above  generates a Button. When the user clicks on it it opens a popup where one can enter a optional message and send the invitation. But how is this supposed to work in Actionscript? Actually it isn’t. But we can do a workaround. We can open a popup including this button. Its not the user-friendliest solution but it is a good one if you need to invite specific persons. (This person is specified by the uid attribute of the request-form-submit tag)

So we could write a JavaScript (FBJS) function to open such a dialog with the request-form in it. Unfortunately there is a problem: Because Facebook has hard restrictions for Javascript we are not able to change the value of the uid attribute of the request-form-submit tag But there is a workaround: We can load the fbml tags per Ajax and fill them in our dialog:

<fb:js-string var="dialogInvite">
	<div id="dialog_content">
		<div class="dialog_loading">Loading...</div>
	</div>
</fb:js-string>

<script type='text/javascript'>
<!--
	function onRequestComplete(result) {
            document.getElementById('dialog_content').setInnerFBML(result);
        }

        function do_adduser(uid) {
            var ajax = new Ajax();

            ajax.responseType = Ajax.FBML;
            ajax.ondone = onRequestComplete;

            ajax.requireLogin = true;
	    new Dialog(Dialog.DIALOG_POP).showMessage('Invite friends', dialogInvite,button_cancel='Cancel');
            ajax.post('http://URL TO YOUR SERVER.de/invite.php?uid='+uid);
        }
-->
</script>

The code of invite.php looks like this:

<fb:request-form action='index.php' method='POST' invite='true' type='Yor Application Name' content='Some comment here... <?php echo htmlentities("<fb:req-choice url=\"http://apps.facebook.com/musicplaylists/\" label=\"Button Caption for Accept\"") ?>' >

<fb:request-form-submit uid='<?php echo $_GET["uid"]?>' label='%n is not using YOUR APP NAME. Klick here to invite him/her'/>

</fb:request-form>

When you call do_adduser(13234); it would open a popup asking you to invite the user with id 13234. In Order to call this JavaScript function from within your ActionScript program you have to insert a fbjs-bridge tag before your swf tag and an empty script tag with an empty comment in it:

<fb:fbjs-bridge/>
<fb:swf swfsrc="http://URL TO YOUR SERVER.de/flashapp.swf"/>
<script><!-- --></script>

Now you can call do_adduser(123) from actionscript:

var lconn:LocalConnection = new LocalConnection;

lconn.send(LoaderInfo(root.loaderInfo).parameters.fb_local_connection, "callFBJS", "do_adduser", [123]);

LoaderInfo(root.loaderInfo).parameters.fb_local_connection will need the fbjs-bridge working correctly.

I hope this post helped you

<fb:request-form action='index.php' method='POST' invite='true' type='Yor Application Name' content='Some comment here... <?php echo htmlentities("<fb:req-choice url="http://apps.facebook.com/musicplaylists/" label="Button Caption for Accept"") ?>' >

<fb:request-form-submit uid='xxxxx' label='%n is not using YOUR APP NAME. Klick here to invite him/her'/>

</fb:request-form>

Download the source. It includes very much useful comments so that one can learn from it. The following is covered:

• Generating a terrain from a gray scale height map (bitmap) (including speed optimisation using graphic card buffers)
  • Vertices
  • Indices
  • Normals
  • Buffers
• Applying different textures for specific heights. Blending between these textures (includes shader programming)
• Showing more detailed textures close-by and less detailed in the distance (includes shader programming)
• Matrices and quaternions to rotate our vehicle and the camera
• 3D collision detection and handling
  • Plane – ray intersection
• Keyboard and mouse input
• Loading 3D models
• Basic physics

Also have a look at these posts:

http://blog.goltergaul.de/2009/10/xna-directx-c-game-project-making-a-vehicle-drive-on-a-generated-terrain/

http://blog.goltergaul.de/2009/10/xna-directx-c-game-project-camera-class-and-first-terrain/

http://blog.goltergaul.de/2009/10/xna-directx-c-game-project-%e2%80%93-depth-details/

http://blog.goltergaul.de/2009/10/xna-directx-c-game-project-basic-collsion-detection/

Click here to view the embedded video.

You can download the Source here. Please consider that this code is only an experiment. So there are a lot of issues and some bugs left.

Click here to view the embedded video.

See also: Jop Wielens Color Tracking