.video {
   height: 0.5625x;
}

Which means that your height should be 56.25% of your width (which is 100% by default with block elements). Why 56.25%? Because our video has the ratio of 16/9 and 9 divided by 16 is 0.5625.

Well, obviously, this won’t work, because CSS doesn’t provide a possibility to directly define height as a percentage of width. What Rouven found was a really nice work-around:

<style>
   .video {
      position: relative;
   }
   .video > .height {
      margin-top: 56.25%;
   }
   .video > iframe {
      position: absolute;
      top: 0px; left: 0px;
      width: 100%; height: 100%;
   }
</style>
<div class="video">
    <div class="height"></div>
    <iframe …></iframe>
</div>

Why does this work? Because all percentage values of margin relate to width, even top and bottom. Surprised? I was!

What I don’t like about that solution is this semantically worthless div as a placeholder for the div. But guess what, there’s an even simpler solution: padding percentages work the exactly same way.

The final solution:

<style>
   .video {
      position: relative;
      padding-top: 56.25%;
   }
   .video > iframe {
      position: absolute;
      top: 0px; left: 0px;
      width: 100%; height: 100%;
   }
</style>
<div class="video">
    <iframe …></iframe>
</div>

Demo

No related posts.

CSSEdit is a great app I can’t live (or at least work) without. I’ve recently discovered the LESS language, which basically extends CSS with some very very useful functionality – mainly variables and something like functions (called mixins). (By the way, things Google is gonna support natively in their Chrome browser soon – using a slightly different syntax though. See here)

Although CSSEdit hasn’t been updated for much too long, it’s IMHO still the best CSS editor out there (I’ve tried quite a few), and as much as I appreciate the bonus of LESS, I wouldn’t wanna miss the comfort of CSSEdit.

My first approach to using LESS files with CSSEdit goes like this:

<link rel="stylesheet/less" href="css/styles.css">
<script src="js/dev/less.min.js"></script>

styles.css is actually a LESS file and just named with the extension .css so CSSEdit will force an update of its Live Preview every time you modify it.

This works well with smaller html/css combos, but gets more difficult with every complexity level. Reason why is that the whole page will be refreshed with every change.

(I’ve tried to actually get around this by messing with the source less.js. Although I’ve nailed the refresh triggering down to the xhr.send() the actual reason stayed mysterious to my brain cells. May be if I’d knew the exact mechanism of how the CSSEdit Live Preview update works… but then, just read on:)

There is though a fantastic solution. One that’s also of big help if you work with other editors by the way. LESS has a very nice watch option. Whenever a linked LESS file gets updated, the resulting CSS will be generated and replaced. The great thing if you work with CSSEdit is that you won’t have to save your file to see any changes. From a CSS designer (or developer) point of view the outcome is a near-instant live preview. (LESS actually checks for changes in a Timer interval of 1000ms).

That’s how this looks in code:

<link rel="stylesheet/less" href="css/styles.less">
<script src="js/dev/less.min.js"></script>
<script>less.watch();</script>

If you like to sometimes see a live preview and sometimes just css the hell out of you without any disturbances until the next save, you can also use the glorious Hash Override: just leave away the “less.watch()” part in your script and open your html in the live preview with an additional “#!watch” hash. Something like this:

Wow, this will easen my life (ehm.. work) so much! Seriously, I really started to hate those page reloads.

Oh, and by the way, just in case I haven’t noted so far: I’d really love to see a CSSEdit update anytime soon. I’m so much willing to drink my self made Espresso for that. ;-) In case the Rabbit listens.

No related posts.

Usage:

$(elem).roundtext( {radius:150} );

Tested on latest Opera, Safari, Chrome and Firefox (I assume it won’t work in bloody IE)

Download:

jquery.roundtext.js

Example:

I used this function here: www.retro-fanshirt.com (Turn off plugins to see html version)

Sometimes I can see strange behaviour with Safari when it wouldn’t consider space characters. Just so you know.

No related posts.

No related posts.

XML files compress really well

Because XML usually contains a lot of repetitive elements (noticably tags and attributes), they are like a compressor’s darling. Just zip a few of your XML files and you’ll see.

Now I kind of always thought that on nowadays webservers gzip compression is activated by default anyway. Which was wrong, at least for quite a bunch of servers I use.

Activate GZip compression

If your server installation contains the deflate module (which is the case for all of the ones I use), then you can simply add the following line to your .htaccess file:

# compress all html, plain text, xml, css and javascript:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

http://www.gidnetwork.com/tools/gzip-test.php

I also like this one, although it only gives you little info on content-encoding. But very much on top of that :-)
http://www.wmtips.com/tools/info/

This little Firefox addon will tell you wether any site you visit has GZip activated:
https://addons.mozilla.org/en-US/firefox/addon/54647 (Content Encoding Detector)

Conclusion

HTML websites will profit a lot from this compression, as well as Flash sites (if just for your swfobject.js) that use textual communication. And best of all: it won’t need any kungfu effort on your side! And: practically all browsers support it. (I’ve only heard of problems with IE6, but then, you know, f*** IE6)

Update:

A more complete solution for your .htaccess file:

<IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
 
	AddOutputFilterByType DEFLATE image/x-icon
 
	AddOutputFilterByType DEFLATE text/css
 
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE text/x-js
	AddOutputFilterByType DEFLATE text/ecmascript
	AddOutputFilterByType DEFLATE application/ecmascript
	AddOutputFilterByType DEFLATE text/vbscript
	AddOutputFilterByType DEFLATE text/fluffscript
 
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE application/x-font
	AddOutputFilterByType DEFLATE font/opentype
	AddOutputFilterByType DEFLATE font/otf
	AddOutputFilterByType DEFLATE font/ttf
	AddOutputFilterByType DEFLATE application/x-font-truetype
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
	AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula-template
</IfModule>

(Source)

Related posts:

1. 3D Point Cloud with Javascript and Canvas

No related posts.

So we want them to believe that we’re home, not 4000 miles away on some sunny island (dream on). The solution is kind of simple actually, once you know how to do it, but it took me far too long to find it out anyway – so I thought it might be worth sharing (which also prevents me forgetting it).

We just need to route all relevant internet traffice through a home computer. You need to have SSH access to this computer, and you need to have a decent internet upload speed for video stuff. Lucky me I have a loyal and faithful Mac Mini at home, acting as Media Center, SVN server and .. well, as a decent TV proxy :-) Here’s how you do:

1. Open Terminal, enter:
   ssh -2 -C -D 2001 username@yourserver.com
   (username is your account on the remote machine – and yourserver.com could be an ip or whatever address your server has. I use Dynamic DNS for mine.)
2. Enter the password for username
3. Open «System Preferences» and go to «Network» (You can close the Terminal). Click the Button «Advanced…»
   
4. Go to «Proxies» and activate SOCKS Proxy and enter
   Socks Proxy Server: 127.0.0.1 : 2001 (see picture)
5. Go to What Is My IP Address? or this IP Tracer to check if everything works. If the map shows you’re at home, you’re good to go!

Now for TV I recommand Wilmaa: worked perfectly for me. Surprisingly good quality, and it’s for free! Great for football matches or Heidi in swiss german ;-)

No related posts.

No related posts.

I went down a few algorithmic roads recently, digging into path finding and – for some obscure reasons – bit manipulations. Or byte. Whatever.

Along this way some utility methods (or functions) were born, and I thought: May be some day some of them may be in use to any of you ;)

For my dear non-geeky readers: A bit is the smallest part in software. It’s either this or that, either 0 or 1, either false or true. With a group of 2 bits you already have 4 states: 00, 01, 10 and 11. With 8 it’s 256 and so on (2^n).

As it would be too boring to just type 0 or 1, and because we have more than 2 fingers, man invented numbers to accumulate these bits: so 9 stands for 1001, and because 9 is shorter than 1001, we prefer 9. Some even write AB for 10101011, but that’s where we come back to geeky world.

So after this highly informative introduction, let’s get to some code. First, let’s count bits:

static public function countBits( value : uint ) : uint {
	var count:uint = 0;
	while (value) {
		if ( value & 1 ) {
			count++;
		}
		value >>>= 1;
	}
	return count;
}

Example:
countBits( 0xAB ) -> 5

Now sometimes you might wanna know: Does this data contain no more than 1 bit? We could just ask countBits( value ) == 1. But that’s not as speedy as it should be, right? So here we go:

static public function is_1_bit( value : uint ) : Boolean {
	var count:uint = 0;
	while (value) {
		if ( value & 1 ) {
			if (count == 1) return false;
			count++;
		}
		value >>>= 1;
	}
	return count == 1;
}

Examples:
is_1_bit( 0xAB ) -> false
is_1_bit( 0×400 ) -> true

uint are by the way 32bit data, so a maximum of 32 of these bits we’re talking about can be turned on or off. That’s a lot of data. 4’294’967’296 combinations (though not that high compared to the numbers we read every day in the newspapers recently). Anyway, sometimes we might wanna access and set only a group of bits (usually 4 or 8) within this quite large row of bits:

static public function getBitGroup( value : uint , group : uint , len : uint = 4 ) : uint {
	return ( value >> (group*len) ) % (1 << len);
}
 
static public function setBitGroup( value : uint , groupValue :uint , group : uint , len : uint = 4 ) : uint {
	var pos:uint = group * len;
	var mask:uint = n_bits(pos);
	var right_bits:uint = value & mask;
	value >>>= pos + len;
	value <<= len;
	value |= groupValue;
	value <<= pos;
	value |= right_bits;
	return value;
}

Don’t they look just groovy?! Yeah baby!

Anyway, that’s all for now. Stay tuned for some crazy path finding. If I find time (sometimes I wonder how all those bloggers find their time to write so much..) Not to mention Twitter. Boohaa.

Related posts:

1. Simplicity follows Performance – parsing Strings in Actionscript 3
2. Metatunnel 1k Demo: AS vs. JS

There are lots of articles written about the garbage collector and I’m not going into it any deeper. Let’s just summarize that no developer likes that kind of behaviour — it’s totally unpredictable. System.gc() would help a little, but it’s only available to debug players.

You may say: what do you care about memory handling! And I’d answer: not that much actually! :-) But what I really care about is false behaviour that can result.

Within Flash we have two ways to keep weak references to objects: Dictionary and weak listeners (weak method closures). We use weak references so that objects will be collected by the garbage collector. Now when it comes to Dictionaries, they behave as I’d expect. A “dead” object won’t be listed in a for each loop. But events events events…. they’ll be dispatched to each and every “dead” object residing in memory!! Which is such a pain in the ass really!

After a lot of testing I can give only the advice you’ve probably heard many times before:

Always remove listeners! Even the weak ones!

Otherwise you have to potentially deal with unexpected behaviour. I may gonna create some utility class for that that deals with this problem.

Here my testing code:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.TimerEvent;
	import flash.system.System;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFormat;
	import flash.utils.Dictionary;
	import flash.utils.Timer;
 
	import net.hires.debug.Stats;
 
	public class MemoryLeakTest extends Sprite
	{
		public static var counter : uint;
		public static var dict:Dictionary = new Dictionary( true );
 
		private var t:TextField;
		private var makeGC:Boolean;
		private var switcher:uint;
 
		public function MemoryLeakTest()
		{
			super();
 
			t = new TextField();
			t.defaultTextFormat = new TextFormat( null, 18 , 0x999999 , true );
			t.autoSize = TextFieldAutoSize.LEFT;
			addChild(t);
 
			var timer : Timer = new Timer( 100 );
			timer.addEventListener(TimerEvent.TIMER,handleTimer);
			timer.start();
 
			stage.addEventListener(MouseEvent.CLICK,handleClick);
 
 
			stage.addChild( new Stats() );
		}
 
		public function handleTimer( event : TimerEvent ) : void {
			counter = 0;
			if ( makeGC ) System.gc();
			dispatchEvent( new Event( Event.CHANGE ) );
 
			var i:uint;
			for each ( var obj:* in dict ) {
				i++;
			}
 
			t.text = ( "Still " + counter + " dead objects living... (GC " + (makeGC?'on':'off') + ')' );
			t.appendText( '\nIn dictionary: ' + i );
			t.appendText( '\nClick to switch manual Garbage Collection aka System.gc()' );
 
			if ( switcher++ % 2 ) {
				new TestSprite( this );
				t.appendText( '\nAdded new test object (should live for 10 msec)' );
			}
		}
		public function handleClick( event : Event ) : void {
			makeGC = !makeGC;
		}
	}	
}
import flash.display.Sprite;
import flash.display.InteractiveObject;
import flash.utils.Timer;
import flash.events.TimerEvent;
import flash.events.Event;
import flash.system.System;
 
 
 
class TestSprite extends Sprite {
 
	// the TestSprite instance should not live longer than 10 msec
 
 
	public function TestSprite( parent : Sprite ) : void {
		// add to weak dictionary
		//MemoryLeakTest.dict[ this ] = true;
 
		// temporarily add to parent
		parent.addChild( this );
		var timer : Timer = new Timer( 10 );
		timer.addEventListener(TimerEvent.TIMER,handleTimer);
		timer.start();
 
		// listen (weak!!) to parent event - this is just for control purposes
		parent.addEventListener( Event.CHANGE , handleChange , false , 0 , true );
 
		// let's have those sprites eat some memory while alive
		this.cacheAsBitmap = true;
		graphics.beginFill(0xff0000,0.1);
		graphics.drawRect(0,0,500,500);
		graphics.endFill();
	}
	public function handleTimer( event : TimerEvent ) : void {
		( event.target as Timer ).removeEventListener(TimerEvent.TIMER,handleTimer);
		parent.removeChild(this);
	}
	public function handleChange( event : Event ) : void {
		MemoryLeakTest.counter++;
	}
}

No related posts.

No related posts.

For windows there is a neat Firefox Plugin that makes switching quite a snap. On Mac there is one too – I haven’t tested it, but it’s supposed to work (though I’m not too sure about that when I read these comments here). Still I prefer to work with Safari and I kind of dislike the thought of starting Firefox to just switch Plugins.

