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 you swipe the canvas. Learn to create interactive scenes with HTML5. The simple yet effective technique displays engaging environments. Swipe to view the interactive Mars panorama. The background animation tutorial provides an introduction for this tutorial.

For simplicity, this tutorial's based on the the interactive Mars panorama example with fixed widths. However consider modifying JavaScript, and CSS media queries, to provide scalable interactive backgrounds similar to the Slide to View Mars panorama.

Interactive background scenes have many potential uses, such as 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 tutorial, using 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 rectangle which describes dimensions and location 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. Property, 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' 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 the touch point's on the canvas therefore, 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 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 the Web page to scroll vertically, even when your finger's over the canvas, yet prevents switching pages when you swipe horizontally.

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, as follows. Variable N_PAN_MAX represents the movable width of the panoramic graphic. Variable N_WIDTH represents 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 based on screen size and in response to device orientation. Scale drawing coordinates and dimensions up or down, accordingly. The Mars interactive example maintains a 300 pixel square canvas for simplicity. See the Slide to View Mars panorama for an example which resizes regardless of screen size, device, or orientation.

Summary

This tutorial demonstrated a simple technique to implement backgrounds which move when the user swipes over the canvas. This article explained how to create responsive backgrounds with HTML5. This simple yet effective method displays engaging backgrounds. Swipe to view the Interactive Mars Panorama. The background animation tutorial provided an introduction for this tutorial. See the Slide to View Mars panorama for an example which scales up or down, regardless of screen size, device, or orientation.

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

Ad for 3D Marketing Learn 3D Programming Ad
Copyright © 2015 Seven Thunder Software. All Rights Reserved.