Desktop Work

Featured desktop applications & games I've made or extended/modified

Game-Related

Aquatic Skin for Steam

May 2011

This was my first foray into theme design for the popular PC gaming platform Steam. Since its release on Mac OS X in May 2010, the Steam client had always used its custom UI, which looks nearly identical on Windows. Although this is probably easier to maintain, I had seen some complaints about this UI introduced in early 2010. The desire for consistency across my Mac apps motivated me to lightly research the skin development process and then jump right in. Please refer to Aquatic’s introductory entry and the Night edition for more information.

World of Warcraft Concept AddOn

October 2010

When a group of my friends and I were active in WoW, a common but sometimes foolish way of rating a player was by their “GearScore.” Since GearScore only indicated quality of equipment and checking boss kills only indicated experience, there was no real way to tell whether a player was actually good or not. The goal of this AddOn (codenamed BroScore) was to provide a history of notes on a character by other players. Development ceased after I realized that WoW AddOns had no Internet access (for good security reasons) and found that sharing data through chat channels was inefficient and sometimes even detrimental to gameplay performance due to the strain on bandwidth.

Additionally, there is another AddOn now called PlayerScore, which is an evolution of the original GearScore mod. It incorporates player ratings in a reasonable way but remains ineffective, in my opinion, due to the constraints outlined above. Still, it is a vast improvement over its simple predecessor.

mp_hk2 to de_hk2 Map Port

Late 2006

My favorite multiplayer map from Soldier of Fortune II: Double Helix was mp_hk2. It was a versatile map on which de_, ctf_, and dm_ games could be played. Although I didn’t believe it to be an ideal de_ map since each side had a favored bomb site, it was still a really fun map which could easily have been tweaked for any mode, including cs_, which wasn’t present in SoF 2. This wasn’t a true map conversion but rather a recreation from memory. I built it as de_hk2 for Counter-Strike: Source using Valve’s Hammer editor.

The farthest I got into the map-making process was placing basic polygons. Buildings, walls, staircases, and “big” objects like trucks and crates were scaled properly for Source, and the layout of the map was slightly tuned for balance. Textures were on the way, but until then, the map looked like one of those textureless “orange” maps released for some Source games.

Sadly, the files were lost in a hard drive accident and could not be recovered. I may embark on this same endeavor someday and be more vigilant of data loss. Nowadays I use Dropbox for everything, so hopefully I never lose any more work.

Old and new paper-and-pencil sketches will be uploaded when I have some time.

brokenMod I for Grand Theft Auto: Vice City

August—December 2003

As with most of my other modifications, my GTA: VC hacks started off as personal timesavers. I had downloaded, inspected, and edited stripped mission scripts (usually decoded using Barton Waterduck’s Mission Builder) to mess around in the game after I’d obtained 100% completion in the stock game. Although the game was thoroughly satisfying, this is when I realized how much value moddability added to a game. Even a singleplayer game such as Vice City enjoyed a substantially extended life because of the “aftermarket” options available.

I confess that my immaturity at the time helped tarnish an otherwise useful thread at GTAForums, but my break came with my discovery and testing of the sought-after opcode 04BA: unknown_car $car *!, probably motivated by my desire for redemption. This became the basis for my public release, the brokenMod I.

[Download, screenshots, and videos coming soon]

Working with Vice City was what got me started in programming, so I’m grateful to have been a part of the community. Besides learning the assembly-like language of the mission script, I taught myself more advanced HTML, CSS, and JS to develop the front end of the website I used to host my and others’ mods. Soon after, I learned PHP to edit the back-end behavior of the site and create my own additional modules.

Earlier Work

1998—2002

Command & Conquer: Red Alert 2 + Yuri’s Revenge Mods & Maps

These mods involved editing rules.ini and simple hacking of texture/sprite resources. They were made for personal fun and friends’ requests. Some custom units and factions were added/replaced in the game, including my favorite self-named hero unit ‘Jason’: an uncrushable, stealth sniper who shot spidering Prism laser beams and could deploy to fire a stream of rockets armed with nuclear warheads.

Other work for this game was created using the official map editor. I usually played with at least one friend on my team, so most of my maps had layouts similar to Offense Defense or East vs. Best.

