ERIK

HAZZARD

CTO and Co-Founder, Five

posts

Data Visualization in Games: Leaderboards

Leaderboards are a visualization of achievement. Their goal is to make comparisons between some player (or item's) ranks. This is a pretty board statement because implementations of leaderboards can be found not just in arcades, not just in single or multiplayer games, but also in non-games. There are many types of leaderboards, and can produce powerful emotional reactions

Monday, September 29 2014 | 15 min read

Designing a Browser Based Game with D3.js, Part I

First impressions are powerful. The initial exposure to a game, book, or even web application, affects your not only your interest in it, but your perception and expectations of it. Scars of the Untrodden is a browser based, fantasy, rouge-like map exploration game I've been working on which makes heavy use of data visualizations. In this post, I'll discuss creating the game's initial experience.

Sunday, September 21 2014 | 15 min read

Using D3 and SVG Filters to Create a Fog of War Effect

The Fog of War is a common type of game data visualization, frequently used in Real Time Strategy (RTS) games. SVG Filters can be not only a powerful prototyping tool, but also an easy way to achieve impressive visual effects for browser based games. This post describes a simple way to implement a fog of war effect using filters, masks, and a little bit of d3.

Sunday, September 14 2014 | 10 min read

Enhancing Data Visualization with SVG Filters

SVG filters are a powerful and underutilized tool. Filters are a post processing step that allow you to create interesting effects by adding pixel-based effects. They can be chained together, manipulated on the fly, and applied to different elements to create powerful visual experiences. Not only can filters enhance the visualization's story; filters can be used as another dimension to encode data.

Sunday, September 07 2014 | 20 min read

Data Visualization in Games

Games, at their core, are all about learning: spatial, temporal, motor, and sometimes even intellectual. You learn how to play within a game's rule-set, and to improve your gameplay you must learn. Data visualization provides a way to aide in the learning process; to keep games fun. If the game is no longer fun, data visualization can also be used to provide other motivators to play.

Sunday, August 31 2014 | 12 min read

Better Group-based Javascript Logging for Browsers

Bragi is a Javascript logging framework for both the browser and NodeJS. This post introduces the web browser version of Bragi, and discusses some of the benefits of a colorful, group-based approach to logging

Sunday, August 24 2014 | 7 min read

Bragi - A Javascript Logging Library for NodeJS

Bragi is a javascript logging library that allows expressive logging. It allows you to write log messages that stay in your code and provides expressive filtering capabilities. It uses colors and symbols, and allows piping logs to numerous outputs (console, file, remote hosts). This post discusses the NodeJS version of Bragi.

Sunday, August 17 2014 | 15 min read

How Logging Made me a Better Developer

I think logging is one of the most powerful tools in a programmer's toolbox. Unfortunately, it's supremely underutilized. Logging gives you data about what your code is doing. Over the past couple years, I've found logging helps me to manage complexity, communicate my code to other developers (and vice versa), and allows me to rapidly develop and debug software. As simple and silly as it may seem; for me, logging is unequivocally the most beneficial tool in my toolbox.

Sunday, August 10 2014 | 15 min read

How to Build an Entity Component System Game in Javascript

Creating and manipulating abstractions is the essence of programming. Entity Component System (ECS) is a different way of thinking about how to structure code, and it has some tremendous benefits. This post describes what ECS is and a Javascript implementation which we use to create a simple HTML5 browser based game called Rectangle Eater

Sunday, August 03 2014 | 25 min read

Misleading Users to Create Better Experiences

When trying to craft an experience, accuracy isn't always important. The user's experience is more important, and sometimes you have to mislead them a little to craft a better one.

Sunday, July 27 2014 | 15 min read

Visualizing Nebulous Data

The best data visualization choice is not always the 'correct' one. The most accurate representation of data is not inherently the best method of visualization. How well the visualization represents the data is probably the most important facet to consider when designing a visualization, but it’s certainly not the only one. It’s about what's best for the data and what experience you’re trying to create.

Sunday, July 20 2014 | 15 min read

Building Five Labs

Five Labs was an experiment that generates a personality for you based on your Facebook wall posts. We generated personalities for over 200 million people in a week. This post describes the architecture and infrastructure behind it.

Tuesday, July 01 2014 | 25 min read

Installing CUDA, OpenCL, and PyOpenCL on AWS EC2

This post describes how to setup CUDA, OpenCL, and PyOpenCL on EC2 with Ubuntu 12.04. These are the steps I took to install CUDA and OpenCL on EC2. This should work for any Ubuntu machine with a CUDA capable card.

Wednesday, September 18 2013 | 15 min read

OpenLayers Tutorial - Part 3 - Controls

OpenLayers Tutorial Part 3 - Controls. Tutorial covering OpenLayers Controls, various examples and sample code, including styling controls with CSS, placing controls outside the map in panels, and more.

Sunday, May 02 2010 | 20 min read

Replace a String in Multiple Files in Linux Using Grep and Sed

This is the quickest way I've found to search for and replace every occurrence of a string in multiple files in linux.

grep -rl matchstring somedir/ | xargs sed -i 's/string1/string2/g'
example:
grep -rl 'windows' ./ | xargs sed -i 's/windows/linux/g'

Sunday, April 25 2010 | 3 min read

OpenLayers Tutorial - Part 2 - Layers

OpenLayers Tutorial Part 2 - Tutorial covering OpenLayers Layers, including how it works on the backend, WMS, Vector layers, Google Maps and OpenLayer mashup instructions, and other Layer object related concepts.

Tuesday, February 02 2010 | 20 min read

Dijkstra's Algorithm - Shortest Path

This post will cover the basics of Dijksta's shortest path algorithm and how it can apply to path finding for game development. It is my opinion that understanding this algorithm will aid in understanding more complex AI algorithms, such as A*. This post is aimed more towards developers starting out in game development or those curious about Dijkstra's algorithm, but this will be a somewhat simplification of it and discuss mainly the concepts.

Sunday, January 17 2010 | 25 min read

Removing ^M characters on ubuntu in VIM

Remove ^M characters in VIM by replacing \r with nothing. ^M is really \r. Use :%s/\r//g

Friday, November 06 2009 | 2 min read

OpenLayers Tutorial - Part 1 - Introduction

Tutorial Introducing OpenLayers, covering the basics of creating a map and populating it with a single layer.

Saturday, October 03 2009 | 25 min read

ATI / NVidia Dual monitors with Ubuntu 8.04

Set up dual monitors in Ubuntu 8.04 for both ATI and NVidia based graphics cards without configuring xorg.conf or manually editing any other files. This should work for most ait or nvidia based dual monitor setups with Ubuntu 8.04 Hardy Heron. Note: This is a bit outdated, newer versions of Ubuntu support this out of the box

Monday, July 21 2008 | 10 min read

Javascript Browser Based Tower Defense Game: Elemental TD

My latest project is an Browser Based Tower Defense (Elemental TD) game written in Javascript using the MooTools framework on the client end. The thing that sort of sets it apart from other browser games is that it is a true browser based tower defense: it does not use flash or other third party plugins; it’s all Javascript.

Tuesday, November 06 2007 | 15 min read