Oldie but goodie: Soul Defender is a beta flash game I created back in college.

Control the ninja with the mouse, and control the the angel with the arrow keys. Each press of an arrow key increases the angel’s speed in the corresponding direction.

Pro Score is 8000, good luck!

My brother just started a new webcomic…he illustrates and a friend writes. I dig it, recommended for all gamers. (I just so happened to make the website for him as well)

http://www.unicorn-soup.com/

Twitter recently changed their API to support OpenAuth which is by-and-large a good thing.

Unfortunately, however, they stopped supporting basic RSS feeds, which was my preferred method of printing twitter status updates on the web.

Not to fear, as it turns out you can still access an XML feed of any user’s status updates without using OpenAuth, the feed can be accessed at http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=your_twitter_handle.

This makes life much easier! What I’ve done is put together a very basic script that grabs the feed, parses it, makes urls into links, and outputs it as an unordered list (easy enough to change should you choose to do so).

You can call this script asynchronously if you prefer…I didn’t include any code for this but it’s simple and can be with the jQuery ajax() function.

Please note that this script uses SimpleXML, which is only supported in PHP 5+. I packaged this in an extra file (twitter_feed.php) and I call it with an include() or jquery ajax() function.

<?php

/*
 * Parses and outputs a twitter feed
 * Packaged at http://www.johnpezzetti.com
 * URL Link conversion function from DZone http://snippets.dzone.com/posts/show/6156
 */

$twitterUsername = 'pezigner'; //Twitter Username
$numTweets = 10; //Number of entires to load

function build_twitter_feed($username,$numEntries){
  $xml = simplexml_load_file("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=".$username."&count=".$numEntries);
  if ($xml){
    $output = '<ul class="twitter-feed">';
    foreach($xml->status as $tweet){
      $text = make_urls_links($tweet->text);
      $date = $tweet->created_at;
      $output .= '<li>'.$text.'</li>';
    }
    $output .= '</ul>';
  }
  return $output;
}

function make_urls_links($text){
    $ret = ' ' . $text;
    $ret = preg_replace("#(^|[\n ])([\w]+?://[\w]+[^ \"\n\r\t<]*)#ise", "'\\1<a target=\"_blank\" href=\"\\2\" >\\2</a>'", $ret);
    $ret = preg_replace("#(^|[\n ])((www|ftp)\.[^ \"\t\n\r<]*)#ise", "'\\1<a target=\"_blank\" href=\"http://\\2\" >\\2</a>'", $ret);
    $ret = preg_replace("#(^|[\n ])([a-z0-9&\-_\.]+?)@([\w\-]+\.([\w\-\.]+\.)*[\w]+)#i", "\\1<a href=\"mailto:\\2@\\3\">\\2@\\3</a>", $ret);
    $ret = substr($ret, 1);
    return($ret);
}

echo build_twitter_feed($twitterUsername,$numTweets);

?>

I just received my new business cards for Other Half Full and I couldn’t be more stoked. Special thanks to my brother for doing such a good job on the print.

Other Half Full, Inc. Business Card

ScrollbarYou’ve probably noticed it before…or maybe not. If you’re navigating through pages of a site, some of which have scrollbars and some of which don’t, the while site will shift ~20px every time you load a page that has scrollbars.

This is true in all modern browsers (IE8, FF2.5+, Opera, Safari, Chrome). In fact, the only browsers that I didn’t experience this in were IE7 and IE6.

This shift doesn’t bother me particularly, but it bothered a client so I set out to find a solution. I was able to put together a script solution that works on all major browsers. Most existing solutions involved turning the scrollbar on permanently…something I didn’t want to do. This script waits until the DOM is loaded then checks to see if a scrollbar is active. If it is, it calculates the width of the scrollbar and sets the body’s marginLeft equal to that width. This offsets the shift, and since it runs on DOM load it takes instant effect. Continue reading ‘Removing vertical scrollbar jump / shift problem, a javascript fix for all browsers’

I’m going to miss my Sentra, but I’m stoked about the new M.

My New BMW 1999 M3 E36

In this tutorial I’ll run through how I created the 2-dimensional wave effect seen on Other Half Full. It’s built with the HTML5 canvas element and javascript. I also used jQuery, but you can get by without it.

Creating the wave turned out to be an interesting problem. I wanted the wave to originate at the position of the cursor, so using pure sine waves was not an option…the best you can create using only a sine wave looks something like this:

What I eventually arrived at uses a sine function only to determine the y value of the midpoint (which uses the cursor’s position for its x value). The script then spawns a variable amount of other points, and uses bezier curves to connect them. It looks something like this:

As you can see from the above graphic, each peak and valley is a point with two handles that create the curve connecting them.

The loop spawns a new point on the canvas whenever the midpoint reaches its highest or lowest value (when our counter is equal to 90 or 270, respectively). New waves are spawned at the y value of the midpoint, so as the midpoint diminishes each wave is subsequently smaller as well. The speed (and acceleration) that the waves radiate out at is controlled by a variable, as is the amplitude of the wave. Continue reading ‘HTML5 Canvas Tutorial: Creating a 2-dimensional wave’

Just finished construction on a new photography website, Riley Pearce Photography. It features a rich jQuery Cycle based gallery, an ubercart store and a blog. This was a fun project to work on, hope you like it.

I went to Catalina with Karen’s lab a few weeks ago, and we had a very nice sunset coming back to Long Beach.

Long Beach Harbor

Long Beach Harbor

Today I’m officially self-employed.

I’m sure I have a uphill battle ahead of me, but I couldn’t be more stoked to be working for myself.

That means big changes around here. Stay tuned.

Other Half Full Logo