<?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>We Create Games</title>
	<atom:link href="http://wecreategames.com/blog/?feed=rss2" rel="self" type="application/rss+xml" />
	<link>http://wecreategames.com/blog</link>
	<description>Serious games and projects for students and teachers</description>
	<lastBuildDate>Tue, 14 Jun 2011 02:31:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>StarPad JavaScript Star viewer</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=375#comments</comments>
		<pubDate>Tue, 14 Jun 2011 02:13:25 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Games]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=375</guid>
		<description><![CDATA[Here&#8217;s the Github Source for a JavaScript viewer that uses the Three.JS library to render stars using only JavaScript. I added a number of CameraControl changes that listens for JavaScript mousemove events and rotates or moves the camera accordingly. this.rotateAroundPoint = function (angDist, axis) { angDist *= (Math.PI / 180); var cCamera = this.camera.position; var [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />Here&#8217;s the <a href="http://wecreategames.com/blog/?p=375">Github Source for a JavaScript viewer</a> that uses the <a href="https://github.com/mrdoob/three.js/">Three.JS library</a> to render stars using only JavaScript.  I added a number of CameraControl changes that listens for JavaScript mousemove events and rotates or moves the camera accordingly.<br />
<code>	this.rotateAroundPoint = function (angDist, axis) {<br />
		angDist *= (Math.PI / 180);<br />
		var cCamera = this.camera.position;<br />
		var cTarget;<br />
		if (this.targetObject)	{<br />
			cTarget = this.camera.target.position;<br />
		} else {<br />
			cTarget = {x:0, y:0, z:0};<br />
		}<br />
		var offsetX = cCamera.x - cTarget.x;<br />
		var offsetY = cCamera.y - cTarget.y;<br />
		var offsetZ = cCamera.z - cTarget.z;</p>
<p> 		switch(axis) {<br />
		case 'x':<br />
			rx = offsetX;<br />
			ry = (offsetY * Math.cos(angDist)) - (offsetZ *Math.sin(angDist));<br />
			rz = (offsetY * Math.sin(angDist)) + (offsetZ *Math.cos(angDist));<br />
		  	break;<br />
		case 'y':<br />
			rx = (offsetX * Math.cos(angDist)) - (offsetZ *Math.sin(angDist));<br />
			ry = offsetY;<br />
			rz = (offsetX * Math.sin(angDist)) + (offsetZ *Math.cos(angDist));<br />
		  	break;<br />
		case 'z':<br />
			rx = (offsetX * Math.cos(angDist)) - (offsetY *Math.sin(angDist));<br />
			ry = (offsetX * Math.sin(angDist)) + (offsetY *Math.cos(angDist));<br />
			rz = offsetZ;<br />
		  	break;<br />
		}<br />
		return new THREE.Vector3( cTarget.x+rx, cTarget.y+ry, cTarget.z+rz );<br />
	}</code></p>
<p>In addition, I wrote a special Ray tracing algorithm that sends a ray from the mouse touch point through 3D space, and checks every particle or object in the way, and returns an array of those that are intersected by the line.  A variant of this was added to the Three.JS library (my first pull request, yay!).  I rewrote the algorithm from <a href="http://www.softsurfer.com/Archive/algorithm_0102/">this math course</a>:</p>
<p><code>			target_point = object.geometry.vertices<em></em>.position;<br />
			starter_vector = target_point.clone().subSelf(origin_point);</p>
<p>			var c1 = starter_vector.dot ( direction_vector );<br />
			var c2 = direction_vector.dot ( direction_vector );<br />
			var b = c1 / c2;<br />
			var intersect_point = origin_point.clone().addSelf(direction_vector.multiplyScalar(b));</p>
<p>			var dist = target_point.distanceTo(intersect_point);</code></p>
<p>As you touch a star, the touch finds the closest star (within a certain touch radius), and then highlights that by redrawing a canvas shell around it.  This then also searches through the star json database and shows the 4 closest stars (highlighted in their star color and info) at the bottom left of the screen.</p>
<p><code>			//=======================================<br />
			function generateSunTexture(color, size, showShell) {<br />
				var size = (size) ? parseInt(size*24) : 24;<br />
				var showShell = (showShell) ? showShell : false;<br />
				var canvas = document.createElement( 'canvas' );<br />
				canvas.width = size;<br />
				canvas.height = size;<br />
				var col = new THREE.Color(color);</p>
<p>				var context = canvas.getContext( '2d' );<br />
				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );<br />
				gradient.addColorStop( 0, col.rgbaString);<br />
				gradient.addColorStop( 0.1, col.rgbaString);<br />
				gradient.addColorStop( 0.6, 'rgba(125, 20, 0, 0.2)' );<br />
				if (showShell) {<br />
					gradient.addColorStop( 0.88, 'rgba(0, 20, 0, 1)' );<br />
					gradient.addColorStop( 0.9, 'rgba(255, 255, 255, 0.2)' );<br />
				}<br />
				gradient.addColorStop( .92, 'rgba(0,0,0,0)' );<br />
				context.fillStyle = gradient;<br />
				context.fillRect( 0, 0, canvas.width, canvas.height );<br />
				return canvas;</p>
<p>			}</code></p>
<p>Sorting is done by overloading the standard sort function (subtracting the distance field of object a from b to do a <a href="http://stackoverflow.com/questions/234683/javascript-array-sort-implementation">mergesort or selectionsort</a>):<br />
<code>	var closest_sorted = starscopy.sort( function ( a, b ) { return objectClicked.position.distanceTo (a.position)-objectClicked.position.distanceTo (b.position); } );</code></p>
<p>Much of the work was done to get the Star library, catch the touch events, and clean things up so that it would render all in Canvas (so that it looks good on iPhone, Android browser, as well as other common browsers).  You can <a href="https://github.com/mrdoob/three.js/">view it in action here</a>.</p>
<p><a href="https://github.com/mrdoob/three.js/"><img src="wp-content/themes/gumball-special/post-images/StarPad_iphoneapp.png" alt="StarPad" /></a><br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=237'>Orrery Game: ver 2</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=321'>HTML5 Map Tile JavaScript Game Engine, Part 1</a></li>
<li><a href='http://wecreategames.com/blog/?p=308'>JavaScript HTML5 Image Caching</a></li>
<li><a href='http://wecreategames.com/blog/?p=367'>Stellar Database</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?p=237'>Orrery Game: ver 2</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=375</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Stellar Database</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=367#comments</comments>
		<pubDate>Mon, 13 Jun 2011 18:42:21 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Maps]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=367</guid>
		<description><![CDATA[I love space and astronomy. I&#8217;ve been using these as ways to teach myself matrix math and some of the advanced astrophysics that i just didn&#8217;t grasp the first time I&#8217;d taken courses on them in college. Maybe I went to a hard school, or maybe I&#8217;m just a late bloomer, but I&#8217;m finding that [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />I love space and astronomy.  I&#8217;ve been using these as ways to teach myself matrix math and some of the advanced astrophysics that i just didn&#8217;t grasp the first time I&#8217;d taken courses on them in college.  Maybe I went to a hard school, or maybe I&#8217;m just a late bloomer, but I&#8217;m finding that it&#8217;s all starting to make sense.  The biggest problem that I&#8217;m having is finding realistic and useful datasets to build games or apps with&#8230; so I&#8217;m sharing the ones that I&#8217;ve come up with.</p>
<p>I recently uploaded a Stellar Database that I&#8217;m using for many of my HTML5 animations to <a href="https://github.com/jaycrossler/StarDatabase">Gihub as Open Source</a>.</p>
<p>This Stellar Database is made based on inputs from the <a href="http://www.stellar-database.com/roll-your-own.html">Internet Stellar Database (ISDB)</a>.  I took the isdb.mdb file and moved all of the data into an Excel XLS file, then rewrote many of the SQL queries as Excel functions.</p>
<p>NOTE: Writing complex data lookups/searching/linking using Excel is very inefficient, and results in multiple headaches.  But, I was on a long flight, and was bored, and thought it&#8217;d be fun to see how far Excel functions have advanced since I used them 15 years ago.</p>
<p>NOTE: Excel functions have not advanced in 15 years.</p>
<p>Anywho, there are three JSON files that have different sets of data:<br />
<a href="https://github.com/jaycrossler/StarDatabase/raw/master/stars_all.json.js">stars_all.json.js</a> has 2800 stars in it, arranged in distance order and containing multiple fields like Galactic XYZ Position, Mass, Diameter, Color.<br />
<a href="https://github.com/jaycrossler/StarDatabase/raw/master/stars_1k.json.js">stars_1k.json.js</a> has 1000 stars, but less data columns.<br />
<a href="https://github.com/jaycrossler/StarDatabase/raw/master/stars_named.json.js">stars_named.json.js</a> has 778 stars in it based on stars that seem to have actual names.</p>
<p>The Excel has two columns in the first sheet that auto-build the JSON strings, this should make it easy to export in different orders if desired.</p>
<p>It&#8217;s very difficult to adequately guess the star colors, as these aren&#8217;t recorded in web RGB formats, and weren&#8217;t in a useful dataset that I could find.  I used formulae based on: http://outreach.atnf.csiro.au/education/senior/astrophysics/photometry_colour.html and other sources to try to guess the closest colors.</p>
<p><img src="wp-content/themes/gumball-special/post-images/stellar_code.png" alt="Stellar JSON" /></p>
<p>Galactic Alignment is calculated as X,Y,Z coordinates from doing a matrix rotation around the Local Stellar coordinates (which are calcluated from taking the Right Ascension and Declination based on solar coordinates and multiplying by distance).  That basically means that these might be off by a large amount &#8211; so please don&#8217;t plan any NASA trips from these numbers.</p>
<p><img src="wp-content/themes/gumball-special/post-images/starpad_iphone.png" alt="StarPad" /></p>
<p>If you would like to see these rendered in HTML5 (optimized for mobile devices), you can see them at: <a href="http://wecreategames.com/apps/StarPad/">http://wecreategames.com/apps/StarPad/</a> &#8211; I think this looks especially cool on an iPhone, and was made using Mr. Doob&#8217;s <a href="https://github.com/jaycrossler/three.js">awesome Three.JS</a> library.<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=237'>Orrery Game: ver 2</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=321'>HTML5 Map Tile JavaScript Game Engine, Part 1</a></li>
<li><a href='http://wecreategames.com/blog/?p=219'>HTML5 Databases + Canvas</a></li>
<li><a href='http://wecreategames.com/blog/?p=210'>3d iPhone web apps</a></li>
<li><a href='http://wecreategames.com/blog/?p=203'>Updated FlickrProxy</a></li>
<li><a href='http://wecreategames.com/blog/?p=188'>iPhone Geotags</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=367</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Top 10 Baby products for nerd parents</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=339#comments</comments>
		<pubDate>Mon, 06 Dec 2010 04:47:48 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Life]]></category>
		<category><![CDATA[Media]]></category>
		<category><![CDATA[amazon]]></category>
		<category><![CDATA[baby]]></category>
		<category><![CDATA[camera]]></category>
		<category><![CDATA[gifts]]></category>
		<category><![CDATA[loot]]></category>
		<category><![CDATA[toys]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=339</guid>
		<description><![CDATA[We recently had a baby, and since then I’ve had a number of people ask for my recommendations on what loot I like.  With us nerds, we seem to value different things than normal humans – with a preference for efficiency, convenience, and creativity.  I’ve put together a list of my top 10(ish) recommendations for [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />We recently <a href="http://www.flickr.com/photos/jaycrossler/collections/72157625410227879/">had a baby</a>, and since then I’ve had a number of people ask for my recommendations on what loot I like.  With us nerds, we seem to value different things than normal humans – with a preference for efficiency, convenience, and creativity.  I’ve put together a list of my top 10(ish) recommendations for nerd loot to get for new or expecting parents.  We’ve used all of these – and when we thought about the best stuff that it would be hard to do without, this is the list.  In addition to some awesome non-tech solutions (<a href="http://www.amazon.com/gp/product/B000069EXP?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000069EXP">like Sleep Sacks</a><img src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B000069EXP" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />), these are our favorite techie ones, counted down towards our favorites.</p>
<p>Just like every male nerd thinks they need a man-cave (preferably with a lab or in an <a href="http://searchdatacenter.techtarget.com/feature/Weird-data-center-locations-Bahnhofs-underground-bunker">underground bunker</a>), they quickly realize that their baby actually does best in a well-equipped nerdsury.  I’ve found that when you are on the 2-am bottle-duty, you frequently wonder what time it is and how long feeding takes (usually with the goal of whining to your spouse or bragging to your coworkers about how tired you are).</p>
<p>A good clock with large digital numbers is a good investment – something to put in a place where you can see it from your feeding rocking chair.  You’ll likely be so tired that you need some minor stimulation to stay awake, but anything as complex as conjugating words will be beyond your ability.  Staring at numbers while feeding a baby seems like the extent of my mental abilities sometimes on 2 hours of sleep.</p>
<p><a href="http://www.amazon.com/gp/product/B000PDCXPC?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000PDCXPC">#10 – Digital Alarm clock<br />
<img style="border: 0px initial initial;" src="/blog/wp-content/uploads/2010/12/41sdNCm3UZL._SL160_1.jpg" border="0" alt="" width="128" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B000PDCXPC" border="0" alt="" width="1" height="1" /></p>
<p>Once you get your rhythm down, you’ll find that routine is very good for your babe’s piece of mind.  Doing the exact same process each day at the exact same times seems to help greatly with good sleep.  I’ve found that a little music helps set the mood, but also entertain me.  I do very poorly when doing repetitious actions, so I need some mental variation.  Luckily, we had an extra iPod Touch, so we set it up to play Pandora to stream baby music each night.  We have three stations – “Lullabies”, “Lullabies and Soundscapes”, and “Sesame Street”… and keep the iTouch right next to the feeding chair so you can reach out and control it with your off hand.  You can also use the awesome “Total Baby” app to track weight, feeding, and dirty diapers.</p>
<p><a href="http://www.amazon.com/gp/redirect.html?ie=UTF8&#038;location=http%3A%2F%2Fwww.amazon.com%2Fgp%2Foffer-listing%2FB002M3SOBU%3Fie%3DUTF8%26ref_%3Dsr_1_cc_3_olp%26qid%3D1291577600%26sr%3D1-3-catcorr%26condition%3Dused&#038;tag=wecr-20&#038;linkCode=ur2&#038;camp=1789&#038;creative=390957">#9 – iPod Touch streaming Pandora “nursery rhymes”<br />
<img src="/blog/wp-content/uploads/2010/12/41WgyV+yOLL._SL110_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="https://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=ur2&#038;o=1" border="0" alt="" width="1" height="1" /></p>
<p>Speaking of diapers, we’ve found that a cold wet wipe in the middle of the night is the single best “baby alarm” trigger.  Blood-curdling screams result.  Our friend Paul got us a wipe warmer, which heats the moistened cleaning towels to body heat.  The baby doesn’t even notice most of the time.  Awesome!</p>
<p><a href="http://www.amazon.com/gp/product/B00008ODBG?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B00008ODBG">#8 – Wipes Warmer<br />
<img src="/blog/wp-content/uploads/2010/12/3196NYKV8FL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B00008ODBG" border="0" alt="" width="1" height="1" /></p>
<p>Temperature is quite important – babies aren’t quite as fragile as most people think, but they are very sensitive to heat and cold.  You especially want to avoid boiling them.  This floating thermometer works very well – it beeps when the water is too hot or cold.</p>
<p><a href="http://www.amazon.com/gp/product/B000HIP38Y?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000HIP38Y">#7 – Bath Thermometer<br />
<img src="/blog/wp-content/uploads/2010/12/41XYgoOUc%2BL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B000HIP38Y" border="0" alt="" width="1" height="1" /></p>
<p>Some people breastfeed, some use only formula.  Likely, you’ll do both.  And likely, you’ll use reusable bottles to do both.  Washing and cleaning these bottles is very repetitive and time consuming, but these three tools make them much easier.  Much easier!</p>
<p>#6 – <a href="http://www.amazon.com/gp/product/B000K53UEI?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000K53UEI">Bottle Drying Rack</a> and <a href="http://www.amazon.com/gp/product/B001D475FU?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B001D475FU">microwave bin</a> and <a href="http://www.amazon.com/gp/product/B000RI8Y30?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000RI8Y30">dishwasher basket</a> and <a href="http://www.amazon.com/gp/product/B0035LLG2W?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B0035LLG2W">bottle warmer</a><br />
<a href="http://www.amazon.com/gp/product/B000K53UEI?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000K53UEI"><img src="/blog/wp-content/uploads/2010/12/51sqJ1k5rUL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B000K53UEI" border="0" alt="" width="1" height="1" /><a href="http://www.amazon.com/gp/product/B001D475FU?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B001D475FU"><img src="/blog/wp-content/uploads/2010/12/414b7oAbIvL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B001D475FU" border="0" alt="" width="1" height="1" /><a href="http://www.amazon.com/gp/product/B000RI8Y30?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000RI8Y30"><img src="/blog/wp-content/uploads/2010/12/51S3ruKsi8L._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B000RI8Y30" border="0" alt="" width="1" height="1" /><a href="http://www.amazon.com/gp/product/B0035LLG2W?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B0035LLG2W"><img border="0" src="/blog/wp-content/uploads/2010/12/31i1eJ7cSML._SL160_.jpg"></a><img src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B0035LLG2W" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></p>
<p>To switch gears a bit, we’ve found that mental stimulation seems to really cheer up the baby and keep them occupied.  We’ve found this Baby Gym to be perfect for the half hour before bath time.  It’s colorful, has a lot of moving pieces, and plays music.  An added bonus is that it seems to entertain the dogs as well.</p>
<p><a href="http://www.amazon.com/gp/product/B000FFL58Q?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B000FFL58Q">#5 – Baby Gym<br />
<img src="/blog/wp-content/uploads/2010/12/51TUVSWDZZL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B000FFL58Q" border="0" alt="" width="1" height="1" /></p>
<p>When we have the baby downstairs during the day, it’s great to put the baby in this swing.  It both rocks, and has a mobile that twirls and our son loves to stare at.  As an added bonus, you can tilt the seat up into a sitting position, or down to a sleeping position.  Great for getting a few hours free while still having him close enough to keep an eye on.</p>
<p><a href="http://www.amazon.com/gp/product/B0018Z6910?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B0018Z6910">#4 – Baby Swing<br />
<img src="/blog/wp-content/uploads/2010/12/31L2wcyX9PL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B0018Z6910" border="0" alt="" width="1" height="1" /></p>
<p>The other best tool we’ve found to keep an eye on the baby (especially at night) is to use a video monitor with an IR light.  This one works perfectly, and has extra IR lights so that you can see clearly at night – it also has great audio pickup.  With an extra cable, it easily plugs into a television set for prime HD baby-watching goodness.</p>
<p><a href="http://www.amazon.com/gp/product/B0007OD8SU?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B0007OD8SU">#3 – Baby Video Monitor </a>and <a href="http://www.amazon.com/gp/product/B001UG823K?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B001UG823K">wire</a><br />
<a href="http://www.amazon.com/gp/product/B0007OD8SU?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B0007OD8SU"><img src="/blog/wp-content/uploads/2010/12/41uOTu467cL._SL160_.jpg" border="0" alt="" /><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B0007OD8SU" border="0" alt="" width="1" height="1" /></a><a href="http://www.amazon.com/gp/product/B001UG823K?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B001UG823K"><img src="/blog/wp-content/uploads/2010/12/415OuutyBvL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B001UG823K" border="0" alt="" width="1" height="1" /></p>
<p>Speaking of taking video and pictures, I’ve noticed that our picture taking has increased about 100-fold.  The primary set back to taking more great pictures is downloading them off of memory sticks and posting them online.  This EyeFi card is excellent at automatically offloading the pictures from your digital camera and uploading them to a laptop or website like Flickr.  I use the Pro card, as it supports about 500 pictures in full RAW resolution (needed for the highest resolution images and work in great photo programs like Aperture).</p>
<p><a href="http://www.amazon.com/gp/product/B002UT42UI?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B002UT42UI">#2 – EyeFi Pro<br />
<img src="/blog/wp-content/uploads/2010/12/51WhLUfkYfL._SL160_.jpg" border="0" alt="" /></a><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B002UT42UI" border="0" alt="" width="1" height="1" /></p>
<p>If you’re up for some serious baby picture-capturing, I think the Nokia D90 is the best combination of capabilities for the cost, and has resulted in some excellent pictures – and reignited my love of photography.  Rather than using the lens that usually comes with the camera, I’d recommend getting the bare body and this fixed lens (which works better in low light indoor photo situations). An added bonus is that it integrates very well with the EyeFi Pro card found under #2 (make sure you get the Pro as you want to be able to use RAW images that the D90 supports).</p>
<p><a href="http://www.amazon.com/gp/product/B001ET5U92?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B001ET5U92">#1 – Nikon D90 Camera </a>and <a href="http://www.amazon.com/gp/product/B00005LEN4?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B00005LEN4"> fixed lens</a><br />
<a href="http://www.amazon.com/gp/product/B001ET5U92?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B001ET5U92"><img src="/blog/wp-content/uploads/2010/12/518xkmYUo2L._SL160_.jpg" border="0" alt="" /><img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B001ET5U92" border="0" alt="" width="1" height="1" /></a><a href="http://www.amazon.com/gp/product/B00005LEN4?ie=UTF8&#038;tag=wecr-20&#038;linkCode=as2&#038;camp=1789&#038;creative=390957&#038;creativeASIN=B00005LEN4"><img src="/blog/wp-content/uploads/2010/12/51CnjgPJ%2BjL._SL160_.jpg" border="0" alt="" /><br />
<img style="border: none !important; margin: 0px !important;" src="http://www.assoc-amazon.com/e/ir?t=wecr-20&#038;l=as2&#038;o=1&#038;a=B00005LEN4" border="0" alt="" width="1" height="1" /></a></p>
<p>In conclusion, we’ve been very fortunate to have great friends and family that have supported us during our baby-rearing process.  We are incredibly loved, and have a wonderful son that we really enjoy.  We hope that some of these finds will also work great for you or the expecting nerd in your life!<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=288'>Speed Listening</a></li>
<li><a href='http://wecreategames.com/blog/?p=68'>Wine Making!</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=288'>Speed Listening</a></li>
<li><a href='http://wecreategames.com/blog/?p=308'>JavaScript HTML5 Image Caching</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=339</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>HTML5 Map Tile JavaScript Game Engine, Part 1</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=321#comments</comments>
		<pubDate>Mon, 29 Nov 2010 01:56:43 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Games]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Maps]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[canvas]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[html5]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[tiles]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=321</guid>
		<description><![CDATA[Last month, I saw one of the most inspiring JavaScript projects on the web!  The Isogenic Engine is a game library written in HTML5 that can be used to build games on top of &#8211; this means that advanced Flash-like isometric games that run on the iPhone/iPad/Android can all run efficiently at fast speeds and [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />Last month, I saw one of the most inspiring JavaScript projects on the web!  The <a href="http://www.isogenicengine.com/">Isogenic Engine is a game library</a> written in HTML5 that can be used to build games on top of &#8211; this means that advanced Flash-like isometric games that run on the iPhone/iPad/Android can all run efficiently at fast speeds and work on the same on any browser.  Very cool &#8211; and this encouraged me to dive in and really understand the technologies and concepts around Game Engine libraries for HTML5.</p>
<h2 id="321_what-inspired-me_1" >What Inspired Me</h2>
<p>Check out the video that got me interested in writing a game library:<br />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="385" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/LJpN9yd94qk?fs=1&amp;hl=en_US" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="480" height="385" src="http://www.youtube.com/v/LJpN9yd94qk?fs=1&amp;hl=en_US" allowscriptaccess="always" allowfullscreen="true"></embed></object></p>
<p>Isogenic allows millions of map tiles to render very quickly by drawing onto an HTML5 Canvas tag, and allows both 2d top-down and side-scrolling games.  The great thing is that it renders incredibly fast &#8211; 60 frames per second even with a large amount of data.  You can put images on top and have them animated with incredibly complex interactions.  Wonderful stuff, and you can still <a href="http://www.isogenicengine.com/beta-list-signup/">sign up for the beta</a>.</p>
<p>And here&#8217;s an image of it:</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/isogenic5.jpg"><img class="alignnone size-full wp-image-324" title="Isogenic HTML5 Game Engine" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/isogenic5.jpg" alt="JavaScript Magic" width="640" height="400" /></a></p>
<p>As I started working on this, the Isogenic Engine code wasn&#8217;t available, so I looked around for similar tools.  <a href="http://www.johnegraham2.com/">John Graham</a> has a <a href="http://www.johnegraham2.com/web-technology/javascript-2d-tile-engine-with-html5-canvas-part-4/">2D Tile Engine that uses HTML5 Canvas</a> that he&#8217;s using to teach some advanced JavaScript concepts.  Very cool, thought it&#8217;s nowhere near as advanced as the Isogenic Engine (but great to learn with if you go line by line!).  Here&#8217;s a link to <a href="http://www.johnegraham2.com/files/tiles4/canvas.html">his demo</a>, and <a href="http://www.johnegraham2.com/wp-content/uploads/2010/09/tile_engine_pt_41.zip">source code</a>.  All the code that I will use in the rest of this article series is based on this TileEngine project &#8211; John was nice enough to give me permission to build upon his code and post it online.  I&#8217;m using this as a hold-over until I can work on the Isogenic engine, and have already learned some useful concepts and <a href="http://www.isogenicengine.com/2010/11/08/update-top-10-javascript-performance-tips-android-iphone-engine-testing/">JavaScript efficiencies</a>.</p>
<h2 id="321_the-tileengine-paint_1" >The TileEngine Painter</h2>
<p>I&#8217;ve posted all the source code (<a href="http://wecreategames.com/games/tilemap/v1/MapTiles.v1.zip">zip</a> and <a href="https://github.com/jaycrossler/HTML5MapTiles/commit/4fff05de3bce451be23d12099316dbd1c931bfbc">GitHub</a>) and <a href="http://wecreategames.com/games/tilemap/v1/">a working example for this here</a>.  It works both on iPad, iPhone, and mostly well on Android (rendering works well, but some of the events are a bit off).</p>
<p>In order to demonstrate the map tiles, we&#8217;re <a href="http://www.flyingyogi.com/fun/spritelib.html">using a free/open-source spritesheet</a>.  This makes the images look quite &#8220;8-bit&#8221;, but if you make your own map tiles or use physical map tiles like those from Google Maps), you can get much better looking graphics. There are many techniques <a href="http://www.webmonkey.com/2010/09/how-to-speed-up-your-site-with-yslow-and-page-speed/">to speed up web sites and apps</a>, though I won&#8217;t go into them here &#8211; take my HTML5 class if you&#8217;re really interested &#8211; and the one we&#8217;ll focus on is sprites.  Loading many images using the web is very inefficient, as there&#8217;s an entire HTTP round-trip request for each.  It&#8217;s much more efficient to group many small images into one larger image (called a spritesheet in the video game world).  Here&#8217;s the spritesheet we use for the base image (it&#8217;s a transparent PNG, so can render on top of other images):</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/tiles.png"><img class="alignnone size-medium wp-image-325" title="tiles.png" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/tiles-300x163.png" alt="" width="300" height="163" /></a></p>
<p>The tiles.png spritesheet is broken up into many smaller sprites (each 32&#215;32 pixels), so that if we want to show a piece of green grass in the top left corner (map position 0), we can just draw tile #71, and the JavaScript grabs the correct sub-piece of the image and draws it in the right place.</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/tilesArray.png"><img class="alignnone size-full wp-image-329" title="tilesArray in game.js" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/tilesArray.png" alt="" width="540" height="274" /></a></p>
<p>Here&#8217;s what a starting map looks like based on a pre-formatted array in the game.js code:</p>
<p><a href="http://wecreategames.com/games/tilemap/v1/"><img class="alignnone size-medium wp-image-326" title="basemap" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/basemap-249x300.png" alt="" width="249" height="300" /></a></p>
<p>I&#8217;ve modified John Graham&#8217;s code so that we can have multiple layers of images that all can be drawn on top of each other for more complex world building.</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/mapwithpaint.png"><img class="alignnone size-medium wp-image-327" title="mapwithpaint" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/mapwithpaint-249x300.png" alt="" width="249" height="300" /></a> <a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/mapdrawn.png"><img class="alignnone size-medium wp-image-328" title="mapdrawn" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/mapdrawn-248x300.png" alt="" width="248" height="300" /></a></p>
<p>To draw your own maps, click (or touch on an iPad) the paint layer box in the bottom left, and the drawing palette will expand).  Select the layer you want to draw on, then touch the tile you want then paint it onto the map.  You can have many different layers &#8211; though I&#8217;ve found that on iPads, you hit the memory limit for a page after about 5 layers.  The great part is that it&#8217;s all written in JSON, so you can sync your changes up to a server and with other players (though that&#8217;s not built yet).</p>
<p>Some of the neat changes I added to this are:</p>
<ul>
<li> A &#8220;dirty bit&#8221; = a boolean that records if the tiles have been edited or not, this way only the canvas needs to be redrawn if there are any changes, not on each game loop</li>
<li>Multiple layers, so you can have many layers and spritesheet images associated with each</li>
<li>A &#8220;painter.js&#8221; object that lets you paint and change the data model of objects that are associated with each tile</li>
<li>Some iPad and iPhone specific CSS and META tags that allow for mousepress and mouse drag events on the iOS devices</li>
</ul>
<p>Here&#8217;s the Game Loop that one would use to build a game into &#8211; notice that it&#8217;s constantly running at 2fps (it can be much faster), and redraws the</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/gameLoops.png"><img class="alignnone size-full wp-image-336" title="gameLoops" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/gameLoops.png" alt="" width="721" height="353" /></a></p>
<p>The current version doesn&#8217;t yet save the maps you draw back to JSON, but that&#8217;s working in <a href="http://wecreategames.com/games/tilemap/v2/">version 2</a> (which I&#8217;ll post about soon)!<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=322'>HTML5 Map Tile JavaScript Game Engine</a></li>
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=339'>Top 10 Baby products for nerd parents</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=219'>HTML5 Databases + Canvas</a></li>
<li><a href='http://wecreategames.com/blog/?p=210'>3d iPhone web apps</a></li>
<li><a href='http://wecreategames.com/blog/?p=188'>iPhone Geotags</a></li>
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=367'>Stellar Database</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=321</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>JavaScript HTML5 Image Caching</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=308#comments</comments>
		<pubDate>Sat, 20 Nov 2010 03:33:20 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Games]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Media]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=308</guid>
		<description><![CDATA[I&#8217;ve been focusing on HTML5 over the past year, and am beginning to unravel it&#8217;s inner secrets. One of the most interesting concepts is the dynamic tension between native apps and web apps for mobile devices. Categories of Mobile Apps Mobile applications provide huge opportunities and some risks for the developers via common middleware, GUI, tools for [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />I&#8217;ve been focusing on HTML5 over the past year, and am beginning to unravel it&#8217;s inner secrets. One of the most interesting concepts is the dynamic tension between <a href="http://feedproxy.google.com/~r/readwriteweb/~3/3Im4C3v8190/weekly-poll-html5-vs-native-ap.php">native apps and web apps</a> for mobile devices.</p>
<h2 id="308_categories-of-mobile_1" >Categories of Mobile Apps</h2>
<p>Mobile applications provide huge opportunities and some risks for the developers via common middleware, GUI, tools for downloading and reading blogs, and web connectivity. There are four major categories of applications that developers frequently refer to. From a technical point of view, we differentiate mobile applications by the runtime environment in which they are executed:</p>
<ul>
<li>Native platform and OS such as iOS, Android, Symbian, Windows Mobile, and BlackBerry. These applications are built or compiled using a tailored programming workflow process through a tool like Visual Studio or Apple’s Xcode. These will be referred to as <strong>native apps</strong>.</li>
<li>Mobile web/browser runtime environment such as Webkit, Mozilla/Firefox, Opera Mini, and RIM. These will be referred to as <strong>mobile web apps</strong>.</li>
<li>Native applications that incorporate large sections of mobile web/browser runtime environments in them. These will be referred to as <strong>hybrid apps</strong>.</li>
<li>Other managed platforms and virtual machines such as Java/Java to Mobile Enterprise (J2ME) Flash Lite, and Silverlight. These will be referred to as <strong>Rich Internet Applications</strong> (RIA). These are sometimes referred to as native, rich client apps.</li>
</ul>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/Screen-shot-2010-11-19-at-9.45.44-PM1.png"><img class="alignnone size-full wp-image-317" title="Categories and Tradeoffs of Mobile Apps" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/Screen-shot-2010-11-19-at-9.45.44-PM1.png" alt="" width="687" height="217" /></a></p>
<p>Mobile applications have evolved to the point that they now provide developers with ample mature tools, which enable developers to rapidly build and deploy new apps. Open source tools are the primary enabler of these native development environments. Native apps are different from mobile web apps, which require web connectivity and are sometimes characterized by latencies due to page load times. RIAs use an interpreter platform and are frequently resource intensive, draining the mobile device’s battery or performing poorly.</p>
<p>Each of these app categories have different requirements for integrating, deploying, and managing them within an enterprise. There are specific tools to aid in this, which differ by platform, and are frequently called middleware.</p>
<p>In terms of development quality, a skilled developer can almost always make a more efficient mobile app that provides a better experience with fewer errors that any of the other categories, though these take more time to build. An emerging category of hybrid apps incorporates some native application logic along with mobile web browsing, allowing for much of the development to be done with HTML, a widely known environment.</p>
<h2 id="308_handling-offline-cac_1" >Handling offline caching</h2>
<p>In the <a href="http://wecreategames.com/blog/?p=219">HTML5 Database and Canvas </a>article on this site, I delve into how to use the canvas to load images from the web, then save them into the local SqlLite database that is part of HTML5&#8242;s offline storage capability. Long story short: you can only save strings/integers into offline storage, so first we convert an image into a base64-encoded string, then save that.  Kinda tricky&#8230; and not very efficient, but it works.  Other options are to use the <a href="https://developer.mozilla.org/en/offline_resources_in_firefox">HTML5 Manifest File</a> to specify exactly what files to cache, but it works intermittently and isn&#8217;t good at allowing you to dynamically decide which images you want to cache. Also, support is a little varied on each browser&#8230;. so we need another option.</p>
<p>A hard part about offline caching of images into base64 strings is that it&#8217;s a pretty inefficient process. It works, and is pretty cool&#8230; but can be slow with larger files.  Also, as every database interaction is asymmetric (meaning that if you run a query, you don&#8217;t know how long it might take to complete), it can sometimes be a few seconds before a larger image is saved or loaded.  This requires some pretty fancy JavaScript.  So, without further ado, I&#8217;ve posted some pretty fancy JavaScript for this caching library at: <a href="https://github.com/jaycrossler/JavaScript-Cash">https://github.com/jaycrossler/JavaScript-Cash</a></p>
<p>After adding the cash.js library to your code and initializing it when the page loads, it&#8217;s as simple as calling:</p>
<pre>var imgtarget = document.getElementById('myimage');</pre>
<pre>Cash.loadToImg(file, imgtarget, true);</pre>
<p>This will first check the cache to see if the image is saved in the local database, and if so it will pull the image from there.  Otherwise, it will pull the image from the web, write it to a canvas tag, then save that data to the database.  This way, you can programmatically save a large amount of images in the background, then call them later when bandwidth is limited (or if you want to reduce impact on the server).</p>
<p>A big issue still to be addressed is that on most iOS devices (iPhone and iPad), you have limited resources available.  After using 5mb of offline database, the user will be prompted to ask if they will allow more to be saved.  Also, if any single Mobile Safari tab uses more than 10mb of RAM from a programmatic call, it will automatically hard-crash the browser through an exception.  This is painful, and I haven&#8217;t found a way to see how much RAM you&#8217;re using&#8230; so the next version will keep an internal estimate of how much RAM is being used.  Any time you pull a 1mb image, it looks like you&#8217;re using 1.5mb of RAM.  Converting that to a &lt;canvas&gt; tag, then writing it to a string and sending that to the database seems to take another 1mb of RAM.  So, you&#8217;re looking at only really being able to play with 4mb of images this way at any one time.  I&#8217;ll do a more detailed analysis for the next article.</p>
<p>This is optimized for working on mobile devices, such as iPhones, iPads, and Android phones.  I&#8217;ve tested it on each, though there is still a bit of fine-tuning required.</p>
<p>I&#8217;ll be posting a follow-on article showing how best to use it within a map-based game engine, so stay tuned!<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=203'>Updated FlickrProxy</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?p=21'>Star Wars Chess</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=321'>HTML5 Map Tile JavaScript Game Engine, Part 1</a></li>
<li><a href='http://wecreategames.com/blog/?p=367'>Stellar Database</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=308</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Speed Listening</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=288#comments</comments>
		<pubDate>Thu, 18 Nov 2010 21:26:18 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Life]]></category>
		<category><![CDATA[Media]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=288</guid>
		<description><![CDATA[I love audio books and podcasts. I&#8217;ve long had a personal challenge of reading a book each week of my life, and last year I realized I was falling behind.  I&#8217;ve now caught up &#8211; and would like to share how.  My wife doesn&#8217;t understand my near-compulsive need to always be doing something, or learning [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />I love audio books and podcasts. I&#8217;ve long had a personal challenge of reading a book each week of my life, and last year I realized I was falling behind.  I&#8217;ve now caught up &#8211; and would like to share how.  My wife doesn&#8217;t understand my near-compulsive need to always be doing something, or learning something new. <em> (Editors note: a nerd friend of mine asked how to best get nerds and normal humans to live together in harmony, so that might be the topic of a futre post.  I recommend <a href="http://www.hanselminutes.com/default.aspx?showID=234">this Podcast episode as a starting point</a>). </em>Ah, well. I frequently am consuming two books at the same time &#8211; one paper book that I read when I have free time, and an audio book that I listen to when driving or walking the dogs.</p>
<p>A year ago, I realized that I have many more audio books and podcasts to listen to than I could ever consume.  I needed a new way to consume audio faster, so started looking into way to listen differently. I tried a few apps that let you take an mp3 file and double the playback speed, but most of these were too cumbersome or made the audio sound &#8216;chipmunky&#8217; as the amplitude wasn&#8217;t shifted properly along with the frequency.</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/gamethrones_speed.jpg"><img class="alignnone size-full wp-image-292" title="gamethrones_speed" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/gamethrones_speed.jpg" alt="" width="320" height="480" /></a></p>
<p>I finally found that the best fast-audio experience was built into iPhones and iPod touches using the standard iPod playback. When listening to a file that is marked as a podcast or audio book, a &#8216;speed enhance&#8217; icon is shown. This can be played at single, 1.5x, or double speed.  <em>Note that the icon shows &#8220;.5x&#8221;, but it really means 1.5x.</em> When I first listened to spoken words at double speed, I could barely understand what was going on.  I needed to train my ear to get to this level.</p>
<p>Long story short, I now listen to audio books and podcasts at double- to triple- speed, and can fully understand and comprehend what I hear.  In fact, to me it sounds normal &#8211; even music played at double speed is starting to sound good and distinct.  I think this is a skill that can be trained, and so I&#8217;ll walk through some suggested steps.</p>
<p>It took two months to get comfortable with listening to audio at double speed. I found that the key was to listen to podcasts that had varying and alternating male and female voices. As I am a tech enthusiast, I listened to 40 episodes of <a href="http://www.cnet.com/buzz-out-loud-podcast/">Buzz Out Loud</a>, which is a podcast that usually features three semi-random hosts, male and female.  This provided interesting source material, and enough variation to train my ear.  Also, I could start and stop at almost any time without losing an ongoing narrative (as material covered is usually discrete stories).</p>
<p>I started by listening to a podcast at 1.5x speed for a few minutes, then switching back to 1x speed once I started feeling uncomfortable.  Each new listening session, I pushed a little bit longer.  After two weeks, I was comfortably listening to all podcasts at 1.5x speed.  There were some weird issues due to audio codecs, where some music played at this speed sounded choppy&#8230; But still consumable.</p>
<p>Next, I repeated the process to get up to double speed&#8230; But this took much longer.  It was too convenient to stay at 1.5x speed, as going faster was hard to comprehend.  I needed a challenge &#8211; so decided that I would spend 1 month to try to listed to the Wheel of Times audio books (12 books, 10k+ pages, 400 hours of audio).  Oof.  And, I almost made it&#8230; (got through 11 books in 30 days, then just needed a mental break). I averaged 10 hours of audio per day (or 5 actual hours when played at 200%). These books were ideal as they alternated male and female speakers, who each used multiple different voices in their storytelling.  As a note, you can usually find free audio books in either cd-form or mp3 at your locally library&#8230; which is important when 11 books would cost $300.</p>
<p>I now listen to everything at double speed, which feels completely natural.  Sometimes, for audio book readers that I&#8217;m familiar with, I first speed the audio up 50% using <a href="http://www.deepniner.net/mp3trimmer/">MP3-Trimmer</a>, then listen at double-speed for a combined 300% playback speed&#8230; Though this might be a bit neurotic.</p>
<p>My favorite podcasts are:</p>
<ul>
<li><a href="http://twit.tv/tnt">Tech News Today</a> (I like it much better than any of the other TWIT shows, and the dynamic of Tom Merritt is great to listen to)</li>
<li><a href="http://www.cnet.com/buzz-out-loud-podcast/">Buzz out Loud</a></li>
<li><a href="http://www.theonion.com/video/">Onion News Network</a></li>
<li><a href="http://www.swordandlaser.com/">Sword and Laser</a></li>
<li><a href="http://twit.tv/twit">This Week In Tech</a></li>
<li><a href="http://www.tipsfromthetopfloor.com/">Tips from the Top Floor &#8211; Photography</a></li>
</ul>
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=339'>Top 10 Baby products for nerd parents</a></li>
<li><a href='http://wecreategames.com/blog/?p=308'>JavaScript HTML5 Image Caching</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=288</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>From Cave Drawings to Twitter</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=300#comments</comments>
		<pubDate>Mon, 15 Nov 2010 23:48:28 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[Media]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[Writing]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=300</guid>
		<description><![CDATA[The League of American Communications Professionals (http://www.lacp.com/) has awarded us 3rd place in the 2010 Global Communications Spotlight Award!  My co-worker Julia High put together most of the issue (including heavy editing of my section!) and deserves congratulations. The article I wrote is posted on our page here, and is one of the 10 articles [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />The League of American Communications Professionals (http://www.lacp.com/) has awarded us <a href="http://www.lacp.com/2010spotlight/awards-global-communications-competition-envision.htm  ">3rd place in the 2010 Global Communications Spotlight Award</a>!  My co-worker <a href="http://highjulia.com/">Julia High</a> put together most of the issue (including <strong>heavy editing</strong> of my section!) and deserves congratulations.</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/8976b1.jpeg"><img class="alignnone size-medium wp-image-304" title="8976b" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/8976b1-209x300.jpg" alt="" width="209" height="300" /></a></p>
<p>The article I wrote is <a href="http://www.mitre.org/news/envision/winter_10/crossler.html">posted on our page here</a>, and is one of the 10 articles featured in the magazine.  Cool stuff!  I&#8217;ve reposted the article below for posterity:</p>
<h2 id="300_social-networking-te_1" >SOCIAL NETWORKING TECHNOLOGY: FROM CAVE DRAWINGS TO TWITTER</h2>
<p><em>By Jay Crossler</em></p>
<p><strong>SUMMARY:</strong> People are natural collaborators. Organizations that are familiar with the latest social networking tools can reap the fullest benefits of collaboration.</p>
<p><strong>The Oldest Technology</strong></p>
<p>Social networking is not new. You might even consider cave drawings to be among the first social networking tools. Mammals all use social networks to survive. The only thing new about social networking is the set of tools we&#8217;re using to capture and augment these skills. Everyone who has told stories, dated, dealt with customers, or worked on a team has used social networking &#8220;soft skills.&#8221; It is no surprise that tools such as YouTube (storytelling), Match.com (dating), LinkedIn (career networking), and Facebook (community building) have evolved to augment our communication tasks.</p>
<p><strong>Tools Ready to Use</strong></p>
<p>With the emergence of these new tools to mediate ancient forms of communication, and with increasing economic incentives to allow for effective collaboration without physical collocation, it&#8217;s no surprise that businesses are clamoring to find the best ways to take advantage of these tools. However, despite the fact that government agencies and businesses recognize the power of social networking tools to increase productivity, it can be difficult taking advantage of them.</p>
<p>The variety of tools that are available, the differences in the capabilities supported by these tools, and the murky and often dynamic waters surrounding issues like data ownership, security, and typical user base can make it difficult for people without expertise in this domain to develop an effective social networking strategy. In an effort to address these issues, MITRE focuses on bringing together expertise from a variety of areas, including individuals with social media development expertise, organizational change management experts, information assurance teams, and others. Bringing these experts together from the outset makes it much easier to ensure that these concerns are addressed.</p>
<table border="0" cellspacing="0" cellpadding="0" width="500">
<tbody>
<tr>
<td><img src="http://www.mitre.org/news/envision/winter_10/images/crossler2.jpg" border="0" alt="Social Networking Technology: From Cave Drawings to Twitter" width="500" height="276" align="top" /></td>
</tr>
</tbody>
</table>
<p>MITRE is frequently asked by sponsors: &#8220;Help us build sites that let our employees better collaborate.&#8221; When the sponsors describe what capabilities they want these sites to have, they describe functions commonly found on Facebook or YouTube. They&#8217;re usually shocked when we then suggest that they use what are generally thought of as recreational sites. But rather than reinventing the wheel, we need to encourage sponsors to make use of what&#8217;s authorized, available, popular, and evolving.</p>
<p>Another challenge that many organizations face is to understand the way that the corporate culture may need to change in order to really capitalize on the use of these tools. One common misconception is that allowing employee access to external social networks is always a bad practice. In reality, allowing employees access to both their corporate internal as well as external professional and social contacts can provide a very valuable source of work-relevant information. The main goal should not be to find the most effective ways to limit access, but rather to train the staff about what uses of social networking tools are appropriate in the workplace.</p>
<p><strong>Networking 2.0</strong></p>
<p>For example, when I attend large meetings, I&#8217;m often asked questions such as, &#8220;What technologies should America invest in for the future of health care?&#8221; I immediately post the question to my Twitter and Facebook accounts. By the time I&#8217;ve finished exchanging pleasantries with my fellow attendees, I usually have 10–20 social network responses to the question from MITRE employees, my old college buddies, or even people that I&#8217;ve never met who search for words like &#8220;health care.&#8221; Some of the ideas are exceptionally creative, beyond anything I would suggest. Social networking tools allow you to capitalize not only on an individual&#8217;s expertise, but a network&#8217;s expertise.</p>
<p>Wikis—Web sites that allow users to add and update content on the site—take advantage of this &#8220;network expertise&#8221; to build vast and reliable data repositories. The U.S. Army has found that it takes too long to have subject matter experts alone write their training manuals. So the Army is experimenting with &#8220;wikifying&#8221; the manuals, inviting the military community to contribute their knowledge and to review the contributions of others.</p>
<table border="0" cellspacing="0" cellpadding="0" width="515">
<tbody>
<tr>
<td width="106" valign="top"><img src="http://www.mitre.org/news/envision/winter_10/images/crossler.jpg" alt="Jay Crossler" width="106" height="74" /></td>
<td><strong>INSIDE VIEW</strong></p>
<p>&#8220;When you&#8217;re looking someone in the face,&#8221; says Jay Crossler, &#8220;you can make a lot of preconceptions that get in the way of really understanding that person.&#8221; Crossler had a very early experience in how connecting with people online can short-circuit preconceptions. &#8220;As a kid, I was stationed with my family in South Korea. I was fooling around with programming, and I wrote a multi-modem dial-up script to help the service men connect to the Internet. I listed my name and email address, but not my age, in the script. People were so impressed with the script that the local computer club elected me sight unseen as their president. When they called me up to tell me, I shouted, &#8216;But I&#8217;m just a kid!&#8217;&#8221;</td>
</tr>
</tbody>
</table>
<p><strong>Managing Complexity</strong></p>
<p>MITRE is taking a two-pronged approach to research in the fast-moving world of social networking. First, MITRE human-computer interface experts, graphic designers, software developers, usability researchers, knowledge management teams, and organizational change management gurus work with sponsors to identify, modify, and, in some cases, develop tools that fit with the organization&#8217;s information sharing and social networking needs.</p>
<p>A shining example of this effort is the Tactical Ground Reporting tool, prototyped in collaboration with DARPA for use by warfighters in the field. This tool can be classified as a &#8220;mashup,&#8221; integrating multiple data sources into a single, straightforward user interface. In this case, the tool brings together mapping tools with data sharing and collaboration tools to allow soldiers in the field to track, update, and rapidly share information about, for example, the location of potential improvised explosive devices or other items of interest on common patrol routes.</p>
<p>Second, MITRE uses its own internal corporate network as a testbed for social networking tools, examining not only how they are built, but what features are most likely to be adopted and what design, interface, or functionality elements have the largest impact on user adoption. Recently, MITRE engineers have developed and tested everything from electronic phonebooks, wikis, and chat clients to Facebook-like social networking tools and applications that can be used on mobile devices like cell phones.</p>
<p>There is also ongoing work on mechanisms designed to help improve the value extracted from shared information. There is value to be found in conducting public discourse, recording it, and linking it all together. The hard part is sifting through it all. When you have a hundred databases from different agencies linked together, a federated search sometimes returns thousands of results. Prioritizing and ranking results based on trust is challenging.</p>
<p>MITRE is exploring the use of social networking methods to deal with this complexity. We&#8217;re helping to build systems where humans collaborate in organizing the information, whether by tagging relationships, rating the reliability of data sources, or ranking the pedigree of various classification methods. The same algorithms that Amazon uses to recommend books you might like can be used to point analysts to the data they need, allowing them to more efficiently and effectively identify information that is crucial to mission success.</p>
<p>By understanding and employing social networking tools, organizations can tap the full potential in the ancient human ability to collaborate.<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=288'>Speed Listening</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=308'>JavaScript HTML5 Image Caching</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=367'>Stellar Database</a></li>
<li><a href='http://wecreategames.com/blog/?p=339'>Top 10 Baby products for nerd parents</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=300</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Government Mobile Applications</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=294#comments</comments>
		<pubDate>Thu, 11 Nov 2010 22:29:07 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Life]]></category>
		<category><![CDATA[Maps]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=294</guid>
		<description><![CDATA[Our Mobile Application that we&#8217;ve been building for the US Government was recently featured on our company&#8217;s front page.  This application is called the COIN Collector (Counter Insurgency Data Collector), and is an example of some of the cool work that the government is looking at to take advantage of mobile platforms. While most of [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />Our Mobile Application that we&#8217;ve been building for the US Government was recently featured <a href="http://www.mitre.org/news/digest/defense_intelligence/06_10/app.html">on our company&#8217;s front page</a>.  This application is called the COIN Collector (Counter Insurgency Data Collector), and is an example of some of the cool work that the government is looking at to take advantage of mobile platforms.</p>
<p><a href="http://wecreategames.com/blog/wp-content/uploads/2010/11/New-Smartphone-App-Provides-Data-for-Counter-Insurgency-Intelligence-Collection.jpeg"><img class="alignnone size-full wp-image-295" title="New Smartphone App Provides Data for Counter-Insurgency Intelligence Collection" src="http://wecreategames.com/blog/wp-content/uploads/2010/11/New-Smartphone-App-Provides-Data-for-Counter-Insurgency-Intelligence-Collection.jpeg" alt="" width="350" height="250" /></a></p>
<p>While most of the details haven&#8217;t been publicly released, we&#8217;ve been discussing the strategy for government programs to utilize mobile devices and applications.  We&#8217;ll be releasing a lot more details later, but it&#8217;s cool that some of our successes are being highlighted.<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?p=339'>Top 10 Baby products for nerd parents</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=367'>Stellar Database</a></li>
<li><a href='http://wecreategames.com/blog/?p=339'>Top 10 Baby products for nerd parents</a></li>
<li><a href='http://wecreategames.com/blog/?p=321'>HTML5 Map Tile JavaScript Game Engine, Part 1</a></li>
<li><a href='http://wecreategames.com/blog/?p=288'>Speed Listening</a></li>
<li><a href='http://wecreategames.com/blog/?p=280'>Building applications for Tysons Corner</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=294</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Building applications for Tysons Corner</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=280#comments</comments>
		<pubDate>Thu, 04 Feb 2010 20:30:17 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Maps]]></category>
		<category><![CDATA[Media]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[apps]]></category>
		<category><![CDATA[city]]></category>
		<category><![CDATA[droid]]></category>
		<category><![CDATA[iphone]]></category>
		<category><![CDATA[mall]]></category>
		<category><![CDATA[tysons corner]]></category>
		<category><![CDATA[virginia]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=280</guid>
		<description><![CDATA[I&#8217;ve been asked to build a mobile strategy and prototype for the Tysons Corner area of Northern Virginia.  One of the problems is that Tysons is (combined between Tysons I and Tysons II) one of the two largest malls in the country.  Surrounding it is the intersection of four major roads, along with dozens of [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />I&#8217;ve been asked to build a mobile strategy and prototype for the Tysons Corner area of Northern Virginia.  One of the problems is that Tysons is (combined between <a href="http://www.shoptysons.com/">Tysons I and Tysons II</a>) one of the two largest malls in the country.  Surrounding it is the intersection of four major roads, along with dozens of the top companies in the world.  Traffic is killer, and one wrong turn adds up to an hour to your transit. <a href="http://en.wikipedia.org/wiki/Silver_Line_%28Washington_Metro%29"> Four new Metro stops on the Silver Line</a> are being installed here, and the construction is further holding up traffic.</p>
<p><img class="alignnone" src="http://upload.wikimedia.org/wikipedia/en/b/b0/Dulles_Metrorail_logo.png" alt="" width="250" height="93" /></p>
<p>The thinking is that a better way to get information to users would be to build one or more information services that will assist &#8211; either iPhone/Droid apps, or tailored web sites.  If you could have any piece of conceivable information, what would be most useful?</p>
<p><img class="alignnone" title="USA Today HQ" src="http://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/USA_Today_building.jpg/180px-USA_Today_building.jpg" alt="" width="180" height="106" /></p>
<p>This would include both the Mall as well as the surrounding area and all of the new Metro stops.  We&#8217;ll be building a proposal and prototype to help out the local government.  What do you think we should have in/on it?</p>
<p><strong>For the Mall: </strong></p>
<ol>
<li>Map of parking area with updates on available parking spots.</li>
<li> Means to mark your spot on the map and some way to trace your route back to your car.</li>
<li> Layout of mall.  You are here identification.</li>
<li> Recommendations for non-busy times.</li>
<li> Senior specials.  Maybe special area for Seniors:  exercise suggestions; food suggestion; matinee movie suggestions;</li>
<li> Movie listings.</li>
<li> Special sales or activities in mall stores.  Coupons would be good.  A way to hold your iPhone to a store scanner for them to read your coupon.  Maybe a way to have your name and phone number on your phone be scanned in by stores or sales people for drawings like for a new car or whatever.</li>
<li> Holiday or special activities or presentations.</li>
<li> Food Court identification and other eating facilities.  Ratings on cleanliness.  &#8220;Eat This Not That&#8221; recommendations (maybe tie-in to app for that.)  Vegan or Vegetarian suggestions.</li>
<li> Restaurant reservation system.</li>
<li> Restroom locations.  Elevator or handicap identification.</li>
<li> Mall-walker distance and route suggestions for exercise purposes.</li>
<li> Search capability for items for sale with stores that have availability.  For instance &#8220;shoes&#8221; or &#8220;fondue pot&#8221;</li>
<li> Feedback capability to make suggestions to mall managers and/or stores.</li>
</ol>
<p><strong>For Tysons:</strong></p>
<ol>
<li> Traffic patterns and route planning</li>
<li> Augmented Reality of bus stops, traffic directions, points of interest</li>
<li> Metro delays</li>
<li> Metro and construction status, dollars spent, current plans, expected benefits</li>
<li> Events in the area</li>
<li> Highlight businesses to sponsor key companies in the area that are supporting</li>
<li> Coupons or store bonuses for reporting suggestions or road improvements (light out, pot hole, graffiti, car accident, etc)</li>
<li> Carpooling recommendations</li>
</ol>
<p>I&#8217;d love more requirements or prioritization of what would be best to build!  What would you find useful in the most congested/largest Mall area of the country?<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
<li><a href='http://wecreategames.com/blog/?p=188'>iPhone Geotags</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=259'>Chumby Advanced Tricks</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=77'>Crossler.com</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=219'>HTML5 Databases + Canvas</a></li>
<li><a href='http://wecreategames.com/blog/?p=210'>3d iPhone web apps</a></li>
<li><a href='http://wecreategames.com/blog/?p=188'>iPhone Geotags</a></li>
<li><a href='http://wecreategames.com/blog/?p=367'>Stellar Database</a></li>
<li><a href='http://wecreategames.com/blog/?p=321'>HTML5 Map Tile JavaScript Game Engine, Part 1</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=280</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Chumby Advanced Tricks</title>
		<link></link>
		<comments>http://wecreategames.com/blog/?p=259#comments</comments>
		<pubDate>Fri, 29 Jan 2010 16:37:00 +0000</pubDate>
		<dc:creator>Jay Crossler</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[Home Automation]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[Life]]></category>
		<category><![CDATA[Pugs]]></category>
		<category><![CDATA[Web]]></category>
		<category><![CDATA[cameras]]></category>
		<category><![CDATA[chumby]]></category>
		<category><![CDATA[code]]></category>
		<category><![CDATA[dogs]]></category>
		<category><![CDATA[linux]]></category>
		<category><![CDATA[puppe]]></category>

		<guid isPermaLink="false">http://wecreategames.com/blog/?p=259</guid>
		<description><![CDATA[(check out the above Chumby tiger cover here) (built on previous Chumby iRemote post here) Overview This past month, I extended the web server on my older-style Chumby to add a lot of functionality to my house. For a while, I’ve wanted to automate a number of my home systems &#8211; X10 to control our [...]]]></description>
			<content:encoded><![CDATA[<p id="top" />(check out the above <a href="http://www.bunniestudios.com/blog/?p=253">Chumby tiger cover here</a>)</p>
<p><object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/4_jWLNjp0I0&#038;hl=en_US&#038;fs=1&#038;"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/4_jWLNjp0I0&#038;hl=en_US&#038;fs=1&#038;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object></p>
<p>(built on previous <a href="http://wecreategames.com/blog/?p=181">Chumby iRemote post here</a>)</p>
<p><strong>Overview</strong><br />
This past month, I extended <a href="http://wecreategames.com/blog/?p=181">the web server</a> on my older-style <a href="http://www.chumby.com">Chumby</a> to add a lot of functionality to my house.  For a while, I’ve wanted to automate a number of my home systems &#8211; X10 to control our home lights (specifically the Living Room lights), the Chumby to play music with, and web cameras to watch our dogs during the day.  As the new Chumby just came out, I thought it would be useful to build all of the control into the Chumby device, so that others could also try the same thing.</p>
<p>I also build a feedback system that would try to monitor the amount of times our dogs jumped and barked at cars, then change music and turn on/off lights to find the combination that calmed them the most.  Unfortunately, I found that there is no magic configuration – rather the dogs seem to relax whenever the lights and music change (possibly because they feel that someone is home).  Either way, it was a cool experiment that I learned a lot from.  It is a bit “fragile”, meaning that there’s a good amount of custom configuration that you would need to use to reuse everything.  Nonetheless,<a href="http://wecreategames.com/apps/chumbrain/ChumbyBrainCode.zip"> I’m posting all code and configuration samples</a> here in case people want to set parts up themselves.  The X10 webpage, for example, is pretty useful even if it is the only piece loaded.</p>
<p><img class="size-full wp-image-265 alignnone" title="ch_brain1" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_brain1.png" alt="ch_brain1" width="390" height="468" /> <img class="alignnone size-full wp-image-266" title="ch_brain2" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_brain2.png" alt="ch_brain2" width="373" height="482" /></p>
<p><strong>Details</strong><br />
I call this marvelous contraption the “Puppy Ubiquitous Pacifying Preference Engine” (PUPPE).  If you want to be all research, the Technology Goal was to build an automation engine that optimizes environmental support for dogs left home alone.  The Research question I set to achieve was: Can an automatic feedback engine be used to optimize relaxation for dogs by controlling home automation electronics?  I was partially able to achieve this goal, though in a way I completely didn’t plan for.  Rather than find an optimal configuration, I found that the more I randomly changed the lights and music throughout the day, the more relaxed our dogs seemed to behave.</p>
<p>The tools I used for this were:</p>
<ul>
<li> X10 Wall Light Switch</li>
<li> X10 Application Switch</li>
<li> X10 Home Automation software on Windows XP (old laptop LAP1)
<ul>
<li> X10 Controller software listening on TCP port 6003</li>
</ul>
</li>
<li> Mobiscope Desktop Webcam controller on Windows XP (old laptop LAP2)
<ul>
<li> copSSH &#8211; ssh server for secure remote connections</li>
<li> ipsecCmd and IP Security Policies to filter IP traffic</li>
</ul>
</li>
<li> Two cheap USB webcams</li>
<li> Mobiscope web site for hosting video</li>
<li>Weather Web Service for determining sunset time</li>
<li> Chumby running ChumbyOS Linux (CHUMBY3)</li>
</ul>
<p><strong>Client devices:<br />
</strong></p>
<ul>
<li>User Laptops (LAP4 and LAP5)</li>
<li> iPhones (PHONE6 and PHONE7)</li>
</ul>
<p>There were a number of moving pieces to this configuration, and each piece took a while to determine the best approach to implement.  I’ll describe the solutions and tricks I came up with below.  Many people probably won’t have two extra laptops laying around, so the configuration will likely change depending on circumstance.  I spent a good portion of overall effort intentionally trying out different approaches and security option, so there are many other ways of having the same effect. The X10 Commander interface is shown below:</p>
<p style="text-align: center;"><img class="size-full wp-image-272 aligncenter" title="ch_x10cmdr" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_x10cmdr.png" alt="ch_x10cmdr" width="614" height="439" /></p>
<p><strong>Technical Architecture</strong></p>
<p style="text-align: center;"><img class="size-large wp-image-263 aligncenter" title="ch_arch" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_arch-1024x762.png" alt="ch_arch" width="500" height="372" /></p>
<p>The picture above shows the logical architecture I came up with.  All the software actually ran on the Chumby (except the Mobiscope viewing page that is hosted on that company’s web server).   I firmly believe that as systems become more complex (some people call this a Service Oriented Architecture – which I’ve studied in depth, but don’t want to go into here), it’s important to build very simple interfaces.  I implemented three main types of API service interfaces, each very simple to work with.  I call these “ramps” or “loose couplers.”</p>
<p><strong>Loose Couplers:</strong><br />
<strong><em>HTTP GET-based web service. </em></strong> In the simplest configuration, a web service is a web page that a machine returns when it receives a certain input.  The Chumby has a CGI-based web server that can be used to run simple sh shell scripts. We pass in variables through an HTTP querystring (the part following a ? in a URL).  This way, when an event.cgi?setVolume0 is called, the cgi file shell command executes a command to mute the radio.  We use x10.cgi to listen for light-switch control messages, event.cgi for Chumby-specific events, and cameras.cgi for commands to control the web cameras.</p>
<p>The Chumby also can act as a hosting web server, using an index.cgi page that points to all of the other commands.  The interface looks like this:</p>
<p style="text-align: center;"><img class="size-full wp-image-265 aligncenter" title="ch_brain1" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_brain1.png" alt="ch_brain1" width="390" height="468" /></p>
<p>And the hosting code looks like (the launch javascript is declared in the full file, see attached code):</p>
<p style="text-align: center;"><img class="size-full wp-image-264 aligncenter" title="ch_brain_code" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_brain_code.png" alt="ch_brain_code" width="524" height="385" /></p>
<p><em><strong>SSH-based camera control service.</strong></em> Secure Shell or SSH is a network protocol that allows data to be exchanged using a secure channel between two networked devices (as described in RFC 4252).  Most linux or unix-based machines (including the Chumby) have an ssh client or an ssh server built in.  As we want to control services on an Windows XP machine, we needed to add an ssh server, so I chose copSSH after testing multiple other options.  By using IP Security policies, we can add a firewall filtering policy to the machine from the command line with a batch file (Cam-Block.bat) that runs `ipseccmd –w REG –p “BlockMobiscope” –x`, where BlockMobiscope is a windows IP filtering policy as shown below:</p>
<p style="text-align: center;"><img class="size-full wp-image-268 aligncenter" title="ch_ipsec" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_ipsec.png" alt="ch_ipsec" width="589" height="421" /></p>
<p>To make remote triggering as simple as possible, we want to enable PKI key exchange on both machines. This allows a single shell command `ssh UserName@192.168.2.3 &#8216;./Cam-Block.bat&#8217;` run on the Chumby to securely turn on or off traffic from USB cameras being sent to the Mobiscope web server.  The home router is configured to always map 192.168.2.3 to the camera server (LAP2), which saves a lot of effort when machines don’t properly identify their hostnames.</p>
<p>One of the most painful steps is setting up the SSH server to run without entering a password at every instance.  Building this PKI key-exchange process uses ssh-keygen command to generate a client and server key.  Because the Chumby does not have ssh-keygen installed, we need to build the ssh keys on another machine and remotely configure both the chumby and LAP2 server with these keys.  Once we do this, we can be reasonable assured that only the Chumby can interact with the XP laptop (LAP2).  Because this machine controls transferring video from our USB cameras out to the web, we want the most amount of security around this interface.</p>
<p><em><strong>TCP-based network injection service. </strong></em>By using the X10 Active Home software with the X10 Commander program, iPhones can send TCP messages to a laptop to turn X10 devices on and off.  Rather than using the iPhone client, we can spoof TCP messages to emulate the same commands that the client would send.  By using WireShark, I found that the TCP commands are simple messages sent on port 6003:</p>
<p style="text-align: center;"><img class="size-full wp-image-271 aligncenter" title="ch_wireshark" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_wireshark.png" alt="ch_wireshark" width="612" height="87" /></p>
<p>Using NetCat ‘nc’ &#8211; (<strong><em>my new favorite linux command!</em></strong>), these messages can easily be replicated using the shell command: echo &#8216;DEVICE~sendplc~&#8221;C4 ON&#8221;&#8216; | nc 192.168.2.4 6003 (this is to the LAP1 Home Server).  This is not very secure, but is based on inherent security limitations of the X10 Commander software.  Given time, I might rewrite a more secure X10 controller.  As only the lights are controlled from this server, I found that was a worthwhile privacy tradeoff.<br />
<strong>Experimentation</strong></p>
<p>Dog owners frequently ask “What are my dogs doing while I’m at work?”  My wife specifically wanted to watch our dogs while she was at work (and her company blocked the firewall connection).  To give her this capability of watching our dogs that are blocked off in the kitchen each day, I set up a pair of USB cameras on an old laptop and purchased the $20 Mobiscope software that is iPhone compatible.  She is able to watch her dogs anytime she wishes on her iPhone.</p>
<p style="text-align: center;"><img class="size-full wp-image-269 aligncenter" title="ch_mobiscope1" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_mobiscope1.png" alt="ch_mobiscope1" width="502" height="197" /></p>
<p>After observing our dogs for a few days, we noticed that they would become more and more agitated throughout the day, and bark at cars and pedestrians walking outside our window. Some days they were more relaxed, and some days they were more agitated.  Every day we played different radio stations, and surmised that different music at different times would help calm them.  Also, we noticed that with shorter winter days, the sunlight dimming early in the evening seemed to agitate them more. We surmised that if we could modulate lighting conditions along with music, we could help minimize the amount of times they got up to bark out the window.</p>
<p style="text-align: center;"><img class="size-full wp-image-273 aligncenter" title="photo2" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/photo2.jpg" alt="photo2" width="320" height="480" /></p>
<p>The experimentation had two phases.  During the first phase, I used the two USB cameras to record the dogs in time-stopped video (3 frames/sec).  By trying a number of algorithms, I determined that a good way to rate the number of “agitations” was to identify an active area of the camera view and to count the amount of pixel change over a period of a second.  As shown in the picture above, if more than 84% of all pixels in the active area changed in a second (out of a max of 300% as there are 3 frames x 100%), then a recording is triggered and an “agitation” is recorded.  Due to varying lighting conditions, this number was not optimal in every case – and recommendations are not to use the Mobiscope to do this process in the future.</p>
<p style="text-align: center;"><img class="alignnone size-full wp-image-262" title="ch_agitations_per_hr" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_agitations_per_hr.png" alt="ch_agitations_per_hr" width="401" height="215" /><em><br />
Average # of agitations/hour at time-of-day</em></p>
<p>The # of agitations/hour was then used to build an algorithm to remotely turn on and off lights and to change radio stations in the kitchen.  Unfortunately, there was no reliable way to detect agitations as they occurred.  The Mobiscope web page hosted only cycling images and passed recording #s through javascript.  A few attempts to “Screen scrape” the number of recordings only worked intermittently.  I used a greasemonkey script that would read the data, but had many issues with reliability.  (As a note, I just realized yesterday that each recording of an agitation produced a new data file in a directory – and that directory could be watched for updates to trigger the algorithm.  This would be useful in follow on work).</p>
<p>I worked through 5 algorithms that were all sh shell scripts fed through the web page and greasemonkey script. This proved problematic, as the script never ran concurrently throughout the day.  Greasemonkey just wasn’t robust enough to handle web errors or dropped connections from the Mobiscope server.  As these were working locally inside my home intranet, I didn’t have a reliably secure method to tweak and monitor these while I was out of the house (and whenever I was in the house, the dogs’ behavior would change dramatically).</p>
<p>When the algorithms did work, it became quickly apparent that every change was a “good” one.  Any time there was an agitation, if the radio was changed or a light level was adjusted, the dogs immediately calmed down for a period. It didn’t matter which radio station or which light level was set.  Any change seemed to reduce agitations.  The algorithm I now use just rotates radio stations and light levels randomly, without any inputs.  On average, it seems to have reduced # of agitations by 45% (though I haven’t yet had enough testing to ensure it is statistically accurate or will remain lower).<br />
<strong>Privacy Engine</strong></p>
<p>In order to use the system well, we wanted to add two extra capabilities:<br />
1)	When either my wife or I come home, turn off the web cams and radio, and turn on the kitchen lights<br />
2)	As a backup, turn off any recording at sunset (in case the first doesn’t trigger)</p>
<p>To implement the first capability, we need a way to detect when either of us comes home.  I initially tried using an X10 motion sensor in the door way, but it was quite cheap and would sometimes trigger when there was direct sunlight on it, and frequently not trigger when people walked by too quickly.</p>
<p>I&#8217;ve noticed through watching Wireshark that when an iPhone connects to a wifi network, it sends out a few IGMP/Multicast DNS packets to 224.0.0.251 (local multicast to all machines, as specified in RFC 3171).  By listening for this message, I have the Chumby look for the correct identifiers and send out the “turn cameras off”, “mute radios”, and “turn lights on” commands.</p>
<p style="text-align: center;"><img class="size-full wp-image-267 aligncenter" title="ch_cam_block" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_cam_block.png" alt="ch_cam_block" width="353" height="214" /></p>
<p>I would have liked to detect a method for turning the cameras on when no one was home (as we frequently forgot to do so in the morning), but couldn’t find a reliable method.</p>
<p>To implement the second capability of always turning cameras off at sunset, I had a script that pinged a web service daily and asked for the sunset time of the current locale.  The below script illustrates this method (but condenses some of the logic for readability).</p>
<p style="text-align: center;"><img class="size-full wp-image-270 aligncenter" title="ch_sunset" src="http://wecreategames.com/blog/wp-content/uploads/2010/01/ch_sunset.png" alt="ch_sunset" width="626" height="533" /><em><br />
(Note: That should read &#8220;sunset&#8221; not &#8220;sunrise&#8221; in the web service request above&#8230; otherwise things get a little wonky.)</em></p>
<p><strong>Conclusion</strong></p>
<p>This was a fun project that had a lot of moving pieces.  I built some useful functions that we still use daily.  The light and radio controls are very reusable, and I will be releasing all of the source code for others to do so.  I was able to partially prove out that modifying the environment modifies our dog behavior.  More importantly, I gave my wife tools to feel more attached to her dogs throughout the day (and justify my spending money on technical toys).</p>
<p><a href="http://wecreategames.com/apps/chumbrain/ChumbyBrainCode.zip">The code is here, please download</a> &#8211; released <a href="http://creativecommons.org/licenses/by/3.0/">fully creative commons/open source</a> (BY 3.0 license).<br />
<h3 class="bsuite_related_bypageviews">People who looked at this item also looked at&#8230;</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=181'>Chumby iRemote</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=77'>Crossler.com</a></li>
<li><a href='http://wecreategames.com/blog/?page_id=2'>About Jay</a></li>
<li><a href='http://wecreategames.com/blog/?p=294'>Government Mobile Applications</a></li>
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
</ul>
<h3 class="bsuite_related">Related items</h3>
<ul class="bsuite_related">
<li><a href='http://wecreategames.com/blog/?p=210'>3d iPhone web apps</a></li>
<li><a href='http://wecreategames.com/blog/?p=181'>Chumby iRemote</a></li>
<li><a href='http://wecreategames.com/blog/?p=375'>StarPad JavaScript Star viewer</a></li>
<li><a href='http://wecreategames.com/blog/?p=367'>Stellar Database</a></li>
<li><a href='http://wecreategames.com/blog/?p=321'>HTML5 Map Tile JavaScript Game Engine, Part 1</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://wecreategames.com/blog/?feed=rss2&#038;p=259</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