Grand Theft Auto 2

[TBC]

Need for Speed 2

[TBC]

Visualizations

Labeled Thread Arcs

February—May 2009

If you’ve ever wondered about your email usage habits or your contacts’, check out this visualization tool. It evolved from my early email visualization concept with components from my social network visualization integrated into it.

See the report or download the paper in PDF.

Fluid (& Infinite?) Mosaics

April 2009

A visualization for videos… But aren’t videos visual already? Yes, but we can do cool things to them.

Steps

  1. Specify YouTube video URL.
  2. Submit search query based on topic of video (e.g., “funny laugh”).
  3. If number of results does not meet some threshold, inform user and possibly cancel.
  4. Process video, extracting each frame.
  5. Create mosaics of all frames using same pool as obtained in step 2.
  6. Re-create the video using the mosaics.

Purposes

  • It can gauge the popularity of or interest in certain topics.
    • Fewer thumbnails create mosaics of lower “quality.”
    • Resultant video is clearer when the topic is well-defined on YouTube.
  • Similarities between certain types of videos may be found (e.g., lots of blue in videos about ‘water’ or ‘bsod’).
  • As a rule, mosaics are always interesting art pieces!

Caveat

User input is required for deciding the search terms. YouTube’s tagging utility isn’t great.

Possibilities

  • Frame-by-frame playback & stepping
  • Zoom
  • Ability to select any tile in the current mosaic and to play it
    • Zoom
    • Mosaic-in-mosaic?

It’s difficult to put even a short demo of this online. Running a 4-second video through just one level of this process resulted in 575 MB of images. I can, however, show you before and after videos at the top level:

Before

[YouTube]

After

[YouTube]

Just so you have an idea of how large videos could get, here’s the full-size frame 1 (of 99!) of the fully processed clip:

(Warning: This is a pretty huge image.)
Frame 1

The gist of the idea was that each block of the mosaic would be clickable to navigate to the related video which would also have gone through the same process. Since this short video took a few minutes to compile, it would be pretty impractical to implement using today’s hardware (as of this writing). Preprocessed videos, while captivating, take up too much space.

Technical notes: A PHP script was used to scrape results and download the preview images for related videos. At the same time, an automated action in Adobe Premiere extracted each frame of the video to be processed. Once both of these tasks were complete, a small C++ program would generate mosaics of each of the extracted frames and output them with sequential filenames (for my convenience). After these were all created, I used an automated Adobe Photoshop action to shrink them all for use in a “lo-def” video.

Audio Conversations

March 2009

I didn’t think I would know how to implement anything that determined content or context of a conversation, so I tried to make something that would be immediately useful to me. We’ve seen single-person graphs, and we’ve seen waves and circles overlaid on top of each other. Adding highlighting to multi-user, multi-color visualizations may make things messy. This might be one instance where keeping them as separate top-to-bottom layers is beneficial.

This live visualization, which can be a Skype plug-in, reveals overlaps of speech of multiple conversation participants. In this example the “bad” regions are highlighted in red.

Visualization Concept

If these four people were playing a cooperative video game requiring coordination between everyone, the percentage of the time in the red could be used as a metric possibly determining the chance of success/failure. I would expect that less red means better flow of communication.

Things to Consider

  • Calibration might be needed to filter out background noise and/or adjust for different volumes of voice. (This can be partially “solved” using push-to-talk mechanisms. However, accidental activation or delayed speech may add further noise to the data.)
  • Some overlap might be the same words vocalized in unison. A possibility is to check for the same waveforms and not mark any within some empirically determined tolerance threshold.
  • Of course, in a game, player skill and familiarity with game elements will play a big part in when the speech is overlapped. The described scenario assumes players know the current map well.

Implementation

Audio streams during a conversation were recorded for four players during a session of Left 4 Dead. These files were imported into Audacity and measured for loudness above a certain threshold. If at least two people were talking at once, the portion in the waveform would be highlighted in red.

Processed Conversation

Contact Networks

February—March 2009

This listing is actually a combination of my email and social network visualizations. They are featured together for clarity and better flow. These projects were merged and further developed into the complete Labeled Thread Arcs project later on.

Colored Thread Arcs

