Archive for the ‘Programming’ Category

Asteroids Runner – first look

Saturday, February 2nd, 2013

After a few weeks of work, I’m finally ready to put up an early prototype of a little game I’ve been working on. It’s a vertical scroller that you control with the arrow keys and spacebar (definitely doesn’t work on a mobile device at this point). Everything is pretty rough at this point, but the basic idea is there. You can play it here: http://letxbe.com/AsteroidsRunner/

This is an exercise in using purely Javascript and HTML5 to make a game that’s portable to most platforms. Theoretically I can package it up so that it runs as an application anywhere. The only requirement is a fairly modern browser underneath (Internet Explorer 9 or later, equivalent for Chrome/Firefox/Safari).

It’s been interesting to learn a new Javascript framework and figure out how to program into it – the low-level graphics and input code is pretty much taken care of, so I get to spend all my time drawing graphics and writing the code for the behavior of each object. That’s turning out to be quite complex, particularly getting the input and movement of the player ship just right. There’s a lot of subtlety to getting it to accelerate/decelerate exactly right depending on the keyboard input.

Responsive web design

Thursday, January 24th, 2013

Today I decided it was time to join the revolution and do some redesign of my site so that it renders reasonably well on a mobile device or a small screen. My old design had some issues when the horizontal resolution of the viewport got below 960px or so, which is not a good limitation to have when we seem to be fast approaching the point where more users browse the web on a device than on a PC.

I used the techniques described in Shay Howe’s guide here: http://learn.shayhowe.com/advanced-html-css/responsive-web-design to add some custom CSS for the case where the viewport is less than 975px wide, and some even more extreme handling for viewports less than 650px:

/***********************
*** MOBILE TRANSFORM ***
***********************/
@media all and (max-width: 975px) {
	#sidebar {
		width: 100%;
		position: relative;
		top: 0px;
		right: 0px;
	}

	html {
		word-wrap: break-word;
	}

	img, .mceTemp, .wp-caption {
		max-width: 100%;
	}

	#page {
		margin-left: auto;
		margin-right: auto;
		width: 95%;
	}

	.narrowcolumn {
		width: 90%;
	}
}

/* on very narrow devices, collapse the margins completely*/
@media all and (max-width: 650px) {
	body {
		margin-left: 0px;
	}
	#page {
		margin-left: 0px;
		margin-right: 0px;
		width: 100%;
	}
	.narrowcolumn {
		width: 99%;
	}
	.post {
		margin-left: 0px;
		margin-right: 0px;
		padding-right: 0px;
	}
}

What this does is basically:

  1. Move the sidebar to the bottom of the page
  2. Cap the width of images at 100% of their parents’ width
  3. Set the post content to fill 100% of the page width, instead of just being centered

I struggled for a while with device pixel density and trying to get fancy with different sets of styles for “retina” devices, but it turned out to be a dead end. I think I was mistaking issues with viewport width for pixel density issues, and manually setting the viewport width=”device-width” was the best fix I found (fortunately I have control over the markup in PHP).

SVG drag-and-drop: more features, organized, and up on GitHub

Saturday, November 10th, 2012

Today I did some organizing and refactoring on my SVG drag-and-drop framework. It now supports picking up any of multiple children, and is sorted nicely into class files that it ‘imports’ right before use. As far as I can tell my solution differs a little bit from others around the web in that it represents the children and parents as Javascript objects, encapsulating the movement logic inside. I believe it would be more reusable since there’s very little code in the top-level Javascript that actually knows about the SVG document.

Here’s the script that’s specific to this example:

