Martian Interactive Background Tutorial

Learn to implement images which move when the user swipes.

Interactive Background Example Animated Landscape Example Animated Landscape Tutorial Mars 360 Degree Panoramic Image Prepare Graphics JavaScript Handle Resize Events Mobile Touch Movements Draw the Graphic Tips Summary Interactive Background Source Code

Introduction

This tutorial demonstrates how to implement backgrounds which move when the user swipes the canvas. This article explains how to create responsive backgrounds with HTML5. The simple yet effective technique displays engaging backgrounds. Swipe to view the Interactive Mars Panorama. The background animation tutorial provides an introduction for this tutorial.

Consider interactive background animation for architectural renderings, real estate photographs, scientific simulation, products, and games.

Prepare Graphics

Mars 360 Degree Panoramic Image

Mars 360 Degree Panoramic Image

This tutorial repeats as little as necessary from the background animation introductory tutorial. This example employs the same graphic design principles. However the example graphic is an authentic Mars 360 degree panoramic image from NASA. Seven Thunder Software modified the photograph with Photoshop.

Modifications included copying a cutout from the first frame of the image to the last frame of the image and adjusting transitions.

The Mars photograph was taken over time. The original panorama displayed lighting variations. Seven Thunder Software reduced the change in lighting between areas of the photograph.

JavaScript

The JavaScript source code includes much of the same functionality as described in the background animation tutorial. However this tutorial includes touchmove, onmousemove, and resize event listeners. The drawGraphic() function displays a cut out from the background graphic. The location of the cut out is based on coordinates obtained from swipe events over the canvas.

Handle Resize Events

Resize events provide the key to obtaining touch points on the canvas. The following listing assigns a resize event handler to the browser window.

window.addEventListener(
 'resize',
 function (e) {
 resizeHandler(e);
},
false);	
	

Resize events activate when the orientation, location, or size of the browser window changes. Both mobile and desktop browsers provide new window coordinates when resize events activate. The example resize event handler obtains the bounding box of the canvas when the window resizes. Save a reference to the rectangular bounding box. The dimensions are necessary to determine where the user last touched the canvas. The following line of JavaScript demonstrates saving the bounding box of the canvas.

bb = canvas.getBoundingClientRect()
	

Desktop or Full Computer Mouse Movements

The desktop onmousemove event listener calculates the X coordinate of the touch point using the bounding box of the canvas. Access the left coordinate of the canvas client rectangle. bb.left represents the left edge of the canvas. The following line of JavaScript demonstrates retrieving the current mouse location in relationship to the canvas. Property ev.clientX equals the current mouse location. Property bb.left equals the left edge of the canvas. Variable pX equals the mouse location on the canvas.

var pX = ev.clientX - bb.left
	

Mobile Touch Movements

For mobile touch points subtract the canvas's left coordinate from the current touch location within the browser. If the touch point is located to the left of the canvas then the result equals zero or less. If the touch point is located to the right of the canvas then the result is greater than the width of the canvas. Otherwise call the drawGraphic() function.

The following listing demonstrates how to determine when the touch point is over the canvas. If so, draw a new frame to the canvas. Call drawGraphic().

canvas.addEventListener(
'touchmove', 
function (e) 
{

e.preventDefault();
		
if (e.targetTouches.length >=  1) {
 // Obtain the location
 // of the current
 // touch point.
 var t1 = e.targetTouches[0];
 
 // Where did the
 // user touch in
 // relationship to
 // the canvas?
 var nX = t1.pageX - bb.left;	
 
 // If the user touched
 // within the canvas
 // then draw a slice
 // of the Mars background.
 if (nX  > 0  && nX < N_WIDTH)
  drawGraphic(nX);
  return false;
 }

},false);
 

Windows Phone Styles

For Windows Phones apply the following CSS rule-set to the canvas.

canvas#cv{
 touch-action:pan-y;
}

touch-action:pan-y allows the entire Web page to respond to vertical swipe motion over the canvas. However the Web browser won't respond to horizontal swipe motion over the canvas.

With Windows phones it's necessary to disable swipe action along the X axis. Otherwise attempts to swipe left to right will display the previous Web page. Attempts to swipe right to left displays the next Web page. In that case the Mars graphic remains the same. In other words, the user can't swipe to view different areas of the Martian panorama. Instead the entire Web page changes. The touch-action:pan-y rule allows scrolling vertically, while preventing horizontal scrolling.

Testing with iPhone 6, a set of Android phones, Windows 8.1, Windows Vista, and Windows 10 PCs didn't reveal the need to set the touch-action property. Only Windows Phone required the touch-action property, with the devices tested. However perhaps other untested devices also require touch-action:pan-y. It seems like a good idea to include the touch-action rule even if your target device doesn't require it now.

Draw the Graphic

To draw the graphic, move the panoramic image based on the user's current touch location. The panoramic graphic is much wider than the canvas. First determine how far to move the panoramic graphic for each pixel along the X axis of the canvas.

Divide the width of the panoramic graphic by the width of the canvas.

var N_DIVISION = N_PAN_MAX/N_WIDTH

Both mobile and desktop browsers execute the drawGraphic() function. Function drawGraphic() divides the current touch point on the canvas by the number of pixels to move the canvas.

var pX = nX * N_DIVISION
	

Then drawGraphic draws a section of the image to the canvas.

function drawGraphic(nX){ 
 
 var pX = nX * N_DIVISION;
    
 context.drawImage(
  imgSprite,
  pX,0,
  N_WIDTH,N_HEIGHT,
  0,0,
  N_WIDTH,N_HEIGHT
 ); 
}
	

Tips

Methods which execute often should process as little as possible. Function drawGraphic() executes whenever the user swipes over the canvas. It's helpful to streamline functions which execute often. Otherwise computers and mobile devices may slow down.

Optimize functions such as drawGraphic() to perform a minimum of calculations. For example prepare the canvas bounding rectangle, and other dimensions needed for drawing once when the Web page loads, or whenever the Web browser resizes. Preparation eliminates the need to calculate some variables during each drawing operation.

Consider resizing the canvas in response to device orientation and screen size. Drawing coordinates and dimensions would scale up or down accordingly. This example maintains a 300 pixel square canvas for simplicity.

See the entire interactive background source code.

Summary

This tutorial demonstrated how to implement backgrounds which move when the user swipes the canvas. This article explained how to create responsive backgrounds with HTML5. The simple yet effective technique displays engaging backgrounds. Swipe to view the Interactive Mars Panorama. The background animation tutorial provided an introduction for this tutorial.

Consider interactive background animation for architectural renderings, real estate photographs, scientific simulation, products, and games.

Copyright © 2015 Seven Thunder Software. All Rights Reserved.