Articles of William Malone

The following are articles I have written about development and design that interest me. Hopefully they interest you too.

HTML5 Game Scaling

This article will describe scaling techniques, including the use of a game safe area, to best fit an HTML5 game across devices with different resolution and aspect ratios.

Create a Drawing App with HTML5 Canvas and JavaScript

This tutorial will take you step by step through the development of a simple web drawing application using HTML5 canvas and its partner JavaScript.

Create a Paint Bucket Tool in HTML5 and JavaScript

This tutorial will show how to create a simple paint bucket tool on an HTML5 Canvas using JavaScript. We will be implementing a flood fill algorithm using the HTML5 imageData object for pixel manipulation.

HTML5 vs Flash Drawing Image

The same icon is drawn in JavaScript on an HTML5 canvas element and in ActionScript 3 in Flash. The differences in code is discussed after each step.

HTML5 Canvas Example

Step by step tutorial drawing an icon of a warning symbol on an html5 canvas. Current Html5 browser compatibility is discussed as well as downloadable source code.

Maximum Image Size in Safari Mobile on IOS

IOS enforces a maximum image size in Safari Mobile. This article explores the details and includes a calculator to determine if an image will load on a particular device.

Maximum Sprite Frame Calculator for Safari Mobile

Safari Mobile won't load very large PNG images. This limits the number of frames you can have in HTML5 frame based sprite animations. The following calculator will help determine how many frames you can have without reaching the maximum size limitation enforced by Safari Mobile.

Detect iOS Device Orientation with JavaScript

JavaScript gives us a way to determine the current orientation of iOS devices (iPhone, iPad, iPod). This article will cover how to detect that rotation and what to watch out for.

Create a Bar Graph with HTML5 Canvas and JavaScript

This tutorial will show how to create a simple bar graph that animates between values on an HTML5 Canvas using JavaScript.

Email Validation using RegEx

Finding patterns in strings can be a common occurrence in interface design. Validating this data can be a time consuming and tedious task. There are only so many indexOf methods and if else statements one can handle. An alternative is using regular expressions.

Epoch Time (Unix Time)

Programming often requires representing the world in programming terms. How do we define "now" in terms of time? It's called Unix or Epoch time. It is the number of seconds from January 1, 1970.

Seven-Segment Display in Flash

Implement a seven-segment display in Adobe Flash ActionScript 3 (AS3).

Create Glossy Photoshop Button

A popular interface design technique is adding a gloss effect to interface elements. This tutorial will show the step by step process of designing a glossy button in Adobe Photoshop.

Create Toilet Paper Origami

Step by step instructions on how to fold toilet paper like the professionals. Start with a simple point and move on to the more advanced diamond fold. Sure to impress or at least confuse your friends.