Fortunately I’ve found another solution: WSPluginSwitcher. This one comes as a Cocoa app and once configured (you really should read this wiki page), it works real well for me. Also they have prepared plugin versions for you to download (though the most recents are missing, but no big deal really).

As for the speed tests, let me just give you another example (impressing enough for me to wanna switch players for real world testing).

In Debug Player:

method...................................................ttl ms...avg ms
tare [2]                                                      0     0.00
CSSFastParser                                               603   120.60
CSSRegExpParserFast                                         987   197.40
CSSRegExpParserFastAdvanced                                1457   291.40
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

In Release Player:

method...................................................ttl ms...avg ms
tare [2]                                                      0     0.00
CSSFastParser                                               354    70.80
CSSRegExpParserFast                                         972   194.40
CSSRegExpParserFastAdvanced                                1469   293.80
––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

Both 10.0.22.87, and exported as release swf. Oh, and by the way tested with another useful tool from Grant Skinner: AS3 Performance Testing Harness.

Related posts:

1. Flash Debug Speed
2. Test Flex/Flash throttled (aka Simulate Download)
3. Flash Player 10 – I love speed

Picture by Marc Liyanage

It’s been surprisingly fun (I give credits to the beer sponsored by Nemos). People even managed to pretend they’d be interested in what I was prosing, so credit to them too!

I’d also like to mention that there’ll be the swiss flash event soon: Flash at the Lake will not only pamper you with appearances of great national and international Flash enthustiacs, it will also give anybody attending the pleasure to enjoy one of Zurich’s greatest locations with people who don’t think of you as a storm lightning adorer when you sit in the sun twittering Flash into the clear lake. And all that to a fantastic price. Check it out at fatl.ch

So here we go with the presentation (Quicktime so you can enjoy the marvelous effects):

No related posts.

No related posts.

Yeah well, I was more than optimistic to show those JS guys how fast Flash can be with the help of some brand new Adobe magic – but Pixel Bender was, unfortunately, quite disappointing:

1. I spent hours to successfully migrate the code to Pixel Bender Toolkit (wasn’t that difficult actually, but a wrong character there and your math is all screwed up). So here the first letdown: Pixel Bender Toolkit is not a very nice coding environment. It’s a rough baby. But I’d do everything for speed :-)..
2. Once I had it running (the above picture is captured from Pixel Bender) I tried to export it for Flash Player. But hoohoo! no support for loops in Flash Player! Yeah, well, ..(and also no custom functions by the way)
3. But I didn’t give up. I just calculated how many max loops where needed (about 100) and replicated the while loop with many if-conditions (I love to do computer’s dummy job ;). Then finally: Export to Flash Player! But in Flash Player having the shader as Filter for a BitmapData just really fucked up the rendering. I even went down to 1fps, but still no luck. What a bummer! (sometimes I saw a few pixels blue, but very unusable: I’ve written to the Pixel Bender Forum - invited by @Pixelbender – but that led to nothing so far).
4. Today, finally, I got it working by taking a more rough approach (not BitmapFilter, but ShaderJob). But hell is it slow!!! And it eats all my 8 cpu cores!! So I wondered how that could be: Fast as hell in Pixel Bender Toolkit (uses may be 2% of my cpu at full fps!), but slow as hell in Flash Player?! The answer is obvious: Adobe decided not to talk to the GCU (Graphics Card) for the calculations, probably to keep the Flash Player be as platform independent as possible – and as small as possible. But then I wonder.. WTF do you give us this toy if we can’t use it?!! It’s like Apple would say: «Great news: we have Core Graphics on the iPhone – without hardware acceleration..» Adobe, to me, this doesn’t make too much sense. (But I’m so very much pleased about the new Text Engine – *that* was a good job)

Here the result: (Click to start, it’ll eat your cpu!)

And for the geeks, here we go with the source codes:

<languageVersion : 1.0;>
 
kernel MetaTunnel
<   namespace : "com.betabong";
    vendor : "Betabong";
    version : 1;
    description : "MetaTunnel Port";
>
 
{
    parameter int size
    <
        minValue: 16;
        maxValue: 512;
        defaultValue: 128;
    >;
 
 
    parameter float time
    <
        minValue: float( 0.0 );
        maxValue: float( 15.0 );
        defaultValue: float( 0.0 );
    >;
 
 
 
 
    input image4 src;
    output pixel3 dst;
 
    void
    evaluatePixel()
    {
        float cos1 = cos( time );
        float cos0_5 = cos(time * 0.5);
        float cos0_7 = cos(time * 0.7);
        float sin1 = sin( time );
        float sin0_2 = sin(time * 0.2);
        float sin_0_5 = sin(time * 0.5);
 
        float dim = float( size );
        float2 point = outCoord() / dim;
        if ( point.x > 1.0 || point.y > 1.0 ) {
            dst.rgb = float3( 1.0 , 1.0 , 1.0 );
        } else {
 
        float2 vp = float2( point.x * 2.0 - 1.0 , -point.y * 2.0 + 1.0 );
        float s = float( 0.4 );
        float3 op = float3( vp.x , vp.y * 1.25 , 0.0 );
        float3 dp = float3( (vp.x + cos1 * 0.3) / 64.0 , vp.y/64.0 , 1.0/64.0 );
        float f = float( 1.0 );
 
        float tt = float( 0.0 );
        float g = float( 1.0 );
        float3 p = float3(1.0,1.0,1.0);
        while ( (g > s) && (tt<375.0) ) {
            p = op + ( dp * tt );
            f = 1.0;
            f *= abs( distance( float3( cos1+sin0_2 , 0.3 , 2.0+cos0_5*0.5 ) , p ) );
            f *= abs( distance( float3( -cos0_7 , 0.3 , 2.0+sin_0_5 ) , p ) );
            f *= abs( distance( float3( -sin0_2*0.5 , sin1 , 2.0 ) , p ) );
            f *= cos(p.y)*cos(p.x) - 0.1 - cos( p.z*7.0 + time*7.0 ) *cos(p.x*3.0)*cos(p.y*4.0)*0.1;
            g = f;
            tt += g * 4.0;
        }
        float color = 0.0;
        float3 dtt = op + ( dp * tt);
 
        p = float3( dtt.x , dtt.y , dtt.z );
        f = 1.0;
        f *= distance( float3( cos1+sin0_2 , 0.3 , 2.0+cos0_5*0.5 ) , p );
        f *= distance( float3( -cos0_7 , 0.3 , 2.0+sin_0_5 ) , p );
            f *= distance( float3( -sin0_2*0.5 , sin1 , 2.0 ) , p );
        f *= cos(p.y)*cos(p.x)-0.1-cos(p.z*7.0+time*7.0)*cos(p.x*3.0)*cos(p.y*4.0)*0.1;
        float objd = f;
 
        float3 np = float3( 0.0,0.0,0.0 );
 
        p = float3( dtt.x + 0.01 , dtt.y , dtt.z );
        f = 1.0;
        f *= distance( float3( cos1+sin0_2 , 0.3 , 2.0+cos0_5*0.5 ) , p );
        f *= distance( float3( -cos0_7 , 0.3 , 2.0+sin_0_5 ) , p );
            f *= distance( float3( -sin0_2*0.5 , sin1 , 2.0 ) , p );
        f *= cos(p.y)*cos(p.x)-0.1-cos(p.z*7.0+time*7.0)*cos(p.x*3.0)*cos(p.y*4.0)*0.1;
        np.x = objd - f;
 
        p = float3( dtt.x , dtt.y + 0.01 , dtt.z );
        f = 1.0;
        f *= distance( float3( cos1+sin0_2 , 0.3 , 2.0+cos0_5*0.5 ) , p );
        f *= distance( float3( -cos0_7 , 0.3 , 2.0+sin_0_5 ) , p );
            f *= distance( float3( -sin0_2*0.5 , sin1 , 2.0 ) , p );
        f *= cos(p.y)*cos(p.x)-0.1-cos(p.z*7.0+time*7.0)*cos(p.x*3.0)*cos(p.y*4.0)*0.1;
        np.y = objd - f;
 
        p = float3( dtt.x , dtt.y , dtt.z + 0.01 );
        f = 1.0;
        f *= distance( float3( cos1+sin0_2 , 0.3 , 2.0+cos0_5*0.5 ) , p );
        f *= distance( float3( -cos0_7 , 0.3 , 2.0+sin_0_5 ) , p );
            f *= distance( float3( -sin0_2*0.5 , sin1 , 2.0 ) , p );
        f *= cos(p.y)*cos(p.x)-0.1-cos(p.z*7.0+time*7.0)*cos(p.x*3.0)*cos(p.y*4.0)*0.1;
        np.z = objd - f;
 
        float d = length( np );
        np.y /= d;
        np.z /= d;
 
        color = max( -0.5 * np.z , 0.0 ) + max( -0.5 *np.y + 0.5 * np.z , 0.0 ) * 0.5;
        float3 rgb = float3(color  + 0.1 * tt * 0.025 , color  + 0.2 * tt * 0.025  , color + 0.5 * tt * 0.025   );
        rgb.x = max( 0.0 , min( 1.0 , rgb.x ) );
        rgb.y = max( 0.0 , min( 1.0 , rgb.y ) );
        rgb.z = max( 0.0 , min( 1.0 , rgb.z ) );
 
        dst.rgb = rgb;
 
 
      }
 
    }
 
}

And here the Actionscript part:

