Let’s take a look at the Chumby accelerometer. It’s the thing inside Chumby that tells it if it’s looking up or down, sideways, or up-side-down. It also detects sudden changes in acceleration. It’s basically an electronic inner ear. So if you shake Chumby, knock him on the side of the head, or drop him on the floor, the accelerometer will detect this and report how hard and in what direction the jolt happened. Disclaimer: I do not recommend or endorse violent behavior to Chumby, including hitting, shaking, throwing, or dropping.

If you’re familiar with Actionscript, you know that it’s pretty easy to find the position of the mouse cursor on the stage. Well, it’s also easy to get data from the accelerometer. The trick, however, is making use of it. Let’s take a look.

1
2
3

var accel:Function = _global.ASnative(5,60);
var tiltX:Number = accel(5);
var tiltZ:Number = accel(7);

In the above script, line 1 creates a function called accel. The next lines each call this function, passing an index which returns a piece of data from the accelerometer. The table to the left describes what the passed index will return.

The code above, if modified to print to the screen, would show two unsigned integers. I’ve read that Classic Chumbies have a range of about 1200 to 2800 and a middle value of 2000 for all three axes, but Chumby Ones (which I have) have a different accelerometer. I have not found any documentation on the accelerometer in a Chumby One, but from playing with the code on my Chumby, I found a range from about 1200 to 2600 for avgX and avgY, and 1400 to 2800 for avgZ. That puts the middle at 1900 for X and Y, and 2100 for Z. Now what do these numbers mean?

Sit Chumby flat on the table and imagine the x axis pointing out to the left. As you tilt Chumby clockwise, the x axis moves up. Tilting Chumby counterclockwise moves the x axis down. Imagine the y axis coming straight out of the screen. Tilt Chumby back to increase its value, and forward to decrease its value. My testing suggests that the x and y axes have the same range. At Chumby’s default orientaion (sitting flat on a level table), x and y are on the equator of an imaginary globe and the z axis points to the north pole.

With the z axis coming out of the top of Chumby, its value is already at the maximum. Tilting Chumby in any direction will decrease its value. Again, my testing suggests that the maximum value is 2800 and the minimum is 1400, making the middle at 2100.

OK, so now that we better understand what these numbers mean, lets make them a little more useful. If we subtract the middle value from each axis, we’ll get a range from -700 to +700. We can also divide by 700 to get a nice range of -1 to 1.

Putting it to use

Let’s try it out. Start a new Chumby widget in Flash (320 x 240, 12 fps, Flash 8, AS2). Create a movie clip of a ball that is 40×40 pixles and centered on the origin. Put it on the stage and name it marble_mc. Then copy this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

var accel:Function = _global.ASnative(5,60);
var velX:Number = 0;
var velY:Number = 0;
 
onEnterFrame = function(){
	//get the x and z tilt
	var tiltX:Number = accel(5);
	var tiltZ:Number = accel(7);
 
	//normalize (for chumby one. classic is different)
	tiltX = (tiltX - 1910) / 20;
	tiltZ = (tiltZ - 2020) / 20;
 
	//update the velocity
	velX += Number(tiltX);
	velY += Number(tiltZ);
 
	//update the marble position
	marble_mc._x += velX;
	marble_mc._y += velY;
 
	//collisions
	if(marble_mc._x <= 20){
 		marble_mc._x = 20;
 		velX = 0;
 	}
 	else if(marble_mc._x >= 300){
		marble_mc._x = 300;
		velX = 0;
	}
	if(marble_mc._y <= 20){
 		marble_mc._y = 20;
 		velY = 0;
 	}
 	else if(marble_mc._y >= 220){
		marble_mc._y = 220;
		velY = 0;
	}
}

Publish the Flash file and put it on your Chumby. (You can do this using a USB Flash drive or upload it to Chumby.com.) This widget will show your marble rolling around on the screen. Hold Chumby with the screen stright up. This will put the x and z axes on the imaginary equator and the y axis at the north pole. Let’s look at the code.

First, we set up the function to access the accelerometer and initialize some variables. Then we have a function that gets executed every frame. In the function we get the value of the x and z axes (those are on the equator). We need to make the values more useful so we subtract the middle value and divide to make it smaller.

After some trial and error I found the equasions in the code above to be pretty good (lines 11 and 12). You may need to adjust the number being subtracted if the marble is biased to one side or the other. Also, I found that dividing by 20 gives a realistic feel.

Next, we update the velocity variables and add the velocity to the marble’s position. And finally, we make sure that the marble doesn’t roll away by constraining it to the boundaries of the screen.

You can further this script by adding some textfields to show the tilt values. Or you could make a game out of it by placing another object at a random position, into which you try to collide.

See, that wasn’t so hard. You can download the FLA and SWF files below. If you try it out or if you have used the accelerometer before, please write in the comments what you found to be your min, max and middle values for each axis.

marble.fla
marble.swf

This entry was posted by Kris on Friday, March 26th, 2010 at 9:07 am and is filed under Code Logic. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Tags: AS3, Chumby, Flash, Games, tutorial, widget