使用陀螺仪使用 Javascript 或 jQuery 循环所有 RGB 颜色

Question

我需要使用陀螺仪让一个元素（文本或背景）循环显示所有可用的 RGB 颜色。

我设法找到了一些与使用设备方向生成值相关的文章。

http://matthewlehner.net/ios-7-style-parallax-background-based-on-device-orientation/

我将如何使用此数据循环显示 RGB 颜色值并将其显示在元素上，以便它随着 phone 旋转而改变颜色？

非常感谢任何帮助或指导。谢谢

Answer 1

据我了解，无法在当前环境中测试陀螺仪事件，您要做的是将 alpha、beta 和 gamma 映射到 R、G 和 B 相应。为此，您应该将这些值的范围映射到 RGB 范围 [0,255]。使用通用 Map Range 函数和您 link 中提到的范围，我构建了一个快速演示，您可以在下面看到它。我还提供了测试样品，看看它是否有效，看起来还不错：

// Map range of numbers to another range of numbers
var mapRange = function(from, to, s) {
  return to[0] + (s - from[0]) * (to[1] - to[0]) / (from[1] - from[0]);
};
// Your event listener and logic 
window.addEventListener('deviceorientation', function(eventData) {
  // The compass direction - will return a value between 0 and 360
  var R = Math.round(mapRange([0, 360], [0, 255], eventData.alpha));

  // Side to side value - will return a value between -180 and 180
  var G = Math.round(mapRange([-180, 180], [0, 255], eventData.beta));

  // Front to back value - will return a value between -90 and 90
  var B = Math.round(mapRange([-90, 90], [0, 255], eventData.gamma));
  
  console.log(R, G, B); // Sample output, deal with these however you like
});

// Test 1
var eventDataSample1 = {
  alpha: 125,
  beta: -65,
  gamma: -2
}
var R = Math.round(mapRange([0, 360], [0, 255], eventDataSample1.alpha));
var G = Math.round(mapRange([-180, 180], [0, 255], eventDataSample1.beta));
var B = Math.round(mapRange([-90, 90], [0, 255], eventDataSample1.gamma));
console.log(R, G, B);

// Test 2
var eventDataSample2 = {
  alpha: 12,
  beta: 66,
  gamma: 17
}
var R = Math.round(mapRange([0, 360], [0, 255], eventDataSample2.alpha));
var G = Math.round(mapRange([-180, 180], [0, 255], eventDataSample2.beta));
var B = Math.round(mapRange([-90, 90], [0, 255], eventDataSample2.gamma));
console.log(R, G, B);

附带说明，您可以根据需要将这三个值映射到 HSL 值而不是 RGB，这很可能会产生更好的结果。

使用陀螺仪使用 Javascript 或 jQuery 循环所有 RGB 颜色

Using the gyroscope to cycle though all RGB colours using Javascript or jQuery

javascript

jquery

gyroscope