Silverback9

오늘은 동그라미가 마우스를 바라보는 각도를 direction으로 가지며 임의로 고정된 길이값을 magnitude로 가진 벡터를 acceleration 벡터로 삼아서, 동그라미가 마우스에 반응하여 움직이는 모양을 표현하는 프로그램을 만들어 봅니다. acceleration 벡터의 방향은 그대로 두고, 길이값, 즉, magnitude를 다양하게 조정하여, 동그라미가 마우스에 반응하여 움직이는 양상을 변화시켜 볼까요?

아래의 동영상을 클릭하시면 오늘 공부 주제로 바로 시작하실 수 있습니다. 노트를 참조 하셔도 좋을 듯 합니다^^*.

하나. acceleration의 magnitude를 아주 작게 조정하여 봅시다.

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = p5.Vector.random2D(); 
    this.vel.mult(random(3)); 
  }
  update(){
    let mouse = createVector(mouseX, mouseY);
      //마우스 위치값을 가진 벡터 mouse를 생성함
    this.acc = p5.Vector.sub(mouse, this.pos);
      //마우스와 동그라미 사이의 거리값과 방향을 가진 벡터 acc를 생성함
    this.acc.setMag(0.1);
      //벡터 acc의 길이값 즉 magnitude를 0.1로 조정함
    
    this.vel.add(this.acc); 
    this.pos.add(this.vel); 
    
    //마우스와 동그라미를 잇는 가상의 선이 동그라미의 움직임 방향과 수직이 될 수 있도록 마우스 위치를 천천히 바꾸어 보면 동그라미가 마우스 주위를 돌며 따라 오는 것이 보일 것이다.     
  }
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255, 100);
    ellipse(this.pos.x, this.pos.y,32);
  }
}

이것을 클릭하여 mover.js 파일을 열어 코드를 살펴 보세요. 삼각형을 눌러 프로그램을 실행시켜 마우스를 살살 잘 움직여 보시며 동그라미의 운동 형태를 관찰해 보세요. 종료를 위해서는? 그렇죠! 사각형을 클릭하셔요~^^*

둘. acceleration의 magnitude를 크게 키우고 velocity의 magnitude를 2 이하로 제한해 봅시다.

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = p5.Vector.random2D(); 
    this.vel.mult(random(3)); 
  }
  update(){
    let mouse = createVector(mouseX, mouseY);
    this.acc = p5.Vector.sub(mouse, this.pos);
   
    this.acc.setMag(5);
      //벡터 acc의 magnitude를 5로 키움. 
    
    this.vel.add(this.acc);
    
    this.vel.limit(2);
    //벡터 acc의 magnitude가 크므로, 벡터 vel의 magnitude를 2이하로 제한하여 동그라미의 움직임을 조절함. 
    
    this.pos.add(this.vel); 
    
    //마우스의 움직임에 동그라미가 매우 민감하게 반응하여 따라 움직이다 마우스가 멈추면 마우스 위치에 함께 머무르려고 함.      
  }
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255, 100);
    ellipse(this.pos.x, this.pos.y,32);
  }
}

https://editor.p5js.org/a이것을 클릭하여 mover.js 파일을 열어 코드를 살펴 보세요. 삼각형을 눌러 프로그램을 실행시켜 마우스를 움직이며 동그라미가 얼마나 충실히 여러분 손끝을 따르는지 보시며 “아이 기특해~” 감탄해 보세요! 사각형을 눌러 종료하시구요~^^*.

셋. accelerationd의 mangnitude는 살짝 줄이고 velocity의 magnitude는 키워 봅시다.

class Mover{
  constructor(x,y){
    this.pos = createVector(x,y);
    this.vel = p5.Vector.random2D(); 
    this.vel.mult(random(3)); 
  }
  update(){
    let mouse = createVector(mouseX, mouseY);
    this.acc = p5.Vector.sub(mouse, this.pos);
   
    this.acc.setMag(1);
      //벡터 acc의 magnitude를 1로 줄임. 
    
    this.vel.add(this.acc);
    
    this.vel.limit(5);
    //벡터 acc의 magnitude를 줄이고, 벡터 vel의 magnitude의 한계치를 5로 키워서 동그라미의 움직임을 조절함. 
    
    this.pos.add(this.vel); 
    
    //마우스의 움직임에 동그라미가 반응하여 따라 움직이다 마우스가 멈추면 마우스 위치에 함께 머무르려고 하는데, 그 움직임 자체가 매우 활기참. 동그라미야, 너 강아지니?^^* 
  }
  show(){
    stroke(255);
    strokeWeight(2);
    fill(255, 100);
    ellipse(this.pos.x, this.pos.y,32);
  }
}

이것을 클릭하여 mover.js 파일을 열어 코드를 살펴보시고, 삼각형을 눌러 프로그램을 실행하셔서 마우스를 움직여 동그라미가 움직이는 형태를 관찰해 보세요. 우리 강아지~ 동그라미~와 즐거운 시간 보내시고, 사각형을 눌러 종료하세요~^^*

이제 우리는 뉴턴의 F = M*A를 다룰 수 있는 기초 체력을 키워냈습니다. 수고 많으셨어요. 성장을 축하하며 계속 또 걸어가 볼까요? ~^^*