If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

2D 스프링 질량계

이제 시스템에 수평 분력을 더해 봅시다.

동영상 대본

여태까지 우리는 수직 모션에만 국한된 시뮬레이션에만 집중했어요 하지만 우리는 머리카락이 다양한 방향으로 움직이길 원하죠 그래서 코드를 변경해서 이차원적인 모션도 포함해야 하죠 아주 간단한 작업이에요 가지고 있는 변수들을 두 개씩으로 늘려서 X와 Y 요소가 둘 다 있어야 하니까요 지금으로써 우리는 최초 수직 위치 변수인 positionY밖에 없습니다 그래서 저는 positionX라는 변수를 추가할 거예요 속도의 수평적 요소를 저장하기 위해 새로운 변수를 하나 더 추가할 거예요 이 변수를 velocityX 라고 부를 거예요 최초 값은 velocityY와 똑같이 0으로 설정될 거예요 왜냐하면 처음에는 입자가 멈춰 있는 상태이기 때문이죠 이제 draw 함수로 가서 각 식을 복사하고 수평적 요소를 추가할 거예요 지금 springForceY는 있지만 springForceX는 없네요 지금 추가하죠 springForceX는 마이너스 k에 positionX 빼기 anchorX를 곱한 값이에요 이제 새로운 변수를 추가하고 dampingForceX라고 부를 거예요 이 변수는 damping 곱하기 velocityX로 설정할 거예요 이 새로운 변수들로 이제 저는 X 방향으로 작용하는 알짜힘을 계산해 forceX로 정의할 거예요 forceY와는 조금 다른데 이는 중력을 무시할 수 있기 때문입니다 왜냐하면 중력은 수직 방향으로만 작용하기 때문이죠 따라서 springX는 springForceX 빼기 dampingForceX와 같습니다 이제 가속도로 넘어가 보죠 accelerationX라는 새로운 변수를 추가할 거예요 이 변수는 forceX 나누기 mass와 동일합니다 결과적 속도에도 똑같은 방식을 적용할 거예요 새로운 변수인 velocityX를 추가하고 이는 velocityX 더하기 accelerationX 곱하기 timeStep입니다 마침내 우리는 위치를 업데이트해서 수평적 요소를 갖출 수 있게 합니다 positionX라는 변수를 이용하면 됩니다 이 변수는 positionX 더하기 velocityX 곱하기 timeStep과 같죠 이제 우리는 힘, 가속도 속도, 위치에 대해서 X와 Y 요소를 모두 갖추게 되었습니다 이제 draw 코드를 업데이트해서 입자를 나타내는 동그라미와 스프링을 나타내는 직선이 X 방향으로 움직이게만 하면 됩니다 질량에 연결되어 있는 코드 열에 그냥 positionX를 추가하기만 하면 됩니다 질량을 나타내는 동그라미 같은 경우 중앙에 positionX를 추가할 거예요 이제 코드를 실행하면 어떻게 되는지 보세요 좋아요! 이차원 모션이네요 영화를 만들 때 우리는 같은 방식으로 Z 요소까지 이용해 삼차원 모션을 만들어냅니다 생각해 볼 만한 재미있는 보너스 프로젝트가 되겠죠 하지만 일단 여기서 잠깐 멈추고 마지막 단계로 가기 전 코드에 익숙해지도록 하세요