Silverback9

오늘은 마우스 또는 손가락을 움직여 우리의 사각형의 회전 운동을 조절하는 프로그램을 만들어 보겠습니다~^^*

아래 동영상 강의를 클릭하시면 오늘 공부를 바로 시작(3:10)하실 수 있어요~^^* 4:50까지 보시면 오늘 공부 끝~^^*

하나. 마우스를 움직여 각 가속도의 값을 조정해 보겠습니다.

함수 map()을 사용해 보겠습니다. mouse의 X 좌표값의 최소 최대 값을 적절하게 설정할 수 있습니다.

둘. 각 가속도의 값에 영향받는 각 속도의 값을 조정해 보겠습니다.

함수 constrain()을 사용해 보겠습니다. 각 속도값의 최소 최대 값을 적절하게 설정할 수 있습니다.

let angle = 0;
let angleV = 0;
let angleA = 0;

function setup() {
  createCanvas(400, 400); 
  angleMode(RADIANS);
}

function draw() {
  
  angleA = map(mouseX, 0, width, -0.01, 0.01);
  //마우스의 좌표의 위치값 0부터 width까지의 값을 -0.01부터 0.01까지로 각각 대응하게 만듭니다. 마우스가 화면 제일 왼쪽에 있으면 angleA 값에 -0.01를 넣고, 제일 오른쪽에 있으면 0.01을 넣게 됩니다.  
  
  angleV = constrain(angleV, -0.2, 0.2);
  //angleA 값에 angleV 값이 변하므로, angleV의 값 변화가 너무 크지 않도록, -0.2 ~ 0.2 사이로 제한합니다. 
  
  background(146, 83, 161);
  noStroke();
  fill(246, 99, 164);  
  rectMode(CENTER);
  translate(200, 200); 
  rotate(angle);
  rect(0, 0, 256, 31);
  
  angle += angleV;
  angleV += angleA; 
  //angleA의 값은 마우스 위치에 따라 결정된다는 것 기억하시죠~^^*
}  

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행해 보셔요~^^* 마우스 또는 손가락을 화면 위에서 좌우로 움직이며 사각형의 회전 방향의 변화를 살펴 보셔요~^^* 화면 왼쪽에 가면 사각형이 반시계방향으로 화면 오른쪽으로 가면 시계방향으로 회전하게 되나요~^^* 은근 재미있는 것 같아요~^^* 네~^^* 종료는 사각형~^^*

뭔가 상호작용이 되는 프로그램이 완성되었네요~^^* 코딩 공부가 점점 재미있어지는 것 같아요~^^*

바퀴를 오른쪽으로 왼쪽으로 자유자재로 돌리는 재미~^^* 마법의 바퀴를 돌려 볼까요~^^*

오늘도 함께 코딩 공부해 주셔서 감사합니다~^^*

내일 또 우리 만나요~^^* 넵, 꿈은 이루어 집니다~^^* YEAH!!!