Silverback9

#야생으로

Creative Coding 독학 제087일 2024년06월22일(토)

오늘은 어제 만든 용수철과 추를 모두 벡터로 변환해 보겠습니다!!!

참 오래간만이죠~~~^^* 벡터~~~!!! 반가워요~~~!!!

오래간만에 컴백한 우리 벡터~! 뜨거운 환호와 큰 박수로 맞이해 주세요~~~~~~^^*

와~~~~^^* Yeah~~~~^^*

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(7:17)하실 수 있어요~~^^* 11:37까지 보시면 오늘 공부 끝~~^^*

어제의 프로그램과 동작 원리가 똑 같기 때문에, 코드를 바로 살펴 보도록 하겠습니다~~^^*

let anchor;
//용수철이 걸려 있는 곳입니다. 벡터로 만들어 보겠습니다. 

let bob;
//추가 매달려 있는 곳입니다. 벡터로 만들어 보겠습니다.

let velocity;
//추의 운동속도입니다. 벡터로 만들어 보겠습니다. 


let restlength = 200; 
//잡아당기지 않았을 때의 추의 위치입니다. 용수철 원래길이가 되겠네요.

let k = 0.01;
//용수철의 탄성계수를 0.01로 잡아보겠습니다. 


function setup() {
  createCanvas(400, 400);
  
  anchor = createVector(200, 0);
  //캔버스 정중앙 상단에 용수철을 걸어 보겠습니다. 
  
  bob = createVector(200, 350);
  //추는 현재 위치 y 좌표가 350입니다. 
  
  velocity = createVector(0,0);
  //현재 추는 움직이지 않고 있습니다. 
  
}

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);
  //벡터 force는 용수철을 아래로 잡아당기는 힘을 표현합니다. 
  //벡터 bob에서 벡터 anchor를 빼서 벡터 force에 저장합니다.   
  // 두 벡터의 x좌표 값은 동일하고, y좌표 값만 다르기 때문에, y 좌표 값의 차이가 벡터 뺄셈의 결과값입니다. 
  //용수철이 매달린 곳에서 추가 현재 있는 곳까지 용수철을 늘인 힘을 표현합니다. 벡터 force의 방향은 아래로 향하고,크기는 350-0 = 350이 되겠네요.
  
  let x = force.mag() - restlength;
  // 용수철이 늘어난 상태의 용수철 전체 길이에서, 용수철이 늘어나지 않았을 때의 용수철 원래 길이값을 빼서 벡터 x에 저장합니다. 
  //힘에 의한 용수철의 길이 변화량이 되겠네요. extention/displacement를 나타내는 것이 되겠네요. 
  
  force.normalize();
  //벡터 force를 단위벡터로 만듭니다. 벡터의 크기는 1입니다. 벡터의 방향만 의미를 갖게 되네요. 아래로 향합니다. 
  
  force.mult(-1*k*x);
  //용수철을 잡아당기는 힘은, 용수철의 탄성계수에 비례하고, 용수철이 늘어난 길이에도 비례합니다. 곱셈관계입니다. 
  //용수철을 잡아당기는 힘의 방향은 아래로 향하고 있습니다.
  //원래 위치로 되돌아가려는 용수철의 힘은 위를 향하게 됩니다. 
  //그래서 (-1)을 곱해줍니다. 
  //이제 벡터 force는 원래의 자리로 돌아가기 위해 위쪽을  용수철의 힘을 표현하게 되었습니다.  
  
  velocity.add(force);
  //F = MA 관계식에서, 질량 M을 1로 처리하면, 힘 F = 가속도 A가 됩니다. 
  //그래서, 벡터 force를 추의 운동가속도라고 생각하고, 추의 운동 속도 벡터 velocity에 더합니다. 
  
  bob.add(velocity);
  //추의 운동 속도 벡터 velocity를 추의 위치 벡터 bob에 더합니다. 
  
  velocity.mult(0.99);
  //공기저항을 반영하여, 추의 운동 속도 벡터 velocity를 조금씩 줄여나갑니다.

}

벡터야 반갑구나~~라고 외치며 클릭해 주세요~~~!!!!

같은 내용을 새로운 정보 형태에 담아보는 시간이었습니다~~^^*.

어제와 비슷하지만 어제와는 다를 오늘 같기도 하네요~~^^* 새로워진 듯한 이 좋은 기분으로~~ Brand New~~한 하루 시작해 볼까요~~^^*

오늘은 비가 오곤 하네요. 비를 맞으며 들판의 풀들이 촉촉하게~ 소들이 무럭무럭~ 자라는 하루가 될 것 같아요. 평화로운 하루 보내셔요~~^^*

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

내일 또 우리 만나는 거예요~~~~^^*

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

댓글 남기기