Skip to content

Instantly share code, notes, and snippets.

@et4891

et4891/accelerometer.js

Last active December 30, 2015 05:49
Show Gist options
  • Save et4891/7784896 to your computer and use it in GitHub Desktop.
Save et4891/7784896 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas + Accelerometer *http://www.lonhosford.com/lonblog/* From html and simplified into only js file
Raw
accelerometer.js
var canvas_ctx; // HTML canvas 2d context
var ax = 0; // Acceleration x axis (Accelerometer value adjusted for direction)
var ay = 0; // Acceleration y axis (Accelerometer value adjusted for direction)
var x; // Circle x position
var y; // Circle y position
var vx = 0; // Velocity x axis
var vy = 0; // Velocity y axis
var WIDTH = 320; // Width of canvas
var HEIGHT = 300; // Height of canvas
var RADIUS = 10; // Width of circle object
var watchID = null; // Accelerometer.watchAcceleration return value.
/* DOM body onload event callback */
document.addEventListener
(
"deviceready",
/* Cordova has been initialized and is ready to roll */
function()
{
/* Initialize canvas and animation */
var canvas = document.getElementById("canvas");
canvas_ctx = canvas.getContext("2d");
// Center
x = WIDTH / 2 ;
y = HEIGHT/ 2 ;
/* Steps to start animation play */
vx = 0;
vy = 0;
/* Start watching the accelerometer */
// Canvas redraw speed in milliseconds and accelerometer frequency
var options = { frequency: 30 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
// Draw time interval.
setInterval(draw, 30);
},
false
);
// Stop watching the accelerometer
function stopWatch()
{
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
/* Accelerometer data callback */
function onSuccess( acceleration )
{
// Set drawing acceleration values
ax = acceleration.x * '-.1';
ay = acceleration.y * '.1';
}
/* Accelerometer error callback */
function onError()
{
alert("Accelerometer Error");
}
/* Draw circle */
function circle( x, y, r )
{
canvas_ctx.beginPath();
canvas_ctx.arc(x, y, r, 0, Math.PI*2, true);
canvas_ctx.fill();
}
/* Draw rectangle */
function rect( x, y, w, h )
{
canvas_ctx.beginPath();
canvas_ctx.rect(x,y,w,h);
canvas_ctx.closePath();
canvas_ctx.fill();
}
/* Clear canvas */
function clear()
{
canvas_ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
/* Compute drawing metrics and draw frame */
function draw()
{
// Increase velocity by acceleration
vx += ax;
vy += ay;
// Update circle drawing position.
x += vx;
y += vy;
/* Boundaries testing */
// Right boundary
if ( x + RADIUS > WIDTH )
{
x = WIDTH - RADIUS ;
vx = 0;
}
// Left boundary
if (x - RADIUS <= 0)
{
x = RADIUS ;
vx = 0;
}
// Bottom boundary
if (y + RADIUS > HEIGHT)
{
y = HEIGHT - RADIUS ;
vy = 0;
}
// Top boundary
if (y - RADIUS <= 0)
{
y = RADIUS ;
vy = 0;
}
/* Draw frame */
// Clear canvas
clear();
// Draw canvas background
canvas_ctx.fillStyle = "rgba(255, 255, 0, .2)";
rect( 0, 0, WIDTH, HEIGHT );
/* Draw circle // Circle color */
canvas_ctx.fillStyle = "#FF0000";
circle( x, y, RADIUS );
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<script type="text/javascript">
var canvas_ctx; // HTML canvas 2d context
var DISTANCE_FACTOR = .1; // Factor to adjust accelerometer values to screen distance. Cordova 1.6 changed to values to be Android compatible which appeared to be * 10. For Cordova 1.5 make this value 1.
var ax = 0; // Acceleration x axis (Accelerometer value adjusted for direction)
var ay = 0; // Acceleration y axis (Accelerometer value adjusted for direction)
var x; // Circle x position
var y; // Circle y position
var vx = 0; // Velocity x axis
var vy = 0; // Velocity y axis
var WIDTH = 320; // Width of canvas
var HEIGHT = 300; // Height of canvas
var RADIUS = 10; // Width of circle object
var watchID = null; // Accelerometer.watchAcceleration return value.
/* DOM body onload event callback */
document.addEventListener("deviceready", onDeviceReady, false);
/* Cordova has been initialized and is ready to roll */
function onDeviceReady()
{
/* Initialize canvas and animation */
var canvas = document.getElementById("canvas");
canvas_ctx = canvas.getContext("2d");
// Center
x = WIDTH / 2 ;
y = HEIGHT/ 2 ;
/* Steps to start animation play */
vx = 0;
vy = 0;
startWatch();
// Draw time interval.
setInterval(draw, 30);
}
/* Start watching the accelerometer */
function startWatch()
{
// Canvas redraw speed in milliseconds and accelerometer frequency
var options = { frequency: 30 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
// Stop watching the accelerometer
function stopWatch()
{
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
/* Accelerometer data callback */
function onSuccess( acceleration )
{
// Set drawing acceleration values
ax = acceleration.x * DISTANCE_FACTOR * -1; // -1 to change direction for Cordova 1.6. Removed for Cordova 1.5.
ay = acceleration.y * DISTANCE_FACTOR ;// Add * -1 for Cordova 1.5;
}
/* Accelerometer error callback */
function onError()
{
alert("Accelerometer Error");
}
/* Draw circle */
function circle( x, y, r )
{
canvas_ctx.beginPath();
canvas_ctx.arc(x, y, r, 0, Math.PI*2, true);
canvas_ctx.fill();
}
/* Draw rectangle */
function rect( x, y, w, h )
{
canvas_ctx.beginPath();
canvas_ctx.rect(x,y,w,h);
canvas_ctx.closePath();
canvas_ctx.fill();
}
/* Clear canvas */
function clear()
{
canvas_ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
/* Compute drawing metrics and draw frame */
function draw()
{
// Increase velocity by acceleration
vx += ax;
vy += ay;
// Update circle drawing position.
x += vx;
y += vy;
/* Boundaries testing */
// Right boundary
if ( x + RADIUS > WIDTH )
{
x = WIDTH - RADIUS ;
vx = 0;
}
// Left boundary
if (x - RADIUS <= 0)
{
x = RADIUS ;
vx = 0;
}
// Bottom boundary
if (y + RADIUS > HEIGHT)
{
y = HEIGHT - RADIUS ;
vy = 0;
}
// Top boundary
if (y - RADIUS <= 0)
{
y = RADIUS ;
vy = 0;
}
/* Draw frame */
// Clear canvas
clear();
// Draw canvas background
canvas_ctx.fillStyle = "rgba(255, 255, 0, .2)";;
rect( 0, 0, WIDTH, HEIGHT );
/* Draw circle // Circle color */
canvas_ctx.fillStyle = "#FF0000";
circle( x, y, RADIUS );
}
</script>
</head>
<body>
<div>
<h3>Accelerometer + HTML5 Canvas</h3>
<canvas id="canvas" width="320" height="300">
This text is displayed if your browser
does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment