<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>blog.betabong.com &#187; Javascript</title>
	<atom:link href="http://blog.betabong.com/category/tech/javascript-tech/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.betabong.com</link>
	<description></description>
	<lastBuildDate>Thu, 02 Feb 2012 10:45:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Using CSSEdit with LESS</title>
		<link>http://blog.betabong.com/2011/05/15/using-cssedit-with-less/</link>
		<comments>http://blog.betabong.com/2011/05/15/using-cssedit-with-less/#comments</comments>
		<pubDate>Sun, 15 May 2011 13:56:00 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=351</guid>
		<description><![CDATA[<p><img src="http://blog.betabong.com/wp-content/uploads/2011/05/cssedit-less.jpg" alt="" title="cssedit-less" width="512" height="512" class="aligncenter size-full wp-image-347" /></p>
<p><a href="http://macrabbit.com/cssedit/">CSSEdit</a> is a great app I can&#8217;t live (or at least work) without. I&#8217;ve recently discovered the <a href="http://lesscss.org/">LESS</a> language, which basically extends CSS with some very very useful functionality &#8211; mainly variables and something like functions (called mixins).&#8230; <a href="http://blog.betabong.com/2011/05/15/using-cssedit-with-less/" class="read_more">Read more</a></p>
No related posts.]]></description>
			<content:encoded><![CDATA[<p><img src="http://blog.betabong.com/wp-content/uploads/2011/05/cssedit-less.jpg" alt="" title="cssedit-less" width="512" height="512" class="aligncenter size-full wp-image-347" /></p>
<p><a href="http://macrabbit.com/cssedit/">CSSEdit</a> is a great app I can&#8217;t live (or at least work) without. I&#8217;ve recently discovered the <a href="http://lesscss.org/">LESS</a> language, which basically extends CSS with some very very useful functionality &#8211; 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 <a href="http://goo.gl/gTWLt">here</a>)</p>
<p>Although CSSEdit hasn&#8217;t been updated for much too long, it&#8217;s IMHO still the best CSS editor out there (I&#8217;ve tried quite a few), and as much as I appreciate the bonus of LESS, I wouldn&#8217;t wanna miss the comfort of CSSEdit.</p>
<p>My first approach to using LESS files with CSSEdit goes like this:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;link rel=&quot;stylesheet/less&quot; href=&quot;css/styles.css&quot;&gt;
&lt;script src=&quot;js/dev/less.min.js&quot;&gt;&lt;/script&gt;</pre></div></div>

<p>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.</p>
<p>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.</p>
<p>(I&#8217;ve tried to actually get around this by messing with the source less.js. Although I&#8217;ve nailed the refresh triggering down to the xhr.send() the actual reason stayed mysterious to my brain cells. May be if I&#8217;d knew the exact mechanism of how the CSSEdit Live Preview update works&#8230; but then, just read on:) </p>
<p><strong>There is though a fantastic solution.</strong> One that&#8217;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&#8217;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).</p>
<p>That&#8217;s how this looks in code:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;link rel=&quot;stylesheet/less&quot; href=&quot;css/styles.less&quot;&gt;
&lt;script src=&quot;js/dev/less.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;less.watch();&lt;/script&gt;</pre></div></div>

<p>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 &#8220;less.watch()&#8221; part in your script and open your html in the live preview with an additional &#8220;#!watch&#8221; hash. Something like this:</p>
<p><img src="http://blog.betabong.com/wp-content/uploads/2011/05/Screen-shot-2011-05-15-at-15.29.33.png" alt="" title="Screen shot 2011-05-15 at 15.29.33" width="330" height="26" class="aligncenter size-full wp-image-345" /></p>
<p>Wow, this will easen my life (ehm.. work) so much! Seriously, I really started to hate those page reloads.</p>
<p>Oh, and by the way, just in case I haven&#8217;t noted so far: I&#8217;d really love to see a CSSEdit update anytime soon. I&#8217;m so much willing to drink my self made <a href="http://www.kochbuchfotos.de/14/espresso">Espresso</a> for that. ;-) In case the <a href="http://macrabbit.com/">Rabbit</a> listens.</p>
<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2011/05/15/using-cssedit-with-less/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Metatunnel 1k Demo: AS vs. JS</title>
		<link>http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/</link>
		<comments>http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/#comments</comments>
		<pubDate>Mon, 13 Apr 2009 10:16:17 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Random]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=245</guid>
		<description><![CDATA[<p>I did a quick port of a «graphic demo» called <a href="http://www.pouet.net/prod.php?which=52777">«metatunnel» (created by FRequency).</a></p>
<p><a href="http://demoscene.appjet.net/">Paulo Falcão ported this to Javascript</a> using canvas.</p>
<p>To make the set complete I ported Paulos JS version to Actionscript, just quick&#8217;n'dirty.</p>
<p>Click on it&#8230; <a href="http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/" class="read_more">Read more</a></p>
Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/04/17/metatunnel-with-pixel-bender/' rel='bookmark' title='MetaTunnel with Pixel Bender'>MetaTunnel with Pixel Bender</a></li>
<li><a href='http://blog.betabong.com/2008/09/26/weak-method-closure/' rel='bookmark' title='Weak Method Closure'>Weak Method Closure</a></li>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p>I did a quick port of a «graphic demo» called <a href="http://www.pouet.net/prod.php?which=52777">«metatunnel» (created by FRequency).</a></p>
<p><a href="http://demoscene.appjet.net/">Paulo Falcão ported this to Javascript</a> using canvas.</p>
<p>To make the set complete I ported Paulos JS version to Actionscript, just quick&#8217;n'dirty.</p>
<p>Click on it to start the animation:</p>

    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_0" width="128" height="128">
      <param name="movie" value="/wp-content/uploads/flash/MetaTunnel.swf" />
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="/wp-content/uploads/flash/MetaTunnel.swf" width="128" height="128">
      <!--<![endif]-->
        
      <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>

<p><span id="more-245"></span></p>
<p>Here&#8217;s the code:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript" style="font-family:monospace;">package test
<span style="color: #66cc66;">&#123;</span>
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Bitmap</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">BitmapData</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">display</span>.<span style="color: #006600;">Sprite</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">Event</span>;
	<span style="color: #0066CC;">import</span> flash.<span style="color: #006600;">events</span>.<span style="color: #006600;">MouseEvent</span>;
&nbsp;
	<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">class</span> JSCanvasPort <span style="color: #0066CC;">extends</span> Sprite
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> JSCanvasPort<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>
		<span style="color: #66cc66;">&#123;</span>
			<span style="color: #0066CC;">super</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
			addChild<span style="color: #66cc66;">&#40;</span> canvas = <span style="color: #000000; font-weight: bold;">new</span> Bitmap<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
			canvas.<span style="color: #0066CC;">smoothing</span> = <span style="color: #000000; font-weight: bold;">false</span>;
			canvas.<span style="color: #006600;">scaleX</span> = canvas.<span style="color: #006600;">scaleY</span> = <span style="color: #cc66cc;">2</span>;
			draw<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
			addEventListener<span style="color: #66cc66;">&#40;</span> MouseEvent.<span style="color: #006600;">CLICK</span> , handleClick <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">var</span> playing:<span style="color: #0066CC;">Boolean</span> = <span style="color: #000000; font-weight: bold;">false</span>;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> handleClick<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:Event = <span style="color: #000000; font-weight: bold;">null</span> <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> playing <span style="color: #66cc66;">&#41;</span>
				removeEventListener<span style="color: #66cc66;">&#40;</span> Event.<span style="color: #006600;">ENTER_FRAME</span> , enterframe <span style="color: #66cc66;">&#41;</span>;
			<span style="color: #b1b100;">else</span>
				addEventListener<span style="color: #66cc66;">&#40;</span> Event.<span style="color: #006600;">ENTER_FRAME</span> , enterframe <span style="color: #66cc66;">&#41;</span>;
			playing = <span style="color: #66cc66;">!</span>playing;
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> enterframe<span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">e</span>:Event=<span style="color: #000000; font-weight: bold;">null</span> <span style="color: #66cc66;">&#41;</span> : <span style="color: #0066CC;">void</span> <span style="color: #66cc66;">&#123;</span>
			draw<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">time</span>:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> maxr:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">64.0</span>;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">var</span> canvas:Bitmap;
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> distance<span style="color: #66cc66;">&#40;</span>ax:<span style="color: #0066CC;">Number</span>,ay:<span style="color: #0066CC;">Number</span>,az:<span style="color: #0066CC;">Number</span>,bx:<span style="color: #0066CC;">Number</span>,by:<span style="color: #0066CC;">Number</span>,bz:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #000000; font-weight: bold;">var</span> dx:<span style="color: #0066CC;">Number</span>=bx-ax , dy:<span style="color: #0066CC;">Number</span>=by-ay , dz:<span style="color: #0066CC;">Number</span>=bz-az;
		    <span style="color: #b1b100;">return</span> <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">sqrt</span><span style="color: #66cc66;">&#40;</span> dx<span style="color: #66cc66;">*</span>dx + dy<span style="color: #66cc66;">*</span>dy + dz<span style="color: #66cc66;">*</span>dz <span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> obj<span style="color: #66cc66;">&#40;</span>x:<span style="color: #0066CC;">Number</span>,y:<span style="color: #0066CC;">Number</span>,z:<span style="color: #0066CC;">Number</span>,t:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#123;</span>
		        <span style="color: #000000; font-weight: bold;">var</span> f:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">1.0</span>;
		        f<span style="color: #66cc66;">*</span>=distance<span style="color: #66cc66;">&#40;</span>x,y,z,<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">&#41;</span>+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">sin</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.2</span><span style="color: #66cc66;">&#41;</span>,<span style="color: #cc66cc;">0.3</span>,<span style="color: #cc66cc;">2.0</span>+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.5</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.5</span><span style="color: #66cc66;">&#41;</span>;
		        f<span style="color: #66cc66;">*</span>=distance<span style="color: #66cc66;">&#40;</span>x,y,z,-<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.7</span><span style="color: #66cc66;">&#41;</span>,<span style="color: #cc66cc;">0.3</span>,<span style="color: #cc66cc;">2.0</span>+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">sin</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.5</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span>;
		        f<span style="color: #66cc66;">*</span>=distance<span style="color: #66cc66;">&#40;</span>x,y,z,-<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">sin</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.2</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.5</span>,<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">sin</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">&#41;</span>,<span style="color: #cc66cc;">2.0</span><span style="color: #66cc66;">&#41;</span>;
		        f<span style="color: #66cc66;">*</span>=<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>y<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>x<span style="color: #66cc66;">&#41;</span>-<span style="color: #cc66cc;">0.1</span>-<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>z<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">7.0</span>+t<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">7.0</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>x<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">3.0</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>y<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">4.0</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.1</span>;
		        <span style="color: #b1b100;">return</span> f;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">eval</span><span style="color: #66cc66;">&#40;</span>x:<span style="color: #0066CC;">Number</span>,y:<span style="color: #0066CC;">Number</span>,t:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#41;</span>:uint<span style="color: #66cc66;">&#123;</span>
		   <span style="color: #000000; font-weight: bold;">var</span> vx:<span style="color: #0066CC;">Number</span>=x<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">2.0</span>-<span style="color: #cc66cc;">1.0</span>; <span style="color: #000000; font-weight: bold;">var</span> vy:<span style="color: #0066CC;">Number</span>=-y<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">2.0</span>+<span style="color: #cc66cc;">1.0</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> s:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0.4</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> ox:<span style="color: #0066CC;">Number</span>=vx;var oy:<span style="color: #0066CC;">Number</span>=vy<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">1.25</span>;var oz:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0.0</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> dx:<span style="color: #0066CC;">Number</span>=<span style="color: #66cc66;">&#40;</span>vx+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">cos</span><span style="color: #66cc66;">&#40;</span>t<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.3</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">/</span><span style="color: #cc66cc;">64.0</span>;var dy:<span style="color: #0066CC;">Number</span>=vy<span style="color: #66cc66;">/</span><span style="color: #cc66cc;">64.0</span>;var dz:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">1.0</span><span style="color: #66cc66;">/</span><span style="color: #cc66cc;">64.0</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> tt:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0.0</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> g:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">1.0</span>;
		   <span style="color: #b1b100;">while</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>g<span style="color: #66cc66;">&amp;</span>gt;s<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&amp;</span>amp;<span style="color: #66cc66;">&amp;</span>amp;<span style="color: #66cc66;">&#40;</span>tt<span style="color: #66cc66;">&amp;</span>lt;<span style="color: #cc66cc;">375</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		         g=obj<span style="color: #66cc66;">&#40;</span>ox+dx<span style="color: #66cc66;">*</span>tt,oy+dy<span style="color: #66cc66;">*</span>tt,oz+dz<span style="color: #66cc66;">*</span>tt,t<span style="color: #66cc66;">&#41;</span>;
		         tt+=g<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">4</span>;
		   <span style="color: #66cc66;">&#125;</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> <span style="color: #0066CC;">color</span>:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0.0</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> dxtt:<span style="color: #0066CC;">Number</span>=ox+dx<span style="color: #66cc66;">*</span>tt;var dytt:<span style="color: #0066CC;">Number</span>=oy+dy<span style="color: #66cc66;">*</span>tt;var dztt:<span style="color: #0066CC;">Number</span>=oz+dz<span style="color: #66cc66;">*</span>tt;
		   <span style="color: #000000; font-weight: bold;">var</span> objd:<span style="color: #0066CC;">Number</span>=obj<span style="color: #66cc66;">&#40;</span>dxtt,dytt,dztt,t<span style="color: #66cc66;">&#41;</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> nx:<span style="color: #0066CC;">Number</span>=objd-obj<span style="color: #66cc66;">&#40;</span>dxtt+<span style="color: #cc66cc;">0.01</span>,dytt,dztt,t<span style="color: #66cc66;">&#41;</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> ny:<span style="color: #0066CC;">Number</span>=objd-obj<span style="color: #66cc66;">&#40;</span>dxtt,dytt+<span style="color: #cc66cc;">0.01</span>,dztt,t<span style="color: #66cc66;">&#41;</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> nz:<span style="color: #0066CC;">Number</span>=objd-obj<span style="color: #66cc66;">&#40;</span>dxtt,dytt,dztt+<span style="color: #cc66cc;">0.01</span>,t<span style="color: #66cc66;">&#41;</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> d:<span style="color: #0066CC;">Number</span>=<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">sqrt</span><span style="color: #66cc66;">&#40;</span>nx<span style="color: #66cc66;">*</span>nx+ny<span style="color: #66cc66;">*</span>ny+nz<span style="color: #66cc66;">*</span>nz<span style="color: #66cc66;">&#41;</span>;ny=ny<span style="color: #66cc66;">/</span>d;nz=nz<span style="color: #66cc66;">/</span>d;
		   <span style="color: #0066CC;">color</span>+=<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">max</span><span style="color: #66cc66;">&#40;</span>-<span style="color: #cc66cc;">0.5</span><span style="color: #66cc66;">*</span>nz,<span style="color: #cc66cc;">0.0</span><span style="color: #66cc66;">&#41;</span>+<span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">max</span><span style="color: #66cc66;">&#40;</span>-<span style="color: #cc66cc;">0.5</span><span style="color: #66cc66;">*</span>ny+<span style="color: #cc66cc;">0.5</span><span style="color: #66cc66;">*</span>nz,<span style="color: #cc66cc;">0.0</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.5</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> r:<span style="color: #0066CC;">Number</span>=<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">color</span>+<span style="color: #cc66cc;">0.1</span><span style="color: #66cc66;">*</span>tt<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.025</span><span style="color: #66cc66;">&#41;</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> g:<span style="color: #0066CC;">Number</span>=<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">color</span>+<span style="color: #cc66cc;">0.2</span><span style="color: #66cc66;">*</span>tt<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.025</span><span style="color: #66cc66;">&#41;</span>;
		   <span style="color: #000000; font-weight: bold;">var</span> b:<span style="color: #0066CC;">Number</span>=<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">color</span>+<span style="color: #cc66cc;">0.5</span><span style="color: #66cc66;">*</span>tt<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">0.025</span><span style="color: #66cc66;">&#41;</span>;
		   <span style="color: #b1b100;">return</span> <span style="color: #0066CC;">getRGB</span><span style="color: #66cc66;">&#40;</span>r,g,b<span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> <span style="color: #0066CC;">getRGB</span><span style="color: #66cc66;">&#40;</span>r:<span style="color: #0066CC;">Number</span>,g:<span style="color: #0066CC;">Number</span>,b:<span style="color: #0066CC;">Number</span><span style="color: #66cc66;">&#41;</span>:uint<span style="color: #66cc66;">&#123;</span>
		        <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>r<span style="color: #66cc66;">&amp;</span>lt;<span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span> r=<span style="color: #cc66cc;">0</span>; <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>r<span style="color: #66cc66;">&amp;</span>gt;<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span> r=<span style="color: #cc66cc;">1</span>;
		        <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>g<span style="color: #66cc66;">&amp;</span>lt;<span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span> g=<span style="color: #cc66cc;">0</span>; <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>g<span style="color: #66cc66;">&amp;</span>gt;<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span> g=<span style="color: #cc66cc;">1</span>;
		        <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>b<span style="color: #66cc66;">&amp;</span>lt;<span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span> b=<span style="color: #cc66cc;">0</span>; <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>b<span style="color: #66cc66;">&amp;</span>gt;<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span> b=<span style="color: #cc66cc;">1</span>;
			<span style="color: #b1b100;">return</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>r<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&amp;</span>amp;<span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&amp;</span>lt;<span style="color: #66cc66;">&amp;</span>lt; <span style="color: #cc66cc;">16</span> <span style="color: #66cc66;">|</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>g<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&amp;</span>amp;<span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&amp;</span>lt;<span style="color: #66cc66;">&amp;</span>lt; <span style="color: #cc66cc;">8</span> <span style="color: #66cc66;">|</span> <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>b<span style="color: #66cc66;">*</span><span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&amp;</span>amp;<span style="color: #cc66cc;">255</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
&nbsp;
		<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> draw<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span> canvas.<span style="color: #006600;">bitmapData</span> == <span style="color: #000000; font-weight: bold;">null</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
				canvas.<span style="color: #006600;">bitmapData</span> = <span style="color: #000000; font-weight: bold;">new</span> BitmapData<span style="color: #66cc66;">&#40;</span> maxr , maxr , <span style="color: #000000; font-weight: bold;">false</span> , 0xffffff <span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
			<span style="color: #000000; font-weight: bold;">var</span> t:BitmapData = canvas.<span style="color: #006600;">bitmapData</span>;
			<span style="color: #0066CC;">time</span>+=<span style="color: #cc66cc;">0.1</span>;
			t.<span style="color: #006600;">lock</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		        <span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> x:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0</span>;x<span style="color: #66cc66;">&lt;</span>maxr;x++<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		                <span style="color: #000000; font-weight: bold;">var</span> px:<span style="color: #0066CC;">Number</span>=x<span style="color: #66cc66;">/</span>maxr;
		                <span style="color: #b1b100;">for</span><span style="color: #66cc66;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> y:<span style="color: #0066CC;">Number</span>=<span style="color: #cc66cc;">0</span>;y<span style="color: #66cc66;">&lt;</span>maxr;y++<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
		                        <span style="color: #000000; font-weight: bold;">var</span> py:<span style="color: #0066CC;">Number</span>=y<span style="color: #66cc66;">/</span>maxr;
		                        t.<span style="color: #006600;">setPixel</span><span style="color: #66cc66;">&#40;</span> x , y , <span style="color: #0066CC;">eval</span><span style="color: #66cc66;">&#40;</span>px,py,<span style="color: #0066CC;">time</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
		                <span style="color: #66cc66;">&#125;</span>
		        <span style="color: #66cc66;">&#125;</span>
		   t.<span style="color: #006600;">unlock</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>;
&nbsp;
	<span style="color: #66cc66;">&#125;</span>
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p><strong>Update:</strong> A quickly optimized version (nothing advanced really).</p>
<p>
    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="swfobj_1" width="128" height="128">
      <param name="movie" value="/wp-content/uploads/flash/MetaTunnel-optim-1.swf" />
      <!--[if !IE]>-->
      <object type="application/x-shockwave-flash" data="/wp-content/uploads/flash/MetaTunnel-optim-1.swf" width="128" height="128">
      <!--<![endif]-->
        
      <!--[if !IE]>-->
      </object>
      <!--<![endif]-->
    </object>
<br />
(You can switch quality in this version with key up or down).</p>
<p>Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/04/17/metatunnel-with-pixel-bender/' rel='bookmark' title='MetaTunnel with Pixel Bender'>MetaTunnel with Pixel Bender</a></li>
<li><a href='http://blog.betabong.com/2008/09/26/weak-method-closure/' rel='bookmark' title='Weak Method Closure'>Weak Method Closure</a></li>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>3D Point Cloud with Javascript and Canvas</title>
		<link>http://blog.betabong.com/2009/03/05/javascript-canvas-3d/</link>
		<comments>http://blog.betabong.com/2009/03/05/javascript-canvas-3d/#comments</comments>
		<pubDate>Thu, 05 Mar 2009 15:02:32 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=208</guid>
		<description><![CDATA[<p>I was doing some stuff with 3D in Flash. And so I wondered wether sth similar might be achieved with pure HTML/Javascript. And yes, modern browsers (so not IE) can!</p>
<p>What I&#8217;ve done is this (a litte simplified):</p>
<ul>
<li>Migrated</li></ul><p>&#8230; <a href="http://blog.betabong.com/2009/03/05/javascript-canvas-3d/" class="read_more">Read more</a></p>
No related posts.]]></description>
			<content:encoded><![CDATA[<p>I was doing some stuff with 3D in Flash. And so I wondered wether sth similar might be achieved with pure HTML/Javascript. And yes, modern browsers (so not IE) can!</p>
<p>What I&#8217;ve done is this (a litte simplified):</p>
<ul>
<li>Migrated my 3D engine I&#8217;ve written years ago from AS1 to Javascript</li>
<li>Extracted point cloud from Colada 3D object</li>
<li>Draw rectangles for every point to canvas</li>
</ul>
<p>And that&#8217;s how it looks:</p>
<p>    <canvas id="canvas" width="512" height="360"></canvas><br />
	<script src="http://www.betabong.com/work/lab/js/3d/3dEngine.js" type="text/javascript" charset="utf-8"></script><br />
	<script src="http://www.betabong.com/work/lab/js/3d/duck.js" type="text/javascript" charset="utf-8"></script></p>
<p>Should work on Safari, Firefox and Opera.</p>
<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2009/03/05/javascript-canvas-3d/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>How about we go fuck instead?</title>
		<link>http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/</link>
		<comments>http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/#comments</comments>
		<pubDate>Wed, 08 Oct 2008 23:44:50 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Random]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[animation]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[sound]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=135</guid>
		<description><![CDATA[<p><a href="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" rel="lightbox[135]"><img class="alignnone size-full wp-image-136" title="Canvas Demo" src="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" alt="" width="512" height="308" /></a></p>
<p><a href="http://antisocial.demozoo.org/demo.html">A sweet nice canvas demo</a> with some (pseudo?) 3D. A lot of code for a little story. But I like it. You&#8217;ll gonna need a fast computer ;)</p>
<p>Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k</a></li></ol>&#8230; <a href="http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/" class="read_more">Read more</a></p>
Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li>
</ol>]]></description>
			<content:encoded><![CDATA[<p><a href="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" rel="lightbox[135]"><img class="alignnone size-full wp-image-136" title="Canvas Demo" src="http://blog.betabong.com/wp-content/uploads/2008/10/picture-6.png" alt="" width="512" height="308" /></a></p>
<p><a href="http://antisocial.demozoo.org/demo.html">A sweet nice canvas demo</a> with some (pseudo?) 3D. A lot of code for a little story. But I like it. You&#8217;ll gonna need a fast computer ;)</p>
<p>Related posts:<ol>
<li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li>
<li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li>
</ol></p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Blog Feature: Code Lightbox</title>
		<link>http://blog.betabong.com/2008/10/03/blog-feature-code-lightbox/</link>
		<comments>http://blog.betabong.com/2008/10/03/blog-feature-code-lightbox/#comments</comments>
		<pubDate>Fri, 03 Oct 2008 17:07:49 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[javascript]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=127</guid>
		<description><![CDATA[<p>Just added a little javascript magic: now you can «zoom into» the code snippets in this blog. The javascript is not very -ehm- reusable because it contains some dirty hard coded style stuff, but hey, it does its job pretty&#8230; <a href="http://blog.betabong.com/2008/10/03/blog-feature-code-lightbox/" class="read_more">Read more</a></p>
No related posts.]]></description>
			<content:encoded><![CDATA[<p>Just added a little javascript magic: now you can «zoom into» the code snippets in this blog. The javascript is not very -ehm- reusable because it contains some dirty hard coded style stuff, but hey, it does its job pretty well ;-) (btw: not tested on IE).</p>
<p>So now time to go to Marc&#8217;s birthday party. I wish <a title="Marc runs Entropy" href="http://www.entropy.ch">Marc</a>, my favorite code (and soon typo) guru and a good friend, all the best: Rock on!! :-)</p>
<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2008/10/03/blog-feature-code-lightbox/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced

Served from: blog.betabong.com @ 2012-02-05 06:44:14 -->
