Streamhead - 30/36 - multimedia webapplication thoughts and experiments

How to solve any problem by playing Tetris – home improvement gone digital

By Peter Backx | Published: June 20, 2008

I already talked about it in previous blog posts: I am renovating a small home. It requires a lot of planning and even then, it is not always easy to get a good idea of what the end result will be like. That’s where digital tools have helped me tremendously. You have a paper plan, but don’t quite know what it will look like from the inside: get yourself a 3D modelling program. You don’t know how many lights you need and where to place them: start rendering.

Today’s problem is much more down to earth, but, for some, many times as important: closet space. If you take a look at your current dwelling, you might not realize how much stuff you have. Even if you don’t need it all, it’s always interesting to make sure that you have enough space in the next house or apartment to store it all (because, really, when are you going to find the time to sort it).

The smaller the space gets, the more important planning is. If you have a mansion, you probably won’t need to worry, but if you have anything smaller, it’s definitely worth considering where you are going to put everything.

So that’s the problem, but how to deal with it. Well, I started with what we currently have available as clothing storage. Right now it’s a bit all over the place, so measuring it all took some time.

Next, I wanted to place it in the bedroom where, logically speaking, it all belongs. I could have used SketchUp once more for this task, but in this case, I think it would have been overhead to start messing in 3D (the depth of pretty much any closet is the same). So I ended up with a little gem, called Inkscape. Until a few days ago, I had never heard of this open source tool, but I must say it’s really polished and professional. It’s sort-of The Gimp for vector graphics. But add some
additional user-friendliness (I never could get over The Gimp’s user interface, but must admit I never tried very hard)

I created an empty document, put the grid on something reasonable: every 10 units (for me those are cm’s, pick your favorite) and started drawing everything I had measured. You’ll only need a few tools:

The rectangle tool for all rectangular space (duh).
If you have irregular shaped storage, use the line tool. Just click once to start a line and click once more at the end. Make sure you connect the other lines (the little square should be filled).

It took me a whole 10 minutes to get this storage layout:

With that done, I used the line tools to recreate the wall where I wanted to put the closets. If you have multiple locations available, you might want to add some more walls. Easy enough.

And now the game starts. I dragged everything onto the wall and was happy to notice that everything fits. There probably is a better solution, but finding the best one is apparently not that easy. It doesn’t matter much anyway as I’m not that fond of recreating the exact same set of closest. The configuration will need to be a little different, but there certainly won’t be less space.

There are actually many more uses. If you are not too fond of 3D or you can’t get used to the 3D navigation, you can use Inkscape to easily lay out your floor plan. And of course, you can actually make art with it, just check out this gallery.

Posted in Graphics, Visuals and Texts | Comments closed

Indiana Jones fan guide – how to be a publisher

By Peter Backx | Published: June 17, 2008

Indiana Jones …

fan guide to the g…

The previous post was a bit short, because I had a larger project to complete. I wanted to test Blurb, a self-publishing service. It supposedly gives you the ability to personally publish professional books, starting at one piece.

I took my Indiana Jones and the last crusade obsession and turned it into a fan guide. Based on the definite guide by Johnny Walker, I got working. It took me a whole lot longer than I expected, but I think the result is worth it. If you’re interested, you can order it right here. It’s actually pretty cheap.

I’ve just ordered my own, more news when it arrives in the mail.

What happened to the teapot – string theory explained

By Peter Backx | Published: June 13, 2008

While we are still struggling to get 3 dimensions under control, Ducky over here, is already exploring a few dimensions more. Seeing that old favorite 3D model again, I can’t help but wonder what happened to the Utah Teapot. Maybe he escaped to one of those other dimensions or he might be lost in time.

If you want to know more, be prepared to loose the rest of the day. Here’s a good starter.

Posted in Legacy Content | Comments closed

More fun with free 3D tools – materials

By Peter Backx | Published: June 10, 2008

If you hadn’t noticed already, I am a huge fan of the simplicity of Google’s SketchUp. It gives the power of 3D to the people. Everybody with a mouse and a partially descent computer can get started right here, right now.

