<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Aditya Bhatt</title>
	<atom:link href="http://aditya.bhatts.org/feed/" rel="self" type="application/rss+xml" />
	<link>http://aditya.bhatts.org</link>
	<description>I make things.</description>
	<lastBuildDate>Sun, 12 May 2013 12:44:24 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='aditya.bhatts.org' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://s2.wp.com/i/buttonw-com.png</url>
		<title>Aditya Bhatt</title>
		<link>http://aditya.bhatts.org</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://aditya.bhatts.org/osd.xml" title="Aditya Bhatt" />
	<atom:link rel='hub' href='http://aditya.bhatts.org/?pushpress=hub'/>
		<item>
		<title>Awwation update: Cross-Browser and Offline Support</title>
		<link>http://aditya.bhatts.org/2012/05/16/awwation-cross-browser-offline/</link>
		<comments>http://aditya.bhatts.org/2012/05/16/awwation-cross-browser-offline/#comments</comments>
		<pubDate>Wed, 16 May 2012 12:12:28 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Awwation]]></category>
		<category><![CDATA[SVG]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=302</guid>
		<description><![CDATA[In my last blog post about Awwation, I had talked about live thumbnails. What I&#8217;ve discovered is that since &#60;use&#62; references the original SVG, the editor becomes really slow as [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=302&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>In my last blog post about Awwation, I had talked about live thumbnails. What I&#8217;ve discovered is that since <strong>&lt;use&gt;</strong> references the original SVG, the editor becomes really slow as you add more presentation nodes to the timeline, because the changes are reflected in real-time across all the thumbnails. For short presentations this isn&#8217;t really a problem, so I&#8217;m keeping this feature as it is till I figure out a more efficient solution.</p>
<p>My other pet peeve was that the presentation would not animate in several browsers &#8211; particularly Opera. This has now been fixed with the latest version of the Sozi script, which is much faster and seems to work on all major browsers &#8211; I&#8217;ve tested on IE9, Safari, Firefox, Chrome, Arora, the iOS browser, and the one on my phone: the Nokia N950 developer device.<br />
So that&#8217;s it for the presentations. I&#8217;ve also tried to make the editor work across all browsers &#8211; the saving with the <strong>FileSaver</strong> polyfill worked only in Chrome, and since I really want everything to be done client-side, I have used a tiny script, Downloadify, that saves the presentation using flash if you&#8217;re not using Chrome.<br />
Oh, and now instead of the default name <strong>aww.svg</strong>, you now get a system dialog asking you for the filename and location for the generated presentation.</p>
<p>The next major thing I finished off was the support for offline theming.<br />
I&#8217;ve cloned the <a href="http://code.google.com/p/googlefontdirectory/" target="_blank">Google Fonts Collection</a> and <strong>base64</strong>-encoded some fonts and embedded them into the CSS theme files, so you don&#8217;t have to do any CSS <strong>@import</strong> for the fonts from Google&#8217;s CDN. Next, I&#8217;m XHRing the theme files (statically hosted along with the editor) and injecting the CSS response into the presentation when you pick a theme, instead of stuffing an <strong>@import</strong> between <strong>&lt;style&gt;</strong> tags. Oh, and since there&#8217;s no <strong>@import</strong> URL anymore, I can use a relative path to the theme file for the XHR and therefore the theme can be retrieved from the same static hosting as the editor, and the theming in the editor <em>and</em> the presentations works offline, too.</p>
<p>So, now everything in the presentation works offline, except for images.<br />
Images are a different breed &#8211; right now, the image embdedding functionality from SVG-edit takes URLs to remote images. Ideally, in the editor, I want to retrieve the images and embed their <strong>base64</strong> dataURL in the SVG, but this will require a cross-domain request, which is a security problem and therefore disallowed by browsers. I could allow the user to read in an image from their local machine with the HTML5 File API, but sadly this isn&#8217;t supported by IE9.<br />
So right now, you need an internet connection to view presentations with images. Hopefully I can figure out a solution soon for this.</p>
<p>Interestingly, I&#8217;ve been able to successfully create an Awwation entirely on my phone using the editor, from within Mobile Firefox! In it&#8217;s current state, there are many more things that can be used to make the Awwation editor more touch-friendly though.</p>
<div id="attachment_303" class="wp-caption aligncenter" style="width: 614px"><a href="http://dl.dropbox.com/u/40496552/site/tcr.jpg"><img class="size-full wp-image-303  " title="tcr" alt="" src="http://dl.dropbox.com/u/40496552/site/tcr.jpg" width="604" height="339" /></a><p class="wp-caption-text">TCR</p></div>
<p>Now that I&#8217;ve graduated from college, I should have some free time to work on this project. These days, I particularly enjoy working from <em>The Chocolate Room</em>, a popular cafe chain here in Ahmedabad, where they have really nice coffee and crushed ice drinks for the summer. Nothing better than great coffee to to help you code. And they have power sockets for people like me to plug in their laptops, so that&#8217;s great!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/302/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/302/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=302&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2012/05/16/awwation-cross-browser-offline/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>

		<media:content url="http://dl.dropbox.com/u/40496552/site/tcr.jpg" medium="image">
			<media:title type="html">tcr</media:title>
		</media:content>
	</item>
		<item>
		<title>Awwation update: Live thumbnails!</title>
		<link>http://aditya.bhatts.org/2012/04/23/awwation-update-live-thumbnails/</link>
		<comments>http://aditya.bhatts.org/2012/04/23/awwation-update-live-thumbnails/#comments</comments>
		<pubDate>Sun, 22 Apr 2012 23:45:29 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Awwation]]></category>
		<category><![CDATA[SVG]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=290</guid>
		<description><![CDATA[In my last Awwation update I talked about the new CSS Themes support. This time, I have another improvement. In the old version, the timeline strip had bad thumbnails. I [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=290&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>In my last Awwation update I talked about the new <a title="Awwation update: Themes support" href="http://adityabhatt.wordpress.com/2012/04/14/awwation-update-themes-support/" target="_blank">CSS Themes support</a>.</p>
<p>This time, I have another improvement. In the old version, the timeline strip had bad thumbnails. I was using canvg to render the SVG onto a Canvas and then drawing the Canvas bitmap as a snapshot:</p>
<div id="attachment_261" class="wp-caption aligncenter" style="width: 530px"><a href="http://adityabhatt.files.wordpress.com/2012/04/aww-strip.png"><img class="size-full wp-image-261" title="aww-strip" src="http://adityabhatt.files.wordpress.com/2012/04/aww-strip.png?w=700" alt=""   /></a><p class="wp-caption-text">Old strip. Bad snapshots.</p></div>
<p>This time, I&#8217;ve dropped the Canvas approach altogether since I discovered the &lt;use&gt; SVG element. &lt;use&gt; allows you to &#8216;href&#8217; to an SVG element residing in the DOM and display a &#8216;reference&#8217; to that SVG. You can also add overriding properties such as a viewBox and transforms.</p>
<p>In action:</p>
<div id="attachment_291" class="wp-caption aligncenter" style="width: 552px"><a href="http://adityabhatt.files.wordpress.com/2012/04/strip.png"><img class="size-full wp-image-291" title="strip" src="http://adityabhatt.files.wordpress.com/2012/04/strip.png?w=700" alt=""   /></a><p class="wp-caption-text">New awesome strip. Live, moving, 100% accurate snapshots.</p></div>
<p>Now you can pick any element as a path node in the presentation timeline, and a snapshot of it as it exactly as it appears in the document, <em>during the presentation</em>, will be shown in the strip. How is this better than Prezi&#8217;s strip? Well, here, changes are reflected <em>as they happen</em> &#8211; so, if I&#8217;m moving an element around in the editor, you can <em>see it moving around in the strip </em>too!</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/290/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/290/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=290&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2012/04/23/awwation-update-live-thumbnails/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>

		<media:content url="http://adityabhatt.files.wordpress.com/2012/04/aww-strip.png" medium="image">
			<media:title type="html">aww-strip</media:title>
		</media:content>

		<media:content url="http://adityabhatt.files.wordpress.com/2012/04/strip.png" medium="image">
			<media:title type="html">strip</media:title>
		</media:content>
	</item>
		<item>
		<title>Awwation update: Themes support</title>
		<link>http://aditya.bhatts.org/2012/04/14/awwation-update-themes-support/</link>
		<comments>http://aditya.bhatts.org/2012/04/14/awwation-update-themes-support/#comments</comments>
		<pubDate>Sat, 14 Apr 2012 10:37:19 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Awwation]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[SVG]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=281</guid>
		<description><![CDATA[Last week, I blogged about how I wrote the first iteration of Awwation, an HTML5 Prezi clone. Somehow the blog post surfaced onto the front pages of Slashdot, and /r/programming for a couple [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=281&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Last week, I <a href="http://adityabhatt.wordpress.com/2012/04/06/writing-a-prezi-clone-with-html5-svg-and-javascript/" target="_blank">blogged</a> about how I wrote the first iteration of <a title="Awwation" href="http://awwation.com" target="_blank">Awwation</a>, an HTML5 Prezi clone. Somehow the blog post surfaced onto the front pages of <a href="http://tech.slashdot.org/story/12/04/06/0048212/animated-presentations-using-svg" target="_blank">Slashdot</a>, and <a href="http://www.reddit.com/r/programming/comments/rxw6t/writing_a_prezi_clone_with_html5_svg_and/" target="_blank">/r/programming</a> for a couple of days, and the project got a decent following on <a href="https://github.com/adityab/Awwation" target="_blank">Github</a> (it was a trending repo that day!).</p>
<p>This prompted me to polish the code a bit to make it presentable to potential contributors, and now the <a href="http://awwation.com/editor/">app</a> is in a somewhat usable state.</p>
<p>The first iteration was rather bland, so I thought it would be a good idea to have presentation themes like Prezi does. As it turns out, this was easy &#8211; SVG can be styled using CSS.</p>
<p>So here&#8217;s a sample CSS theme for Awwation:</p>
<pre class="brush: css; title: ; notranslate">
@import url(http://fonts.googleapis.com/css?family=Berkshire+Swash);

text {
    font-family: 'Berkshire Swash', cursive;
    text-shadow: 0px 0px 8px rgba(150, 150, 150, 1);
}

rect {
    stroke: #AEAEFF;
}

ellipse {
    stroke: #FF0000;
}
</pre>
<p>That&#8217;s it, really.</p>
<p>And here&#8217;s a new &#8216;Themes&#8217; menu, with the above theme in action:</p>
<div id="attachment_283" class="wp-caption aligncenter" style="width: 590px"><a href="http://adityabhatt.files.wordpress.com/2012/04/themetest.png"><img class="size-full wp-image-283" title="themetest" src="http://adityabhatt.files.wordpress.com/2012/04/themetest.png?w=700" alt=""   /></a><p class="wp-caption-text">Themes menu. Selecting a different theme instantly changes all elements in the document to the new style.</p></div>
<p>What next? A theme creator tool would be a good idea. I&#8217;ve opened an <a href="https://github.com/adityab/Awwation/issues/3">issue</a> for that. Contributions are welcome.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/281/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/281/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=281&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2012/04/14/awwation-update-themes-support/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>

		<media:content url="http://adityabhatt.files.wordpress.com/2012/04/themetest.png" medium="image">
			<media:title type="html">themetest</media:title>
		</media:content>
	</item>
		<item>
		<title>Writing a Prezi clone with HTML5, SVG, and Javascript</title>
		<link>http://aditya.bhatts.org/2012/04/06/writing-a-prezi-clone-with-html5-svg-and-javascript/</link>
		<comments>http://aditya.bhatts.org/2012/04/06/writing-a-prezi-clone-with-html5-svg-and-javascript/#comments</comments>
		<pubDate>Thu, 05 Apr 2012 19:07:31 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Awwation]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[kde-planet]]></category>
		<category><![CDATA[prezi]]></category>
		<category><![CDATA[sozi]]></category>
		<category><![CDATA[SVG]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=248</guid>
		<description><![CDATA[The idea The other day, I took it upon myself to write a browser-based Prezi-like app without using flash. Condition: It should run purely client-side. It was also an experiment [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=248&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<h2>The idea</h2>
<p>The other day, I took it upon myself to write a browser-based <a title="Prezi" href="http://prezi.com" target="_blank">Prezi</a>-like app without using flash. Condition: <em>It should run purely client-side.</em></p>
<p>It was also an experiment in evaluating whether the current APIs available in modern browsers are enough to handle the task. What follows is an account of what works, what doesn&#8217;t, and what could be done better.</p>
<h2>SVG vs Canvas</h2>
<p>When you&#8217;re building a rich graphics-intensive app like Prezi, you usually have two ways of rendering content: SVG and Canvas.</p>
<p><strong>1.</strong> SVG provides a neat <strong>DOM</strong> that can be manipulated with existing DOM handling javascript libraries, such as jQuery. Canvas, on the other hand, is just a <strong>bitmap buffer</strong>. This means that you have to program your own DOM-like scene graph if you wish to use Canvas for handling presentation elements. Libraries for this already exist &#8211; most notably, <a title="fabric.js" href="http://fabricjs.com" target="_blank">fabric.js</a>, but none are as convenient to use as a real DOM. SVG wins here.</p>
<p><strong>2.</strong> Canvas is just a <del>dumb</del> bitmap buffer. Animating it is <em>faster </em>than animating SVG with Javascript, but it isn&#8217;t accessible. You can&#8217;t select text with the mouse. You can&#8217;t embed rich content. SVG wins in this regard; you can even embed YouTube videos and forms and such.</p>
<p><strong>3.</strong> SVG is not <strong>implemented</strong> as completely or identically across different browsers as Canvas is. The worst offender here is, of course, IE9 (a lack of SMIL animation support, among other things). Text rendering looks noticeably different in every browser. This can be mitigated somewhat by not allowing the browser to use default fonts, but using custom webfonts like <a title="Webfonts" href="http://www.google.com/webfonts" target="_blank">Google&#8217;s toolkit</a>. The rest of the rendering should look fine if you stay away from edge cases (literally) such as not drawing objects outside the main SVG canvas, for example:</p>
<p><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100"&gt;<br />
&lt;rect x="10" y="10" width="50" height="80" rx="-10" ry="-10" fill="red"/&gt;<br />
&lt;/svg&gt;</code></p>
<div class="wp-caption aligncenter" style="width: 550px"><img src="http://ieblog.members.winisp.net/images/jennifer_svg_1.png" alt="" width="540" height="236" /><p class="wp-caption-text">Difference between SVG rendering across browsers (<a href='http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx' target='_blank'>source</a>)</p></div>
<p><strong>4.</strong> SVG and Fonts are not friends. Everything is supposed to be vectorized, but fonts aren&#8217;t handled that way. If you notice the animations in the example linked to near the end of this post, you&#8217;ll see that during zooming, the fonts &#8216;shake&#8217; when resizing, because they don&#8217;t scale smoothly as normal vector content. The only way to achieve smooth scaling is to convert the text to paths, but that defeats the purpose of text accessibility. There is an <a href="http://www.w3.org/TR/SVG/fonts.html" target="_blank">SVG Fonts spec</a>, which aims to remedy this by having each font glyph rendered using SVG paths, which would mean real vector fonts which can be selected with the mouse and handled as normal text, plus identical rendering everywhere. Webkit and Opera support this spec, but Mozilla and IE have <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=119490" target="_blank">outright</a> <a href="http://blogs.msdn.com/b/ie/archive/2010/08/04/html5-modernized-fourth-ie9-platform-preview-available-for-developers.aspx" target="_blank">refused</a> to implement it, with the explanation being that WOFF is a &#8216;superior alternative&#8217; or &#8216;enough&#8217;. This is quite wrong and their arguments are not satisfactory. WOFF is <strong>not</strong> vector content, and therefore can&#8217;t be (and isn&#8217;t) rendered identically everywhere. Period.</p>
<p>Taking <strong>1</strong> and <strong>2</strong> as points in our favor, and tolerating <strong>2 </strong>and <strong>4</strong>, I chose SVG to be the superior but not polished-enough alternative.</p>
<h2>Animation</h2>
<p>Next, we want to <strong>animate</strong>. We won&#8217;t use CSS3 animations (not supported well enough everywhere). SMIL animation is fast, but works only with non-IE browsers. Heck, we&#8217;ll just use plain old JavaScript. I&#8217;m using <a href="http://sozi.baierouge.fr/wiki/en:welcome" target="_blank">Sozi</a>&#8216;s javascript code for animating.</p>
<h2>The Editor</h2>
<p>We want to make an SVG editor, in which after designing the document, we can choose certain elements to be nodes in the presentation path, and then have the editor inject the JavaScript code required to animate the presentation.</p>
<p>As it turns out, <a href="http://svg-edit.googlecode.com" target="_blank">SVG-edit</a> is an open source, completely client-side SVG editor, and perfectly suited for the task at hand.</p>
<p>I decided to take it&#8217;s core and build on top of it, stripping out the unneeded parts and adding some more useful features.  It looks like this right now:</p>
<div class="wp-caption aligncenter" style="width: 830px"><a href="http://dl.dropbox.com/u/40496552/hp.png"><img class=" " src="http://dl.dropbox.com/u/40496552/hp.png" alt="" width="820" height="404" /></a><p class="wp-caption-text">The editor. Incomplete, but it works.</p></div>
<div style="text-align:left;">And here&#8217;s a <a href="http://dl.dropbox.com/u/40496552/harry-potter.svg" target="_blank">link</a> to the presentation shown above.</div>
<div style="text-align:left;"></div>
<h3 style="text-align:left;"><strong>Rendering the Timeline</strong></h3>
<div style="text-align:left;">The sidebar on the left is supposed to show a strip of &#8216;snapshots&#8217; of nodes in the presentation path, such as what Prezi shows:</p>
<div id="attachment_260" class="wp-caption aligncenter" style="width: 216px"><a href="http://adityabhatt.files.wordpress.com/2012/04/prezi-strip.png"><img class="size-full wp-image-260" title="prezi-strip" src="http://adityabhatt.files.wordpress.com/2012/04/prezi-strip.png?w=700" alt=""   /></a><p class="wp-caption-text">Prezi strip. Nice snapshots.</p></div>
<p>And here&#8217;s a similar sequence rendered in Awwation:</p>
<div id="attachment_261" class="wp-caption aligncenter" style="width: 530px"><a href="http://adityabhatt.files.wordpress.com/2012/04/aww-strip.png"><img class="size-full wp-image-261" title="aww-strip" src="http://adityabhatt.files.wordpress.com/2012/04/aww-strip.png?w=700" alt=""   /></a><p class="wp-caption-text">Awwation strip. Okay snapshots.</p></div>
<p>The strip is generated using a hack. Due to browser security policies, you cannot render an SVG as an HTML5 Image and crop a region out using Canvas. So I had to use <a href="http://canvg.googlecode.com" target="_blank">canvg</a>, a client-side javascript library that tries to read SVG and render it onto Canvas. The code then converts the Canvas context to an image and adds it to the strip. It doesn&#8217;t work perfectly &#8211; if there&#8217;s external content in the SVG, such as an xlink&#8217;d image, it won&#8217;t render and you&#8217;ll get blank snapshots. Apparently the only <strong>perfect</strong> way to render snapshots is to actually send the SVG to the server, use <a href="http://www.phantomjs.org/" target="_blank">PhantomJS</a> to rasterize it, and send it back to the browser. But this defeats the purpose of doing everything client-side, so that&#8217;s a no-go.</p>
<h3><strong>Theming</strong></h3>
<p><strong>Disclaimer</strong>: I haven&#8217;t done this one yet.</p>
<p>Prezi has a presentation themes collection. This is where Awwation can totally beat Prezi, and here&#8217;s how: CSS themes. SVG can be easily styled using CSS. WOFF fonts can be embedded as dataURLs in the CSS code. Anyone can create CSS files for this and you could have a huge user-generated corpus of themes!</p>
<h3><strong>Collaborative Editing</strong></h3>
<p>SVG-edit has already been <a href="http://thenextweb.com/2009/06/05/experience-worlds-google-wave-svg-editor-gadget/" target="_blank">extended</a> to have real-time collaborative editing features using the Google Wave protocol. So Awwation can get collaborative editing for free! (once I or someone gets around to integrate it).</p>
<h3><strong>Saving</strong></h3>
<p>Since we&#8217;re doing all the work client-side, we don&#8217;t want to send the created SVG to the server and then download it back to the client&#8217;s file system. We want it saved to disk <strong>right here</strong>. This would be the &#8216;normal&#8217;, convoluted way of doing it, but fortunately there is an <a href="https://github.com/eligrey/FileSaver.js">implementation</a> of the proposed HTML5 <strong>FileSaver API</strong> which allows us to save the file directly from the browser to disk. Unfortunately this works perfectly only on Chrome. With Opera/Firefox, you&#8217;ll have to save the generated file, rename it to .svg, and then view it in the browser.</p>
<h2>Conclusion</h2>
<p>This can be much more capable than Prezi in terms of accessibility and extensibility. Holding it back are security policies and inconsistencies across browsers, which will hopefully have workarounds in the future.</p>
<p><strong>Finally, </strong></p>
<p><strong></strong>Here&#8217;s the <strong>project page</strong> for Awwation: <a href="http://adityab.github.com/Awwation/">http://adityab.github.com/Awwation/</a>.</p>
<p>Here&#8217;s a link to a <strong>sample presentation</strong> using <strong>Webfonts</strong> to make it look consistent across browsers: <a href="http://dl.dropbox.com/u/40496552/awwation-intro.svg">http://dl.dropbox.com/u/40496552/awwation-intro.svg</a>.</p>
<p><strong>Warning:</strong> The presentation doesn&#8217;t work in newer versions of opera at the moment, <a href="https://github.com/senshu/Sozi/issues/92" target="_blank">here&#8217;s</a> a relevant issue in Sozi.</p>
<p><strong>PS:</strong> I was inspired to work on this idea from Calligra Stage&#8217;s similar <a href="http://aakritigupta.wordpress.com/2011/08/06/presentations-the-new-stage-way" target="_blank">project</a>.</p>
</div>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/248/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/248/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=248&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2012/04/06/writing-a-prezi-clone-with-html5-svg-and-javascript/feed/</wfw:commentRss>
		<slash:comments>23</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>

		<media:content url="http://ieblog.members.winisp.net/images/jennifer_svg_1.png" medium="image" />

		<media:content url="http://dl.dropbox.com/u/40496552/hp.png" medium="image" />

		<media:content url="http://adityabhatt.files.wordpress.com/2012/04/prezi-strip.png" medium="image">
			<media:title type="html">prezi-strip</media:title>
		</media:content>

		<media:content url="http://adityabhatt.files.wordpress.com/2012/04/aww-strip.png" medium="image">
			<media:title type="html">aww-strip</media:title>
		</media:content>
	</item>
		<item>
		<title>Memecached: Real-Time meme sharing with node.js, now.js, and MongoDB</title>
		<link>http://aditya.bhatts.org/2011/12/29/memecached-real-time-meme-sharing-with-node-js-now-js-and-mongodb/</link>
		<comments>http://aditya.bhatts.org/2011/12/29/memecached-real-time-meme-sharing-with-node-js-now-js-and-mongodb/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 00:50:47 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[mongodb]]></category>
		<category><![CDATA[node.js]]></category>
		<category><![CDATA[now.js]]></category>
		<category><![CDATA[realtime]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=232</guid>
		<description><![CDATA[Yesterday, I wrote a web-app named Memecached. It is a service which allows you to quickly generate a meme and publish it in real-time. It went viral for quite a [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=232&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Yesterday, I wrote a web-app named <a title="Memecached" href="http://memecached.adityabhatt.org/" target="_blank">Memecached</a>. It is a service which allows you to quickly generate a meme and publish it in real-time. It went viral for quite a few hours after I tweeted about it and posted it on Hacker News, with hundreds of memes being shared, sometimes a new meme every three seconds!</p>
<p>Memecached is extremely <strong>lightweight</strong>. The server is tiny, written entirely in exactly 50 lines of Javascript using <a title="Node.js" href="http://nodejs.org" target="_blank">node.js</a>. It uses <a title="MongoDB" href="http://mongodb.org" target="_blank">MongoDB</a> as the data store and <a title="NowJS" href="http://nowjs.com" target="_blank">now.js</a> for real-time, remote method invocation.</p>
<div id="attachment_233" class="wp-caption aligncenter" style="width: 614px"><a href="http://adityabhatt.files.wordpress.com/2011/12/memecached.png"><img class="size-full wp-image-233" title="memecached" src="http://adityabhatt.files.wordpress.com/2011/12/memecached.png?w=700" alt=""   /></a><p class="wp-caption-text">Awkward text blackened</p></div>
<p>Using it is fairly trivial &#8211; you open the page, and the latest N (25 by default) memes are streamed back and populated into the webpage. On the left is a collections of meme templates &#8211; you can click any one, enter the top and bottom text, and hit publish to see it reflected on each open client.</p>
<h2>Some Code</h2>
<p>On the server side, the now.js initialization didn&#8217;t work normally as sometimes the client &#8211; my chrome browser &#8211; would not perform a handshake (I&#8217;ve reported this in the now.js issue here: , so I had to fiddle around with the options till I found that <em>xhr-polling </em>seemed to work.</p>
<pre class="brush: jscript; title: ; notranslate">
var everyone = require(&quot;now&quot;).initialize(server, { socketio: {'transports': ['xhr-polling'] }} );
</pre>
<p>Publishing a meme involves validating the meme document, inserting it into mongo, and the passing it to all clients with:</p>
<pre class="brush: jscript; title: ; notranslate">
// publish meme
everyone.now.publish = function(meme) {
    if(meme.name &amp;&amp; meme.text.line1 &amp;&amp; meme.text.line2) {
        db.collection('memes', function(err, collection) {
            // add a date field and save
            meme.date = Date.now();
            collection.insert(meme, function(err) {
                if(!err)
                    everyone.now.receiveMeme(meme);
            });
        });
    }
};
</pre>
<p>Retrieving a recent memes&#8217; list is a trivial matter of looking up the last 25 in the &#8216;memes&#8217; collecion:</p>
<pre class="brush: jscript; title: ; notranslate">
// retrieve the latest few memes of a name. If there is no name, retrieve a mixture
everyone.now.getRecent = function(memeName) {
    var client = this;
    console.log(&quot;retrieving&quot;);
    db.collection('memes', function(err, collection) {
        if(memeName == undefined) {
            collection.find( {}, { sort: [[ &quot;date&quot;, &quot;desc&quot; ]], limit: 25 }).toArray( function(err, docs) {
                client.now.getContent(docs);
            });
        }
        else {
            collection.find( {&quot;name&quot;: memeName}, { sort: [[ &quot;date&quot;, &quot;desc&quot; ]], limit: 25 }).toArray( function(err, docs) {
                client.now.getContent(docs);
            });
        }
    });
};
</pre>
<h2>How it works</h2>
<p>All meme template images are stored on Dropbox.</p>
<ul>
<li>When a new meme is published, the server takes a JSON object from the client, containing the meme <code>name</code> and <code>text</code>. No image whatsoever.</li>
<li>The received meme object is inserted into the mongo collection <code>memes</code> with a date timestamp added to it. The object is also sent to all connected clients immediately so that they may update their timelines. This also means that no further database queries are required to retrieve new memes.</li>
<li>When a client connects, the last few (25) memes are queried from the database and sent back. This can further be optimized by having an in-memory queue of the most recent memes, in addition to the database.</li>
<li>All meme generation is done entirely <strong>client-side</strong>, by drawing the text over the images using <strong>Canvas</strong>. The client doesn&#8217;t have to download images, and the server doesn&#8217;t have to handle them at all.</li>
</ul>
<div>
<div id="readme">
<div>
<h2>How to run</h2>
<ol>
<li>First, run <code>mongod</code> to start the Mongo daemon.</li>
<li>Next, run the server: <code>node app.js</code></li>
<li>Point your browser to <code><a href="http://localhost:8080" rel="nofollow">http://localhost:8080</a></code>.</li>
<li>Bask in Memetic paradise.</li>
</ol>
</div>
</div>
</div>
<h2>Things to do</h2>
<ul>
<li><strong>Upvotes/Downvotes</strong>: This should be a ten-minute job. Just add two new keys to the &#8216;schema&#8217; of the doc.</li>
<li><strong>Sharing</strong>: Memes are rendered in Canvas. Need to get the dataUrl() and allow the user to save the image to a file.</li>
<li><strong>Line breaks</strong>: There need to be line breaks in a meme phrase. Right now, extra long sentences will make the font shrink too much to be visible.</li>
</ul>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/232/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/232/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=232&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2011/12/29/memecached-real-time-meme-sharing-with-node-js-now-js-and-mongodb/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>

		<media:content url="http://adityabhatt.files.wordpress.com/2011/12/memecached.png" medium="image">
			<media:title type="html">memecached</media:title>
		</media:content>
	</item>
		<item>
		<title>Introducing FaceOff and How To Write a PHP Extension For Your C++ API using SWIG</title>
		<link>http://aditya.bhatts.org/2011/09/23/introducing-faceoff-and-how-to-write-a-php-extension-for-your-c-api-using-swig/</link>
		<comments>http://aditya.bhatts.org/2011/09/23/introducing-faceoff-and-how-to-write-a-php-extension-for-your-c-api-using-swig/#comments</comments>
		<pubDate>Thu, 22 Sep 2011 23:24:56 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[face detection]]></category>
		<category><![CDATA[kde-planet]]></category>
		<category><![CDATA[libface]]></category>
		<category><![CDATA[php]]></category>
		<category><![CDATA[swig]]></category>
		<category><![CDATA[web service]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=218</guid>
		<description><![CDATA[FaceOff is a simple web service that takes photographs and returns coordinates of detected faces, encapsulated with JSON. It uses a PHP-wrapped libface for the processing. The source code is [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=218&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p><a href="http://faceoff.adityabhatt.org" target="_blank">FaceOff</a> is a simple web service that takes photographs and returns coordinates of detected faces, encapsulated with JSON. It uses a PHP-wrapped libface for the processing.<br />
The source code is on <a href="https://github.com/adityab/faceoff" target="_blank">GitHub</a>.</p>
<p style="text-align:center;">***</p>
<p>These days I&#8217;m into wrappers.</p>
<p>As a personal exercise in wrapping C++ code with PHP, I decided to wrap <a href="http://libface.sf.net" target="_blank">libface</a>, a C++ library for face detection that I worked on as my GSoC 2010 project for face tagging in digiKam. <a href="http://www.swig.org" target="_blank">SWIG</a> provides a rather simple way to do this. Here&#8217;s how to do it.</p>
<h2>The interface file</h2>
<p>SWIG gives you a &#8216;non-invasive&#8217; way to wrap an API, in that you don&#8217;t have to modify the library at all. First, you&#8217;ll need to write an interface file &#8211; <em>library_wrapped.i</em>. Here, we&#8217;ve named it libface_php.i.</p>
<pre># Wrap everything under module libface_php

%module libface_php
%{
#include "/usr/include/libface/LibFaceConfig.h"
#include "/usr/include/libface/Log.h"
#include "/usr/include/libface/LibFaceCore.h"
#include "/usr/include/libface/Face.h"
#include "/usr/include/libface/LibFaceUtils.h"
#include "/usr/include/libface/LibFace.h"
#include "/usr/include/libface/Haarcascades.h"
#include "/usr/include/libface/FaceDetect.h"
#include "/usr/include/libface/Eigenfaces.h"

#include "glue.cpp"

%}

%include std_string.i
%include std_vector.i
%include std_map.i
%include cpointer.i

%include /usr/include/libface/LibFaceConfig.h
%include /usr/include/libface/Log.h
%include /usr/include/libface/LibFaceCore.h
%include /usr/include/libface/Face.h
%include /usr/include/libface/LibFaceUtils.h
%include /usr/include/libface/LibFace.h
%include /usr/include/libface/Haarcascades.h
%include /usr/include/libface/FaceDetect.h
%include /usr/include/libface/Eigenfaces.h
%include glue.cpp</pre>
<p>The %module declares the name of the PHP extension. Once compiled, it will be named as &#8216;libface_php.so&#8217;.<br />
This, of course, assumes that libface was installed under /usr &#8211; I couldn&#8217;t find a way to tell SWIG to prefix a path automatically upon invokation. The paths can be changed accordingly.</p>
<h2>Glue</h2>
<p>Next, SWIG isn&#8217;t perfect. And there are some things which make sense in one language but not in the other. For example, pointers in C++ are converted to resources in PHP. There may not be a dead-simple mapping from a vector type to an array type, for instance. To use some language-specific data structures, we need glue code.</p>
<p>glue.cpp:</p>
<pre>#include 

using namespace std;
using namespace libface;

Face* faceAt(vector v, int index)
{
    return  (v[index]);
}</pre>
<p>So now we have the interface in place. Now comes the easy part &#8211; if all went well while writing the above; if it didn&#8217;t, you&#8217;ll have to try the next steps, test the wrapper, and then wrestle with the interface a bit (or  a lot!) more and tweak it till it works.</p>
<h2>Generating</h2>
<p>First off, we have to generate a wrapper.</p>
<pre>swig -c++ -php libface_php.i</pre>
<p>This generates a file libface_php_wrap.cpp. This is the wrapper code that needs to be built and linked with libface.<br />
Compile it:</p>
<pre>g++ `php-config --includes` -fPIC -c libface_php_wrap.cpp</pre>
<p>The -fPIC option instructs g++ to generate position-independent code.<br />
Link it with libface and generate the extension:</p>
<pre>g++ -shared libface_php_wrap.o -o libface_php.so -lface</pre>
<p>The extension we wanted has now been created &#8211; libface_php.so.<br />
Copy this to the PHP extensions directory:</p>
<pre>cp libface_php.so `php-config --extension-dir`</pre>
<p>In your system&#8217;s php.ini (/etc/php/php.ini in Arch), don&#8217;t forget to add the line:</p>
<pre>extension=libface_php.so</pre>
<p>You&#8217;re done. While doing this, a file libface_php.php was generated. This is the sole file that you will include in your php code.</p>
<p>Using it is rather simple:</p>
<pre>require ("libface_php.php");

$instance = new Libface(DETECT);
$filename = "test.png";
$detected_faces = $instance-&gt;detectFaces($filename);
$count = $detected_faces-&gt;size();

// get the coordinates of the first face
if($count &gt;= 1)
{
    $face = new Face(faceAt($detected_faces, 0)); // the face at index zero in the vector
    // Top left and bottom right coordinates
    echo "First face is : (" . $face-&gt;getX1() . "," . $face-&gt;getY1() . "),(" . $face-&gt;getX2() . "," . $face-&gt;getY2() . ")";
}</pre>
<p>That&#8217;s it. Of course, this may not be the best way to wrap it, so suggestions are welcome.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/218/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/218/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=218&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2011/09/23/introducing-faceoff-and-how-to-write-a-php-extension-for-your-c-api-using-swig/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>
	</item>
		<item>
		<title>SETI Algorithms project update</title>
		<link>http://aditya.bhatts.org/2011/06/10/seti-algorithms-project-update/</link>
		<comments>http://aditya.bhatts.org/2011/06/10/seti-algorithms-project-update/#comments</comments>
		<pubDate>Thu, 09 Jun 2011 23:40:05 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[DSP]]></category>
		<category><![CDATA[gsoc]]></category>
		<category><![CDATA[SETI]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=207</guid>
		<description><![CDATA[A quick update to list my progress with the SETI internship so far: So far, most of the existing simple DSP code has been open-sourced in the form of a [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=207&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>A quick update to list my progress with the SETI internship so far:</p>
<p>So far, most of the existing simple DSP code has been open-sourced in the form of a new library. I&#8217;ve named the library SETIkit, and you can find it on <a href="https://github.com/setiQuest/Algorithms">GitHub</a>. The progress is documented in a <a href="http://setiquest.org/wiki/index.php/Algorithms">wiki page</a>.</p>
<p>The project uses CMake as the build system, and depends on</p>
<ul>
<li>FFTW (Fast Fourier Transform in the West)</li>
<li>GSL (GNU Scientific Library)</li>
</ul>
<div>The library is split into several modules</div>
<div>
<ul>
<li><strong>sq_utils</strong> contains several useful routines for logging, error handling, noise generation, and interop with the ATA (Allen Telescope Array) data format.</li>
<li><strong>sq_signals</strong> has functions that generate test signals. For now, we have a routine named sq_gen_sine that streams out a complex sinusoid with gaussian noise.</li>
<li><strong>sq_dsp</strong> contains a growing list of useful DSP utils:</li>
<ul>
<li>FFT</li>
<li>Power calculation</li>
<li>Hann windowing</li>
<li>Conjugate calculation</li>
<li>DC offsets, Scaling, complex rotation</li>
<li>WOLA (Weighted OverLap Add)</li>
<li>Real/Imaginary channel extraction</li>
<li>Heterodyne</li>
</ul>
<li><strong>sq_imaging </strong>is a collection of a few functions that read signal data, scale it linearly/according to the power, and write it as a PGM image.</li>
</ul>
<div>We now have all the code that is required to generate waterfall plots (more commonly known as <a href="http://en.wikipedia.org/wiki/Spectrogram">spectrograms</a>) of the SETI observation data.</div>
<div>Now there is a bunch of signal processing blocks that we use in a UNIX pipeline &#8211; programs that take signal data from one stream, do some processing, and pipe the resulting data to other programs.</div>
<div>A typical pipeline for generating waterfalls from the SETI data:</div>
</div>
<div>
<pre> cat ~/Data/2010-04-02-amc7-3693.4464-8bit-one-second.dat | ./sqsample -l 4096 | ./sqmix -c 0.0 
| ./sqwindow -l 4096 | ./sqfft -l 4096 | ./sqpower -l 4096 | ./sqreal -l 4096 
| perl -e 'while(read(STDIN,$bfr,4096*4)==4096*4) {syswrite(STDOUT,$bfr,1024*4,1536*4)}' 
| ./sqpnm -c 1024 -r 1200 -p &gt; out.pgm</pre>
</div>
<div>This takes data from a file that contains one second&#8217;s worth of observations of the AMC-7 geosynchronous satellite&#8217;s broadcasts.</div>
<div>
<ul>
<li>The <em>sqsampl</em>e block takes 2-channel (quadrature) 8-bit data from <em>stdin</em>, and writes out samples (floats) to <em>stdout </em>in the form of alternating real and imaginary values.</li>
<li>The <em>sqmix</em> block heterodynes a chosen digital frequency (here 0.0 Hz, we&#8217;ll see more later)  to DC (0 Hz). That is, you can use this to move the spectrum to the left and right.</li>
<li>The <em>sqwindow</em> block applies a hanning (or hann) window to the signal.</li>
<li>The <em>sqfft</em> block streams out the Fast Fourier Transform of the windowed signal.</li>
<li><em>sqpower </em>computes the instantaneous power signal.</li>
<li><em>sqreal</em> extracts the real part from the information.</li>
</ul>
<p>The 4096 argument to all those blocks is the number of samples they can read, write, and process in one go.</p></div>
<div>The perl code neatly arranges the signal data so that it can be visualized as an image, also giving you control over the &#8216;region&#8217; of the image you want to see. The <em>sqpnm </em>block then takes this data, scales it, and writes it out to a binary PNM/PGM image.</div>
<div>Here&#8217;s the waterfall that the above pipeline generates:</p>
<div id="attachment_212" class="wp-caption aligncenter" style="width: 605px"><a href="http://adityabhatt.files.wordpress.com/2011/06/wf.png"><img class="size-full wp-image-212" title="Waterfall" src="http://adityabhatt.files.wordpress.com/2011/06/wf.png?w=700" alt=""   /></a><p class="wp-caption-text">Waterfall Plot. Horizontal: Frequency | Vertical: Time | Brightness: Frequency Intensity.</p></div>
</div>
<div>That&#8217;s it for now.</div>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/207/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/207/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=207&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2011/06/10/seti-algorithms-project-update/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>

		<media:content url="http://adityabhatt.files.wordpress.com/2011/06/wf.png" medium="image">
			<media:title type="html">Waterfall</media:title>
		</media:content>
	</item>
		<item>
		<title>I&#8217;m in! Google Summer of Code: The SETI Institute</title>
		<link>http://aditya.bhatts.org/2011/04/29/im-in-google-summer-of-code-the-seti-institute/</link>
		<comments>http://aditya.bhatts.org/2011/04/29/im-in-google-summer-of-code-the-seti-institute/#comments</comments>
		<pubDate>Thu, 28 Apr 2011 20:18:43 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[gsoc]]></category>
		<category><![CDATA[SETI]]></category>
		<category><![CDATA[work]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=191</guid>
		<description><![CDATA[So I got this mail in my inbox from Google: Dear Aditya, Congratulations! Your proposal &#8220;Open sourcing of Exploratory Techniques for the SETI Search&#8221; as submitted to &#8220;SETI Institute&#8221; has [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=191&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>So I got this mail in my inbox from Google:</p>
<blockquote><p>Dear Aditya,</p>
<p>Congratulations! Your proposal &#8220;Open sourcing of Exploratory Techniques for the SETI Search&#8221; as submitted to &#8220;SETI Institute&#8221; has been accepted for Google Summer of Code 2011.</p></blockquote>
<p>I&#8217;m in! <img src='http://s0.wp.com/wp-includes/images/smilies/icon_smile.gif' alt=':-)' class='wp-smiley' /> </p>
<p>I&#8217;ll be interning with the SETI Institute (Search for Extra Terrestrial Intelligence). My project&#8217;s title is <em>Open Sourcing of Exploratory Techniques for the SETI Search</em>. The competition was tough, and so will be the work. I&#8217;m looking forward to an exciting summer with tons of code and signal analysis.</p>
<p>My mentor is Gerry Harp, who is an astrophysicist at the SETI Institute. Guided by him and Rob Ackermann, I&#8217;ll be implemeting and improving their signal search algorithms as reference implementations in C, and publishing them in the form of an official SETI library. These algorithms, together with the published SETI observation data, should enable citizen scientists and enthusiasts to analyse signals on their own, thus inching closer to Dr. Jill Tarter&#8217;s 2009 TED wish:</p>
<blockquote><p>I wish that you would empower Earthlings everywhere to become active participants in the ultimate search for cosmic company.</p></blockquote>
<p>The work will provide people with a way to analyze the data collected by the Allen Telescope Array (ATA).</p>
<p>I&#8217;ll regularly be blogging about my work.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/191/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/191/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=191&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2011/04/29/im-in-google-summer-of-code-the-seti-institute/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>
	</item>
		<item>
		<title>A Contract with Insanity &#8211; I</title>
		<link>http://aditya.bhatts.org/2011/04/24/a-contract-with-insanity-i/</link>
		<comments>http://aditya.bhatts.org/2011/04/24/a-contract-with-insanity-i/#comments</comments>
		<pubDate>Sun, 24 Apr 2011 13:59:23 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Stories]]></category>
		<category><![CDATA[boredom]]></category>
		<category><![CDATA[psych]]></category>
		<category><![CDATA[stories]]></category>
		<category><![CDATA[war]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=184</guid>
		<description><![CDATA[Richard woke up to the infuriating din of the alarm clock. It was an anniversary present from his wife, and he loathed it. His love for her and a desire [&#8230;]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=184&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>Richard woke up to the infuriating din of the alarm clock. It was an anniversary present from his wife, and he loathed it. His love for her and a desire to avoid her overly-emotional rants – that was all that kept him from chucking it out of the window.</p>
<p>He wasn’t looking forward to going to work. No, his job wasn’t boring. It also wasn’t some bullshit about workplace politics. It didn’t matter that they called him a dick. Or a dickhead, for that matter, since he messed around with people’s heads. It was exciting work; rather, it was the nature of the job he had signed up for, that gave him the creeps. He would return home, often after midnight, ashen-faced and hyperventilating.</p>
<p>Rick was a psychiatrist. There is a reason why Seattle has the largest density of shrinks when pitched against any other American city. It has something to do with the always-gloomy weather. You never get to see sunshine. Rick used to have one of the most profitable jobs in the city, but he wasn’t too happy about it. He had left it for his current job.</p>
<p>He took a shower and dressed up for the day at work. He descended the stairs for the hall, where his wife had already served breakfast. She had eaten her share. Normally, she waited for him to dig in before she started eating, but things weren’t going well. Cursing the depressing weather, he decided that it was time for another one of those talks with her. <em>Tonight</em>. He picked up the day’s copy of <em>The Seattle Times</em>¸ dated 23<sup>rd</sup> March, 1952. He filtered out the anti-communist propaganda and scanned the precious few articles that actually had something worth reading.</p>
<p>He got into his car, a new Cadillac convertible; closing the door with more force than needed. It was a bad choice to buy a convertible in Seattle, given that wet weather, but his wife would have none of it. He started the hour-long drive. He could hear the soft patter of the raindrops on the glass, and watched the wipers swing. It was comforting, oddly relaxing in a way, and it helped him think. He tried to recall how he had landed himself in this mess.</p>
<p><em>                </em>He remembered Rod. Rod had been a close friend, a long-time patient of his. Chronic Depression. Shrinks should never get attached to their patients, but when you have a patient with an interesting personality pouring out the smallest details of his life for you (for purely diagnostic purposes), you can’t help but want to talk. It was that fateful Sunday, during one of their numerous afternoon chats, that Rod that had talked to him about a possible new job.</p>
<p>He’d said he had contacts in the government. That Rick could earn a lot more. Six figures! And the research! It was a known fact that if you did your research working under the government’s protection, you didn’t have to be at the receiving end of medical ethics lawsuits. Later, Rod admitted that he was a recruiter for the ‘agency’. They never said the name out loud. But it always meant the CIA. He had hesitated at first; later, the prospect of unlimited research funds and fat pay-checks seemed too appealing and he had to take the job.</p>
<p>He had always dreamt of publishing a ground-breaking research paper, something that would alter the scene of psychoanalytic research forever. Now, he had the chance. He was excited about it. Rick was a Harvard grad, and later had joined as a postdoc researcher there. But there was only so much you could do at Harvard. His research focused on mind-altering hallucinogens. Ever since the senate had passed that cursed new Act, the inflow of consenting test subjects had slowed down to a trickle. It wasn’t that the people were scared of tests; the act had bumped up the sheer amount of paperwork required to roughly thrice. It was suffocating for any academic and subject alike.  But working for the CIA eliminated almost all the paperwork, and he could concentrate on just the research.</p>
<p>Rick was near the place. It was a dark and dirty street, the kind where you’d expect pot-smoking scum to linger. He stopped by a shabby-looking building, with wet plaster peeling off its walls.  He parked his car alongside several others. The whole scene had a strange contrast to it; bright, expensive cars in a dirty street. As always, he paused for a moment before entering the building that was The Facility, contemplating the horrors inside.</p>
<p>He walked to the door in the brick wall. He pressed the doorbell, and after a moment, was greeted by a burly guard in uniform. The interior of the office looked the complete opposite of whatever the building looked from outside – clean, white, and smelling like a clinic. He was led to one of the examination chambers. Here, he was made to lie on a stretcher while a nurse checked his heart rate, blood pressure, and body temperature. A blood sample was also taken. This was all routine procedure, for everyone who entered the Facility, to be conducted every time. A quick way to know if the person had been drugged, was panicking, or was under pressure.</p>
<p>Once the tests were done, Rick walked to his office. He was to be assigned a new case today. He had no idea what it would be, but he knew for sure that it was going to be ugly. He unlocked the door (What was the point in having a lock? The bosses had the keys to all doors!). He cast aside his coat and hat on a chair and settled himself behind his desk.</p>
<p>The Facility ran low on ethics. They had Recruiters; people like Rod. The Recruiters would either befriend or kidnap people – civilians, doctors, soldiers, housewives, children, prisoners, rapists, homosexuals, and transsexuals – people from all walks of life, the rich and the poor. The doctors and shrinks were given posts like Rick’s, and the rest were either blackmailed into becoming Recruiters, or were used as test subjects. The doctors would give doses of barbiturates, LSD, and heroin to the subjects, over defined periods of time, and gauge their responses and behavior under the influence. Although no one ever said it out loud, since it seemed a bit preposterous, one of the driving factors behind the psychiatric research was the possibility of creating what was called a ‘Manchurian Candidate’.  This was a person who would obey any order, carry out the task, and then forget all about it once the job was done. It was perfect espionage. The usefulness of such a pawn was evident in scenarios involving assassinations and spying. A substantial amount of time and research was invested in mind-control techniques: truth serums, hypnosis, and the like. Brainwashing was studied as a rigorous science. Then there was the radiology department. A particularly hideous experiment had involved the doctors taking a blood sample in a syringe from a pregnant woman suffering from cancer. They had dissolved a radioactive mixture of caesium and a particularly lethal plutonium isotope in the blood, and injected it back into the woman. The aim was to study the effects of radioactive poisoning on childbirth in the case of a potential nuclear war. The woman was told that she was being given vitamins, and that this was all research for a new medical therapy to have healthier babies. The woman’s health deteriorated and she died shortly after giving birth to a ‘jellyfish baby’. It had working organs, a brain, a beating heart, everything; but not a single bone in its body. The pitiful, ugly mass of flesh continued swelling and contracting in its desperate attempts to breathe, and died twelve hours after birth. The woman’s death was attributed to her cancer.</p>
<p>Rick wished he could quit this work and go back to Harvard. But something, deep down inside, told him that that was a lost cause. He knew too much. Once you joined, you couldn’t leave. He could either keep working, or get shot. Or worse, get used as a test subject. The people who worked at the facility couldn’t tell anyone about their work – everyone had a story ready, just in case. Wives were lied to. So much for that bullshit about America being the land of liberty, milk, and honey. All of this was somehow supposed to be justified: <em>We’re at war!</em></p>
<p>But was there really a war? No! It was sheer paranoia, an imaginary war. A war of egos, a war of tension, of spirit, of ideology. He was disgusted by the artificiality of it all – all this research, all the military spending, the anti-communist propaganda &#8211; all of this looked like an excuse to go to war. Or was it the reverse? An imaginary war, a national mania, all induced to benefit all those arms and pharmacy corporations that had major stakes in the government? Suddenly, all those conspiracy theories the hippies used to recite made sense.</p>
<p>Rick stopped his chain of thoughts when someone knocked.</p>
<p>“Come in.”</p>
<p>His boss walked in. He was wearing a white lab coat. Heinrich Krueger was a man in his forties, donning a lab coat and a wide smile that didn’t reach his eyes. He was a German. An ex-Nazi, he had conducted hundreds of experiments on inmates in Auschwitz, the infamous death camp. The CIA had screened the archives of Nazi doctors and had covertly recruited the ones it deemed experienced to work for US interests. It wasn’t like the doctors had any choice in the matter; this work was fun for them, and if they had refused, they would certainly have been sentenced to death in the Nuremburg war crimes’ trials.</p>
<p>Krueger got straight to the point.</p>
<p>“Your new case. A man aged fifty. Here’s his file. We have some questions we want you to ask him. They’re in the file. Write down your observations.”</p>
<p>He handed Rick the file, and abruptly got up. He walked to the door and paused ever so slightly, as if he wanted to say something, but then he quietly exited and closed the door behind him.</p>
<p>Rick didn&#8217;t know it then, but that day, his world, and everything he had worked for till that point in his life, was going to be torn apart.</p>
<p><em>To be concluded.</em></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/184/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/184/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=184&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2011/04/24/a-contract-with-insanity-i/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>
	</item>
		<item>
		<title>Go go go!</title>
		<link>http://aditya.bhatts.org/2011/02/17/gogogo/</link>
		<comments>http://aditya.bhatts.org/2011/02/17/gogogo/#comments</comments>
		<pubDate>Thu, 17 Feb 2011 17:05:56 +0000</pubDate>
		<dc:creator>Aditya Bhatt</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[kde]]></category>
		<category><![CDATA[kde-planet]]></category>
		<category><![CDATA[sprint]]></category>
		<category><![CDATA[trip]]></category>

		<guid isPermaLink="false">http://adityabhatt.wordpress.com/?p=177</guid>
		<description><![CDATA[The Konf is the firstest *big* KDE event in India, with the awesomest people, awesomest talks. Soak yourself in the bestest geekdom! 7 days left to register. Go!<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=177&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></description>
				<content:encoded><![CDATA[<p>The Konf is the firstest *big* KDE event in India, with the awesomest people, awesomest talks. Soak yourself in the bestest geekdom!</p>
<p>7 days left to register. Go!</p>
<p><a title="Gooooo" href="http://kde.in/conf/" target="_blank"><img class="alignnone" src="http://kde.in/files/media/badge.png" alt="" width="322" height="108" /></a></p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/adityabhatt.wordpress.com/177/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/adityabhatt.wordpress.com/177/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=aditya.bhatts.org&#038;blog=10529951&#038;post=177&#038;subd=adityabhatt&#038;ref=&#038;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://aditya.bhatts.org/2011/02/17/gogogo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
	
		<media:content url="http://0.gravatar.com/avatar/61118f801bb9fa9e5643d0f7cc0e8892?s=96&#38;d=http%3A%2F%2Fs0.wp.com%2Fi%2Fmu.gif&#38;r=G" medium="image">
			<media:title type="html">aditya</media:title>
		</media:content>

		<media:content url="http://kde.in/files/media/badge.png" medium="image" />
	</item>
	</channel>
</rss>
