Category Archives: Programming

Developer ups and downs

A friend of mine had questions about how feasible it is to start programming as a career and what it’s like. This excerpt addresses some of that.

One thing that is kind of tricky about seriously learning to be a developer is that it can be hard to assess whether it is “right” for you. For me, it was fascinating and promising at first but then I hit a big drop where it just seemed like it wasn’t worth it.

After about two quarters of it in college, I thought I might actually hate programming. I stuck with it simply because it was the third major I was on in college. I felt like I had no options left. Gradually, I felt better about it, but by graduation, I still didn’t really want a career in it. (I was really fascinated by the process of making music at that time.)

After college, I reluctantly took a job that the company sort of thought of a “farm league” for developers. Because I had nothing better to do, I dug into that job and became a developer a year later. It felt good simply because of the external validation. I learned a lot of new stuff and made parts of a product that survived in the wild. I was excited about being a developer.

A few years later, I got frustrated with the conditions of that workplace. Then later at another job, bored with the work itself. When the iPhone came out, I was excited again about the possibilities of programming.

Currently, I’m not particularly excited about iOS, but I do like programming in general. There’s plenty of interesting stuff to get into now, like previously awkward server side stuff and data visualization. And of course, there’s plenty of ways to make games in a reasonable amount of time. (That said, I still have not shipped my “totes sweet indie game.”) Partly because of an increase in skill and partly because of convenient modern frameworks, programming feels good as an artistic tool and reasonably stimulating as an occupation, if you find the right job.

Those ups and downs probably don’t happen to everyone, but I thought I’d warn you about them. Not being 19-25 will probably help with keeping a more even keel about it, as will working in sane environments. (There’s quite a few other things you can do to mitigate them, but I gotta get this letter out.)

Regardless of all love/hate jibba jabba, being a developer did pay the bills, and I had no trouble finding work.

Maybe your best course of action, if you can clear the time for it, is to spend a few months coding and reading up on programming for 20 hours a week and see how it feels. Also, there’s a large variety of technology jobs that involve little or no coding, so maybe those are worth thinking about, too.


Gathered on foot, just for you.

For a previous blog, I had a script that collected all of the links I bookmarked on del.icio.us that day and put them in a post. As time went on and I wrote less and less, those link roboposts became about 90% of the content.

That was bad for the blog, so I stopped doing that. Here, I’m doing something that feels similar, but it’s game stuff that happened to be presented to me in person. So, it’s as if I went out and physically gathered these links for you. Appreciate!

Summoner Wars

I discovered this at PAX East. It looked like any other card game, except it was played on a grid. There was a lot of orcy fantasy art on it, with the fonts that customarily accompany that kind of art. My friend Tim and I were walking by its booth, and the game’s designer invited us to try it out. I said sure but was skeptical.

The designer, Colby Dauch, did a great job of walking us through a first turn, and it did turn out to be a very good game. It’s an elegant tactical combat game that centers largely around positioning, as most tactical combat does, but also involves resource management and acquisition. Like in chess, you win by defeating the enemy’s key piece. Like in Magic and Dominion, you have a deck of cards that provides your guys, all of which have different abilities that can be coordinated in many different ways. The guys in your deck can be summoned using your magic points, which are obtained by killing your opponent’s guys.

You can build your own decks, which adds another dimension to the game, but we played with the prepackaged decks, all of which had a very distinct flavor. We played the hell out of this game at PAX, and I think it’s the best game I played there. Colby said an iOS version was in the works, so I’m looking out for that.

Spell Tower

Spell Tower’s another game I saw at PAX. It’s an iOS game in which you make words out of a tower of letters. When you connect a string of serially adjacent letters to make a word, they pop off and the rest of the letters fall to fill the void they leave. It’s vaguely Tetris-esque. You have to consider where you’re making words because you can cause letters to pile up in concentrated spots. A tall pile is bad because when a pile reaching the top of the screen ends the game. Making words in this context is fun, but also compelling. And by “compelling,” I mean it can create compulsion, which I’m ambivalent about.