package
 {
    import flash.display.*;
    import flash.events.*;
    import flash.filters.*;
    import flash.net.*;
    import flash.utils.ByteArray;
 
    import net.hires.debug.Stats;
    // SWF Metadata 
    [SWF(width = "520", height = "128", backgroundColor = "#000000", framerate = "1")]
    public class MetaTunnelBender extends Sprite {
 
        [Embed("test/MetaTunnel-stupid.pbj", mimeType = "application/octet-stream")]
        private var TestFilter: Class;
        private var playing : Boolean;
 
        private var im: Bitmap;
        private var job:ShaderJob;
        private var shader: Shader;
        private var shaderfilter:ByteArray;
        private var time:Number = 0.0;
        private const SIZE:Number = 64;
        private const WHITE:BitmapData = new BitmapData( SIZE , SIZE , false , 0xffffff );
 
        public function MetaTunnelBender() : void {
        	stage.frameRate = 20;
            im = new Bitmap( WHITE.clone() );
            im.scaleX = im.scaleY = 2;
            addChild(im);
 
            // stat info
            var s:DisplayObject = new Stats();
            addChild( s );
            s.x = 128;
 
            //Pass the embedded filter to the Shader as a ByteArray 
            shaderfilter = new TestFilter() as ByteArray;
            shader = new Shader( shaderfilter );
            shader.data.size.value = [ SIZE ];
 
			//start shaderjob (async start won't work - bug?)            
            job = new ShaderJob( shader , im.bitmapData , im.width , im.height );
			job.start( true );
 
			// let's start/stop on click
			stage.addEventListener( MouseEvent.CLICK , click );
 
            // render first frame
			enterframe();
        }
 
        private function enterframe( e:Event = null ) : void {
        	time += 0.05;
			shader.data.time.value = [ time ];
			trace( job.progress );
            job = new ShaderJob( shader , im.bitmapData , im.width , im.height );
			job.start( true );
       }
 
        private function click( e:* = null ):void {
        	if( !playing ) {
	           addEventListener( Event.ENTER_FRAME , enterframe );
	        } else {
	           removeEventListener( Event.ENTER_FRAME , enterframe );
	        }
	        playing = !playing;
        }
 
    }
 
}

Related posts:

1. Metatunnel 1k Demo: AS vs. JS
2. GridFitType (& animation)

Paulo Falcão ported this to Javascript using canvas.

To make the set complete I ported Paulos JS version to Actionscript, just quick’n'dirty.

Click on it to start the animation:

Here’s the code:

package test
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class JSCanvasPort extends Sprite
	{
		public function JSCanvasPort()
		{
			super();
			addChild( canvas = new Bitmap() );
			canvas.smoothing = false;
			canvas.scaleX = canvas.scaleY = 2;
			draw();
 
			addEventListener( MouseEvent.CLICK , handleClick );
		}
 
		private var playing:Boolean = false;
 
		public function handleClick( e:Event = null ) : void {
			if ( playing )
				removeEventListener( Event.ENTER_FRAME , enterframe );
			else
				addEventListener( Event.ENTER_FRAME , enterframe );
			playing = !playing;
		}
		public function enterframe( e:Event=null ) : void {
			draw();
		}
 
		public var time:Number=0;
		public var maxr:Number=64.0;
		public var canvas:Bitmap;
 
		public function distance(ax:Number,ay:Number,az:Number,bx:Number,by:Number,bz:Number):Number{
			var dx:Number=bx-ax , dy:Number=by-ay , dz:Number=bz-az;
		    return Math.sqrt( dx*dx + dy*dy + dz*dz );
		}
		public function obj(x:Number,y:Number,z:Number,t:Number):Number{
		        var f:Number=1.0;
		        f*=distance(x,y,z,Math.cos(t)+Math.sin(t*0.2),0.3,2.0+Math.cos(t*0.5)*0.5);
		        f*=distance(x,y,z,-Math.cos(t*0.7),0.3,2.0+Math.sin(t*0.5));
		        f*=distance(x,y,z,-Math.sin(t*0.2)*0.5,Math.sin(t),2.0);
		        f*=Math.cos(y)*Math.cos(x)-0.1-Math.cos(z*7.0+t*7.0)*Math.cos(x*3.0)*Math.cos(y*4.0)*0.1;
		        return f;
		}
 
		public function eval(x:Number,y:Number,t:Number):uint{
		   var vx:Number=x*2.0-1.0; var vy:Number=-y*2.0+1.0;
		   var s:Number=0.4;
		   var ox:Number=vx;var oy:Number=vy*1.25;var oz:Number=0.0;
		   var dx:Number=(vx+Math.cos(t)*0.3)/64.0;var dy:Number=vy/64.0;var dz:Number=1.0/64.0;
		   var tt:Number=0.0;
		   var g:Number=1.0;
		   while((g>s)&&(tt<375)){
		         g=obj(ox+dx*tt,oy+dy*tt,oz+dz*tt,t);
		         tt+=g*4;
		   };
		   var color:Number=0.0;
		   var dxtt:Number=ox+dx*tt;var dytt:Number=oy+dy*tt;var dztt:Number=oz+dz*tt;
		   var objd:Number=obj(dxtt,dytt,dztt,t);
		   var nx:Number=objd-obj(dxtt+0.01,dytt,dztt,t);
		   var ny:Number=objd-obj(dxtt,dytt+0.01,dztt,t);
		   var nz:Number=objd-obj(dxtt,dytt,dztt+0.01,t);
		   var d:Number=Math.sqrt(nx*nx+ny*ny+nz*nz);ny=ny/d;nz=nz/d;
		   color+=Math.max(-0.5*nz,0.0)+Math.max(-0.5*ny+0.5*nz,0.0)*0.5;
		   var r:Number=(color+0.1*tt*0.025);
		   var g:Number=(color+0.2*tt*0.025);
		   var b:Number=(color+0.5*tt*0.025);
		   return getRGB(r,g,b);
		}
 
		public function getRGB(r:Number,g:Number,b:Number):uint{
		        if (r<0) r=0; else if (r>1) r=1;
		        if (g<0) g=0; else if (g>1) g=1;
		        if (b<0) b=0; else if (b>1) b=1;
			return ((r*255)&255) << 16 | ((g*255)&255) << 8 | ((b*255)&255);
		}
 
		public function draw():void{
			if ( canvas.bitmapData == null ) {
				canvas.bitmapData = new BitmapData( maxr , maxr , false , 0xffffff );
			}
			var t:BitmapData = canvas.bitmapData;
			time+=0.1;
			t.lock();
		        for(var x:Number=0;x<maxr;x++){
		                var px:Number=x/maxr;
		                for(var y:Number=0;y<maxr;y++){
		                        var py:Number=y/maxr;
		                        t.setPixel( x , y , eval(px,py,time) );
		                }
		        }
		   t.unlock();
		};
 
	}
}

