<?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>Vjeux</title>
	<atom:link href="http://blog.vjeux.com/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.vjeux.com</link>
	<description>French Web Developer</description>
	<lastBuildDate>Sun, 20 May 2012 20:44:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Generic Image Processing With Climb – 5th ELS</title>
		<link>http://blog.vjeux.com/2012/lisp/generic-image-processing-with-climb-5th-els.html</link>
		<comments>http://blog.vjeux.com/2012/lisp/generic-image-processing-with-climb-5th-els.html#comments</comments>
		<pubDate>Thu, 10 May 2012 16:01:40 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[Lisp]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=3251</guid>
		<description><![CDATA[ELS Presentation &#124; A Generic and Dynamic Approach to Image Processing &#124; Chaining Operators &#038; Component Trees &#124; Property-based dispatch in functional languages Laurent Senta had the opportunity to go to the 5th European Lisp Symposium to present Climb, the project I've been working on during the past 2 years. He did an excellent job [...]]]></description>
			<content:encoded><![CDATA[<div style="background: #FAF9E2; border: solid #DDDAAA; border-width: initial; color: #5D5636; margin-bottom: 0em; padding: 0.75em 15px; text-align: center;">
<strong>ELS Presentation</strong> | <a href="http://blog.vjeux.com/2010/epita/climb-a-generic-and-dynamic-approach-to-image-processing.html">A Generic and Dynamic Approach to Image Processing</a> | <a href="http://blog.vjeux.com/2011/epita/climb-chaining-operators-component-trees.html"> Chaining Operators &#038; Component Trees</a> | <a href="http://blog.vjeux.com/2012/epita/climb-property-based-dispatch-in-functional-languages.html"> Property-based dispatch in functional languages</a>
</div>
<p><a href="http://www.while1read.com/">Laurent Senta</a> had the opportunity to go to the <a href="http://european-lisp-symposium.org/">5th European Lisp Symposium</a> to present Climb, the project I've been working on during the past 2 years. He did an excellent job at writing a 4-page paper that sums up the interesting parts of the project (<a href='http://blog.vjeux.com/wp-content/uploads/2012/05/senta-12-els.pdf'>Download</a>).</p>
<div style="text-align: center;">
<object id="__sse4473210" width="660" height="510"><param name="movie" value="http://static.slidesharecdn.com/swf/doc_player.swf?doc=senta-12-els-120502060510-phpapp01&#038;stripped_title=generic-image-processing-with-climb&#038;userName=lsenta" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><embed name="__sse4473210" src="http://static.slidesharecdn.com/swf/doc_player.swf?doc=senta-12-els-120502060510-phpapp01&#038;stripped_title=generic-image-processing-with-climb&#038;userName=lsenta" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="660" height="510"></embed></object>
</div>
<h3>Presentation</h3>
<p>I recommend reading the short article before getting to the slides. <a href='http://blog.vjeux.com/wp-content/uploads/2012/05/senta-12-els.pptx'>Download the PPTX</a> if you want to see the speaker text.</p>
<p><script async class="speakerdeck-embed" data-id="4fabdf5b6bbc6a0022022baa" data-ratio="1.3333333333333333" src="//speakerdeck.com/assets/embed.js"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2012/lisp/generic-image-processing-with-climb-5th-els.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Climb &#8211; Property-based dispatch in functional languages</title>
		<link>http://blog.vjeux.com/2012/epita/climb-property-based-dispatch-in-functional-languages.html</link>
		<comments>http://blog.vjeux.com/2012/epita/climb-property-based-dispatch-in-functional-languages.html#comments</comments>
		<pubDate>Thu, 05 Apr 2012 16:28:49 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[EPITA]]></category>
		<category><![CDATA[Lisp]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=3192</guid>
		<description><![CDATA[ELS Presentation &#124; A Generic and Dynamic Approach to Image Processing &#124; Chaining Operators &#038; Component Trees &#124; Property-based dispatch in functional languages This is the third (and last) presentation about my work on Climb at the LRDE. During the first one I tackled genericity on data structures, the second was about genericity on values [...]]]></description>
			<content:encoded><![CDATA[<div style="background: #FAF9E2; border: solid #DDDAAA; border-width: initial; color: #5D5636; margin-bottom: 0em; padding: 0.75em 15px; text-align: center;">
<a href="http://blog.vjeux.com/2012/lisp/generic-image-processing-with-climb-5th-els.html">ELS Presentation</a> | <a href="http://blog.vjeux.com/2010/epita/climb-a-generic-and-dynamic-approach-to-image-processing.html">A Generic and Dynamic Approach to Image Processing</a> | <a href="http://blog.vjeux.com/2011/epita/climb-chaining-operators-component-trees.html"> Chaining Operators &#038; Component Trees</a> | <strong> Property-based dispatch in functional languages</strong>
</div>
<p>This is the third (and last) presentation about my work on Climb at the LRDE. During the first one I tackled <a href="http://blog.vjeux.com/2010/epita/climb-a-generic-and-dynamic-approach-to-image-processing.html">genericity on data structures</a>, the second was about <a href="http://blog.vjeux.com/2011/epita/climb-chaining-operators-component-trees.html">genericity on values</a> and this one talks about genericity on algorithms.</p>
<blockquote><p>
<b>Climb - Property-based dispatch in functional languages</b></p>
<p><b>Abstract</b>: "Climb is a generic image processing library. A generic algorithm interface often requires several different specialized implementations. Olena, a C++ library, solves this using properties.</p>
<p>We present a way to dispatch a function call to the best specialized implementation using properties in a dynamic programming language: Common Lisp. Then, we introduce examples of algorithms and properties used in image processing."</p></blockquote>
<p><iframe width="658" height="364" src="http://www.youtube.com/embed/4STMhgMDn8Y" frameborder="0" allowfullscreen></iframe></p>
<p><script async class="speakerdeck-embed" data-id="4f7d21314156d9001f000eed" data-ratio="1.3333333333333333" src="//speakerdeck.com/assets/embed.js"></script></p>
<p><object id="__sse12286961" width="658" height="510"><param name="movie" value="http://static.slidesharecdn.com/swf/doc_player.swf?doc=1116-120405000429-phpapp02&#038;stripped_title=climb-propertybased-dispatch-in-functional-languages-report&#038;userName=vjeux" /><param name="allowFullScreen" value="true"/><param name="allowScriptAccess" value="always"/><param name="wmode" value="transparent"/><embed name="__sse12286961" src="http://static.slidesharecdn.com/swf/doc_player.swf?doc=1116-120405000429-phpapp02&#038;stripped_title=climb-propertybased-dispatch-in-functional-languages-report&#038;userName=vjeux" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="transparent" width="658" height="510"></embed></object></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2012/epita/climb-property-based-dispatch-in-functional-languages.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>MMO-Champion Miscellaneous Work</title>
		<link>http://blog.vjeux.com/2012/project/mmo-champion-countdowns.html</link>
		<comments>http://blog.vjeux.com/2012/project/mmo-champion-countdowns.html#comments</comments>
		<pubDate>Mon, 19 Mar 2012 02:30:59 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[Project]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=3145</guid>
		<description><![CDATA[WoWDB Design I was the only active developper on db.mmo-champion.com and since I was no longer working at Curse, they decided to restart a database project, WoWDB.com, on the shiny Cobalt platform that powers SWOTR, Aion and Rift databases. The release of Mist of Pandaria beta being close (less than 24 hours away) and the [...]]]></description>
			<content:encoded><![CDATA[<h3>WoWDB Design</h3>
<p>I was the only active developper on db.mmo-champion.com and since I was no longer working at Curse, they decided to restart a database project, <a href="http://www.wowdb.com/">WoWDB.com</a>, on the shiny Cobalt platform that powers <a href="http://db.darthhater.com/">SWOTR</a>, <a href="http://www.aionarmory.com/">Aion</a> and <a href="http://www.riftdb.com/">Rift</a> databases.</p>
<p>The release of Mist of Pandaria beta being close (less than 24 hours away) and the website without any CSS, I've been asked to come up with a design. 3 hours later, here's the result <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><a href="http://blog.vjeux.com/wp-content/uploads/2012/03/mop_listing.png"><img src="http://blog.vjeux.com/wp-content/uploads/2012/03/mop_listing_small.png"/></a></p>
<p>As you can see, I borrowed a lot of design elements and CSS from the original MMO-Champion website. I really like the end result. Often database websites are on black backgrounds, making it with a light one gives a fresh look.</p>
<p><a href="http://blog.vjeux.com/wp-content/uploads/2012/03/mop_detail.png"><img src="http://blog.vjeux.com/wp-content/uploads/2012/03/mop_detail_small.png" /></a></p>
<h3>Countdown</h3>
<p><a href="http://www.mmo-champion.com/">MMO-Champion</a> uses countdown to make hype around certain events. I've had the pleasure to do two of them, one for each expansion.</p>
<h4>Cataclysm</h4>
<link href="/wp-content/uploads/2012/03/countdown.css" rel="stylesheet">
<div class="countdown" style="margin: auto; zoom: 0.7;">
<div id="countdown-eu">
<div class="hours"><strong>28</strong><span>Hours</span></div>
<div class="minutes"><strong>56</strong><span>Minutes</span></div>
<div class="seconds"><strong>43</strong><span>Seconds</span></div>
</div>
<div id="countdown-us">
<div class="hours"><strong>23</strong><span>Hours</span></div>
<div class="minutes"><strong>56</strong><span>Minutes</span></div>
<div class="seconds"><strong>43</strong><span>Seconds</span></div>
</div>
</div>
<p>That's my first one. The hardest part was to find a good font that doesn't suck with a big font-size. (Note: the times here are placeholders!)<br />
</p>
<h4>Mist of Pandarian</h4>
<div class="countdown-mop" style="margin:auto; zoom: 0.7;">
<img src="http://blog.vjeux.com/wp-content/uploads/2012/03/countdown.jpg"/><br />
<span class="text hours"><span class="left">0</span><span class="right">5</span></span><span class="text minutes"><span class="left">1</span><span class="right">6</span></span><span class="text seconds"><span class="left">4</span><span class="right">8</span></span>
</div>
<p>As you can see, my Photoshop skills have improved a lot since the first one <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  I've been able to steal <a href="http://us.media.blizzard.com/wow/mists-of-pandaria/images/bg-feature.png">design</a> <a href="http://us.media.blizzard.com/wow/mists-of-pandaria/images/media/pet-battle/screenshot-wrapper-pet.png">elements</a> from Blizzard website to make the artwork look better.</p>
<p>You can notice that each digit of numbers is absolutely positioned, therefore it doens't constantly move when the number changes.</p>
<p>I also use a <a href="http://www.google.com/webfonts/specimen/Brawler">Brawler</a>, a custom Google Web Font and <code>text-stroke</code> to help with anti-aliasing.</p>
<p><script>
setInterval(function () {
  var sec = '' + (Math.floor(-new Date() / 1000) % 60 + 60);
  if (sec < 10) sec = '0' + sec;
  $('.seconds strong').text(sec);
  $('.seconds .left').text(sec[0]);
  $('.seconds .right').text(sec[1]);
}, 1000);
</script></p>
<link href="http://fonts.googleapis.com/css?family=Brawler" rel="stylesheet" type="text/css" />
</script></link>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2012/project/mmo-champion-countdowns.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Github Oauth Login &#8211; Browser-Side</title>
		<link>http://blog.vjeux.com/2012/javascript/github-oauth-login-browser-side.html</link>
		<comments>http://blog.vjeux.com/2012/javascript/github-oauth-login-browser-side.html#comments</comments>
		<pubDate>Tue, 06 Mar 2012 16:28:21 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=3094</guid>
		<description><![CDATA[I'm working on an application in the browser that lets you take notes. I don't want to have the burden to save them on my own server therefore I want to use Github Gists as storage. The challenge is to be able to communicate with the Github API 100% inside the browser. Since it is [...]]]></description>
			<content:encoded><![CDATA[<p>I'm working on an application in the browser that lets you take notes. I don't want to have the burden to save them on my own server therefore I want to use <a href="https://gist.github.com/">Github Gists</a> as storage. The challenge is to be able to communicate with the <a href="http://developer.github.com/">Github API</a> 100% inside the browser.</p>
<p>Since it is a difficult task due to <a href="http://en.wikipedia.org/wiki/Cross-origin_resource_sharing">Cross-origin resource sharing</a> limitations and multi-step <a href="http://oauth.net/">OAuth</a> process, I decided to share with you a working procedure I found. It involves different communication protocols such as <a href="http://en.wikipedia.org/wiki/URL_redirection">HTTP Redirect</a>, <a href="https://developer.mozilla.org/en/DOM/window.postMessage">window.postMessage</a>, <a href="http://en.wikipedia.org/wiki/Ajax_(programming)">Ajax</a> <a href="http://api.jquery.com/jQuery.post/">post</a> and <a href="http://api.jquery.com/jQuery.get/">get</a> and a small PHP proxy using <a href="http://curl.haxx.se/">cURL</a>.</p>
<h3>Login Phase</h3>
<h4>Phase 0 - Create an application</h4>
<p>Before doing anything, you have to create a <a href="https://github.com/account/applications/">Github application</a>. It will provide you the <code>client_id</code> and <code>client_secret</code> as well as an admin to put the redirect URL.</p>
<h4>Phase 1 - Get authentication code</h4>
<p>Using <a href="http://developer.github.com/v3/oauth/">Github API OAuth guide</a> we learn that we have to redirect the user to a page on github server. After the user authorizes the application, the page is redirected to one of our page with a code.</p>
<p>Since we do not want to leave the current page (it would make all the user changes vanish) we must open the page in another context. The first one I tried was an iframe but github has the <a href="https://developer.mozilla.org/en/The_X-FRAME-OPTIONS_response_header">X-Frame-Options header</a> set that prevents embedding the page in the iframe.</p>
<p>So the other option was to open a new window. With <code>window.open</code> it was really easy to do so. The only tricky part was to actually give back the result to the main window. After digging, I found the following snippet of code that works well: <code>window.opener.postMessage(message, window.location)</code>.</p>
<p><img src="http://blog.vjeux.com/wp-content/uploads/2012/03/githublogin1.png" width="600" /></p>
<h4>Phase 2 - Get access token</h4>
<p>We are back in the main window and have the code. We now need to exchange this code for a token. I really wonder why they didn't give us the token already but well, there must be a reason! In order to get the token, we must send a POST request to a page on github.</p>
<p>However another difficulty comes in, this one page does not have a <a href="https://developer.mozilla.org/en/http_access_control#Access-Control-Allow-Origin">Access-Control-Allow-Origin</a> header set to our domain. So basically, we cannot access it from the browser using AJAX. Since it's a POST request, we cannot even use <a href="http://en.wikipedia.org/wiki/JSONP">JSON-P</a> to bypass it.</p>
<p>I did not want to have a server but I am resigned to write a small PHP proxy that will forward the call. I believe that the main reason why they blocked it was because they ask for the <code>client_secret</code>. They don't want us to write it down in our Javascript in plain sight.</p>
<p><img src="http://blog.vjeux.com/wp-content/uploads/2012/03/drawing-5.png" width="600" /></p>
<h4>Phase 3 - Enjoy!</h4>
<p>Now that we have got our token, we can call all the APIs on Github using post and get AJAX requests and they all work fine. One good thing is the fact that the token is permanent. Unless you change the permissions you request or the user revokes your application, every time the user logs in, he will be associated the same token.</p>
<p>You can safely store the token in the user's browser with <a href="https://developer.mozilla.org/en/DOM/Storage">localStorage</a> in order to keep them logged when they come back to the application. Just make sure to catch <code>401 Unauthorized</code> error on requests in case the token is no longer valid and ask the user to log in again.</p>
<h3>Demo</h3>
<p>And here's the demo! The source code is really small and <a href="https://github.com/vjeux/GithubLogin">available on github</a>. If you plan to integrate an in-browser login, it can be used as a starting point.</p>
<p><iframe src="http://fooo.fr/~vjeux/github/GithubLogin/main.html" width="100%" height="360"></iframe></p>
<p>You might want the link to <a href="https://github.com/settings/applications/">revoke the access from the dummy application</a> for testing purposes.</p>
<h3>Conclusion</h3>
<p>At first glance, the <a href="http://developer.github.com/v3/oauth/">login process</a> seemed to be really straightforward, you just had 2 requests to get your code and token and you are good to go. But doing so in the browser revealed itself to be a lot harder. I'm not satisfied with the process as it involves many different technologies but that's the best I could find. If you handled things differently please tell me <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2012/javascript/github-oauth-login-browser-side.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Dassault Systemes Javascript Evangelism Talk</title>
		<link>http://blog.vjeux.com/2012/javascript/dassault-systemes-javascript-evangelism-talk.html</link>
		<comments>http://blog.vjeux.com/2012/javascript/dassault-systemes-javascript-evangelism-talk.html#comments</comments>
		<pubDate>Thu, 23 Feb 2012 16:38:14 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[talk]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=3050</guid>
		<description><![CDATA[I recently had the chance to do a 2-hour Javascript evangelism talk at Dassault Systèmes. Unfortunately the presentation has not been recorded. I reused my the presentation I did at EPITA at the beginning and added a second part with a lot of demos. I've written down notes about the second part so you can [...]]]></description>
			<content:encoded><![CDATA[<p>I recently had the chance to do a 2-hour Javascript evangelism talk at <a href="http://www.3ds.com/">Dassault Systèmes</a>. Unfortunately the presentation has not been recorded. I reused my <a href="http://blog.vjeux.com/2011/javascript/javascript-presentation-2.html">the presentation I did at EPITA</a> at the beginning and added a second part with a lot of demos. I've written down notes about the second part so you can get an idea.</p>
<h4>Developer Tools</h4>
<ul>
<li><img src="http://blog.vjeux.com/wp-content/uploads/2012/02/dassault.jpg" style="float: right; margin-left: 10px; margin-bottom: 10px; width: 200px;" /><strong>Web Inspector</strong>. It is integrated into Google Chrome and has all the features you would be expecting in an IDE. The console is really powerful as it lets you browse through the Javascript objects. You no longer need to write endless printing functions. You can edit the HTML and CSS without a page reload, it makes designing interfaces a lot more efficient. There is also a full panel dedicated to profiling both Javascript and DOM events.</li>
<li><strong><a href="http://jsfiddle.net/vjeux/EPXQt/7/">JSFiddle</a></strong>. Web programming is all about interactivity. Not only you with the program (REPL) but also with other people. Everything you do can be one link away. JSFiddle lets you try and experiment things without the need of an IDE and allows you to show it to the world easily.
  </li>
<li><strong><a href="http://www.jshint.com/">JSHint</a></strong>. Because Javascript, the language, has design issues and is highly dynamic, it is useful to enforce good practices and to set common programming rules when working together. Always in the spirit of the web, you can just copy and paste your code to check it. Note that JSHint can also be integrated in all major text editors and IDEs.
</li>
</ul>
<h4>CSS</h4>
<p>HTML and CSS were traditionally used to make websites and forms. We can now make completely different things. </p>
<ul>
<li><strong><a href="http://shama.github.com/jmpress.js/">jmpress.js</a></strong>. Here's an example of how to use 3D in CSS in order to make animated presentation. One important thing to notice is how easy it is to use it. Just include jmpress.js in the page and add <code>data-x="-5000" data-rotate="180"</code> attributes to your HTML. It just works!</li>
<li><strong><a href="http://jsdo.it/GeckoTang/4rXg">CSS Panic</a></strong>. In order to show how powerful CSS got those days, here's a game completely written in HTML + CSS. There is 0 lines of Javascript!</li>
</ul>
<h4>Canvas</h4>
<p>Canvas is just a rectangle where you can manipulate each pixel's color.</p>
<ul>
<li><strong><a href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html">RayTracer</a></strong>. Ray Tracer is a common computer science school project. Usually, you write it on your computer and sometimes share the resulting image but you don't really share it because no one want to take the pain of compiling it on their machine. With Javascript, you can just share a link and everyone can test it!</li>
<li><strong><a href="http://canvasrider.com/tracks/934268">Canvas Rider</a></strong>. You can now create games in the browser. There is even a level editor implemented that follows principle of the web: interactivity. You can draw the map and move your character at the same time. When you are done, you are a single click away from saving the map and sharing it to people.</li>
<li><strong><a href="http://mozilla.github.com/pdf.js/web/viewer.html">pdf.js</a></strong>. The browser is now able to create applications that have always been restricted to native ones. The perfect example is this demo by Mozilla of a pdf renderer written exclusively in Javascript!</li>
</ul>
<div style="text-align: center; margin: 20px 0;">
  <img src="http://blog.vjeux.com/wp-content/uploads/2012/02/dassault21.jpg" style="width: 400px;" />
</div>
<h3>SVG</h3>
<p>SVG let you manipulate vector graphics such as line, curve, circle ...</p>
<ul>
<li><strong><a href="http://andrew-hoyer.com/andrewhoyer/experiments/cloth/">Cloth Simulation</a></strong>. Javascript implementations have gotten fast enough to do real time constraint solving simulations such as this one. It uses SVG to easily render the graph.</li>
<li><strong><a href="http://fooo.fr/~vjeux/epita/recuit/recuit.html">Simulated Annealing</a></strong>. It's another school project that gains from being written in the web. This would have probably been written in console mode, using ascii art and generating images as output. The parameters would have been entered in the command line. We can instead exploit HTML to make forms that update in real time, and SVG to render the problem and a graph to display the progress.</li>
</ul>
<h4>WebGL</h4>
<p>WebGL is an implementation of OpenGL in the browser. It let us use the graphical card from Javascript.</p>
<ul>
<li><strong><a href="http://fooo.fr/~vjeux/epita/recuit/3d.html">3D Simulated Annealing</a></strong>. Same as previous demo but this time there is a 3D representation of the progress. It also follows the interactivity rule, you can use your mouse and WASD to explore the scene. This demo uses Web Workers to exploit multiple cores.</li>
<li><strong><a href="http://maps3d.svc.nokia.com/webgl/">WebGL Maps</a></strong>. The graphical card is dedicated to manipulate images, therefore you can use it to improve performance on image intensive applications such as Google Maps.</li>
<li><strong><a href="http://app.bevelity.com/">Bevelity</a></strong>. Ever wondered if it was possible to write a complex application such as 3DSMax in the browser? Bevelity is an attempt to prove it true.</li>
<li><strong><a href="http://madebyevan.com/webgl-water/">Water Simulation</a></strong>. Another physics simulation demo with always the web plus: you can move the ball <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </li>
<li><strong><a href="http://helloracer.com/webgl/">Hello Racer</a></strong>. This is one of the thousand demos that shows you a beautiful car with glossy reflects ... This one has a unique feature: you can move the car! This must not have taken more than a few dozens of lines and yet has a huge impact!</li>
<li><strong><a href="http://stickmanventures.com/labs/demo/webgl-threejs-morph-target/">Morph Target</a></strong>. Pixar also find uses for the web. Here's a demo to create facial expressions.</li>
<li><strong><a href="http://www.ro.me/">Rome</a></strong>. Browsers now embed a video tag. Using it in combination with WebGL, Google made a wonderful 3-minute animation. You can use the mouse to interact with it. It moves the camera, pixelate the video and even make appear various monsters.</li>
</ul>
<h4>Performance</h4>
<p>Javascript performance are impressively improving from months to months. It is now possible to write computing intensive programs  and make them run at decent speed.</p>
<div style="text-align: center; margin: 20px 0;">
  <img src="http://blog.vjeux.com/wp-content/uploads/2012/02/sunspider.png" style="width: 400px;" />
</div>
<ul>
<li><strong><a href="http://jsperf.com/">JSPerf</a></strong>. If you have a doubt on which browser is faster for a specific feature or when you have two ways to do things, which one is faster, JSPerf is made for you!</li>
<li><strong><a href="http://bellard.org/jslinux/">JSLinux</a></strong>. Typed Arrays introduced for WebGL made possible to write a CPU Virtual Machine able to run a copy of linux in under 7 seconds.</li>
<li><strong><a href="http://repl.it/">repl.it</a></strong>. Emscriptem is a wonderful tool that translates LLVM assembly code into Javascript. It made possible to compile Ruby, Python, Lua and Scheme directly from their sources to Javascript.</li>
<li><strong><a href="http://mbebenita.github.com/Broadway/broadway.html">Broadway</a></strong>. Last but not least, a H.264 video decoder has been compiled to Javascript using Emscriptem. It manages to decode the sample videos at 60 frames per second. This is an exceptional feat for a scripting language!</li>
</ul>
<h4>Conclusion</h4>
<p>It is now possible to write the same complex applications we seen in the past in the browser. And it gives one huge added value: interactivity. There's absolutely nothing to install, you just have to give a link! You can combine all the render options such as HTML, CSS, Canvas, SVG and WebGL to make your program.</p>
<p>The next talk I'm going to do is at the <a href="http://2012.jsconf.us/#/speakers">JSConf</a>! I hope to see you there!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2012/javascript/dassault-systemes-javascript-evangelism-talk.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Tech Companies Recruitment</title>
		<link>http://blog.vjeux.com/2012/facebook/tech-companies-recruitment.html</link>
		<comments>http://blog.vjeux.com/2012/facebook/tech-companies-recruitment.html#comments</comments>
		<pubDate>Mon, 16 Jan 2012 10:48:35 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[Facebook]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=1890</guid>
		<description><![CDATA[I am happy to tell you that I am now a Facebook employee! A bit of history Two years ago, like many of you, I applied to Google (thanks tsuna). Obviously I didn't get in. I did not even made it to the second interview! After analysis, I screwed up everything! Spoken English is hard [...]]]></description>
			<content:encoded><![CDATA[<p>I am happy to tell you that I am now a Facebook employee!</p>
<h3>A bit of history</h3>
<p>Two years ago, like <a href="http://davisadvertising.wordpress.com/2008/02/04/how-many-resumes-does-google-receive-a-day/">many of you</a>, I applied to Google (thanks <a href="http://www.linkedin.com/in/tsuna">tsuna</a>). Obviously I didn't get in. I did not even made it to the second interview! After analysis, I screwed up everything!</p>
<ul>
<li>Spoken English is hard without training (I'm French). I struggled explaining simple things such as "What's the difference between Linked Lists and Arrays".</li>
<li>I did not have parallelism nor Java courses yet. Therefore the implementation of the classical producer &#038; consumer problem was painful.</li>
<li>At the end, I had no questions to ask. It made me look not motivated.</li>
<li>I have been asked about my hardest to fix bug. This was the lethal question, I had just no idea what to answer!</li>
</ul>
<h3>Meanwhile</h3>
<p><a href="http://www.buzzmachine.com/what-would-google-do/" style="float: right; margin-left: 10px;"><img src="http://farm4.static.flickr.com/3225/3125936268_715b3ac5d3_z.jpg" width="73" alt="What Would Google Do?" /></a> Soon after the interview, I read the excellent book <a href="http://www.buzzmachine.com/what-would-google-do/">What Would Google Do?</a>. It talks about business models from the new internet companies such as Google, Facebook, CraigsList, Wikipedia ... There is one chapter about blogs that was a revelation.</p>
<p>When I applied to Google, the only thing they had on me was a resume with the name of various projects I've been working on. I find excessively hard to judge my skills based on my resume. This is where a blog comes in. <strong>A blog lets you show off your skills and interests without constraints from a resume.</strong></p>
<p>Most of the articles fall into one of those three categories:</p>
<ul>
<li>Projects I've worked on using videos, dozen-pages reports ...</li>
<li>In-depth explanation of specific techniques (that no one cares about).</li>
<li>Fun programming stuff I found.</li>
</ul>
<p>It gives me the opportunity to show what I am interested in and concrete examples of what I am capable of. If you scroll over the many pages of my blog, you will have a much better vision of who I am than a resume.</p>
<h3>Another try</h3>
<p>And one more thing: <strong>A blog also makes you visible! I have been contacted by a Facebook employee</strong> after he saw my post <a href="http://blog.vjeux.com/2011/javascript/jspp-morph-cpp-into-javascript.html">JSPP - Morph C++ into Javascript</a> on Hacker News! (Yeah I know, that's crazy!!!). Since I did not want to fail miserably again, I took some more serious preparation (<a href="https://github.com/rip-rip">thanks Xavier</a>). Here is a summary of what made me ace the interviews.</p>
<ol>
<li><strong>Know the interview process</strong>. A typical 45 minutes interview goes like this:
<ul>
<li>Explain a project of your resume (10 minutes).</li>
<li>CS Puzzle (25 minutes)</li>
<li>Questions (10 minutes)</li>
</ul>
<p>I completely failed my Google interview because I had no idea how interviews work. As you can see, <strong>half of the interview is not about Computer Science!</strong> So you have to prepare for it as-well. Prepare a speech for 2 or 3 projects from your resume that makes you shine for the position you apply for. Make a list of 15-20 questions and you should be good to go.
</li>
<li><a href="http://www.amazon.com/dp/145157827X"><img src="http://ecx.images-amazon.com/images/I/51Isld482dL._SL110_.jpg" style="float: right; margin-left: 10px;" alt="Cracking the Coding Interview"/></a><strong>Train on CS problems</strong>. More than half of the recruitment process is about your Computer Science skills. However the process is flawed: it is mostly focused on solving puzzles. You can be a wonderful programmer that excels at making easy-to-use APIs and wonderful self-documented code but that skills will not be tested.
<p>In order to train, the book <a href="http://www.amazon.com/dp/145157827X">Cracking the Coding Interview</a> has 150 questions. The quality of individual questions and answers is not top notch, but it will give you a good insight of what will be asked. If you are done with it, you can get more on <a href="http://www.careercup.com/">CareerCup.com</a>.</li>
<li><a href="http://www.amazon.com/dp/0470927623"><img src="http://ecx.images-amazon.com/images/I/41AUXM4-RTL._SL110_.jpg" alt="The Google Resume" style="float: right; margin-left: 10px;" /></a><strong>Your interviewer should want to have a beer with you</strong>. This is probably the most helpful advice I have taken from the really good book <a href="http://www.amazon.com/dp/0470927623">The Google Resume</a>. Your interviewer is going to be your co-worker right after you get hired, as a consequence, during your interview process, act like if it was a friend instead of it being a faceless institution.</li>
</ol>
<h3>Conclusion</h3>
<p>All those adventures made me learn one thing. In order to get your dream job, you not only have to be a good programmer, you also have to learn how to sell yourself and have a good preparation for the extremely codified process that interviews are.</p>
<p>If you want to get a job at the Silicon Valley, I urge you to read the three books I referenced and start a blog right now. It is a long term investment that pays off!</p>
<h3>Bonus</h3>
<p>This is what I sent to accept the job offer :p</p>
<div style="text-align: center;">
<a href="http://blog.vjeux.com/wp-content/uploads/2011/08/motivator_facebook.jpg"><img src="http://blog.vjeux.com/wp-content/uploads/2011/08/motivator_facebook.jpg" width="200" alt="" /></a>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2012/facebook/tech-companies-recruitment.html/feed</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Javascript Ray Tracer</title>
		<link>http://blog.vjeux.com/2012/javascript/javascript-ray-tracer.html</link>
		<comments>http://blog.vjeux.com/2012/javascript/javascript-ray-tracer.html#comments</comments>
		<pubDate>Wed, 11 Jan 2012 14:00:59 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[EPITA]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Project]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=2806</guid>
		<description><![CDATA[Here is a report of the Ray Tracer written by myself Christopher Chedeau. I've taken the file format and most of the examples from the Ray Tracer of our friends Maxime Mouial and Clément Bœsch. The source is available on Github. It is powered by Open Source technologies: glMatrix, CodeMirror, CoffeeScript, Twitter Bootstrap, jQuery and [...]]]></description>
			<content:encoded><![CDATA[<p><script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>Here is a report of the Ray Tracer written by myself Christopher Chedeau. I've taken the file format and most of the examples from the Ray Tracer of our friends <a target="_blank" href="http://www.linkedin.com/pub/maxime-mouial/1a/967/269">Maxime Mouial</a> and <a target="_blank" href="http://ubitux.fr/">Clément Bœsch</a>. The <a target="_blank" href="https://github.com/vjeux/jsRayTracer">source is available on Github</a>.</p>
<p>It is powered by Open Source technologies: <a target="_blank" href="https://github.com/toji/gl-matrix">glMatrix</a>, <a target="_blank" href="http://codemirror.net/">CodeMirror</a>, <a target="_blank" href="http://coffeescript.org/">CoffeeScript</a>, <a target="_blank" href="http://twitter.github.com/bootstrap/">Twitter Bootstrap</a>, <a target="_blank" href="http://jquery.com/">jQuery</a> and <a target="_blank" href="https://developer.mozilla.org/en/Using_web_workers">Web Workers</a>.</p>
<p>Check out the <strong><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html">demo</a></strong>, or click on any of the images.</p>
<h3>Objects</h3>
<p>Our Ray Tracer supports 4 object types: Plane, Sphere, Cylinder and Cone.</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#origin"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/origin.png" /></a></p>
<p>The core idea of the Ray Tracer is to send rays that will be reflected on items. Given a ray (origin and direction), we need to know if it intersect an object on the scene, and if it does, how to get a ray' that will be reflected on the object.</p>
<p>Knowing that, we open up our high school math book and come up with all the following formulas.</p>
<p><strong>Legend:</strong> Ray Origin \(O\), Ray Direction \(D\), Intersection Position \(O'\), Intersection Normal \(N\) and Item Radius \(r\).</p>
<style>.eq { width: 100%; } .eq th { text-align: center; }</style>
<table class="eq">
<tr>
<th></th>
<th>Intersection</th>
<th>Normal</th>
</tr>
<tr>
<th>Plane</th>
<td>\[t = \frac{O_z}{D_z}\]</td>
<td>\[<br />
N = \left\{<br />
  \begin{array}{l}<br />
    x = 0 \\<br />
    y = 0 \\<br />
    z = -sign(D_z)<br />
  \end{array} \right.<br />
\]</td>
</tr>
<tr>
<th>Sphere</th>
<td>\[<br />
\begin{array}{l l l}<br />
  &#038; t^2 &#038; (O \cdot O) \\<br />
+ &#038; 2t   &#038; (O \cdot D) \\<br />
+ &#038;     &#038; (O \cdot O) - r^2<br />
\end{array}<br />
= 0\]</td>
<td>\[<br />
N = \left\{<br />
  \begin{array}{l}<br />
    x = O'_x \\<br />
    y = O'_y \\<br />
    z = O'_z<br />
  \end{array} \right.<br />
\]</td>
</tr>
<tr>
<th>Cylinder</th>
<td>\[<br />
\begin{array}{l l l}<br />
  &#038; t^2 &#038; (D_x D_x + D_y D_y) \\<br />
+ &#038; 2t   &#038; (O_x D_x + O_y D_y) \\<br />
+ &#038;     &#038; (O_x O_x + O_y O_y - r^2)<br />
\end{array}<br />
= 0\]</td>
<td>\[<br />
N = \left\{<br />
  \begin{array}{l}<br />
    x = O'_x \\<br />
    y = O'_y \\<br />
    z = 0<br />
  \end{array} \right.<br />
\]</td>
</tr>
<tr>
<th>Cone</th>
<td>\[<br />
\begin{array}{l l l}<br />
  &#038; t^2 &#038; (D_x D_x + D_y D_y - r^2 D_z D_z) \\<br />
+ &#038; 2t   &#038; (O_x D_x + O_y D_y - r^2 O_z D_z) \\<br />
+ &#038;     &#038; (O_x O_x + O_y O_y - r^2 O_z O_z)<br />
\end{array}<br />
= 0\]</td>
<td>\[<br />
N = \left\{<br />
  \begin{array}{l}<br />
    x = O'_x \\<br />
    y = O'_y \\<br />
    z = - O'_z * tan(r^2)<br />
  \end{array} \right.<br />
\]</td>
</tr>
</table>
<p>In order to solve the equation \(at^2 + bt + c = 0\), we use<br />
\[\Delta = b^2 - 4ac \]\[<br />
\begin{array}{c c c}<br />
\Delta \geq 0 &#038; t_1 = \frac{-b - \sqrt{\Delta}}{2a} &#038; t_2 = \frac{-b + \sqrt{\Delta}}{2a}<br />
\end{array}<br />
\]</p>
<p>And here is the formula for the reflected ray:</p>
<p>\[<br />
\left\{<br />
  \begin{array}{l}<br />
    O' = O + tD + \varepsilon D' \\<br />
    D' = D - 2 (D \cdot N) * N<br />
  \end{array}<br />
\right.<br />
\]</p>
<p>In order to fight numerical precision errors, we are going to move the origin of the reflected point a little bit in the direction of the reflected ray (\(\varepsilon D'\)). It will avoid to falsely detect a collision with the current object.</p>
<h3>Coordinates, Groups and Rotations</h3>
<p>We want to move and rotate objects. In order to do that, we compute a transformation matrix (and it's inverse) for each object in the scene using the following code:</p>
<p>\[<br />
T = \begin{array}{l}<br />
 (Identity * Translate_g * RotateX_g * RotateY_g * RotateZ_g) * \\<br />
 (Identity * Translate_i * RotateX_i * RotateY_i * RotateZ_i)<br />
\end{array}<br />
\]\[ I = T^{-1} \]</p>
<table style="width: 100%;">
<tr>
<td>
\[Translate(x, y, z) = \left(\begin{array}{c c c c}<br />
1 &#038; 0 &#038; 0 &#038; x \\<br />
0 &#038; 1 &#038; 0 &#038; y \\<br />
0 &#038; 0 &#038; 1 &#038; z \\<br />
0 &#038; 0 &#038; 0 &#038; 1<br />
\end{array}\right)\]
</td>
<td>
\[RotateX(\alpha) = \left(\begin{array}{c c c c}<br />
1 &#038; 0 &#038; 0 &#038; 0 \\<br />
0 &#038; cos(\alpha) &#038; -sin(\alpha) &#038; 0 \\<br />
0 &#038; sin(\alpha) &#038; cos(\alpha) &#038; 0 \\<br />
0 &#038; 0 &#038; 0 &#038; 1<br />
\end{array}\right)\]
</td>
</tr>
<tr>
<td>
\[RotateY(\alpha) = \left(\begin{array}{c c c c}<br />
cos(\alpha) &#038; 0 &#038; sin(\alpha) &#038; 0 \\<br />
0 &#038; 1 &#038; 0 &#038; 0 \\<br />
-sin(\alpha) &#038; 0 &#038; cos(\alpha) &#038; 0 \\<br />
0 &#038; 0 &#038; 0 &#038; 1<br />
\end{array}\right)\]
</td>
<td>
\[RotateZ(\alpha) = \left(\begin{array}{c c c c}<br />
cos(\alpha) &#038; -sin(\alpha) &#038; 0 &#038; 0 \\<br />
sin(\alpha) &#038; cos(\alpha) &#038; 0 &#038; 0 \\<br />
0 &#038; 0 &#038; 1 &#038; 0 \\<br />
0 &#038; 0 &#038; 0 &#038; 1<br />
\end{array}\right)\]
</td>
</tr>
</table>
<p>We have written the intersection and normal calculations in the object's coordinate system instead of the world's coordinate system. It makes them easier to write. We use the transformation matrix to do object -> world and the inverse matrix to do world -> object.</p>
<table style="width: 100%;">
<tr>
<td>
\[<br />
\left\{\begin{array}{l}<br />
O_{world} = T * O_{object} \\<br />
D_{world} = (T * D_{object}) - (T * 0_4)<br />
\end{array}\right.<br />
\]
</td>
<td>
\[<br />
\left\{\begin{array}{l}<br />
O_{object} = I * O_{world} \\<br />
D_{object} = (I * D_{world}) - (I * 0_4)<br />
\end{array}\right.<br />
\]
</td>
<td>
\[0_4 = \left(\begin{array}{c} 0 \\<br />
0 \\<br />
0 \\<br />
1<br />
\end{array}\right)<br />
\]
</td>
</tr>
</table>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#cylinders_3-spheres_reflect"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/cylinders_3-spheres_reflect.png" /></a><br />
<a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#pokeball"><img src="http://blog.vjeux.com/wp-content/uploads/2012/01/pokeball.png" /></a></p>
<h3>Bounding Box</h3>
<p>The previous equations give us objects with infinite dimensions (except for the sphere) whereas objects in real life have finite dimensions. To simulate this, it is possible to provide two points that will form a bounding box around the object. On the intersection test, we are going to use the nearest point that is inside the bounding box.</p>
<p>This gives us the ability to do various objects such as mirrors, table surface and legs, light bubbles and even a Pokeball!</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#reflect"><img src="http://blog.vjeux.com/wp-content/uploads/2012/01/reflect.png" /></a><br />
<img src="http://blog.vjeux.com/wp-content/uploads/2012/01/pokeball_exploded.png" /></p>
<h3>Light</h3>
<p>An object is composed of an Intensity \(I_o\), a Color \(C_o\) and a Brightness \(B_o\). Each light has a Color \(C_l\) and there is an ambient color \(C_a\). Using all those properties, we can calculate the color of a point using the following formula:</p>
<p>\[<br />
I_o * (C_o + B_o) * \left(C_a + \sum_{l}{(N \cdot D) * C_l}\right)<br />
\]</p>
<p>Only the lights visible from the intersection point are used in the sum. In order to check this, we send a shadow ray from the intersection point to the light and see if it intersects any object.</p>
<div style="text-align: center;"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Ray_trace_diagram.svg/500px-Ray_trace_diagram.svg.png" /></div>
<p>The following images are examples to demonstrate the lights.</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#light_3"><img src="http://blog.vjeux.com/wp-content/uploads/2012/01/light_3.png" /></a><br />
<a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#single_light"><img src="http://blog.vjeux.com/wp-content/uploads/2012/01/single_light.png" /></a></p>
<h3>Textures</h3>
<p>In order to put a texture on an object, we need to map a point \((x, y, z)\) in the object's coordinate system into a point \((x, y)\) in the texture's coordinate system. For planes, it is straightforward, we just the \(z\) coordinate (which is equal to zero anyway). For spheres, cylinders and cones it is a bit more involved. Here is the formula where \(w\) and \(h\) are the width and height of the texture.</p>
<p>\[<br />
\begin{array}{c c}<br />
\phi = acos(\frac{O'_y}{r}) &#038; \theta = \frac{acos\left(\frac{O'_x}{r * sin(\phi)}\right)}{2\pi}<br />
\end{array}<br />
\]\[<br />
\begin{array}{c c}<br />
x = w * \left\{\begin{array}{l l} \theta &#038; \text{if } O'_x < 0 \\<br />
1 - \theta &#038; \text{else}\end{array}\right. &#038; y = h * \frac{\phi}{\pi}<br />
\end{array}<br />
\]</p>
<p>Once we have the texture coordinates, we can easily create a checkerboard or put a texture. We added options such as scaling and repeat in order to control how the texture is placed.</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#checkerboard"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/checkerboard.png" /><br />
<a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#texturing"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/texturing.png" /></a></p>
<p>We also support the alpha mask in order to make a color from a texture transparent.</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#texturing_cut"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/texturing_cut.png" /></a></p>
<h3>Progressive Rendering</h3>
<p>Ray tracing is a slow technique. At first, I generated pixels line by line, but I found out that the first few lines do not hold much information.</p>
<p>Instead, what we want to do is to have a fast overview of the scene and then improve on the details. In order to do that, during the first iteration we are only generating 1 pixel for a 32x32 square. Then we generate 1 pixel for a 16x16 square and so on ... We generate the top-left pixel and fill all the unknown pixels with it.</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#cylinders_3-spheres_reflect"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/progressive.png" /></a></p>
<p>In order not to regenerate pixels we already seen, I came up with a condition to know if a pixel has already been generated. \(size\) is the current square size (32, 16, ...).</p>
<p>\[\left\{\begin{array}{l}<br />
x \equiv 0 \pmod{size * 2}\\<br />
y \equiv 0 \pmod{size * 2}<br />
\end{array}\right.<br />
\]</p>
<h3>Supersampling</h3>
<p>Aliasing is a problem with Ray Tracing and we solve this issue using supersampling. Basically, we send more than one ray for each pixel. We have to chose representative points from a square. There are multiple strategies: in the middle, in a grid or random. Check the result of various combinations in the following image:</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#pokeball">
<div id="supersampling" style="overflow: hidden; width: 660px; height: 300px; background: url(http://blog.vjeux.com/wp-content/uploads/2008/01/aliasing.png) 0 0;"></div>
<p></a></p>
<ul id="supersampling-links">
<li><strong>1x</strong>: <span data-id="0" class="btn primary">Basic</span></li>
<li><strong>4x</strong>: <span data-id="1" class="btn primary">4 random</span>  <span data-id="2" class="btn primary">1 fixed, 3 random</span>  <span data-id="3" class="btn primary">2x upscale</span></li>
<li><strong>16x</strong>: <span data-id="4" class="btn primary">4x upscale</span> <span data-id="5" class="btn primary">2x upscale, 1 fixed, 3 random</span></li>
</ul>
<style>#supersampling-links strong { display: inline-block; width: 23px; text-align: right; }</style>
<p><script>
$('#supersampling-links span').click(function () {
  $('#supersampling').css('background-position', '0px ' + (- 300 * +$(this).attr('data-id')) + 'px');
});
</script></p>
<h3>Perlin Noise</h3>
<p>We can generate random textures using Perlin Noise. We can control several parameters such as \(octaves\), the number of basic noise, the initial scale \(f\) and the factor of contribution \(p\) of the high frequency noises.</p>
<p>\[ noise(x, y, z) = \sum_{i = 0}^{octaves}{p^i * PerlinNoise(\frac{2^i}{f}x, \frac{2^i}{f}y, \frac{2^i}{f}z)} \]</p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#perlin_sphere"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/perlin.png" /></a><br />
<table style="width: 100%">
<tr>
<td width="33%">\[noise\]</td>
<td width="33%">\[noise * 20 - \lfloor noise * 20 \rfloor\]</td>
<td width="33%">\[\frac{cos(noise) + 1}{2}\]</td>
</tr>
</table>
<p>As seen in the example, we can apply additional functions after the noise has been generated to make interesting effects.</p>
<h3>Portal</h3>
<p>Last but not least, Portals from the self-titled game. They are easy to reproduce in a Ray Tracer and yet, I haven't seen any done.</p>
<p>If a ray enters portal A, it will go out from portal B. It is trivial to implement it, it is just a coordinates system transformation. Like we did for world and object transformation, we do it between A and B using their transformation matrix.</p>
<table style="width: 100%;">
<tr>
<td>
\[<br />
\left\{\begin{array}{l}<br />
O_{a}' = T * O_{b} \\<br />
D_{a}' = (T * D_{b}) - (T * 0_4)<br />
\end{array}\right.<br />
\]
</td>
<td>
\[<br />
\left\{\begin{array}{l}<br />
O_{b}' = T * O_{a} \\<br />
D_{b}' = (T * D_{a}) - (T * 0_4)<br />
\end{array}\right.<br />
\]
</td>
</tr>
</table>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html#portal"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/portal.png" /></a></p>
<h3>Scene Editor</h3>
<p>In order to create scenes more easily, we have defined a scene description language. We developed a basic <a target="_blank" href="http://codemirror.net/">CodeMirror</a> syntax highlighting script. Just enter write your scene down and press Ray Trace <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p><a target="_blank" href="http://fooo.fr/~vjeux/epita/raytracer/raytracer.html"><img src="http://blog.vjeux.com/wp-content/uploads/2008/01/editor.png" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2012/javascript/javascript-ray-tracer.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Javascript &#8211; One line global + export</title>
		<link>http://blog.vjeux.com/2011/javascript/javascript-one-line-global-export.html</link>
		<comments>http://blog.vjeux.com/2011/javascript/javascript-one-line-global-export.html#comments</comments>
		<pubDate>Thu, 22 Dec 2011 12:18:18 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=2786</guid>
		<description><![CDATA[I've been working on code that works on Browser, Web Workers and NodeJS. In order to export my module, I've been writing ugly code like this one: &#40;function &#40;&#41; &#123; /* ... Code that defines MyModule ... */ &#160; var all; if &#40;typeof self !== 'undefined'&#41; &#123; all = self; // Web Worker &#125; else [...]]]></description>
			<content:encoded><![CDATA[<p>I've been working on code that works on Browser, Web Workers and NodeJS. In order to export my module, I've been writing ugly code like this one:</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #009966; font-style: italic;">/* ... Code that defines MyModule ... */</span>
&nbsp;
  <span style="color: #003366; font-weight: bold;">var</span> all<span style="color: #339933;">;</span>
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> self <span style="color: #339933;">!==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    all <span style="color: #339933;">=</span> self<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Web Worker</span>
  <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> window <span style="color: #339933;">!==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    all <span style="color: #339933;">=</span> window<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// Browser</span>
  <span style="color: #009900;">&#125;</span> <span style="color: #000066; font-weight: bold;">else</span> <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> global <span style="color: #339933;">!==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    all <span style="color: #339933;">=</span> global<span style="color: #339933;">;</span> <span style="color: #006600; font-style: italic;">// NodeJS</span>
  <span style="color: #009900;">&#125;</span>
  all.<span style="color: #660066;">MyModule</span> <span style="color: #339933;">=</span> MyModule<span style="color: #339933;">;</span>
&nbsp;
  <span style="color: #000066; font-weight: bold;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">typeof</span> module <span style="color: #339933;">!==</span> <span style="color: #3366CC;">'undefined'</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
    module.<span style="color: #660066;">exports</span> <span style="color: #339933;">=</span> MyModule<span style="color: #339933;">;</span>
  <span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<h3>One-line Solution</h3>
<p><a href="https://github.com/gmarty">Guillaume Marty</a> showed me that <a href="https://github.com/jussi-kalliokoski/sink.js/blob/master/sink.js">sink.js</a> uses <code>this</code> as a replacement for <code>self</code>, <code>window</code> and <code>global</code>. I managed to add support for <code>module.exports</code> in a one-liner!</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span> <span style="color: #009900;">&#40;</span>global<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
  <span style="color: #009966; font-style: italic;">/* ... Code that defines MyModule ... */</span>
&nbsp;
  global.<span style="color: #660066;">MyModule</span> <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>global.<span style="color: #660066;">module</span> <span style="color: #339933;">||</span> <span style="color: #009900;">&#123;</span><span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">exports</span> <span style="color: #339933;">=</span> MyModule<span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></div></div>

<p>I have been looking for this magic line for a long time, I hope it will be useful to you too <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2011/javascript/javascript-one-line-global-export.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Automatic Links with Trie</title>
		<link>http://blog.vjeux.com/2011/python/automatic-links-with-trie.html</link>
		<comments>http://blog.vjeux.com/2011/python/automatic-links-with-trie.html#comments</comments>
		<pubDate>Wed, 07 Dec 2011 15:43:06 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[Python]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=2756</guid>
		<description><![CDATA[On MMO-Champion, we often paste World of Warcraft patch notes taken from Blizzard. The main problem is that it's plain text. We want to be able to add links to all the spells, quests, zones ... This way people can mouseover and see the description. It helps figuring out what changed. We create a Trie [...]]]></description>
			<content:encoded><![CDATA[<p>On <a href="http://www.mmo-champion.com/">MMO-Champion</a>, we often paste World of Warcraft patch notes taken from Blizzard. The main problem is that it's plain text. We want to be able to add links to all the spells, quests, zones ... This way people can mouseover and see the description. It helps figuring out what changed.</p>
<p>We create a Trie that contains item/spell/... names as key and url as value. For each letter of the text, we search the longest string in the trie that matches this part of the text. If found, we link it and move right after the end of the name, else we advance by one character.</p>
<h3>Specialized Rules</h3>
<p>The algorithm above works well but there are many little problems that arise. In order to solve them, we apply several specialized rules.</p>
<ul>
<li>There are names that have more than one link. We proritize the source (Ability > Item > Quest > ...) and sort them by descending id.</li>
<li>All the interesting names start by a capital letter. This removes a lot of noise but keeps the first word of sentences.</li>
<li><code>Stamina, Gladiator, Buff, Stat</code>. There are many common words that are spells, we have a blacklist to remove them.</li>
<li><code>[Heal]ing</code>. If the name found ends in the middle of a word, we discard it.</li>
<li><code>[Cinderweb Spiderling]s</code>. But there's an exception, if there is only an <code>s</code> after.</li>
<li><code>[Fireball] Barrage</code>. If the next word is capitalized, it means the name is wrong.</li>
<li><code>[Sanctuary] of Malorne</code>. We also discard if the next word is <code>of</code>.</li>
</ul>
<h3>Example</h3>
<p><script type="text/javascript" src="http://db.mmo-champion.com/tt.js"></script> </p>
<blockquote><p>
<img src="http://static.mmo-champion.com/mmoc/images/icons/idruids.gif" border="0" alt=""/> <b><font color="#FF7D0A">Druid</font></b>
<ul>
<li>Druids now gain 1 attack power per point of Strength, down from 2. They continue to gain 2 attack power per point of Agility while in <a href="http://db.mmo-champion.com/s/768/" target="_blank" rel="http://db.mmo-champion.com/s/768//tooltip/js">Cat Form</a> or <a href="http://db.mmo-champion.com/s/5487/" target="_blank" rel="http://db.mmo-champion.com/s/5487//tooltip/js">Bear Form</a>. In addition, <a href="http://db.mmo-champion.com/s/768/" target="_blank" rel="http://db.mmo-champion.com/s/768//tooltip/js">Cat Form</a>'s scaling rate from gear upgrades was slower than other classes, which was causing them to fall behind in damage with higher item levels. To counter the Strength change and improve scaling, the following changes have been made. All numbers cited are for level-85 druids.</li>
<li><a href="http://db.mmo-champion.com/s/22568/" target="_blank" rel="http://db.mmo-champion.com/s/22568//tooltip/js">Ferocious Bite</a> damage has been increased by 15%. In addition, its base cost has been reduced to 25 energy and it can use up to 25 energy, for up to a 100% damage increase.</li>
<li><a href="http://db.mmo-champion.com/s/33876/" target="_blank" rel="http://db.mmo-champion.com/s/33876//tooltip/js">Mangle</a> (Cat) damage at level 80 and above has been increased to 540% weapon damage, up from 460%, and bonus damage has been lowered to 302.</li>
<li><a href="http://db.mmo-champion.com/s/1822/" target="_blank" rel="http://db.mmo-champion.com/s/1822//tooltip/js">Rake</a> initial damage on hit now deals the same damage as each periodic tick (and is treated the same for all combat calculations). Periodic damage now gains 14.7% of attack power per tick, up from 12.6%, and base damage per tick has been lowered from 557 to 56. There is a known issue with <a href="http://db.mmo-champion.com/s/1822/" target="_blank" rel="http://db.mmo-champion.com/s/1822//tooltip/js">Rake</a>'s tooltip being incorrect from this change will be corrected in a future patch.</li>
<li>Ravage damage at level 80 and above has been increased to 950% weapon damage, up from 850%, and bonus damage has been lowered to 532.</li>
<li><a href="http://db.mmo-champion.com/s/52610/" target="_blank" rel="http://db.mmo-champion.com/s/52610//tooltip/js">Savage Roar</a> now grants 80% increased damage to melee auto attacks, up from 50%. The <a href="http://db.mmo-champion.com/s/64307/" target="_blank" rel="http://db.mmo-champion.com/s/64307//tooltip/js">Glyph of Savage Roar</a> remains an unchanged bonus of 5% to that total.</li>
<li><a href="http://db.mmo-champion.com/s/5221/" target="_blank" rel="http://db.mmo-champion.com/s/5221//tooltip/js">Shred</a> damage at level 80 and above has been increased to 540% weapon damage, up from 450%, and bonus damage has been lowered to 302.</li>
<li><a href="http://db.mmo-champion.com/s/339/" target="_blank" rel="http://db.mmo-champion.com/s/339//tooltip/js">Entangling Roots</a> and the equivalent spell triggered by <a href="http://db.mmo-champion.com/s/16689/" target="_blank" rel="http://db.mmo-champion.com/s/16689//tooltip/js">Nature's Grasp</a> no longer deal damage.</li>
<li><a href="http://db.mmo-champion.com/s/29166/" target="_blank" rel="http://db.mmo-champion.com/s/29166//tooltip/js">Innervate</a> now grants an ally target 5% of his or her maximum mana over 10 seconds, but still grants 20% of the druid's maximum mana over 10 seconds when self-cast.</li>
<li><a href="http://db.mmo-champion.com/s/16864/" target="_blank" rel="http://db.mmo-champion.com/s/16864//tooltip/js">Omen of Clarity</a> clearcasting buff from now lasts 15 seconds, up from 8 seconds.</li>
<li><a href="http://db.mmo-champion.com/s/2912/" target="_blank" rel="http://db.mmo-champion.com/s/2912//tooltip/js">Starfire</a> damage has been increased by approximately 23%.</li>
<li><a href="http://db.mmo-champion.com/s/62078/" target="_blank" rel="http://db.mmo-champion.com/s/62078//tooltip/js">Swipe</a> (Cat) now deals 600% weapon damage at level 80 or higher, down from 670%.</li>
<li><a href="http://db.mmo-champion.com/s/5176/" target="_blank" rel="http://db.mmo-champion.com/s/5176//tooltip/js">Wrath</a> damage has been increased by approximately 23%.</li>
</ul>
<p><a href="http://www.mmo-champion.com/threads/601516-Linkified-Patch-Note">Rest of the example ...</a></p></blockquote>
<p><script>ttlib.init();</script></p>
<h3>Conclusion</h3>
<p>It takes around a minute to generate the trie, which needs to be done once per big patch. Then it takes less than a second to process a full patch note, automatically adding around 700 links.</p>
<p>The script does not generate a perfect output and needs to be reviewed by a human. However, it takes an order of magnitude less time to improve the generated result than doing it from scratch.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2011/python/automatic-links-with-trie.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>C++: Fuzzy Search with Trie</title>
		<link>http://blog.vjeux.com/2011/c/c-fuzzy-search-with-trie.html</link>
		<comments>http://blog.vjeux.com/2011/c/c-fuzzy-search-with-trie.html#comments</comments>
		<pubDate>Wed, 07 Dec 2011 14:00:07 +0000</pubDate>
		<dc:creator>vjeux</dc:creator>
				<category><![CDATA[C++]]></category>

		<guid isPermaLink="false">http://blog.vjeux.com/?p=2712</guid>
		<description><![CDATA[For a school project, I had to make a part of a spell-check program. Given a dictionnary of words, you have to determine all the words that are within K mistakes of the original word. Trie As input, we've got a list of words along with their frequency. For example, with the following list, we [...]]]></description>
			<content:encoded><![CDATA[<p>For a school project, I had to make a part of a spell-check program. Given a dictionnary of words, you have to determine all the words that are within K mistakes of the original word.</p>
<h3>Trie</h3>
<p>As input, we've got a list of words along with their frequency. For example, with the following list, we are going to build a trie.</p>

<div class="wp_syntax"><div class="code"><pre class="none" style="font-family:monospace;">do     100 000
dont    15 000
done     5 000
donald     400</pre></div></div>

<div style="text-align: center;"><img src="http://blog.vjeux.com/wp-content/uploads/2011/12/trie1.png" /></div>
<p>In order to minimize the memory footprint, I've made a node structure that fits into 32 bits.</p>

<div class="wp_syntax"><div class="code"><pre class="cpp" style="font-family:monospace;"><span style="color: #0000ff;">struct</span> <span style="color: #008000;">&#123;</span>
	<span style="color: #0000ff;">unsigned</span> <span style="color: #0000ff;">short</span> is_link <span style="color: #008080;">:</span> <span style="color: #0000dd;">1</span><span style="color: #008080;">;</span>
	<span style="color: #0000ff;">unsigned</span> <span style="color: #0000ff;">short</span> is_last_child <span style="color: #008080;">:</span> <span style="color: #0000dd;">1</span><span style="color: #008080;">;</span>
	<span style="color: #0000ff;">union</span> content <span style="color: #008000;">&#123;</span>
		<span style="color: #0000ff;">struct</span> <span style="color: #008000;">&#123;</span>
			<span style="color: #0000ff;">unsigned</span> <span style="color: #0000ff;">short</span> letter <span style="color: #008080;">:</span> <span style="color: #0000dd;">6</span><span style="color: #008080;">;</span> <span style="color: #666666;">// 2^6  = 64 different charaters</span>
			<span style="color: #0000ff;">unsigned</span> <span style="color: #0000ff;">int</span> next <span style="color: #008080;">:</span> <span style="color: #0000dd;">24</span><span style="color: #008080;">;</span>    <span style="color: #666666;">// 2^24 = 16 777 216 nodes</span>
		<span style="color: #008000;">&#125;</span> link<span style="color: #008080;">;</span>
		<span style="color: #0000ff;">struct</span> <span style="color: #008000;">&#123;</span>
			<span style="color: #0000ff;">unsigned</span> <span style="color: #0000ff;">short</span> is_overflow <span style="color: #008080;">:</span> <span style="color: #0000dd;">1</span><span style="color: #008080;">;</span>
			<span style="color: #0000ff;">unsigned</span> <span style="color: #0000ff;">int</span> freq <span style="color: #008080;">:</span> <span style="color: #0000dd;">29</span><span style="color: #008080;">;</span>    <span style="color: #666666;">// 2^29 = 536 870 912</span>
		<span style="color: #008000;">&#125;</span> final<span style="color: #008080;">;</span>
	<span style="color: #008000;">&#125;</span>
<span style="color: #008000;">&#125;</span> node<span style="color: #008080;">;</span></pre></div></div>

<p>The frequence can be greater than <code>2^30</code>. We're going to store values between <code>0</code> and <code>2^29</code> directly inside the node, and if it doesn't fit, we are going to retrieve the value in a separate memory location and store its corresponding id.</p>
<h3>Damerau Levenshtein Distance</h3>
<p>The distance between two words we use is Damerau Levenshtein. In order to calculate the distance, we compute the following table.</p>
<div style="text-align: center;"><a href="http://ntz-develop.blogspot.com/2011/03/fuzzy-string-search.html"><img src="http://blog.vjeux.com/wp-content/uploads/2011/12/dam1.png" width="400" /></a></div>
<p>Where each slot <code>D(i,j)</code> is calculated using the following formula:</p>
<div style="text-align: center;"><a href="http://ntz-develop.blogspot.com/2011/03/fuzzy-string-search.html"><img src="http://blog.vjeux.com/wp-content/uploads/2011/12/dam2.png" /></a></div>
<p>There are two things to tweak in order to use this distance with a trie.</p>
<h4>Incremental computation</h4>
<p>Obviously, we are not going to recompute the whole distance for each node. We can use one table for the whole search. For each node you explore, you are going to compute only the line corresponding to it's depth in the tree. For example, if you look for <code>elephant</code> and are currently at <code>rel</code> in the tree, you are only going to compute the 3rd row. The first two rows <code>r</code> and <code>e</code> are correct.</p>
<div style="text-align: center;"><img src="http://blog.vjeux.com/wp-content/uploads/2011/12/dam3.png" width="400" /></div>
<h4>When to stop?</h4>
<p>Now we need to find given a current table, when to stop. For example, if we search for <code>elephant</code> with 1 error and we are at <code>zz</code>, we can stop, there won't be any word that satisfy the request. I've found out that if the minimum value of the current row is bigger than the number of tolerated errors, we can stop the search. When searching for <code>elephant</code> with 1 error, we stop at the 4th row (<code>rele</code>) because the minimum is 2.</p>
<div style="text-align: center;"><img src="http://blog.vjeux.com/wp-content/uploads/2011/12/dam4.png" width="400" /></div>
<h3>Heuristics</h3>
<p>When we traverse the trie in a fuzzy way, we explore a lot of useless nodes. For example, when we fuzzy search for <code>eve</code>, we are going to explore the beginning of the word <code>evening</code>. Let's see some strategies to reduce the amount of nodes we explore.</p>
<h4>Different trie per word length</h4>
<p>Fuzzy search for the 5-letter word like <code>happy</code> with 1 error, you know that your results are going to be words of length 4, 5 or 6. In a generalized way, you are only going to look for words in the range <code>[len - error; len + error]</code>.  You can create a trie for each length. Then you search in all the required tries and aggregate the results. </p>
<div style="text-align: center;"><img src="http://blog.vjeux.com/wp-content/uploads/2011/12/trie2.png" /></div>
<p>The downside with this approach is that you lose the high prefix compression of the trie.</p>
<h4>Word length</h4>
<p>Instead of making on trie per word length, you can encode the word lengths directly in the nodes. Each node is going to have a bitfield containing the lengths of the words in the sub-tree. For example in the example above, the first node leads to words of size 2, 4 and 6, therefore the field will have <code>0b010101...</code>.</p>
<div style="text-align: center;"><img src="http://blog.vjeux.com/wp-content/uploads/2011/12/trie3.png" /></div>
<p>If you are looking for a word of size 5 with 1 error, you are going to create a bitfield of word lengths you are interested in <code>0b000111...</code>. For each node, you <code>and</code> both bitfields, if the result is not 0, then you've got a potential match.</p>
<h3>Conclusion</h3>
<p>In order to test for performance we search every word at a distance 2 of the 400 most popular english words. The dictionnary contains 3 millions words. It takes 22 seconds on my old 2Ghz server to run it. It takes an average of 55ms per fuzzy search and generates an average of 247 results.</p>
<p>Felix Abecassis, a friend of mine spent time working on <a href="http://felix.abecassis.me/2011/11/tbb-tasks-spawning-dependencies-and-recycling/">parallelizing the search with Intel TBB</a>. You might want to read it in order to improve by a factor your performance <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<p>Since it's a competitive school project, I'm not going to give the source publicly. Please ask them if you are interested <img src='http://blog.vjeux.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://blog.vjeux.com/2011/c/c-fuzzy-search-with-trie.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