The developer, Zach Gage, talked to me for a bit about its development. He got a working version in a surprisingly short amount of time using Open Frameworks. This was a surprise to me because I didn’t even know there was an iOS port of OF. Zach’s made a wide variety of software art with it and has a library for working with sprite sheets.

I was tempted to get into it, but I have enough fluency in Objective-C right now to express myself fairly well and am generally short on time. If ofxiPhone had been around three years ago, I would have been all over it, the same way Ruby people are all up ons RubyMotion. If you’re coming to iOS development from a C++ background, you should check it out.

Letterbrush

Finally, a couple weeks ago, I went to a Game Dev Night where I met other people making tile-based game maps with ASCII in plain text. The host, Greg Smith, presented us with Letterbrush. Plain text is relatively easy and simple to work with, but it does involve some annoying arrow key-dancing to specific columns and rows. Letterbrush gives you well-known drawing tools so you can skip all that foofawing.

Well, I think there were more, some non-game ones, but I’ve forgotten them. So, I hope you enjoyed those.


ALAssetsLibrary and threads

I’m working on an iOS app right now with a feature that uses images from the Photo Library. This was all solid for me, and I had worked with it for a nearly a month before putting it before my alpha testers.

With a set up like that, you know where this is going: It totally did not work for them. At all. After the users would pick a photo from the library, the spinner letting the user know an image was being loaded would sit there forever, and eventually, this would show up in the console logs:

May 19 14:51:17 THE-MOON SpringBoard[27] : MultitouchHID(1ed4d440) uilock state: 0 -> 1

May 19 14:52:00 THE-MOON SpringBoard[27] : jotunheim[725] has active assertions beyond permitted time:
{(
identifier: CoreLocationRegistration process: jotunheim[725] permittedBackgroundDuration: 600.000000 reason: finishTask owner pid:725 preventSuspend preventIdleSleep ,
identifier: CoreLocationRegistration process: jotunheim[725] permittedBackgroundDuration: 600.000000 reason: finishTask owner pid:725 preventSuspend preventIdleSleep
)}

May 19 14:52:00 THE-MOON SpringBoard[27] : Forcing crash report of jotunheim[725]...

For the life of me, I could not reproduce this bug on my phone or my girlfriend’s phone. Which, of course, is bewildering. Googling pointed to a lot of problems related to threading, and indeed I was using a dispatch queue of my own making to do the image work.

I know there’s things that absolutely must be started on the main thread: Network calls (which end up on the web thread) and UI stuff. But I wasn’t doing anything with the network or the UI, as far as I knew. And why would this only happen on my users’ devices and not on devices in my household?
I’ll spare you a recounting the red herrings that I surveyed.
It’s because the first time you try to get stuff out of the Photo Library with ALAssetsLibrary, it asks the user if your app can have access to location data. (Photo metadata can contain with location data.) But it can’t show a UIAlertView from a thread other than the main thread, it can’t, so things will just stall out.

My phone and my lady friend’s phone have had on them previous builds of the app that used ALAssetsLibrary from the main thread. So, back then, that dialog was able to show, and location data access permission was saved. Deleting the app doesn’t revoke that permission. The current build, which used ALAssetsLibrary from a non-main thread, ran into no problems because it had the permission and didn’t need to show any dialogs.
The lessons I can see are:

1. Doing work in helper queues is great, but think twice about whether or not the things you do there are going to lead to UI or network stuff.

If I had read carefully, I would have noted that the documentation says:

When the asset is requested, the user may be asked to confirm the application’s access to the library. If the user denies access to the application, or if no application is allowed to access the data, the failure block is called.

2. Things that affect your app get saved outside of your app and don’t get cleared when you delete your app.

I hope this saves someone somewhere some time.


TaskPaper to html conversion script/A less painful resume updating process