//Import the classes we need
importClass("scripts/svg_lib.js");
importClass("scripts/svg_movable_parent.js");
importClass("scripts/svg_movable_child.js");
//Instantiate and link all the objects
window.onload = function () {
 //define the object that can be dragged
 var myTriangle = document.getElementById("myTriangle");
 //secondary element that can be dragged
 var myTriangle2 = document.getElementById("myTriangle2");
 //specify the region in which dragging should work well
 var myParent = document.getElementById("svgHost");

 var movableParent = new com.SVG.MovableParent;
 var movableTriangle = new com.SVG.MovableChild;
 var movableTriangle2 = new com.SVG.MovableChild;

 movableParent.Initalize(myParent);
 movableTriangle.Initialize(myTriangle, movableParent);
 movableTriangle2.Initialize(myTriangle2, movableParent);

 movableParent.AddChild(movableTriangle);
 movableParent.AddChild(movableTriangle2);
};

Everything else is hidden away inside the svg framework classes. All of the code is up on GitHub, and you can play with the demo itself here.

Fridge-Mounted Shopping List

Friday, October 5th, 2012

Last weekend I added a new angle to a project I’ve been working on for a while: easy shopping list functionality for the family. Previously I had created the AJAX web app that we use on our smartphones, and we had been entering new items on the phones as well.

To take this to the next level, I decided to repurpose my old Nook Color (it’s pretty much unusable for much of anything now) and make it a dedicated shopping-list-entry device.

Neodymium magnets superglued to the back of the nook. The soft, rubbery surface made the superglue bond amazingly well - there's no way I could pull these magnets off.

I could have used a pre-built fridge mount, but it didn’t seem worth the cost and I wanted to include at least a little bit of DIY. Fortunately, these little 0.3″ magnets worked well. I was a little surprised that I needed so many given the amazing apparent strength of these little guys. I guess sideways force (from gravity) is not their strong suit. With six of them glued on, it stays up even with the door opening and closing and use of the device.

Fortunately CyanogenMod has a custom override setting that can prevent the Android device from ever locking the screen if it’s plugged in to a power source, so no special tweaking was needed for that part.

Here’s the device in action:

Built-in shopping list. Run out of something? Just type it in after you close the fridge door. Automatically synced to our smartphones through the web app.

And here’s the list:

Close-up of shopping list

So far it’s worked well in the week since it’s been up and we’ve given it a couple test runs. I just need to come up with a more permanent cable management solution for the power cord – maybe some kind of magnetic clip to make it nice and straight.

SVG Drag and Drop

Saturday, September 22nd, 2012

This week as part of some prototyping for work, I put together a quick demo of an SVG path element that can be dragged by clicking and holding.

I also did a little experimenting with some object-oriented Javascript and was very happy with how it turned out. The “Movable” object could be used to drag any SVG element as long as you know what its DOM parent is.

I put it on “CSSDeck” (although locally I’m just running on my machine with Coda), which is a pretty cool little site that lets you host up a demo with minimal effort. Here’s the link: http://cssdeck.com/labs/paradigm72-svg-drag/0

Coda Trial

Thursday, July 19th, 2012

I had a little time this week to take another pass at OS X and thought I would give Coda another try given all the rave reviews I’ve read of it.

I had previously downloaded the 7-day trial a couple months ago and figured it would be expired, but I fired it up any way just to check and got a nice surprise:

It turns out the trial is “7 days of actual use”, so I wasn’t punished for being too busy to get back to it until now. I’m fairly impressed that Panic took this extra step to program a mechanism for tracking days of actual use, a feature which would only benefit demo users. Very nice sign of polish.

 

After a fair amount of tinkering and a few frustrations (there really should be guidance about what “Remote Root” means, since it’s really more like “Remove relative path”), I got everything connected the right way. The result on a 27″ screen once you figure out how to actually add 2 vertical splits is impressive:

HTML, CSS, Live Preview, Webkit inspector, and sidebar visible at the same time in Coda

This beats any setup I was previously able to piece together using text editor windows, Chrome, SourceTree, and CyberDuck. It gets very, very close to showing everything I need to do all my editing and testing on a single screen. There’s still some tab switching, but enough of the context is maintained that it preserves flow far better than rearranging windows.

