projects.

Hereʼs a collection of my personal programming projects, both new and old.


meme better

Type
Meme (image macro) generator web app
Features
Overall images with text on-the-fly
Purely client-side tool
No plugins needed, just a modern browser
Desktop and mobile support
Technology
HTML5 canvas integration
Javascript image manipulation
Drag-and-drop image reader

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.


backstage

Type
Social network website
Features
Live group chat and commenting
Image captioning system
Facebook, Twitter & Tumblr integration
Member image gallery and video section
Fully responsive web design
Technology
CakePHP framework
jQuery, Bootstrap, and Backbone.js
HTML5 canvas

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.


colorize

Type
Interactive Web Art
Experiment
Technology
Javascript + HTML5 canvas
Other
User-driven visuals configuration

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.


role-playing video game

Type
2D RPG video game
Open source
Technology
Object-oriented C++
Simple DirectMedia Layer
Cross-platform (Win, Mac, Linux)
Features
Computer controlled enemies
Multiple unique game levels
Integrated level map editor
Equippable inventory sold at shops

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.


3d tank game

Type
3D puzzle game
Technology
Object-oriented C++
OpenGL, GLUT libraries
Features
User controlled tank, and turrets
3d collision detection
Customizable lighting environment
Other
Custom hand-coded 3d models
Randomizable puzzle map

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.


mcferno.com

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.