Original Cin

FanCruft, my anime website, has just gotten a much-needed facelift. Here are before and after pictures:

When I first made Fancruft, I wanted to make it look good even in Internet Explorer 5 running on a fairly low-resolution screen (640×480). Many “Web 2.0″ concepts were new; RFC4627 was published just earlier that year. People were still advocating Smarty for PHP templating. I had been a Wikipedia administrator for maybe around a year and a half, and had not yet read The Wisdom of Crowds.

A lot of works still needs to go into FanCruft, but it now has a fairly modern face. IE 5 is no longer a concern, and the site now renders much more consistently across IE 7, Firefox 2 and 3, Opera, and Safari. IE 6 doesn’t seem to understand fixed positioning and misinterprets it as absolute positioning, but this is still acceptable. The site is now designed for a screen of 800×600, but linearizes fairly well and should still be acceptable on smaller screens.

The independent “scattered” buttons have been replaced by a bar with a uniform height and no margin. Min-width is now supported well enough that I don’t mind just setting it and forgetting it, instead of using the IE5/6 hacks of yesteryear. Also, the buttons now glow gold on hover; yay!

The fine print at the bottom of the page has been cut down to a minimum, and the RSS icon now hovers on screen, just in case it isn’t noticed in the browser’s address bar. Overall, FanCruft is sleek and good looking.

I was a bit surprised earlier this week to find out that Omegapaladin (who is lightyears ahead of me in l33t math skillz) hadn’t heard of the concept of the modulo before. There’s a lot of unfortunate nitty-gritty problems about mod, but it’s a very useful operation. I wrote a small program in PHP that uses mod in two interesting ways.

The script is attached to this post. First, though, here’s the image it creates:

This is Pi, sort of. The image can be “read” from left to right starting at the top and going to the bottom. Because there are ten possible digits in Pi but there are seven rainbow colors, I needed a way to figure out what to map 7, 8, and 9 to. The “correct” way to do this would to get a base-7 representation of Pi, but I wanted to talk about mod. So, for each digit of pi, I picked a color for the rectangle by taking the corresponding digit of pi and modding it by 7: “i % 7″

Now, the digits of Pi can be thought of as a one dimensional sequence, but the image above is two dimensional. Given that we’re considering the nth digit of pi, how do we translate this into an x and y position? Using mod:

