[JavaScript] 자바스크립트에서 자이로(Gyro) 센서와 가속도 센서 사용하기

242_자바스크립트에서 자이로(Gyro) 센서와 가속도 센서 사용하기

[적용]

• 기울기를 확인하고 싶을 때
• 방향을 확인하고 싶을 때
• 가속도를 확인하고 싶을 때

---

[문법 1]

속성	의미	타입
event.beta	X 축 기울기	숫자
event.gamma	Y 축 기울기	숫자
event.alpha	Z 축 기울기	숫자

[문법 2]

속성	의미	타입
event.acceleration.x	X 축 가속도	숫자
event.acceleration.y	Y 축 가속도	숫자
event.acceleration.z	Z 축 가속도	숫자

---

[내용]

자이로 센서(기울기)

자이로 센서는 기울기(회전)을 검출하는 센서다.

스마트폰을 가로 혹은 세로로 움직이면 센서가 인지하여

디스플레이를 가로 화면 혹은 세로 화면으로 전환하는 작업 등에 사용한다.

엑세스는 DeviceOrientation 이벤트로 가능하며, X, Y, Z 축의 값을 가져오기 위해서는 다음과 같이

window 객체의 deviceorientation 이벤트를 감시한다.

 

JavaScript                                                                                                                           

// DeviceOrientation 이벤트
window.addEventListener('deviceorientation', deviceorientationHandler);

// 자이로 센서 값 변화
function deviceorientationHandler(event) {
  // X축
  const beta = event.beta;
  // Y축
  const gamma = event.gamma;
  // Z축
  const alpha = event.alpha;
}

실행결과

X : 28.47654324575

Y : -10.557321454355

Z : -130.0675432245

 

자이로 센서(방향)

자이로 센서로 방향의 확인도 가능하다.

나침반 샘플을 확인해 보자.

 

사파리(Safari) 에서는 event.WebkitCompassHeading을 사용해 방향을 확인할 수 있지만,

다른 스마트폰에서는 해당 기능을 사용할 수 없다.

다른 스마트폰 환경에서 방향을 확인하려면 자이로 센서의 기울기 값을 이용해 방향을 산출하는 방식을 사용한다.

해당 로직은 W3C의 'DeviceOrientation Event Specification

(https://w3c.gitbub.io/deviceorientation/)'에 공개되어 있다.

 

다음 소스 코드에서 0~360까지의 각도를 숫자 값으로 가져오며,

0도는 북, 90도는 동, 180도는 남, 270도는 서쪽을 의미한다.

 

JavaScript                                                                                                                                        

function getCompassHeading(alpha, beta, gamma) {
  const degtorad = Math.PI / 100;
  
  const _x = beta ? beta * degtorad : 0;
  const _y = gamma ? gamma * degtorad : 0;
  const _z = alpha ? alpha * degtorad : 0;
  
  const cY = Math.cos(_y);
  const cZ = Math.cos(_z);
  const sX = Math.sin(_x);
  const sY = Math.sin(_y);
  const sZ = Math.sin(_z);
  
  const Vx = -cZ * sY - sZ * sX * cY;
  const Vy = -sZ * sY + cZ * sX * cY;
  
  let compassHeading = Math.atan(Vx / Vy);
  
  if (Vy < 0) {
    compassHeading += Math.PI;
  } else if (Vx < 0) {
    compassHeading += 2 * Math.PI;
  }
  
  return compassHeading * (180 / Math.PI);
  
}

 

자이로 센서(관성)

가속도 센서는 일정 시간 내 속도의 방향과 변화를 검출하는 센서로

스마트폰은 XYZ의 세 방향을 검출할 수 있는 3축 가속도 센서를 주로 사용한다.

스파트폰이 떨어져서 물체에 부딪히는 것 등을 인식하는데 사용하며, 액세스는 DeviceMotion 이벤트를 사용한다.

 

다음은 스마트폰을 위, 아래, 좌, 우로 흔드는 방향에 따라 화살표가 해당 방향을 가리키는 샘플이다.

X, Y, Z 축의 값을 가져오기 위해서는 window 객체의devicemotion 이벤트를 감시한다.

 

JavaScript        

// DeviceMotion 이벤트
window.addEventListener('devicemotion', devicemotionHandler);

// 가속도 변화
function devicemotionHandler(event) {
  // 가속도
  // X축
  const x = event.acceleration.x;
  // Y축
  const y = event.acceleration.y;
  // Z축
  const z = event.acceleration.z;
}

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김