IRender nXt recently released a new preview version of their Google SketchUp plugin, so that was enough for me to pick it up one more time. This time I started experimenting with materials. You can see some results here. The new version seemed to be a lot faster. If I rendered my previous models it took only a tenth of the time. However, as soon as I started some more complicated materials, I lost all that speed gain again. Obviously, this is only normal, translucent, reflecting materials require much more complicated calculations and rendering passes.

Although IRender’s the material editor is pretty straightforward, it’s also not completely polished yet. It did crash on me a few times and it was terribly slow. The material editor uses the rendering engine to give you a preview of the material, so I guess that’s why it’s not that fast. I also couldn’t get bump-mapping to give me any publishable results, so none of the pictures use it.

The most annoying limitation was that I couldn’t clone materials and create a child material with almost, but not quite, the same parameters. It always copied the last setting (of the clone) over the original material. Rather annoying if you want to compare slightly different options. It might be related to the way IRender plugs into the SketchUp engine. I also got some very unexpected results, maybe bugs? I’m not sure if they are correct (from a light-ray-calculating point-of-view) but they sometimes look nice. For instance the one on the right was pretty unexpected.

As you’ll notice if you compare those renderings to the one in the previous post, even the smallest tweaks improve the endresult tremendously. The whole change parameter – render – change – render cycle is pretty long, but it certainly is worth it.

As a somewhat interesting aside: I used the 960 Grid System CSS framework to quickly get the nice grid layout. No tables were used, and I didn’t have to mess hours with CSS to get it to show up correctly. Certainly worth a look if you’re into that kind of thing.

Posted in Graphics, Visuals and Texts | Comments closed

BT’s This Binary Universe – the search for the perfect videoclip

By Peter Backx | Published: June 5, 2008

Many musicians like to add the perfect images to their sounds. Usually they end up with a 3 minute boobshow destined for MTV and the likes. Others take it to strange, yet mindblowing extremes (seriously, Koyaanisqatsi is worth at least a few blog posts on its own).

BT’s This Binary Universe looks to take the middle road. It’s certainly not your average TV videoclip, but it doesn’t seem to aspire at epic grandeur or want to be Art, with a big A. Watch this and judge for yourself, but I think, BT definitely manages to create a perfect synergy between music and video.

I’m not sure if BT himself needs any introduction. From the early 90s when he started as one of the pioneers in trance, he has been on my radar. With Remember he peaked, but he didn’t fade or burn out. He spread his wings and showed that he was not limited to the club genre. He has enough talent to keep you interested at home or the movies or the car, not just on the dancefloor.

This Binary Universe was released in 2006, quite a while ago, but I tend to be slow in my appreciation.
The album shows that BT’s music is powerful enough to be the centerpiece. He did already make movie soundtracks in the past, but here it’s the music that leads and the visuals that follow.

Better late than never.

Posted in Music | Tagged recommended | Comments closed

Recipebook 2.0 – fast prototyping with JavaScript and JSON services

By Peter Backx | Published: June 4, 2008

In a minor revelation, I saw the future of recipes and cook books. Yes, really. However, it’s so basic I can’t believe no one has done this before. The LazyWeb is long gone, so it looks like I’m going to have to do it myself.

What I would like is a list of ingredients where I can pick whatever I have left in the fridge and just start cooking. So that’s how I ended up with my Recipebook 2.0 prototype. Click careful because this really is just a prototype, with many loose nuts and bolts. But it should get the idea across. The building of the prototype might be even more interesting for some. The entire site took me about 5 hours to build, from idea to execution. Honestly, this is much faster than the usual speed at which this kind of stuff is developed in the companies I work(ed).

I am using del.icio.us as my database. Added some Yahoo! Pipes processing in there. And glued it all together with some Ext.js. There’s no server code at all. Most of the development time went into finding out how to correctly use the ScriptTagProxy. It’s pretty straightforward, but a little confusing at first. The JavaScript, in general, is not very nice and needs to be cleaned up. But there’s a lot missing anyway, I really wanted to get a proper recipe submit popup but couldn’t get it to work without serverside code.

As always, suggestions welcome.

Services now available via Elance

Posted in Java and JavaScript | Comments closed

Build your world

By Peter Backx | Published: May 27, 2008

