어제 만든 동그라미는 나타나자마자 쓩~~~ 화면 아래로 사라져 버렸지요~~^^* 오늘은 화면을 테두리로 감싸서, 동그라미가 바닥 위에 머물 수 있도록 만들어 볼까요~^^* 음…그리고… 동그라미도 두 개 더 만들고, 스프링도 장착해 볼까요~^^* 바닥 위에 세 개의 동그라미가 내려와 안착하는 모습을 표현하는 프로그램과 세 개의 동그라미가 스프링으로 연결되고 우리가 마우스로 한 동그라미를 움직이는 프로그램을 만들어 보도록 하겠습니다~~^^* 바닥…

오늘은 월요일~~^^* 우리 함께 편안하게 음악만 듣는 날~~^^* 부담감 없는 아침의 시작~~^^* 함께 하니 감사하고 기쁘네요~~^^* 내일은 10월이예요~~^^* 새로운 한 달을 시작할 준비를 하며~~^^* 뜨겁고 때론 따뜻했던 여름 공기가 그리워지는, 어깨 시려워지기 시작하는 시월이 시작되어요~~^^* 시월 한 달 동안 단풍이 화려하게 피어났다가 지겠네요~^^* 되돌아 보면 짧고 신기할 시월~~^^* 시월 나름의 소중하고 짧은 아름다움을 누리며~^^* 시월에…

오늘은 하나의 입자를 생성해서 중력의 영향을 받게 만드는 코드를 공부해 보겠습니다~~^^* 먼저, 물리 세계를 생성한 후 입자 하나를 생성하여 이 물리 세계의 구성 요소로 더해 볼게요~~* 이제, 이 입자가 중력의 영향을 받도록 만들어 볼까요~^^* (1) 화면 아래 방향으로 작용하는 벡터 v를 생성하고~ (2) 중력을 생성하여, 아래 방향으로 작용하는 벡터 v의 작용을 받도록 할게요~ (3) 물리…

오늘은 몰캉몰캉 야들야들 살캉살캉 유들유들한 물체를 표현하는 프로그램을 matter.js 뿐만 아니라 toxiclibs.js를 사용해서 코드하는 공부를 시작해 보겠습니다~^^* toxiclibs.js 는 p5.js 에서도 사용할 수 있고, javaScript 기반의 다른 다양한 코드 편집 프로그램에서도 사용할 수 있는 것 같아요~ 다양한 예시 작품들 살펴보면서, 부드러운 몸체 Soft Body가 표현해 내는 재미있는 장면들을 감상해 보셔도 좋을 것 같아요~^^* 부드러운 몸체가…

오늘은 MouseConstraint의 사용을 본격적으로 코딩해 보겠습니다~~^^* MouseConstraint 객체를 생성하여, 변수 mConstraint에 저장하고, 다시 이 mConstraint를 engine.world의 구성요소로 더하겠습니다~~^^* 우리가 mouse로 어떤 물체를 클릭하게 되면 mConstraint의 body의 진리값이 true가 되어요~^^* mouse가 동그라미 중 하나를 클릭하면~~^^* 다시 말해서, mConstraint의 body의 진리값이 true이면~~^^* 마우스로 동그라미를 움직이는 작업을 하면 될 것 같아요~~^^* 마우스가 동그라미를 클릭하는 정확한 위치를 표현하기 위해서~…

오늘 본격적으로 matter.js의 MouseConstraint를 활용하는 프로그램 공부를 시작해 보겠습니다~~!!! YEAH~~!!! p5.js의 mouse 조정 기능을 우리는 이미 사용해 보았는데요~~^^* p5.js의 mouse는 p5.js의 Canvas 영역 안에서 작동이 되는데요~~^^* p5.js에서 Canvas를 생성하면, 지정된 크기의 화면이 하나의 객체로 생성이 되는데요~~^^* 이 p5.js Canvas 화면 객체 위에서의 마우스의 움직임만이 프로그램에 유의미한 신호를 줄 수 있는데요~~^^* 오늘 우리는 matter.js의 MouseConstraint를 사용해…

어제 우리는 constraint의 작용을 받아 서로의 거리를 유연하게 유지하는 동그라미들이 만들어 내는 사슬을 표현해 보았습니다~^^* 어제 만든 프로그램에 대한 동영상 강의를, 복습을 겸해서 우리 함께 보면 좋겠어요~~^^* 음…그런데요….^^* 사각형은 회전각 운동을 하게 되면, 모서리 위치가 변하는 것이 눈에 보여서, 우리가 사각형 회전을 시각적으로 느낄 수 있는데요~~^^* 동그라미는 모서리가 없이 둥글둥글해서, 회전각 운동을 시각적으로 느낄 수…

오늘은 동그라미들이 서로의 거리를 일정하게 그리고 유연하게 유지하여 멋진 대형을 만드는 프로그램에 도전!해 보겠습니다~~~^^* YEAH~~~^^* 이런 체인 모양 어떠셔요~~^^* 두 개의 동그라미 사이의 거리를 일정하면서도 유연하게 유지하는 코드를 어제 만들어 보았는데요~^^* 여러 개의 동그라미들이 순서에 따라 두 개씩 짝지어서, 이 Constraint의 작용이 이루어 지면 하나의 사슬 형태가 될 것 같아요~! 음…근데…이 사슬은….위쪽 끝자락이 고정이 되어…

추석의 더위가 가을비로 가셔지고, 풀벌레 소리가 더욱 선명하게 들리는 진정한 9월의 아침입니다~^^* 살짝쿵 시려워지는 어깨에 겉옷 하나를 더 걸치고, 차가워진 아침 공기를 맡으며 등교하는 어느 꿈 많은 남학생의 9월 감성~~^^* 생애 주기 한 구간을 잘 포착하여 누구나 공감할 수 있는 영화가 상영되고 있는 푸른 9월의 언덕~~^^* 우리 잠시 함께 앉아 있을까요~~^^*? 남학생의 여린 감성이, 이…

오늘은 물리 속성들 중 Constraint를 사용하여, 물체들 사이의 거리를 유지하는 코드를 공부해 보겠습니다~^^* Constraint는 두 물체 사이의 거리를 일정하게 유지하는 속성인데요….공간에 물체로서 자리를 차지하지 않아요. 그저 두 물체 사이에 작용되는, 서로 일정한 거리를 유지하면서 서로 끌어당기는 어떤 힘이라고나 할까요? 자석의 다른 극끼리 끌어당기고 같은 극끼리 밀어내는, 물리적 공간을 차지하지 않는 어떤 힘을 느껴보신 적이 있으실…