I couldn’t find a TaskPaper-to-html script out there, even though I thought this would have been done a million times by now. (Could be that I’m just getting worse at Googling. Let me know if I’m wrong!) So, I wrote a Perl script to do it:

tp_to_html.pl

Usage: perl tp_to_html.pl biglist.taskpaper bigstyle.css

You give it a .taskpaper file and (optionally) a css file, and it’ll generate an html file that’ll contain ul and li elements (you can change the code to use blockquotes and divs, if you want), each set to a class corresponding to the item type – project, task, or note. You can then style those elements and classes in the css file.
Backstory!

TaskPaper is a super simple, yet surprisingly effective application for organizing things into hierarchical lists. It’s intended to be used for to-do lists, but I hadn’t used it for that until yesterday.

For the past couple months, I’ve been mostly using to just jot down, then arrange ideas I had about various projects, which is what I’ve been doing with plain text files for years. The difference between text files and TaskPaper files is that TaskPaper provides formatting for items based on simple cues, like a line starting with a dash or ending with a colon or have a @done “tag” on it. It uses those formatting cues and changes colors and font sizes. It turns out that just doing that makes lists much easier to read and much more attractive. You actually want to look at these lists. That, along with making it very easy, almost unconscious, for the user to format items makes for a rather compelling product, believe it or not.

Anyway, I started using it for my resume. I haven’t touched my resume in a while, but I do remember the maintainability messes I used to have. I’d make the base copy in Word or OpenOffice, fighting it to format it the way I wanted. Then, I’d save it as a PDF to mail to people (because that way I could be sure it displayed the way I intended). More often than not, a recruiter would ask for it to be in doc format, so I’d send the original file. And then sometimes, a web form would ask me to paste in my resume in plain text. So, I’d copy it out of the doc file, paste it into a text editor, see that it looked terrible, then mess with it until it looked right. I’d also make an html version, which I’d have to hand code because the “save as html” features on Word and OpenOffice sucked.

Inevitably, I’d have to update the resume, which meant updating three different versions.

This time, I initially decided to just use TaskPaper to organize my editing, without having to fight Open Office. Soon, though, the idea of using just TaskPaper took hold of me. A .taskpaper file, after all, is just a text file with “- ” and “:” and various @tags in it. So, there’s the text version. I could use a script to convert it to html, then a css file to style it. Then, once I had it open in the browser, I could use the OS X print dialog to save it as a PDF. )

So far, I’m pretty satisfied with the system. I really like that the formatting and content are separated. I’m not dreading the next edit or update. Of course, it does have a big flaw: I assumed that there’d be something out there that’d convert either html+css or a PDF to a Word doc. I was wrong, so I’ve got more research to do. If you happen to know how to handle this, please let me know!


How RGB is related to HSV, and how to implement hue shifting on the iPhone

Last weekend, I wrote some code that shifted hues in existing colors. To do that, I needed to improve my understanding of hue, saturation, and lightness. I had to go on a journey of learning and trustmypaper educational service helped me a lot! So, I thought I’d share my rainbow voyage with you here.
I started by poking around in Photoshop. If you’re familiar with Photoshop, you may recognize this dialog:

If you move around the Hue slider, your image changes color without changing either saturation (which can be described as ‘colorfulness’, sort of) or value (lightness). That is exactly the functionality I wanted to implement. In Photoshop, it’s also fun stuff that can make your photos look psychedelic.

Then, there’s this guy, the Color Picker:

To pick your color, you click around in the box on the left and move the rainbow slider up and down. The number-containing boxes in the middle show you the RGB (red green blue) values of the color currently specified, which is handy. The rainbow slider is a hue controller, and the big box on the left represents lightness on its Y-axis and saturation on its X-axis.
When you sit down to code something like this, though, you can’t manipulate the hue directly like that, at least not on the iPhone. You can’t just say “give me this existing color’s hue” and then use that to compose a new color. Whether you’re using UIColor, CGColor, or cocos2d’s ccColor3B, the only way to manipulate the hue of an existing color is via RGB. Thus, you need to figure out how RGB affects HSV (hue saturation value/lightness).