There is an axis at the bottom of the window.

Each circle on the axis represents an email message.

The color of each circle is determined by its label(s)1. Each arc from circle to circle indicates a segment of a thread. Since this visualization is read in reverse chronological order from left to right, the most recent messages are on the left (so responses to earlier e-mails show up on the left end of the arc). A green line denotes that you were the author of the response.

Spam and trash are not included in the data set for (hopefully) obvious reasons.

Labels that don’t appear on the current display are still listed to give an idea of which labels are actually common – and probably more practical to keep.

Visualization Concept

Things to Consider
  • 1Support multi-labeled messages by splitting colors pie style.
  • Have different-sized circles depending on message length.
  • Color the borders of the circles instead of the arcs to distinguish between senders. This would better be able to show that you were the person who started a thread. This would also be the only way to determine if you were the author of a message if the visualization counted sent items which never received a response.
  • Update the visualization in real time (or some user-defined interval).

Label Map

Since the data set for this social network analysis is email again, the visualization will probably be built as an additional module to my version of the Thread Arcs viewer. One possible implementation is to read from the same source of message data as the last program and allow the user to change viewing modes (Labeled Thread Arcs or Label Map).

One of the critiques of the Thread Arcs’ labeled circles was that too many colors were involved (sender + label). I still haven’t figured out a way to avoid that except for having a toggle for indicating sender information directly on the circle or, in this case, the general area.

The lack of time scaling used in my previous visualization should probably stay so the user isn’t confused when switching modes. This keeps the benefit of knowing with whom the user most recently communicated but again may not be able to distinguish between periods of lighter activity and regular usage. I am OK with that loss because of the assumption that email is either used often or seldom with little variation in patterns over time.

The most recently active label gets pushed to the left. Its size depends on the total number of conversations tagged with it. This would probably have to be an actively updating display to show anything significant. This first style shows what type(s) of network one establishes and maintains through email:

Visualization Concept

Contact Frequencies

This second mode is activated by a click on a label in the above display. I’m not sure whether to order these people by circle size or last message received. Users may see the left side as “closer” even when there is no chronology involved, or they may assume it means time like in the other contexts. In this sample the time-ordered approach is taken, and I’m hoping the size indicates closeness to the user (again, simply based on number of messages) well enough:

Visualization Concept

Things to Consider
  • Sent items should probably be counted, even if they don’t receive responses. Some standard awareness/trust calculation may be involved.
  • The concept of multi-labeled conversations must be addressed in a better way. Currently, all labels contribute to their total number.

Threaded Discussions

January 2009

There was no actual write-up for this first project. Details are on the actual image.

This concept was implemented in HTML, CSS, and JS, but it’s too huge to be include inline here. Contact me if you’d like more details, but it honestly looks pretty close to the mockup image.

Utilities

Auto-Clicker

December 2010

Faked presence at my PC to prevent going “AFK” in WoW shortly after Cataclysm was released. Why, you ask? Being AFK for a prolonged period of time meant getting logged out of the server to make room for other players, but it also meant waiting up to two hours to get back in. That would be bad before a scheduled raid. Perhaps this wasn’t the most ethical method to stay in the game, but there’s no doubt that more people do worse things for less valid reasons.

Basic Text Editor

April—May 2005

This personal tool was created as my final project for a high school Java course and used as many Swing UI elements as possible. Since I only had a couple of months to work on this admittedly overambitious project (named jcEdit), the editor wasn’t fully developed at presentation time. Among its relatively few features:

  • Tabbed interface for editing multiple files
  • Syntax highlighting for HTML and CSS
  • Cut/Copy/Paste between documents

It felt a little weird being the only one in the class not to make a game for the final project, but I’m glad it was impressive enough to earn top marks :).

Miscellaneous Tools

September—November 2008

Many of these were actually written for assignments in CS courses:

  • Artistic filter applier for bitmap image: written in C++, read a filter kernel (an XML file), applied it to an input image, and wrote to output image
  • Simple maze solver: written in Java, used DFS algorithm to discover a solution for the specified maze (a text file)

Smaller tools are too insignificant to list here. Examples include simple scrapers (like my Amazon scraper) and other helpers like Makefiles.