Still a few days left to go on my trial – with a $75 price tag I definitely need to be as sure as possible that there aren’t any nasty surprises or incompatibilities. But so far I’m very impressed and leaning towards “buy”. Coda’s website is here: http://www.panic.com/coda/

Theme update

Saturday, July 14th, 2012

Today felt like a good day to play around with CSS and fix some of the weird styling problems with this site, so I gave it an overhaul. The big wins were fixing the vertical alignment of the sidebar, finding a nice tiled linen image for the background, and switching to the very slick “Helvetica Neue” font.

If you’re viewing this on an RSS reader, go to the main site to see the new layout: http://www.letxbe.com/

You can get at the stylesheet directly at: http://www.letxbe.com/wordpress/wp_letxbe_style.css. I’ll try to get it up on Github soon and maybe even publish it as an installable WordPress theme now that I’m pretty happy with it.

GitHub profile

Wednesday, November 2nd, 2011

In an attempt to keep on building up my online portfolio, and to force myself to learn how to development the “right way” on OS X, I’ve created a github profile and moved my AJAX shopping list project over to git. I’m starting to get the hang of commits being local instead of remote. That feature has already come in handy to let me make commits while in an airport with no WiFi, which was cool.

You can see my profile here: https://github.com/paradigm72. Right now I have only the one repository up there, but once I get git running on Windows I might put up my WordBridge code so I have some C#/.NET stuff up too.

So far it seems like a nice idea. I like the standardized way to show off my code and projects to anyone I might want to work with/for in the future. I’m not sure if that’s the ‘right’ motivation to use a code-sharing site like this, but I don’t think it’s uncommon. It also helps to relieve a little bit of my paranoia that all of my local storage will someday be lost/destroyed, and my revision history lost.

Ludum Dare 21: Not ready for primetime

Tuesday, August 30th, 2011

A couple weekends ago I took a shot at a game development competition, and learned that I’m not quite there yet. The theme was “Escape”; basically, make a game which can be described by that word. Given that freedom, here’s what I came up with in 48 hours (about 6 hours of actual development):

Basic working 'graphics' for a sliding puzzle escape game. The player would start in the middle.

I got a game world in place – a 2D grid on which cars can live. I got some quick car sketches done in Paint.NET. But that’s pretty much it. The obstacle that did me in was a control scheme: annoyingly painful to implement, and I couldn’t really decide on how I wanted it to work. My idea was to have a player actually walk around the game world and tell the car he was facing to go forward or reverse. I’m not sure I had a better reason for this than that I wanted to use the keyboard and not the mouse.

For next time, I think I need to have more time to devote (which really means making it a priority, more than anything else), a better plan for how to brainstorm a concept, and more practice creating assets. Being able to create quality art would have gotten me a lot farther along, I think.

AJAX Shopping List

Wednesday, June 1st, 2011

Over the Memorial Day weekend I learned a new style of programming: Asynchronous Javascript and XML, aka “AJAX“. This is the technology used any time you perform an action on a web page that loads or saves information but doesn’t reload the entire page. It’s been around since 2005, but I’m still playing catch-up in web programming.

A great example of AJAX in action is the “comments” feature in Facebook: when you add a comment to or like someone’s status, you don’t have to wait for the entire page to reload to see your comment appear (thankfully, since the news feed does not load quickly to begin with). Instead, it just appears in the right spot after a second or two. Contrast this with most shopping cart apps (like Amazon’s), which force you to reload the entire page, ads and all, every time you change a quantity or delete an item.

I created a small AJAX app that maintains a shopping list:

My "Shopping List" app

The functionality is pretty limited: you can add items, remove items, and mark items ‘gotten’ (couldn’t for the life of me think of a better word for this state – ‘acquired’, maybe?). Also, there’s only a single list so the scalability of this app is basically zero.

I’m not posting the link here because of the scalability problem and to prevent junk from getting added by Random Internet Strangers(TM), but if you’d like to try it out let me know. We’re hoping to take it for a test run soon and see if we can get rid of one more need for paper around the house!