To model larger things than your own bedroom in SketchUp, you will need a lot of patience and persistence. And even then, you can’t model how the worlds live and act. No, you’re going to need tools better suited to the job.

You could take it leisurely and install the one and only city simulator: SimCity. If you want to build cool looking cities like the one on the left, you’ll need one of the new iterations of the game. Or if you don’t mind 80s graphics and the basics, there is a free version of the classic game online. It doesn’t seem to work on FireFox though. But beware of lost hours once you get going.

SimCity 4 offers you much more advanced gameplay. It has a lot more variables than the classic game, but with it comes added depth. If you manage to master the game in this lifetime, and think it is limited, go and take a look at SimTropolis. The real fans go far beyond what you think is possible with “just” a game. Real cities, real monuments, or stuff that’s far out there. The game can transform to suite every taste.

Be careful, city building will take a lot of your time. Don’t worry about all those gamers loosing time on the boring action game of the moment. You are building a living thing! Or so it seems.

A step away from SimCity’s accessibility are the real developers. Those who take programming seriously. As they say: If you want to create the ultimate city, you got to pay the ultimate price If you want something visually impressive that “lives”, you will need advanced knowledge of 3D programming and at least some basic knowledge of Artificial Intelligence.

Smithee at Digital Urban is hosting an entire series of how to use Agent Based Modelling inside 3D modelling applications. In his latest installment he even takes his theories into Second Life. You will need to do a little digging on the CASA site to figure out the algorithms and a lot more work to implement them yourself. But nothing beats the feeling of seeing your creation come to life.

Many other universities also have their proper city/world modelling departments. Such as the cities project at the CCL. They use their own NetLogo modelling environment, which is very powerful in the agent modelling department, but a lot less in the graphical department. Maybe some one can make the link between the NetLogo environment and a 3D tool. That would immediately bring it up to par with Digital Urban’s research.

To finish this extremely short introduction to virtual city building, I’d like to mention one more game producer. It’s Introversion, creator of such innovative games as Darwinia. Judging by their blog entries, they take their work very seriously. For instance, take this post on how cities are generated in Subversion. Obviously, they don’t give you any of the algorithms. But following along their development process is interesting enough. There is a whole set of “It’s all in your head” articles. All are worthy of your attention.

BTW, as always, the comments are open: Feel free to add your favourite virtual world to this list.

Posted in Graphics, Visuals and Texts | Tagged recommended | Comments closed

Quick tip: ActionScript trace statements

By Peter Backx | Published: May 26, 2008

In a previous post, I already hinted at the existence of the ActionScript “trace” statement. To make good use of it, you should install the debug Flash Player and FDTracer. FDTracer is a basic plugin for FlashDevelop that will show the trace output right inside FlashDevelop. No need to go find the logs files, everything is right there. Really simple, but oh so useful. Everything is explained here.

Posted in Flash and ActionScript | Comments closed

How to use images in ActionScript 3 with FlashDevelop (and some other AS3 tips)

By Peter Backx | Published: May 22, 2008

update: I’ve created a new and updated tutorial on embedding images in FlashDevelop. I suggest you check out that tutorial instead of the one below. The new tutorial is cleaner, clearer and more up-to-date.

One of the main bumps you will run into when coding Sandy3D, or basically any kind of graphical applet is loading resources, such as images. If you are working inside Adobe’s Flash environment, this all comes pretty naturally. But open source tools such as FlashDevelop do not have a graphical component, so you have to create your multimedia assets in other applications (Paint.NET is nice).

Before you get started, have a look at this MovieClip vs Sprite comparison and this tutorial on starting with AS3 to understand why our base class extends Sprite and how events are handled. And if you want to know where all this is going, the idea is to recreate something similar to this in ActionScript 3 and FlashDevelop and then afterwards add some 3D goodness to it (3D objects, maybe 3D camera).

One important thing to know about event handlers is: don’t attach them to your main Sprite. This won’t work:

public class Test extends Sprite {
  public function Test() {
    graphics.lineStyle(1);
    graphics.beginFill(0xFF8000);
    graphics.drawCircle(50, 50, 10);
    addEventListener(MouseEvent.MOUSE_DOWN, down);
  }
  private function down(evt:MouseEvent):void {
    trace("down");
  }
}

