Silverback9

오늘은 드디어!!! 스프링에 매달린 추가 중력의 영향을 받으며 움직이는 것을 표현해 보겠습니다!!!

어제의 프로그램에서는 잡아당겨진 용수철이 원래의 자리로 돌아가려는 힘이 추의 운동 가속도가 되어 추의 운동 속도에 영향을 주었는데요.

오늘은, 중력도 추의 운동 가속도가 되어 추의 운동 속도에 영향을 줄 것입니다.

네, 추의 운동에 영향을 주는 힘이 두 개가 된 것이지요.

아래 동영상을 클릭하시면 오늘 공부 내용을 바로 시작(11:55)하실 수 있어요. 13:53까지 보시면 오늘 공부 끝~~^^*

어제 코드에서 첨가된 내용들은 주석으로 설명을 덧붙였습니다. 같이 보시죠~~^^*

let anchor;
let bob;
let velocity;

let gravity;
//중력을 반영해 보겠습니다. 

let restlength = 200; 
let k = 0.01; 


function setup() {
  createCanvas(400, 400);
  anchor = createVector(200, 0);
   
  bob = createVector(400, 350);
  //추는 현재 오른쪽 끝부분에 위치 합니다. 
  
  velocity = createVector(0,0);
   
  gravity = createVector(0, 0.1);
  //중력은 아래쪽을 향합니다. 
  
}

function draw() {
  background(220);
  strokeWeight(4);
  stroke(255);
  fill(125, 255, 125);
  
  line(anchor.x, anchor.y, bob.x, bob.y); 
  circle(anchor.x, anchor.y, 32);  
  circle(bob.x, bob.y, 64);
  let force = p5.Vector.sub(bob, anchor);
  let x = force.mag() - restlength;
  force.normalize();
  force.mult(-1*k*x);
  velocity.add(force); 
    
  velocity.add(gravity);
  // F(gravity) = M * Acceleration
  // M = 1: F(gravity) = Acceleration
  //중력을 추의 운동가속도 요소라고 생각하고, 벡터 gravity를 추의 운동 속도 벡터 velocity에 더해 보겠습니다. 
  
  bob.add(velocity);
  velocity.mult(0.999);

}

캔버스 화면 오른쪽 끝으로 잡아 당겨진 우리의 추는 이제 어떻게 움직이게 될까요~~^^* 궁금하시죠~~~? 그렇다면 지금 바로!!! 클릭하세요~~~^^*

그런데, 저는, 진자 운동에서 추에 영향을 주었던 힘은 중력을 빗변으로 하는 삼각함수와 관련이 있었던 것이 생각이 나서요… 순수한 중력을 추의 운동가속도 요소로 사용해도 되는 지를 잘 모르겠어요….

이 부분은 좀 더 고민해 보고 싶어요….

근데요!!!

아직 재미있는 것이 하나 더 남아 있어요!!!!

추의 위치를 우리가 자유롭게 정하면 어떨까요? 재미있겠지요~~~^^*

우리가 캔버스 화면 위 마우스/손가락을 클릭하는 곳에서 추가 움직이기 시작하도록 만들어 볼게요~~^^*

이와 관련된 구문은~~~^^* if(mouseIsPressed){} 예요~~^^*

코드를 우리 함께 살펴 볼까요~~^^*

let anchor;
let bob;
let velocity;
let gravity;
let restlength = 200; 
let k = 0.01; 

function setup() {
  createCanvas(400, 400);
  anchor = createVector(200, 0);
   
  bob = createVector(200, 350);
  //추는 아래를 향합니다. 
  
  velocity = createVector(0,0);
  gravity = createVector(0, 0.1);
}

function draw() {
  background(220);
  strokeWeight(4);
  stroke(255);
  fill(125, 255, 125);
  line(anchor.x, anchor.y, bob.x, bob.y); 
  circle(anchor.x, anchor.y, 32);  
  circle(bob.x, bob.y, 64);
  
  if(mouseIsPressed) {
    bob.x = mouseX;
    bob.y = mouseY;
    velocity.set(0,0);
  }
  //마우스/손가락이 클릭되는 곳에 추가 위치하며, 운동속도가 0인 상태로, 새롭게 움직입니다. 
  
  let force = p5.Vector.sub(bob, anchor);
  let x = force.mag() - restlength;
  force.normalize();
  force.mult(-1*k*x);
  velocity.add(force); 
  velocity.add(gravity);
  bob.add(velocity);
  velocity.mult(0.999);

}

우리의 마우스/손가락과 상호작용하는 기특한 추를 만나보러 가실까요~~^^*

마우스/손가락이 클릭하는 위치에 따라, 추의 운동 모습이 달라지는 것이 느껴지시나요?

restlength가 200이라서, 한가운데를 클릭하면 추가 거의 움직이지 않고, 위로 많이 올라간 곳이나 아래로 많이 내려간 곳을 클릭하면 추가 많이 움직이는 것이 느껴지시나요?

용수철의 운동 특성을 잘 보여주고 있나요?

용수철은 원래의 자신의 길이로 회복되려는 힘을 발휘하기 때문에, 많이 누르거나 많이 잡아 당기면, 용수철 힘이 많이 커지고, 그에 따라 추의 운동가속도도 커져서 그런 것 같아요~~^^*

일요일 밤이네요~~^^* 한 주의 끝이기도 하고 한 주의 시작이기도 한 밤이네요~~^^*

용수철처럼 회복탄력성 발휘하는 밤 보내시고, 개운한 내일 아침을 맞이하시기 바래요~^^*

우리의 몸와 마음을 회복시켜 주는 고마운 존재들께 마음 속 밤인사를 나누고, 코~~^^*

그리고~~^^*

우리 내일 아침엔 함께 음악 들어요~~~^^*

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

네! 꿈은 이루어 집니다!!!