Using Randomized Variable Values to Enhance HTML5 Canvas Animations

The HTML5 Canvas feature is bringing additional animation power to web pages.​  HTML5 Canvas allows web developers to embed sophisticated bit map animated graphics directly into web pages. 

In developing examples for my book on HTML5 Canvas (HTML5 Canvas for Dummies)​ I experimented with using randomized variable values to improve the realism of an animated fireworks display. I used random values within specified ranges for parameters such as fireworks colors, number of exploding particles, trajectory of particles, lifespan of particles and flight trajectories. I found that adding well constructed values (not too much or too little randomization) significantly increased the realism and appeal of the results.  Here's one example from the Fireworks app of setting a randomized value:​

     part[newPart].life = lifeMin +(Math.random()*(lifeMax-lifeMin));

See what you think ... click here to see it in action.

HTML5 vs. Native App Development

As you're likely aware, there's a big debate going on about whether HTML5 web sites are a better platform for mobile apps than native code development using Android, iOS and Windows.

The main selling point for HTML5 is the write-once-run-anywhere advantage. Web browsers on mobile devices can access web sites from any mobile platform. HTML5 is providing features that allow web page JavaScript code to access phone features like devices sensors and geo positioning. In theory, a well constructed HTML5 web page will look and perform like a mobile device native code app.

However, currently not all device features are available to HTML5 JavaScript code and native code apps have a performance advantage over HTML5 web pages viewed using a browser. Native code apps are presently the dominant choice among developers.

In HTML5's corner, though, the technology is improving and web browsers are ramping up their implementation of HTML5 features. Life would certainly be simpler for mobile developers if they could develop for only one platform, HTML5, instead of multiple native platforms.

Longer term, HTML5 will certainly continue to get better. But so will native platforms. In fact, native platforms may improve more rapidly than HTML5. HTML5 is a global standard developed by the W3C. It takes years of effort to change the standard and have these changes adopted by the various browsers. The individual native platforms (Android, iOS, Windows) can change as quickly as their developers (Google, Apple and Microsoft) want them to. So will HTML5 ever catch up?

Maybe not. Google, Apple and Microsoft have lots of developers and big budgets. They want their products to be competitive ... and that means constant improvements.

So, what's likely to happen? In my opinion, we'll have a blend of the two. In fact, this is taking place today. Native code platforms have Application Programming Interfaces (APIs) that support displaying web pages from within native code apps. Developers can use native code for what it does best and HTML5 web pages for what they do best. The exact mix will shift over time as all the platforms change and improve. 

For developers, this means that separate native code platforms will likely continue to exist. Write-once-run-anywhere will remain an elusive goal probably not realized for a long time, if ever. This doesn't mean that development costs can't be managed or reduced. HTML5 web pages can be developed and used by native code apps where appropriate. Functions specific to those pages can be write-once-run-anywhere. This may not be an optimal solution, but it's the game on the ground.

WebPlatform.org: A Resource for Web Development

WebPlatform.org is a new organization and collection of websites that will provide open source resources for web development. It will cover topics such as HTML5, Canvas, SVG, Video, Animations, IndexedDB, CSS, WebGL, Transforms, Audio, Media Queries and FileAPI.

Bridge Design Pattern

This entry is part of a series on programming Design Patterns that provides a framework for the rapid recall and use of patterns during application design. 

The Bridge design pattern is used to define multiple processes that work on multiple object types with similar aspects.

To understand how this pattern might be used, consider how software to control a real bridge might be constructed. Such an application would have two processes: trafficControl() and gateControl() which would control two types of objects: cars and boats. 

      class Bridge - contains methods to control bridge activities.

          trafficControl(trafficType) - method that controls traffic signals.

            gateControl(trafficType) - method that controls the bridge gates.

      class Traffic - contains objects describing types of traffic.

            cars() - defines car objects

            boats() - defines boat objects

Adapter Design Pattern

This entry is part of a series on programming Design Patterns that provides a framework for the rapid recall and use of patterns during application design. 

The Adapter design pattern is used to wrap a class in code that allows that class to be used via a different interface. Another name for the pattern is a Wrapper.

To understand how this pattern might be used, consider how software to display an image on a fixed size device might be constructed. Assume the following class and method are provided by the standard device software:

class Display - contains methods to create displays on the device.

displayImage(source) - method that displays an image with the dimensions of the device screen.

An adapter would fit an image of any size to the device screen:

