Hereʼs a collection of my personal programming projects, both new and old.
Thanks to the popularity of sites like Reddit, a meme image (or image macro) has become a popular way to spread a joke amongst friends. To make a meme, I searched for a site that could quickly generate memes from any image, and without having to fuss with uploading it to some random personʼs server. Since that kind of meme generator didnʼt seem to exist, I made one.
meme better is a client-side web app that runs in all modern browsers (including mobile). It leverages HTML5ʼs Canvas object to generate memes on-the-fly within the browser. Users can start from a pre-loaded set of image templates, or they can provide their own image without uploading anything. The user applies their own text and when theyʼre happy with the image, downloading is immediate.
Often times, web companies need to share a large number of usernames and passwords in order to manage their clientʼs websites, servers, 3rd-party services, etc. All too commonly, these password are stored insecurely in a shared document, or worse, everyone has their own storage method and sharing is done over less than ideal communication channels. Vault is my solution to these problems (with some design love from Plank).
Vault is a host-proof, in-browser encryption tool with server-side persistence. It allows safe storage and retrieval of sensitive information (such as usernames, password, software licenses, etc..) between a private group of users.
Vault has been in daily-use at Plank since 2010, and manages over 600 shared assets and credentials.
I set out to create a digital “hang out” for a small community, similar to a social network, but with more a friendly, and exclusive feel to it. The idea was to progressively build on the set of features, enriching the overall user experience over time.
Of the now many features, the first feature developed was an AJAX-driven live chat for online users, and a notifation system to allow offline users can catch up on member activity the next time they log in.
Two of the more complex sections are the Image Gallery and Video collection. Users can upload images, then subsequently crop, resize and caption them as needed. Users can also upload videos, which are then viewable across all modern devices thanks to HTML5 video and server-side transcoding.
The social bookmarking section allows users to save and tag useful web links to share with others. All user content (links, pictures, and videos) can be commented on by other users, creating a contextual discussion.
There is also a section dedicated to 3rd party feed aggregation, showcasing content from Twitter and Tumblr feeds, meshed together. My approach to this section inspired me to spin off the CakePHP (model) content aggregator into a plugin.
I really challenged myself with this project, tackling front-end and back-end development, and (some) design. I put obsessive care into user experience and consistent interface so that the siteʼs features are easily understood, despite their technical complexity. Itʼs a fun side project which I add new features to any time Iʼm inspired.
This project was my first real venture into video-game development. I used a basic low-level library SDL, and built everything else on top. I ported what I retained from J2ME mobile game testing and bug fixing, and then taught myself the rest along the way.
I very much enjoyed creating the basic game engine, human interactions, and laying out the gameʼs graphics. When the need to generate a map/level came up, I designed a map editor to make things easier. This allowed me to stitch together multiple levels, choosing the enemy placement, type, and map exit points.
Iʼve always had a fondness for the Super Nintendo-style graphics, so the 1980ʼs gamers amongst you will recognize the Mystic Quest, and Legend of Zelda sprites in-use.
in-game map editor
I sat on this code for a long time, until early 2015 when I decided that it should to be open-sourced. I gave the 7 year old code a clean up in order for it to compile in more recent IDEs under Windows & OSX before releasing it into the wild. Have a look at the GitHub repository for a more detailed account of the project.
I wrote this after having tackled the 2-dimensional game, so I figured, whatʼs another dimension? This is the code base which gave me my long-standing respect and admiration for professional video-game developers.
The basic premise of this “lite game” is to navigate a maze, trying to find an exit point. Once reached, you can engage in a shooting-gallery-style battle with other tanks.
The coding challenges that arise from a real-time, 3d game, were more complex than I had expected and required a full toolset of Computer Science concepts. I worked long, tireless hours tweaking hand-coded 3d cameras, collision detection, map generation, and 3d vector drawing.
tank wire mesh during development
To make things no simpler, the basic requirements for this project were: no 3rd party modeling tools, and no gaming libraries. This meant every object had to be drawn out programmatically with the coordinate system in 3d space. I definitely learned how valuable a time saver 3d modeling software would be.
Although this is not much of a “game”, I was very pleased with how it turned out, especially having been my first time working with 3D.
This started as an experiment with the HTML5 Canvas object, and resulted in a rather intriguing full screen color visualization. It mimics the static on old analog televisions, but in full color.
colorize requires a modern browser, and may give older computers and devices a hard time due to the elevated default refresh rate.
Quick Tips: Click to start/stop the drawing-mode. +/- controls the brush size, or click the buttons on the bottom left. ESC key and resizing the window resets the animation.
for a screenshot of the site, blink your eyes :D
To avoid being overly redundant, Iʼll just mention that this website is made on a custom PHP micro-framework which supports: layouts and templates, view helpers, basic routing, and is all kinds of portable. Iʼll be developing new features as this site calls for it.