Moving the hue slider in Photoshop’s color picker and noting the RGB value changes is a good way to do this. Try it, and you’ll notice that among the RGB values, there’s always a constant highest number, a constant lowest number, and a variable middle number.

Let’s say the color you start off with has an RGB of 57181-107 (a mildly-bluish green). You can move the hue slider anywhere you want, but two of the RGB values will always be 57 and 181. If you slide it toward the orange spectrum, you’ll end up with something like 181-107-57. 181 and 57 are still in the mix, yet it’s an entirely different color.

When moving the hue slider, the limits remain constant because changing the upper and lower limits will affect the lightness and saturation of a color. If you move the cursor in the saturation/lightness color panel, however, those limits will change.

Lightness

On a display, if you max out red, green, and blue, the result is pure white. It follows that raising the upper limit among the RGB components of a given color will move it closer to white, whereas lowering the lower limit will move it further away from white. “Moving a color further away from white” is also known as “darkening a color.”

Saturation

Saturation is also affected by the upper and lower RGB limits, but by the two limits’ relative distance from each other, rather than by the limit’s absolute values. In RGB terms, gray occurs when each of the components’ values are close to one another. 177-171-161 is a kind of gray, for example. When all three components of a color have matching values, as in 177-177-177, that color is said to be totally desaturated.

Conversely, the further apart the RGB components are, the more saturated the colors become. e.g. 255-112-17 is a very intense orange. 255 and 17 are about as far apart as you can get.

Hue

If we want to change the hue while freezing saturation and lightness, we can’t change the upper and lower limits, as explained above. That leaves us just the following:

1. We can change the variable middle value. e.g. 112 in a color like 112-67-233. If we change 112 to 150, we get 150-67-233.

2. We can’t change the upper and lower limits, but we can swap their positions. e.g. In 112-67-233, we can move 67 and 233 and get
67-233-112.

Now we know how to change the hue without messing with saturation or lightness, but we’re changing it haphazardly. To find out how to move the hue along the spectrum the way the Photoshop slider does, look at the RGB value changes that happen when the slider is slowly moved in the red-to-blue direction. You’ll see that:

1. One value (either R, G, or B) changes at a time.
2. That value is either moves up until it hits the upper limit, or it moves down until it hits the lower limit.
3. Once a value hits a limit, that value stops changing momentarily, and a different value starts moving.

Here’s a graph of the changes in the RGB values as the color is moved along the spectrum:

(I apologize for the graph’s crapulence. I bet you there’s a good version of this somewhere on the web, but it wasn’t on the first page of search results, so I just scriggled this out.)

The lines represent the amounts of R, G, and B components that are present in each point along the spectrum. The vertical bars at the top are the colors that (approximately) result from those RGB combinations.

The graph shows the following behavior: For each component (R, G, and B):

– If the component is not at the the lower limit and the next component (e.g. the next component after the R component is G) is at the upper limit, that component will descend.

– If the component is not at the upper limit and the next component is at the lower limit, that component will ascend.

– Otherwise, that component doesn’t change.

I’m sure there’s some clean mathematical formula that describes this, but I haven’t done any real math in like twelve years, and now my math organ is shriveled and useless. So, you’ll have to live with the algorithm.

Implementation

Once you know the above, implementation is fairly straightforward. If you want an example, though, here’s my cocos2d-oriented implementation in Objective-C on github.

OGColorTools contains the code that does the color shifting. The meat of the code is in the method color:shiftHue:inDirection:. OGHueShiftExampleLayer is a simple example layer that creates a sprite and shifts its color every time the layer is tapped. You will need to provide your own bitmap and load it into the sprite for this to work.

Enjoy your hue shifting!