Silverback9

어제 만든 동그라미는 나타나자마자 쓩~~~ 화면 아래로 사라져 버렸지요~~^^*

오늘은 화면을 테두리로 감싸서, 동그라미가 바닥 위에 머물 수 있도록 만들어 볼까요~^^*

음…그리고…

동그라미도 두 개 더 만들고, 스프링도 장착해 볼까요~^^*

바닥 위에 세 개의 동그라미가 내려와 안착하는 모습을 표현하는 프로그램과 세 개의 동그라미가 스프링으로 연결되고 우리가 마우스로 한 동그라미를 움직이는 프로그램을 만들어 보도록 하겠습니다~~^^*

바닥 만들기 -> 동그라미 세 개 만들기 -> 동그라미들을 스프링으로 연결하기 이 세가지 단계별로 프로그램 테스트도 해 볼까요, 우리?

넵, 그럼 우리 화면 테두리를 만들어 봅시다! YEAH!

const { Vec2D, Rect } = toxi.geom;

let bounds = new Rect (0, 0, width, height);
//화면 왼쪽 제일 위 모서리(0,0)부터 화면 오른쪽 제일 아래 모서리(width, height)까지, 화면 전체를 커버하는 사각형을 만듭니다.

physics.setWorldBounds(bounds);
//이 사각형이 테두리로서 작용할 수 있도록, World에 세팅합니다. 

이제 동그라미가 화면 바닥에 머물게 될까요?

네, 얌전히 잘 머물고 있네요~~^^*

이번에는 동그라미를 두 개 더 추가해 보도록 할게요~~^^*

const { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;

particleA = new VerletParticle2D(100, 100);

physics.addParticle(particleA);

particleB = new VerletParticle2D(200, 100);

physics.addParticle(particleB);

particleC = new VerletParticle2D(300, 100);

physics.addParticle(particleC);

//동그라미를 생성하여 물리세계의 구성원으로 추가합니다~

circle(particleA.x, particleA.y, 16);
circle(particleB.x, particleB.y, 16);
circle(particleC.x, particleC.y, 16);

동그라미 세 개가 나란히 내려오는 반가운 모습을 보러 가시죠~~

마지막으로, 이 세 개의 동그라미를 스프링으로 연결해 볼까요~^^*

연결하고자 하는 두 물체와 스프링의 길이와 스프링의 강도(0: 최저 1: 최고)를 설정하면 됩니다~~^^*

const { VerletPhysics2D, VerletParticle2D, VerletSpring2D } = toxi.physics2d;

let spring1;
let spring2;
let spring3; 

spring1 = new VerletSpring2D(particleA, particle B, 200, 0.5);
physics.addSpring(spring1);

spring2 = new VerletSpring2D(particleB, particle C, 200, 0.5);
physics.addSpring(spring2);

spring3 = new VerletSpring2D(particleC, particle A, 200, 0.5);
physics.addSpring(spring3);

//길이 200 pixel, 강도 0.5인 스프링을 생성하여, 물리 세계의 구성요소로 추가하겠습니다~^^*

fill(220, 220); //회색
circle(particleA.x, particleA.y, 16);
fill(0, 220, 220); //민트 
circle(particleB.x, particleB.y, 16);
fill(220,0, 220); //꽃분홍
circle(particleC.x, particleC.y, 16);

//동그라미 A 회색, 동그라미 B 민트색, 동그라미 C 꽃분홍으로 표현해 보겠습니다~^^*
  
particleA.lock();
particleA.x = mouseX;
particleA.y = mouseY;
particleA.unlock();

//마우스로 회색 동그라미 A의 위치를 조종해 보겠습니다~^^*

마우스로 회색 동그라미 A를 움직여 볼까요~? 스프링으로 연결된 동그라미들의 움직임이 느껴지시나요~^^*

오늘 저와 함께 동그라미에 스프링을 달아 주셔서 감사합니다~~^^*

우리 내일 또 만나서, 이 동그라미들이 연결된 부분의 안쪽을 면으로 채워, 어떤 몸체를 만들어 볼까요~^^*

보이지 않는 스프링으로 연결되어 유연하게 함께 움직이고 있는 세상만물~~~^^*

하나씩 따로 떨어져 있던 존재들이 연결되고~~^^*

존재들의 독특함을 서로 잘 연결하여 멋진 새로운 존재를 만들어 낼 수 있겠죠~^^*

서로의 개성이 연결되어 재미난 일이 일어나는 즐거운 오늘 되시기 바래요!

오늘도 멋진 아침! 멋진 하루! 보내시고요!

우리 내일 또 만나요~~~^^*

네~~^^* 꿈은 이루어 집니다~~~^^*