class DisplayAdapter - contains methods that fit an image of any size to the device screen.

imageAdapter(original) - method that changes the size of the original image to fit the display screen.

imageResample(original, resized) - method that resamples the image for size change.

displayImage(resized) - uses the method built into the device to display the resized image.

What is HTML5 Canvas?

The Canvas feature of HTML5 is one of the most exciting new developments in web based capabilities in many years. Here are some key aspects:

HTML5 - Canvas is a part of the latest revision and improvement of the previous version (HTML4, released in the late 1990's) markup language for displaying web pages on the Internet.

Canvas Tag - The <canvas> tag joins the other HTML tags (there are around 100 now) as a way to include single or multiple Canvas areas on a web  page. 

Bit Map Display - The Canvas area you define with a <canvas> tag is a bit map display. You can manipulate individual pixels to draw objects, images, animations and video.

JavaScript Control - The JavaScript language is used to control what is seen on the Canvas. The JavaScript application code is placed between the <head></head> and <script></script> tags of the web page.

Browser Based - The computing needed to create a Canvas display is done within the browser. In other words, it's client based, not server based. The means that creating a Canvas application is simpler than one requiring server based programming. It also means that the computing power needed to generate the Canvas display is not concentrated in single servers. Each user's browser handles its own work.

Animation - Canvas applications can generate animations. This is accomplished using callbacks from the browser. The Canvas application designates one of its functions to be called from the browser at specified time intervals. During each of these callbacks, the application draws a new Canvas display, moving objects slightly. When viewed as a continuous flow of Canvas displays, an animation is generated.

Audio/Video - Audio and video can be incorporated into your Canvas applications. Moving objects can create sounds and video images can be melded into other application objects. This is done without the use of any audio or video plugins.

Gaming - Game developers have all to tools necessary to create compelling HTML5 Canvas games.

Fun - Putting aside the technical aspects of Canvas ... it can be described as just plain fun. An HTML5 Canvas is a place where as a developer you can express your creative energies and as a user you can have expanded and enjoyable experiences.

For a more details look at HTML5 Canvas, watch for my upcoming book: HTML5 Canvas for Dummies.

Integrating Audio with HTML5 Canvas

One of the useful features of HTML5 Canvas is the ability to integrate audio, either with or without an audio player. Click here or on the image to see if it works on your browser ... click on my dog Daisy and/or the pelican to test simultaneous sounds.

When the new browser window opens, you can view the page source to see the code that generates the Canvas display.

This is one of the sample applications from HTML5 Canvas for Dummies.

HTML5 Canvas on a Smartphone

HTML5 Canvas is a highly anticipated feature that allows web developers to create sophisticated graphics on their website pages. Most desktop and laptop browsers now support the Canvas feature. Mobile browsers are catching up. To see if your browser supports Canvas, you can access www.html5test.com for an analysis and rating of your browser.  Also, give this Canvas app a try:

Managing Android Devices

Google has quite a task ... to manage an installed base of over a thousand different types of Android devices. Multiple sizes, shapes, features, etc. The positive way to describe this is variety. On the other hand, it has also been refered to as fragmentation.

So how do they do it? In short, leverage. A good metaphor is a mechanical shovel. Relatively compact machines can move and lift very heavy objects using a system of joints and lever articulation. Android does something similar.

The code in Android applications doesn't manipulate devices directly. There are intermediate joints and levers that make the task manageable. Application code is programmed using component names to refer to layout elements. Layouts are adjusted to device characteristics automatically by the Android operating system. This lets an individual line of code manipulate many different types of devices.

This is a simplified view of how it all happens. There are a number of Android features that make it work: Themes, Styles, Action Bars, Fragments, Resources and much more. When implemented properly, an Android application can move a thousand different types of devices.

Coding for Better Understanding

A recent article in the Communications of the ACM focuses on how to improve the understandability of code. "Coding Guidelines: Finding the Art in the Science" by Robert Green and Henry Ledgard addresses a number of often overlooked aspects of code design, including:

• Statement alignment.
• Component naming.
• The use of white space.
• Syntax highlighting.

Many developers feel that work done to improve the appearance and understandabililty of code is wasted effort. They will often work to make code as compact and sometimes as obscure as possible.

This might work well for them while the function of the code is recently developed in their own head. But someone, even themselves, trying to maintain or improve the code sometime in the future would likely find it very difficult to understand.

Using principles such as those above can, over the long run, decrease development costs and improve code performance.

Dealing with Android Fragmentation

So called Android fragmentation is caused by the large number of Android device types and operating system versions deployed in the market.  It's the flip side to the benefit of having a wide variety Android devices and capabilities.

There are currently over a thousand different types of Android devices on the market. It's simply not possible to support all of these without accomodating variations in device design.

Google provides a number of tools for addressing the compatibility necessary to serve this diverse universe of devices. These include:

Unified Support for Tablets and Handsets

Android 4.0 combines the support of tablets and handsets into a single release.

The Holo Theme Family

In Android 4.0 Google has made the inclusion of the unmodified Holo theme family a compatibility requirement for devices running Android 4.0 and forward. This will provide a level of uniformity across device implementations.

Support for Multiple Screens

Provides mechanisms for supporting multiple screen sizes and densities.

Action Bar Backward Compatibility

Google has recently developed a set of classes to give the Action Bar backward compatibility for pre Android 3.0 devices.  These classes invoke the action bar design pattern on pre-API 11 devices and the built-in Action Bar on devices supporting API 11 or greater.

Android Compatibility Package

This library is available through the SDK Updater. It gives backward compatibility for the new Fragments feature.

Compatibility Guidelines

Google provides guidelines on achieving compatibility across devices.

Android Action Bar Backward Compatibility

The Action Bar is a consistently formatted navigation and option selection area at the top of a screen with an overflow area at the bottom.

 

Key aspects of the Action Bar include:

• It's a replacement for the menu feature.
• It was introduced in Android 3.0 and refined in Android 4.0.
• It's included in activities that use the Holo theme family.

Elements of the Action Bar graphic include:

• Application icon.
• Application name.
• Up navigation to a parent screen.
• Built-in tab navigation for switching between fragments.
• Drop-down list for alternative navigation such as sort by a different criteria.
• Important actions for a given app such as search and share.

Google has recently developed a set of classes to give the Action Bar backward compatibility for pre Android 3.0 devices.  These classes invoke the action bar design pattern on pre-API 11 devices and the built-in Action Bar on devices supporting API 11 or greater.

This is part of a larger set of capabilities for supporting application compatibility with multiple device environments including tablets and handsets and various screen sizes.

New Android Design Guidelines

Google has just released new, and very helpful, Android design guidelines. They're detailed on the Android developer website. The main webpage is shown below.

It's great to have these guidelines grouped in one place for easy access and they appear to be a step forward in developing an improved user experience ... both for the operating system and applications.

Using Concept Maps with UML Components

Concept Maps are a useful way to graphically document the relationships between the elements of a system. Not only do they assist in the system design process, but they can be used to communicate design ideas to stakeholders such as users and management. Unified Modeling Language (UML) is a more structured form of concept maps focused on Object Oriented Programming (OOP.)

We've found that combining tools and including useful graphic elements such as screen shots creates a very user friendly design tool.

Programming Languages: Java vs. C++

We're often asked about the differences between the Java and C++ programming languages and why Android apps are written most often in Java.

The table below highlights some of the differences between the languages. Basically, Java is better suited to the fundamental programming (using the SDK - Software Development Kit) for most app functions. C++ is used (with the NDK - Native Development Kit) in circumstances when high performance or easy re-use of existing C++ code is important. 

Object Oriented Programming Design Patterns

OOP Design Patterns are development templates that give software designers and coders shorthand ways of thinking about and solving programming challenges.

A full explanation of OOP Design Patterns can (and does) fill entire textbooks. Understanding and remembering every aspect of every pattern can be a daunting task. Hopefully the brief descriptions below will help in remembering the function of some common Design Patterns.

Often programmers need to discuss pattern usage with software designers, managers and other programmers. Getting too lost in the details can distract from communicating the essence of a software solution. Design Patterns can help with these challenges.

Some commonly used Design Patterns are listed below. Click on the Design Pattern name for a full pattern description.

• Adapter - Facilitates object interaction.
• Bridge - Similar to the Adapter pattern but more robust.
• Builder - Similar to the Factory pattern for returning objects as an output but used in cases where many variables of output object construction are needed.
• Chain of Responsibility - Uses a sequence of processing code blocks, each of which handles a specific set of conditions before passing control to the next block.
• Command - Used to store and use the information needed to call a method at a later time.
• Composite - Describes that a group of objects is to be treated in the same way as a single instance of an object.
• Decorator - Also known as a wrapper, allows behavior to be added to an individual object.
• Facade - Provides a simplified interface to a larger body of code.
• Factory - Creates objects as a return output.
• Flyweight - Minimizes memory use by sharing as much data as possible with other objects.
• Interpreter - Specifies how to evaluate sentences in a language.
• Iterator - Used to traverse a container and access the container's elements.
• Mediator - Defines an object the encapsulates how a set of objects interact. Instead of communicating directly, the encapsulated objects communicate through the Mediator.
• Memento - Provides the ability to restore an object to its previous state, such as an undo via a rollback.
• Null Object - Object with defined neutral ("null") behavior.
• Object Pool - Set of initialized objects kept ready to use, rather than allocating and destroying them on demand. Thread Pools are a common Object Pool implementation.
• Observer - Maintains a list of other objects and notifies them of any state change. Objects that perform Callbacks operate as an observer.
• Prototype - Similar to the Factory pattern, creates objects based on prototypical instances.
• Proxy - Functions as an interface to something else.
• Singleton - Restricts the instantiation of a class to one object.
• Strategy - Enables an algorithm's behavior to be selected at runtime.
• Template - Defines the program skeleton of an algorithm and defers some steps to subclasses.
• Visitor - Separates an algorithm from the objects on which it operates.

Android Market Search

I had a great time delivering a presentation on Android Market Search at the San Francisco Android User Group on December 12th. Thanks very much to the organizers and participants!

Can I Get an Ice Cream Sandwich?

Google's new Android version 4.0, dubbed Ice Cream Sandwich, is now available. However, for the moment, you'll only see it on new devices. Many of us with older model phones would like to have it retrofitted. Service providers will certainly get around to doing this with some of the more recent models, but older models may never get the dairy confection.

For those of us adventurous enough, "rooting" our phones and loading an Ice Cream Sandwich ourselves is an option. Please see our Blog entry on Rooting for more information before you give it a try.

What's Up with HTML5?

HTML5 is the first major update to the HTML standard since HTML4 was standardized in 1994. Full approval by standards bodies and complete implementation may take another decade, but parts of HTML5 are already being implemented.

Each browser supports HTML5 to a different degree. The www.html5test.com website can be used to test the extent to which a browser currently supports HTML5. 

The screens to the right were taken from a test of a Droid X running Android version 2.3.3. It scored 177 points out of a total of 450. As is evident from this test, smartphone browsers are not very far along in implementing HTML5 features. The lower screen to the right shows the status of some desktop browsers.

Possibly the most well known of the HTML5 features is the new tag that will avoid the need for Flash in playing videos. This is especially important now that Adobe has announced it will stop development of Flash for mobile devices.

HTML5 contains many new features. A number of these are focused on eliminating the need for proprietary plugins and Application Programming Interfaces (APIs.) This advances the idea of being able to develop applications that will run on any device that supports HTML5, including multiple smartphone, tablet and desktop brands.

Rooting - What It Is and Why to Think Twice Before Doing It

In brief, rooting your phone refers to making changes to the phone operating system so that you can load a different version of the system than the one that's pre-loaded into your phone.

Reasons users root their phones include: enhancing performance, to get a different look and feel, to have more flexibility in what software can be used, getting the latest Android releases and to have some technical fun.

The term rooting refers to getting privileged root control access within the Android Linux core system. Rooting is necessary to install custom versions of the Android system. One of the more popular of these is CyanogenMod. It offers such features as improved sound processing, additional display themes and improved processing speed.

There has been quite a bit of controversy over rooting. Some vendors and carriers discourage it and some support it.

Potential risks include: voiding your warranty, loosing data and "bricking" your phone thus rendering it inoperable. Those that choose to root are comfortable with these risks and see them as being outweighed by the  benefits. They're also willing to invest the time needed to make sure that rooting is done correctly and can be undone if something goes wrong.

The exact process of rooting can vary by type of device. It's necessary to find instructions specific to your Android phone. There are websites dedicated to rooting where you can find this information along with help for dealing with problems caused by rooting.

Essentially, rooting involves "flashing" (changing) a phone's ROM, or Read Only Memory. There are ROM Manager apps available on the Android Market that can be used to backup, change and restore ROM contents.

So, if you have the time and sense of adventure, rooting might be just the right thing for you. 

If not, you can wait for new phone releases to bring you many of the benefits of rooting without the risk and hassle.