Silverback9

네~^^* 돌아왔습니다~~^^* 비가 내려서 선선하면서도 역시 봄은 봄이다 싶은 따뜻한 기운을 품고 있는 저녁입니다~^^*

아침에 말씀드린 대로, 마우스로 또는 손가락으로 불사조 피닉스 비행기를 조종하는 프로그램을 만들어 보겠습니다~^^*

제053일 코딩 공부 내용 중 함수 map()의 기능을 활용했던 것 기억하시나요? 좌표의 범위를 특정 범위로 바꾸는 것이었는데요. 이 함수를 활용해서, 캔버스 화면 위 마우스의 x좌표 범위를 (0 <-> width)에서 (-0.2 <-> 0.2)범위로 바꾸어 보겠습니다. 즉, 마우스가 왼쪽 끝에 있으면 -0.2 오른쪽 끝에 있으면 0.2의 값을 가지게 되는 것이지요.

p5.js 좌표에서 양의 회전각은 시계방향으로 음의 회전각은 반시계방향이 된다는 것을 다시 한번 떠올려 보면 좋을 것 같아요. 이것을 응용해서, 마우스로 물체를 조종해 볼까요~^^*

마우스를 캔버스 왼쪽/오른쪽 살짝살짝 번갈아 위치시키면, 왼발/오른발 번갈아 내딛으며 몸을 살짝살짝 시계방향/반시계방향으로 번갈아 틀면서 앞으로 걸어가는 우리들처럼, 물체도 전진하게 될 것 같아요.

그리고, 마우스를 캔버스 왼쪽/오른쪽 한 곳에 오래 두면, 시계방향/반시계방향으로 짧게는 U턴, 길게는 공전운동을 하게 될 것 같은데, 어떠셔요? 우리 같이 확인해 볼까요~~^^*

class Mover{
  constructor(x,y,m, r, g, b){
    this.pos = createVector(x,y);
    this.vel = createVector(0,0);
    this.mass = m;
    this.r = sqrt(this.mass)*2; 
    this.Red = r;
    this.Green = g;
    this.Blue = b;
    
    this.angle = PI/2;
    //초기 회전각크기는 파이/2 라디안 즉 90도로 잡아봅시다~^^* 양의 회전각이니까,시계방향 회전각이 되어, 맨처음에는 6시 방향을 향하게 되겠네요? 
  }
  
 update(){
 
    this.vel = p5.Vector.fromAngle(this.angle);
    
    //회전각 크기로부터 속도 벡터의 x,y 축 길이를 구하여 속도 벡터를 생성합니다.   
    this.pos.add(this.vel);
   // 속도 벡터를 위치 벡터에 더하여, 삼각형을 위치 이동시킵니다.  
    
  }
  
  show(){
    stroke(this.Red,this.Green,this.Blue);
    strokeWeight(2);
    fill(this.Red,this.Green,this.Blue,100);
    
    translate(this.pos.x, this.pos.y);
    //이 물체의 중점을 원점으로 하는 상대좌표체계로 바뀝니다.   
    rotate(this.angle);
    //이 물체의 회전각 값만큼 좌표체계가 회전합니다. 
    triangle(-this.r,-this.r/2,-this.r,this.r/2,this.r,0);
    //날씬한 삼각형을 그립니다.  
     
    this.angle += map(mouseX, 0, width, -0.02, 0.02);
    // 마우스 또는 손가락이 캔버스 화면 왼편에 있으면 반시계방향 회전, 오른편에 있으면 시계방향 회전을 합니다. 
    // 물체의 꼭지점 근처에서 마우스/손가락을 왼쪽/오른쪽 살짝살짝 번갈아 움직이면 반시계방향/시계방향 회전을 조금조금씩 하면서 앞으로 나아갑니다. 
   // 마우스/손가락을 왼쪽/오른쪽 오래 머물면 회전을 많이 해서 U턴 효과를 줄 수 있습니다.  
   //은근히 재미있습니다!!!와우!!! 
          
  }
}

let Avion;

function setup() {
  
  createCanvas(400,400);
  //좌표체계의 원점(0,0)은 캔버스 왼편 위쪽 모서리에 있습니다. 
  
  Avion = new Mover(200,100,500, 255, 0,0);
  //불사조 피닉스 비행기를 만들어 봅시다~^^* 
}

function draw() {
  background(0);
 
  Avion.update();
  Avion.show();
}

이것을 클릭하여, mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시키고, 마우스/손가락으로 불사조 피닉스 비행기를 조종해 보셔요~ 우리는 비행기 원격조종도 잘 해내는 멋진 독수리5형제~~^^* 사각형을 눌러 종료하시구요~^^* 연습이 대가를 만든다! 운전에 자신감이 붙을 때까지 반복연습을 해볼까요~^^* YEAH!!!

비행기 운전도 멋지게 해내는 우리! 또 어떤 것을 운전할 수 있을까요? 캐리어 가방은 어때요~~^^*

내일부터 시작될 새로운 한 주도 멋지게 운전해 봐요, 우리~^^*

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

우리 내일 아침엔 함께 음악듣는 거예요~~^^*

넵, 꿈은 이루어 집니다~~~!!