My intuition was that it would attach mouse down events to the circle. But it does not. In most cases you would want to capture the whole sprite anyway. The solution is to add your listeners to the “stage” object. See the the examples below for a demonstration of this.

In Flash, images come in 2 types. Vector drawings or bitmaps. Pretty much all graphics you see on the Internet are bitmaps, every pixel in the bitmap is defined. A program such as Paint.NET will create those for you. Vector images are a different beast. Those images define the lines and forms that are used. In the example above, a circle is drawn, not a collection of points. The advantage is that the image quality will be a lot higher and it is possible to zoom in on the Flash applet without loosing quality. But (there always is a but) you can only draw those in the Adobe Flash editor. You can use existing .fla files with vector drawings in them, but you can’t make your own, unless you pay for the program. Either that or you would have to handcode everything. A future post will probably deal with that.

But this post deals with bitmaps. We will start from the following simple mouse-follow applet and replace the circle with a bitmap:

package  {
  import flash.display.Sprite;
  import flash.events.Event;
  import flash.ui.Mouse;
 
  public class Test extends Sprite {
 
    private var circle:Sprite = new Sprite();
 
    public function Test() {
      Mouse.hide();
 
      circle.graphics.lineStyle(1);
      circle.graphics.beginFill(0xFF8000);
      circle.graphics.drawCircle(0, 0, 10);
      addChild(circle);
 
      stage.addEventListener(Event.ENTER_FRAME, mouseMove);
    }
    private function mouseMove(evt:Event):void {
      circle.x = mouseX;
      circle.y = mouseY;
    }
  }
}

This is the result:

I like to store all my resources in a separate directory, called “library“. It’s not a the “real” library that you have in the Flash IDE, but it’s close enough. I’m using this crosshair bitmap:

Once we have an image, it’s time to embed it. ActionScript 3 has an “Embed” tag that will allow you to put images in an applet. See this link for the complete explanation. Basically, you define a private Class variable, put the cursor just above it and double click on your image. FlashDevelop will automatically insert the correct “Embed” tag in your code. A little tweaking to get the correct size and there you are:

package  {
 
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.ui.Mouse;
 
	public class Test extends Sprite {
 
		[Embed(source='library/crosshair.png')]
		private var crosshairClass:Class;
		private var crosshair:Bitmap = new crosshairClass ();
 
		public function Test() {
			Mouse.hide();
 
			crosshair.height = 30;
			crosshair.width = 30;
			addChild(crosshair);
 
			stage.addEventListener(Event.ENTER_FRAME, mouseMove);
		}
 
		private function mouseMove(evt:Event):void {
			crosshair.x = mouseX - 15;
			crosshair.y = mouseY - 15;
		}
 
	}
 
}

As you will notice, the quality of the scaled down image is not that good, but using a larger sprite allows you to zoom in with little quality loss. Next time, I’ll show you how to fix this.

Posted in Flash and ActionScript | Tagged as3, flashdevelop | Comments closed

Now with geoblogging – howto geotag your WordPress blog

By Peter Backx | Published: May 18, 2008

Combining the virtual with the real, that’s what geoblogging and geotagging are all about. It’s really easy to add this stuff on any WordPress blog. Basically you follow along the linked article to get the required tags and your coordinates. Once that’s done, you could copy the tags directly into your template, but if you upgrade or change your theme, they will be lost.

It is easier to install the Header-Footer plugin and use that one. Be careful! The plugin does not like special characters. If I copied the tags as is, there were different versions of double quotes in there. That really screwed up the plugin. All my header and footer tags were lost and replaced by an “a”. So make sure you only use the normal quotes (for instance, don’t copy from Word).

Once that’s all done, you can enter your site on geourl and get a neat button, like this:

And if you want even more geo-fun, install the GeoPress plugin and you can start geotagging your posts. The picture above was taken here:

NOTE: I’ve since removed the GeoPress plugin because it was using a bit too many resources. I plan on trying it again in the near future, so stay tuned.

Posted in On Streamhead | Comments closed

Be the first to receive inside Streamhead information

Email Address :
Search
Categories

multimedia webapplication thoughts and experiments

Be the first to receive inside Streamhead information

Search

Categories