Update: A quickly optimized version (nothing advanced really).

(You can switch quality in this version with key up or down).

Related posts:

1. MetaTunnel with Pixel Bender
2. Weak Method Closure
3. 3D Point Cloud with Javascript and Canvas

Well not really much to say here:

• NONE Good for animation and people who prefer Font appearance over readability
• SUBPIXEL Good compromise between readability (small sizes) and appearance
• PIXEL Pure nonsense if you ask me

What I really wonder though is: Why on earth can’t I adjust fractioned text sizes (aka float)??? In the IDE, yes you can. By actionscript, no you can’t. I don’t get it.. anybody knows why that is? And more importantly: is there some fancy workaround? (in the example I’m just scaling the text fields, but that’s not really a cool solution).

No related posts.

There are a lot of PRO for the swffit way:

• It gives users the system scrollbar. Users are used to that, they know what it means, they know how to deal with it.
• Mouse wheels just work! It’s scrolling a standard browser window, no magic at all: great! (You have to use this otherwise)
• It’s easy to implement.

Still there is a CONTRA side:

• You’ll need javascript (well, that’s no biggy at all – as a matter of fact, you’re just pretty in the desert without javascript in todays websites)
• You have no control over scrollbar design (neither a biggy – as another matter of fact I consider that a good thing anyway, but don’t tell the brand agency ;-)
• It has performance disadvantages. Well that I consider a biggy! Because the movie will always be in its full height, it will do rerender for the entire area!! Imagine long page with animations here and there: Given Flash’s «not so fast» rendering engine, this can become a huge performance killer. Let me give you a quick’n'dirty example: Full Height compared to «Cropped» to Window Height (just resize browser window to real small size to see the big difference).

Conclusion: I’m just glad I found one good reason to not declare my internal scrollbar like in www.betabong.com as complete bullshit ;-)

No related posts.

Ha! Okay, that’s not that much of news (even for me). But what astonishes me is how much this speed gap can be, especially when it comes to massive data calculations. I somehow always had a somewhat 20 percent speed decrease in mind (I was just presuming, me dumb). But for a 3d particle test we’re talking factor 8!!

Now this made me curious… so I’ve tested with Debug and Release Player both debug and release SWFs:

Debug Player running Debug SWF

Debug Player running Release SWF

Release Player running Debug SWF

Release Player running Release SWF

A few conclusions:

• Never release a SWF file with debug code (or otherwise said: put only stuff online from bin-release, never bin-debug). Though common users won’t notice the speed decrease, your friendly flash developers may, at least if you’re app is somewhat cpu intensive. And of course: debug SWF are much bigger in size (just in case you give a fuck about flash devs ;-)
• Speed tests should be played in the release player. Why? After all, I wouldn’t care if the relation would stay the same. Usually you just need to know how much faster one thing is compared to the other one, so that would do it. But unfortunately the ratio won’t always be the same. In the above example the ration is 3.66 for debug and 2.92 for release. And it can differ muuuuch more.

The last one bugs me quite a bit. It’s just a pain in the ass to export a release build each time you wanna compare performance. And it also means you can’t do quick’n'dirty trace outputs for the time result (not a biggy if you’re testing within a Flex project though).

So here we go with two wishes for Adobe:

• Let us quickly test release builds within Flex Builder (a simple command would do it – I thought it might be «Run Testapp» (instead of «Debug Testapp»), but that just doesn’t bring up the Debugger (and same speed)
• An option to turn off debugging mode in Debug Player!!! That would solve almost all problems, and we could also use our Plugin for normal browsing without performance penalties (is this why Youtube eats so much cpu here?

Related posts:

1. Switch Flash Browser Plugin on Mac OS X
2. Flash Player 10 – I love speed
3. Test Flex/Flash throttled (aka Simulate Download)

It happens to DisplayObjects A inside DisplayObjectContainers B inside DisplayObjectContainer C, when

• A was not initially visible (not inside initial scroll rect of C)
• A is in 3D mode (I just change rotationY for that)
• B is in «cached as Bitmap» (cacheAsBitmap would do, I go with DropShadowFilter in the example)
• C’s scrollrect property is set, so A is shows up (well, it doesn’t – that’s the bug after all ;)

Here the example:

bug-3d-shadow.swf

And here the code:

/* Flash Bug - Flash Player 10.0.22.87
	disappearance when 3d's parent has shadow
	more info: betabong@gmail.com
*/
 
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
 
 
var scroller:Sprite = new Sprite();
addChild( scroller );
scroller = this;
 
var filter:DropShadowFilter = new DropShadowFilter( 2 , 90 , 0 , 0.5 , 8 , 8 , 1 , 2 );
var r:Sprite,rect:Sprite;
 
for ( var mode:int = 0 ; mode<=1 ; mode++ ) {
	for ( var i:int=0 ; i<3000 ; i+=100 ) {
		r = new Sprite();
		r.addChild( rect = new Sprite() );
		rect.graphics.beginFill( 0xff0000 );
		rect.graphics.drawRect( -40 , -40 , 80 , 80 );
		rect.graphics.endFill();
		rect.addEventListener( MouseEvent.MOUSE_MOVE , rotate );
		if ( !mode ) r.cacheAsBitmap = true; //r.filters = [ filter ];
		r.y = i + 100;
		r.x = mode * 150 + 100;
		addChild( r );
	}
}
 
stage.addEventListener( Event.ENTER_FRAME , move );
 
var scroll:Number = 0;
function move( event:Event ) : void {
	scroll += ( stage.mouseY - 100 ) / 50;
	scroller.scrollRect = new Rectangle( 0 , scroll , 500 , 200 );
}
 
 
function rotate(e:*) {
	e.target.rotationY++;
}

Update: Now that: it took me about 20 min to file a bug in the Adobe Bug System (which is slow as hell anyway). And when I want to submit it, I get a message saying they’d be in maintenance. Well, buggy bug systems piss me off quite a bit.

No related posts.

ActionScript 3.0 enables a method closure to automatically remember its original object instance (from Adobe ActionScript 3.0 * Core language features)

Method Closure are quite a wonderful thing: They come in handy in many situations, especially when it comes to event listening and handling. And they stay kind of wonderful in terms of «hidden magic». Hidden magic is all that stuff never officially explained by Adobe. These things often are very core to the language (e.g. exact processing order, frame splitting, event handling), but Adobe decided – certainly for reasons – to only let us see and manipulate what common developers are to see and manipulate.

Still, I’d like to have to possibility to dig deeper if I want. If there is a MethodClosure Type, why is there no way to access its properties. After all it holds a reference to its owner. I may wanna know what the owner is! I admit that its not that there aren’t many obvious reasons why I would do so, but there are! For example:

public function get width() : Number {
	var caller : * = MethodClosure( arguments.callee ).owner;
	if ( isChild( caller ) ) {
		return widthValueForChild;
	} else {
		return actualWidthValue;
	}
}

May be may be there is a way.. I’m not a hardcore byte array hacker, but if I find a solution (or explanation why o why), I’ll update this post.

No related posts.

No related posts.

No related posts.

What I’ve done is this (a litte simplified):

• Migrated my 3D engine I’ve written years ago from AS1 to Javascript
• Extracted point cloud from Colada 3D object
• Draw rectangles for every point to canvas

And that’s how it looks:

Should work on Safari, Firefox and Opera.

No related posts.