for($i = 0; $i < $length_of_pi; $i++) {
$current_pixel_y = floor($i/25);
$current_pixel_x = $i % 25;
…

The first line determines what row we’re in, from the top (there are 25 pixels in each row). The next line determines the column within the row, using mod. This works because the number of pixels left after accounting for all the previous rows go into the current row.

PiPHP.txt - The Script

My roommate and I were discussing pseudorandom number generators. Since I’m not particularly good at math, he stumped me for a while by asking how a sequence of numbers from a generator compares to real random numbers (like, for instance, numbers generated from radioactive decay).

It turns out that my roommate could have stumped someone with a lot more knowledge with his question: Wikipedia notes “It is an open question, and one central to the theory and practice of cryptography, whether there is any way to distinguish the output of a high-quality PRNG from a truly random sequence without knowing the algorithm(s) used and the state with which it was initialized.” Of course, some sequences of numbers generated by a less than perfect PRNG are almost certainly not random.

One of the neat things about Google: They often work to subtly improve their service, and when they do, they often integrate the improvement so seamlessly into their existing site that you can easily miss it. This is a screenshot from the other day. I’ve entered the (domain) name of a website, and Google has automatically put a search box for that site under its listing in the results. I almost entered a second query in this box and clicked the button without even noticing that this was something I hadn’t seen before!

A search for "chipublib" on Google

You’ll need Love to play this trippy Hello World animation.
Hello World

Now, for the explanation of the previous post.

I managed to get the buffering trick in XUL to work: it is possible to use a deck of stacks in XUL for animation. HOWEVER, doing so has a really, really high CPU cost, to the extent that just flipping back and forth between two images at 30fps shot my CPU usage up to 100%. (But note that other have done far more interesting things with the canvas tag without things being quite so disasterrific).

So, I basically decided that in-browser games are highly overrated, and I was looking for a more traditional game engine. My requirements were basically that it’s available under a BSD style liscence, a 2D focus, and has decent scripting. Somehow, I found LÖVE (Ha!). So of course, I started look at the demos, and found the Kawaii Kitten Adventure, which is a bizarre, bizarre game where you shoot eyebeams at hearts. Oh, and Caramelldansen is playing in the background while you do this. For an explanation of the title of this post, see the misheard lyrics; or maybe not, I think my eyes might be bleeding.

I’ll post the story behind this pic sometime after I wake up “tomorrow.” The short version: It’s a screenshot of a tech demo for a game engine called “Love” that I found online.

I was running Windows Update today, and found this gem in the “Important” updates:

Just to go over what I’ve highlighted in the image above: The update is just over 56 MB. It’s considered an “Important” update. And it updates the dictionary used for spellcheck - to add new words to it.

Now, I can see how a dictionary update could be important if the default dictionary is correcting words in a dangerous, humorous, or obscene manner. But all this does is remove a few squiggly red lines.

And what words does KB955020 actually add? According to Microsoft: “Friendster,” “Klum,” “Nazr,” “Obama,” and “Racicot”.

For reference, the entire ISPELL wordlist is just over 1.5MB, uncompressed.

I was working with XUL and Javascript yesterday, and I ran into some interesting problems. I’ve set up my chrome so that the project I’m working on in Eclipse is available in Firefox as “chrome://twodee/content/exampleScreen.xul”. I wanted a function I wrote to accept a filename as an argument, but no matter what I tried, a relative path wouldn’t work.

Well, of course not. You can’t just arbitrarily go from chrome-based URLs to file locations. Tossing a chrome URL into a function that’s expecting a file path is going to have some bad results. Specifically, “not a file” exceptions.

So, this works:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="2DYouSee" title="Demo &quot;Game&quot;"
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	onload="Start2D('C:\\Users\\Nic\\workspace\\2DYouSee\\content\\demo\\gameworld.json.txt')"
	width="650" height="490">
	<script src="io.js" />
	<script src="json.js" />
	<script src="twodee.js" />
	...
</window>

This does not:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="2DYouSee" title="Demo &quot;Game&quot;"
	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
	onload="Start2D('gameworld.json.txt')" width="650" height="490">
	<script src="io.js" />
	<script src="json.js" />
	<script src="twodee.js" />
	...
</window>

I just happened to find Ponoko, a site that will laser-cut things based on EPS files. Oh, and they have Inkscape templates available.

Last time, I wrote that it’d be very difficult to work through the clock’s logic if I used only 5 output pins. Fortunately, there’s no requirement that says I need to do so — leaving two pins available for input should be sufficient. I can use 1 pin to denote AM/PM, and that leaves 10 pins available.
In general, the fewer pins make up a combination for a particular hour, the easier the logic will be to work through, so I’m starting by assigning every available combination that uses only 1 or 2 pins first (for AM and PM, respectively) then I move on to 2 and 3 pin combinations:
0000000001 1AM/PM
0000000010 2AM/PM
0000000100 3AM/PM
0000001000 4AM/PM
0000010000 5AM/PM
0000100000 6AM/PM
0001000000 7AM/PM
0010000000 8AM/PM
0100000000 9AM/PM
1000000000 10AM/PM
1000000001 11AM/PM
1000000010 12AM/PM

The clock, as I’ve previously described it, can be in one of 24 possible states, because there are 24 hours in a day. Each hour “segment” of the clock can be in one of three possible states — red, yellow, or green, but red and yellow are really the same state based on whether the time is AM or PM.

I’m thinking of making an Arduino the heart of the clock. It’s a bit of overkill, but I guess I can have a fancy light display for the change of the hour or something like that.

The Arduino has thirteen digital outputs (or inputs, as the case may be). One way to hook things up would be to have each output control a single section of the clock, and use the final one to determine AM/PM. Unfortunately, this doesn’t leave any way to change the time.

There are 24 possible states for the clock face. The minimum number of outputs needed to represent this is 5, since 2⁵=32. However a lot of fairly complex logic would be required to get the clock working in this case: 12PM would be “01100″ and 4PM would be “10000″ — here’s a table of each possible output when using five pins this way, the corresponding time, the color that the “9′o’clock” segment should be.

So, the rule just to determine if the yellow LEDs for the 9 segment should be on would be something along the lines of “Light up if ((Pin 2 AND Pin 4) AND NOT (Pin 3)) OR ((Pin 2 AND Pin 3) AND NOT (Pin 4 OR Pin 5))”

Yikes. Complex! Poking around Wikipedia gives some hints on how to make this slightly better, but nothing based on an output of 5 pins is going to be simple. Fortunately, there are some things that I can do to make things easier for myself…

…it’s so important to observe how users actually behave versus the way they tell you they behave. People who do this professionally are called “economists” - Jeff Atwood, “Every User Lies“, Coding Horror

For anyone that’s interested in looking at it: My Scheduler, Source Code. Be forewarned: it’s ugly.

…or, at the very least, it’s usable. Here’s a screenshot:

The earlier screenshot that I posted was launched with window.openDialog, but I’m still having trouble getting Chrono to launch in its own window so that everything “just works” — so instead, I’ll be using it from inside Firefox, which I have open most of the time anyway. I even have a bookmark to go to it right away. I figured that I’d go over everything I’ve done, and describe what I’ve learned and what I could do to improve this project (but probably won’t). (more…)

I’ve been busy working on my 2008 theme, “Create it” — long fascinated by the power of XUL, I’ve decided to use it to improve my personal scheduling system. Here’s a screenshot of what I currently use, an OpenOffice.org spreadsheet:

And, here’s what I’m planning on replacing it with, a Javascript-automated, XUL scheduler:

Pretty spiffy. No, it’s not exactly Sunbird, but it could possibly make a decent Sunbird extension. One of the things I’ve had a lot of difficulty getting my mind around are the various security restrictions and variable scope oddities — I spent a lot of time trying to determine where my user settings (and by “extension” my chrome directory) actually were, since I’ve moved the same Firefox installation across three computers already.

I wrote the following code today:

if (isset($predictions[$key])) {
$probability = $predictions[$key];
}
else {
$probability = 0.02275;
}

After doing this, I realized that a probability can’t be greater than 1.0, nor less than 0.0; for what I’m working on, I want a probability exclusive of exactly 1.0 or 0.0, but I can’t be certain that $predictions[$key] actually meets this requirement. There are a couple of ways to deal with this, and the most straightforward way is to add more conditions to the if statement, like so:

if (isset($predictions[$key])
&& ($predictions[$key] > 0.0)
&& ($predictions[$key] < 1.0)) {
$probability = $predictions[$key];
}
else {
$probability = 0.02275;
}

This works, but it doesn’t seem like quite the right place to put these conditions as far as human readability goes. What would make more sense to check for these conditions after $probability has been assigned, like so:

if (isset($predictions[$key])) {
$probability = $predictions[$key];
}
else {
$probability = 0.02275;
}
if (($predictions[$key] < 0.0)
|| ($predictions[$key] > 1.0)) {
$probability = 0.02275;
}

But this is less than ideal, because it involves repeating the assignment of 2.3% to $probability rather awkwardly. What we want is to attach the conditions to the else block of code. Alas, there’s no way to do this! An elseif statement would be executed iff the original if condition fails, which is not what we want! Using an independent if and eliminating the else block means we have to duplicate the original if condition, to see if we need to assign 2.3% to probability because $predictions[$key] does not exist! What would be best is a new statement altogether, which would run if a previous if statement failed, or if some other conditions were met “iforelse”:

if (isset($predictions[$key])) {
$probability = $predictions[$key];
}
iforelse(($predictions[$key] < 0.0)
|| ($predictions[$key] > 1.0)) {
$probability = 0.02275;
}

AFAIK, no computer language has any such statement.

I just got an email from Zend telling me about their new move to embrace Eclipse:

Zend is launching a beta of the next generation of the Zend Studio family - Zend Studio for Eclipse.
This beta release (code named “Neon”) is based on proven Zend Studio technology and the Eclipse PHP Developers Tools (PDT) project. Zend Studio for Eclipse is the world’s most powerful PHP IDE - providing professional PHP development capabilities combined with the Eclipse multi-language support and plug-in extension technology.

When I tried Zend studio, I gave up on it after the trial period. As an IDE, it’s beautiful, complete, and the slowest software ever written. Java doesn’t need to be so slow — Eclipse runs almost as fast as a native application on my machine. I have missed some of the more complex features, so I’ll definitely be checking this new product out when I get a chance.

I’m quite pleased at how my latest programming project is going. Here’s the output of this little application. I’m learning the ins and outs of Java (I have no formal training in it, much as when I started working with PHP), but I’m as happy as a clam about how things are going. Despite the appearance, it actually does something quite useful.

Cat Bread Java Output

This is a really great idea, and it’s so simple that I have no idea why it isn’t more common:

This website’s sign-up process includes a bit of code to detect popular free webmail addresses and include a link for them. I don’t know if it just works for Yahoo, or if others like Microsoft (”Hotmail”) and Gmail work as well, but this is trivially easy to pull off on the technical side of things (a couple of if-then-else statements and regular expressions would do it), and probably results in a big boost in the number of accounts created.