3

I'm building a smartphone javascript application but my question today is really only math related. To give you a quick idea of what I'm doing, my code checks the smartphone's gyroscope to determine how much it is rotated. Based on that rotation, it's supposed to pan a background image around. So in the image below, the red box is stationary, while the photo is supposed to pan around in the background as you rotate your device.

enter image description here

Anyway, here's the math problem (focusing only on moving the X axis):

  • The gyroscope gives a reading of 0 to 360
  • The photo in the background gets moved from the top left, so its max and min values are 0 to -100
  • Therefore the formula for how much to move the image based on the device rotation would be a simple ratio: (Gyroscope Reading * -100)/360
  • However, I don't want people to need to turn their device all the way over to achieve the full animation, so I'm only interested in the gyroscope readings of about 140 to 220.
  • So, what formula would achieve 140 = 0 and 220 = -100? The formula should maintain the ratio for all points in between.
kthornbloom
  • 133
  • See http://math.stackexchange.com/questions/500027/percentage-to-absolute-value-within-another-range/500072#500072 also note that we have $220-140$ and $0-(-100)$ involved, and the only trick may be determining which direction to pan upon a given movement. – abiessu Oct 15 '13 at 17:40

1 Answers1

1

You want a line that goes through $(140,0)$ and $(220,-100)$. The two point form says it is $y-0=\frac {-100-0}{220-140}(x-140)$. $x$ is the gyro, $y$ the output. I left the constants so you could match them up with the equation in case you want to change them in the future.

Ross Millikan
  • 374,822