Category — Experimental

I came across this early this evening and thought it looked a brilliant and fascinating way of coding!

The idea is that code is split into different bubbles, each one representing a function. You can then drop and drag different methods around, adding notes to them, marking them as bugs or flagging that particular function as important. I think this is a great way of coding as coding by nature is a very logical task and so by displaying it in a very organized, logical way makes a lot of sense. Traditionally code is just displayed as a single file with methods listed one after the other which is fine for smaller files/projects with a moderate amount of functions and classes with little to no external dependencies, but when you are dealing with large projects, multiple files and lots of external library’s then this way of logically splitting it up into relevant bubbles really makes sense. So watch the video and see what you think!

Project page here: http://www.cs.brown.edu/people/acb/codebubbles_site.htm

Recently Joshua Davis and Brendan Hall released a new framework call HYPE. The aim of the framework is to allow everyone from newbie level to professionals experiment with ease using Flash.

I’m hoping to find some time in between GCSEs to have a go at making some stuff with this, so keep any eye out. You can download it here, and find the setup instructions here.

Have fun!!

Before you ask, no I wasn’t at MAX, but after making an attempt at going through some of the 250+ hours of footage I have found a few jems that I think are worth mentioning. It sounded quite an event and plenty of exciting announcements were made! Heres a few key sessions.

By now I am assuming you have all heard about native compiling to the iPhone in Flash CS5 and if you haven’t then be very ashamed :p . Well here’s a session that sheds some light on it if you haven’t got a clear understand:

Building Applications for iPhone using Adobe Flash CS5 professional

Now the next one is on the Flash Player its self, and what makes it tick. With each update the Flash Player gets more and more advanced, and with it complicated. Questions you never even had are answered in this session and it is a must see from my point of view.

Flash Player Internals

A lot of these things in this video I have never really thought about, but when they are explained you see what a difference they make and how important it is to know some of the stuff explained. One of the interesting concepts was at the start about rendering, describing the difference between Immediate and Retained rendering. Now I know this is simple stuff for the ‘pros’ amongst us, but for me I had never really understood this so it was nice to have it explained in simple terms.

For me one of the biggest announcements was that there is a new FLA format, which is going to be based on XML! This is a lot better than the current version which was essentially a ‘black box’ as XML is an extremely open and widely used language. The new format is essentially going to be a modified ZIP file contain separate files for the library assets, publication settings and document information which will make it easier to use in source control systems and other similar management tools.

XML based FLA: The New Flash File Format

Also, sorry it has been quite recently! I have been rather busy with school seeing as I am coming up to my GCSEs quite soon. I am also starting to think about work experience for the 2010 summer (July-August), and if anyone has any suggestions or offers then that would be brilliant!

Harry.

If you have been following me on Twitter, then you may have noticed that I have been getting into Augmented Reality. This is the coolest thing I have seen in a long time! Now if you don’t know what this is, then it is a means of mapping 3D objects to a marker in the real world through a web cam.

Here is a simple guide to getting setup using the Augmented Reality in Flash. This includes downloading the library’s and then getting a simple demo up and running.

The name of the library used for Augmented Reality in Flash is called FLARToolkit which is developed by Saqoosha. It is a port of the ARToolkit which is written in C. You can download it from here through SVN. If you haven’t got a SVN client setup then I highly recommend SmartSVN which is a free client and I must thank Richard Leggett for recommending this to me!

Now once you have got the code, add it to your global Actionscript folder, then print out this marker and run the example. You can either compile the source in the ‘src’ folder or just run the SWF in the ‘bin-debug’ folder. Hopefully this gives you a idea of what AR/FLARToolkit is all about.

If you can run the example yourself, here is a video of it in action.

FLARToolkit / Augmented Reality Basic Demo. from Harry Northover on Vimeo.

I have also written a base class for a FLARToolkit application. It is designed so that all you have to do is override the function ‘add3d()‘ to add your 3D objects to ‘FLAR_Container” object, and then override another function, ‘addAnimation_3d()‘ to add the animation. My description here is very brief so read the readme file in the package. You can download the class here. If you want to see how much code this can reduce then here is an example class using the base class:

package
{
	import com.harrynorthover.ar.flar.base.FLARSingleMBase;
 
	import flash.filters.BlurFilter;
 
	import org.papervision3d.lights.PointLight3D;
	import org.papervision3d.materials.shadematerials.FlatShadeMaterial;
	import org.papervision3d.materials.utils.MaterialsList;
	import org.papervision3d.objects.primitives.Cube;
 
	[SWF(width="640", height="480", frameRate="30", backgroundColor="#FFFFFF")]
 
	public class Demo_BaseClass_Test extends FLARSingleMBase
	{
		private var cube:Cube;
 
		public function Demo_BaseClass_Test()
		{
			/*This is the function 'Init' you need to call to setup the FLARToolkit scene.
			     WIDTH, HEIGHT, FRAMERATE*/
			Init(640,   480,    30);
		}
 
		/*
		...
		This function is the one you need to override
		to add things to your 3D scene.
		*/
 
		override protected function add3D():void
		{
			// Add you 3D stuff here. The more the better :-)
			var pl:PointLight3D = new PointLight3D();
			pl.z = -1000;
			pl.y = 1000;
			pl.x = 1000;
			pl.flipped = true;	
 
			//var blurFilter:BlurFilter = new BlurFilter(24, 12, 1);
			var matList:MaterialsList = new MaterialsList();
			var fsm:FlatShadeMaterial = new FlatShadeMaterial(pl);
 
			matList.addMaterial(fsm, "all");
 
  			cube = new Cube(matList, 60, 60, 60, 5, 5, 5);
  			//cube.useOwnContainer = true;
  			//cube.filters = [blurFilter];
 
  			// FLAR_Container is the FLARBaseNode that you
  			// add your 3D objects to.
	        FLAR_Container.addChild(cube);
		}
 
		/*
		...
		This is the function to which you override to add
		your 3D animation.
		*/
 
		override protected function addAnimation_3d():void
		{
			//Add you animation here.
			cube.yaw(10);
		}
	}
}

See? Lots of code that has been got rid of!

Other demos I have been working on are here:

FLAR + Lines3D:

FLARToolkit and Lines3D / Augmented Reality from Harry Northover on Vimeo.

Incorporating AS3DMod:

FLAR + As3DMod from Harry Northover on Vimeo.

So there you go, my first few demos. Yes, I know, they are not very special but now I’m working on getting mutliple markers working and just more advanced demos in general. If you are looking for more advice on how to get set up with FLAR go over to this blog here. This has everything you need to get going. Also, check out squidder.com for some cool demos.

Happy ARing!

Here is a piece of artwork I did, continuing my series of emotions. The latest one is Curiosity.

This piece uses a render from Cinema 4D and the adds a little Photoshop magic.

Harry.

You have proabably noticed that i havent blogged myself for quite a while. The main reason for this is that I have been picking up Cinema4D and After Effects Cs4. I am finally starting to get the hang of the these pieces of software and its brilliant! This post is mainly to show you some of the work I have done in C4D. I have done 2 different wallpapers.

Desire / Cinema 4D + Photoshop CS4

Passion / Cinema 4D + Photoshop CS4

For After Effects I have been creating little scenes with things like moving water which arent really worth posting here, but here is a screenshot of one of them.

3D Ocean / After Effects.

So there you go, some of the stuff I have been doing to help me learn these tools. I feel that now my art work has really stepped up a pace now, and hopefully you will agree too :D

Harry.

Here’s the first little tech demo of ’09 and I think it is a pretty cool one. The first difference is that it is made with Papervision3D instead of my usual engine choice of Away3D. It also uses a relativly new library, AS3DMod, and works with the 4 most popular engines.  Now this library is a modifier library which can do some really cool stuff, so go on over and check it out.

Now for the demo. It creates a standard plane, then applys a noise and perlin modifier to it. The last thing is to apply a FlatShadeMaterial to the plane and just animate these properties in the enter frame function.

You can download it here. To view the demo, click on the picture.

Harry.

In my effort to learn After Effects CS4 and create high quality visual effects/motion graphics stuff, I created this little recreation of the famous iPod Nano advert to help me learn how to use After Effects and the Trapcode Particular.

Now this makes heavy use of Particular and uses the wiggle() function to create the random motion for a minute.

It’s fairly basic but it helped me learn the basics of camera movement and how to get to grips with animation in After Effects. There will hopefully be a lot more AE/VFX coming soon. I have a little Flash demo on the way, but after that it’s a free road!

Harry.

(Updated: Download Link Added)

Phew, a tech demo hasn’t found it’s way on here for quite a while! Here is one to let you know I’m back, but busy. 

I finally managed to get an idea down on to paper, (well.. into the Flash IDE) that had been buzzing around in my head for ages! 

There is a feature in Away3D call the BitmapRenderSession, and you assign this to the session variable of your View3D. What this tells the rendered to do is, instead of drawing directly to the screen, it draws everything inside a BitmapData object, but at a much smaller resolution. This Bitmap is then scaled up and show and the selected size. As you can imagine this saves a lot of work done, as you only have to draw at, say, a quarter of the resolution that you normally would. There is a catch. You will have figured this out already, but the lost of quality is tremendous the more you scale it up, but I have found out how to make this work for me. Just look at the demo. 

What I have done here is create a plane, added then some animation to it. Then I am assigning a new BitmapRenderSession object to the View3D, and then changing the value of it when the mouse moves. If you look closely at the code, you will see that I am creating a new BitmapRenderSession for every frame. Not efficient at all, but I haven’t had the time to look into this properly, so if anyone knows a solution, let me know! 

This at one end of the scale (with your mouse at the top), looks high quality, but when you move your mouse to the bottom, you can see the effect immediately. It becomes highly pixilated and, I think, fairly cool! I have seen this sort of effect on many sites, and always wondered how I could achieve it. Here is my solution, but one of many out there I’m sure. 

Your going to have to resize your browser, as pop-ups seem to be fairly hard in WordPress :( 

You can download the whole thing over at my Google Code site (look on the right). It should be up there in a few days. Here’s the link: BMRS.zip

Harry.

In my effort to cut down the amount of code I write when using Away3D, I created this. It is a base class for projects using Away3D. What this does is create a series of protected functions that you can override and add in what you need, while the base class created the viewport, scene and everything else! This minimizes the amount of code you write in the actual project to a minimal amount!

Here is an example:

package {
	import away3d.primitives.Sphere;
	import com.harrynorthover.base.AwayBase;
 
	public class BaseClass extends AwayBase {
		public var sphere:Sphere = new Sphere( { radius:100 } );
 
		public function BaseClass() {
			// Init(camZoom, viewX, viewY);
			Init(12, 0, 0);
		}
 
		override protected function Init3D():void {
			sphere.x = 0;
			sphere.y = 0;
			view.scene.addChild(sphere);
		}
	}
}

See how much is has been reduced by? No faffing around with View3D and addChild(view) etc.

You can download the whole thing here: http://harry-northover-code-store.googlecode.com/files/Away3dBase.zip

Hope it helps!
Harry.