<?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/tag/javascript/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.betabong.com</link>
	<description></description>
	<lastBuildDate>Thu, 13 May 2010 09:49:40 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>jQuery Plugin: Round Text</title>
		<link>http://blog.betabong.com/2010/05/13/jquery-plugin-round-text/</link>
		<comments>http://blog.betabong.com/2010/05/13/jquery-plugin-round-text/#comments</comments>
		<pubDate>Thu, 13 May 2010 09:49:40 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Random]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[rotate]]></category>
		<category><![CDATA[transform]]></category>
		<category><![CDATA[webkit]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=326</guid>
		<description><![CDATA[My very first jQuery plugin: warps the text along a circle. It&#8217;s simple and certainly far from perfect – I needed it, so may be you&#8217;ll need it too :-)
Usage:

$&#40;elem&#41;.roundtext&#40; &#123;radius:150&#125; &#41;;

Tested on latest Opera, Safari, Chrome and Firefox (I assume it won&#8217;t work in bloody IE)
Download:
jquery.roundtext.js
Example:

I used this function here: www.retro-fanshirt.com (Turn off plugins [...]


No related posts.]]></description>
			<content:encoded><![CDATA[<p>My very first jQuery plugin: warps the text along a circle. It&#8217;s simple and certainly far from perfect – I needed it, so may be you&#8217;ll need it too :-)</p>
<h3>Usage:</h3>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span style="color: #009900;">&#40;</span>elem<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">roundtext</span><span style="color: #009900;">&#40;</span> <span style="color: #009900;">&#123;</span>radius<span style="color: #339933;">:</span><span style="color: #CC0000;">150</span><span style="color: #009900;">&#125;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>Tested on latest Opera, Safari, Chrome and Firefox (I assume it won&#8217;t work in bloody IE)</p>
<h3>Download:</h3>
<p><a class="download" href="/showcase/jquery-roundtext/jquery.roundtext.js">jquery.roundtext.js</a></p>
<h3>Example:</h3>
<p><iframe src="/showcase/jquery-roundtext/jquery.roundtext.html" width="100%" height="550" frameborder="0"></iframe></p>
<p>I used this function here: <a href="http://www.retro-fanshirt.com">www.retro-fanshirt.com</a> (Turn off plugins to see html version)</p>
<p>Sometimes I can see strange behaviour with Safari when it wouldn&#8217;t consider space characters. Just so you know.</p>


<p>No related posts.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.betabong.com/2010/05/13/jquery-plugin-round-text/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Use GZip compression for your website</title>
		<link>http://blog.betabong.com/2010/03/25/use-gzip-compression-for-html-css-javascript-xml/</link>
		<comments>http://blog.betabong.com/2010/03/25/use-gzip-compression-for-html-css-javascript-xml/#comments</comments>
		<pubDate>Thu, 25 Mar 2010 09:53:50 +0000</pubDate>
		<dc:creator>betabong</dc:creator>
				<category><![CDATA[Flash & more]]></category>
		<category><![CDATA[Browser]]></category>
		<category><![CDATA[Compression]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[speed]]></category>
		<category><![CDATA[xml]]></category>

		<guid isPermaLink="false">http://blog.betabong.com/?p=316</guid>
		<description><![CDATA[Most of my Flash apps or websites use XML files, either for communication or initial data. They can get quite large, reaching about 100 kb or more is not seldom. You might say: so what?! 100 kb is like nothing for a bandwidth nowadays! Well, if you&#8217;ve every used iPhone tethering in an area where [...]


Related posts:<ol><li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='Permanent Link: 3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li></ol>]]></description>
			<content:encoded><![CDATA[<p>Most of my Flash apps or websites use XML files, either for communication or initial data. They can get quite large, reaching about 100 kb or more is not seldom. You might say: so what?! 100 kb is like nothing for a bandwidth nowadays! Well, if you&#8217;ve every used iPhone tethering in an area where there is no 3g network, you start appreciating every single byte you won&#8217;t have to suck from the net. (On a side note: That&#8217;s when Opera really comes in handy.)</p>
<h3>XML files compress really well</h3>
<p>Because XML usually contains a lot of repetitive elements (noticably tags and attributes), they are like a compressor&#8217;s darling. Just zip a few of your XML files and you&#8217;ll see.</p>
<p>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.</p>
<h3>Activate GZip compression</h3>
<p>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:</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;"># compress all html, plain text, xml, css and javascript:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript</pre></div></div>

<p>AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript</p>
<div>I&#8217;ve also tried more complex constructs found on the web, but they resulted in «Internal server errors» which is why I&#8217;ll go along with this simple one for now.</div>
<div><strong><span style="font-weight: normal;">The effects are dramatic! I usually get about 70% – 80% of reduction for non-minimized files, </span></strong></div>
<div>
<h3>Examples</h3>
</div>
<div>
<table border="0" class="small">
<tbody>
<tr>
<th></th>
<th>Uncompressed</th>
<th>Compressed</th>
<th>Reduction</th>
</tr>
<tr>
<td><strong>Javascript minimized</strong><br />
<a href="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js">MooTools YUI compressed</a></td>
<td>66,867</td>
<td>20,964</td>
<td>68.6%</td>
</tr>
<tr>
<td><strong>Javascript minimized</strong><br />
<a href="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.jss">MooTools uncompressed</a></td>
<td>102,991</td>
<td>27,599</td>
<td>73.2%</td>
</tr>
<tr>
<td><strong>XML/CSS combined</strong><br />
<a href="http://www.ceylor.ch/pages/home.xml">A larger initial XML file for a Flash website of mine</a></td>
<td>84,316</td>
<td>18,229</td>
<td>78.4%</td>
</tr>
<tr>
<td><strong>XML/CSS combined</strong><br />
<a href="http://www.ceylor.ch/pages/home.xml">A larger initial XML file for a Flash website of mine</a></td>
<td>84,316</td>
<td>18,229</td>
<td>78.4%</td>
</tr>
<tr>
<td><strong>HTML</strong><br />
<a href="http://20min.ch">A swiss news website, 20 Minuten</a></td>
<td>148,587</td>
<td>29,385</td>
<td>80.2%</td>
</tr>
<tr>
<td><strong>HTML</strong><br />
<a href="http://blog.betabong.com">My blogs home page</a></td>
<td>51,638</td>
<td>12,991</td>
<td>74.8%</td>
</tr>
</tbody>
</table>
<h3>Tools</h3>
<p>If you want to test your website, these pages are very informative (first one is faster, second one more informative):</p>
<p><a href="http://www.whatsmyip.org/http_compression/">http://www.whatsmyip.org/http_compression/</a></div>
<p><a href="http://www.gidnetwork.com/tools/gzip-test.php">http://www.gidnetwork.com/tools/gzip-test.php</a></p>
<p>I also like this one, although it only gives you little info on content-encoding. But very much on top of that :-)<br />
<a href="http://www.wmtips.com/tools/info/">http://www.wmtips.com/tools/info/</a></p>
<p>This little Firefox addon will tell you wether any site you visit has GZip activated:<br />
<a href="https://addons.mozilla.org/en-US/firefox/addon/54647">https://addons.mozilla.org/en-US/firefox/addon/54647</a> (Content Encoding Detector)</p>
<h3 style="font-size: 1.17em;">Conclusion</h3>
<p>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&#8217;t need any kungfu effort on your side! And: practically all browsers support it. (I&#8217;ve only heard of problems with IE6, but then, you know, f*** IE6)</p>
<h3>Update:</h3>
<p>A more complete solution for your .htaccess file:</p>

<div class="wp_syntax"><div class="code"><pre class="text" style="font-family:monospace;">&lt;IfModule mod_deflate.c&gt;
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
&nbsp;
	AddOutputFilterByType DEFLATE image/x-icon
&nbsp;
	AddOutputFilterByType DEFLATE text/css
&nbsp;
	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
&nbsp;
	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
&lt;/IfModule&gt;</pre></div></div>

<p>(<a href="http://www.speedingupwebsite.com/2010/01/08/use-the-gzip-power/">Source</a>)</p>


<p>Related posts:<ol><li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='Permanent Link: 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/2010/03/25/use-gzip-compression-for-html-css-javascript-xml/feed/</wfw:commentRss>
		<slash:comments>0</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[I did a quick port of a «graphic demo» called «metatunnel» (created by FRequency).
Paulo Falcão ported this to Javascript using canvas.
To make the set complete I ported Paulos JS version to Actionscript, just quick&#8217;n'dirty.
Click on it to start the animation:

Here&#8217;s the code:

package test
&#123;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
&#160;
	public class JSCanvasPort extends Sprite
	&#123;
		public function JSCanvasPort&#40;&#41;
		&#123;
			super&#40;&#41;;
			addChild&#40; canvas [...]


Related posts:<ol><li><a href='http://blog.betabong.com/2009/04/17/metatunnel-with-pixel-bender/' rel='bookmark' title='Permanent Link: MetaTunnel with Pixel Bender'>MetaTunnel with Pixel Bender</a></li><li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='Permanent Link: 3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li><li><a href='http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/' rel='bookmark' title='Permanent Link: How about we go fuck instead?'>How about we go fuck instead?</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]-->
        <p>The Flash plugin is required to view this object.</p>
      <!--[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]-->
        <p>The Flash plugin is required to view this object.</p>
      <!--[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='Permanent Link: MetaTunnel with Pixel Bender'>MetaTunnel with Pixel Bender</a></li><li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='Permanent Link: 3D Point Cloud with Javascript and Canvas'>3D Point Cloud with Javascript and Canvas</a></li><li><a href='http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/' rel='bookmark' title='Permanent Link: How about we go fuck instead?'>How about we go fuck instead?</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[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!
What I&#8217;ve done is this (a litte simplified):

Migrated my 3D engine I&#8217;ve written years ago from AS1 to Javascript
Extracted point cloud from Colada 3D object
Draw rectangles [...]


Related posts:<ol><li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Permanent Link: Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li><li><a href='http://blog.betabong.com/2010/05/13/jquery-plugin-round-text/' rel='bookmark' title='Permanent Link: jQuery Plugin: Round Text'>jQuery Plugin: Round Text</a></li><li><a href='http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/' rel='bookmark' title='Permanent Link: How about we go fuck instead?'>How about we go fuck instead?</a></li></ol>]]></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>Related posts:<ol><li><a href='http://blog.betabong.com/2009/04/13/metatunnel-1k-demo-as-vs-js/' rel='bookmark' title='Permanent Link: Metatunnel 1k Demo: AS vs. JS'>Metatunnel 1k Demo: AS vs. JS</a></li><li><a href='http://blog.betabong.com/2010/05/13/jquery-plugin-round-text/' rel='bookmark' title='Permanent Link: jQuery Plugin: Round Text'>jQuery Plugin: Round Text</a></li><li><a href='http://blog.betabong.com/2008/10/09/how-about-we-go-fuck-instead/' rel='bookmark' title='Permanent Link: How about we go fuck instead?'>How about we go fuck instead?</a></li></ol></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[
A sweet nice canvas demo with some (pseudo?) 3D. A lot of code for a little story. But I like it. You&#8217;ll gonna need a fast computer ;)


Related posts:3D Point Cloud with Javascript and CanvasMetatunnel 1k Demo: AS vs. JS


Related posts:<ol><li><a href='http://blog.betabong.com/2009/03/05/javascript-canvas-3d/' rel='bookmark' title='Permanent Link: 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='Permanent Link: 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='Permanent Link: 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='Permanent Link: 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[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).
So now time to go to Marc&#8217;s birthday party. [...]


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>
