Silverback9

어제 우리는 constraint의 작용을 받아 서로의 거리를 유연하게 유지하는 동그라미들이 만들어 내는 사슬을 표현해 보았습니다~^^*

어제 만든 프로그램에 대한 동영상 강의를, 복습을 겸해서 우리 함께 보면 좋겠어요~~^^*

음…그런데요….^^*

사각형은 회전각 운동을 하게 되면, 모서리 위치가 변하는 것이 눈에 보여서, 우리가 사각형 회전을 시각적으로 느낄 수 있는데요~~^^*

동그라미는 모서리가 없이 둥글둥글해서, 회전각 운동을 시각적으로 느낄 수 없는 것 같아요~~^^*

그래서, 우리의 동그라미에 중심에서 뻗어 나오는 선을 하나 그려 넣어 볼게요~^^*

class Particle{
    constructor(x, y, r, fixed) {
        this.x = x;
        this.y = y;
        this.r = r;
        let options = {
            friction: 0,
            restitution: 0.95,
            isStatic: fixed
        }
        this.body = Bodies.circle(this.x, this.y, this.r,  options);
        Composite.add(world, this.body);
    }

    show() {
        let pos = this.body.position;
        let angle = this.body.angle;
        push();
        translate(pos.x, pos.y);
        rotate(angle);
        //네~^^* 동그라미도 회전각 운동을 하고 있었군요~^^*
        rectMode(CENTER);
        strokeWeight(1);
        stroke(255)
        fill(127);
        ellipse(0, 0, this.r*2);
        line(0,0, this.r, 0);
        //회전각을 확인하기 위해 중심에서 나오는 선을 그려 볼까요?^^*
        pop();
    }
}

어제 만든 프로그램을 복습으로 한 번 더 플레이 해 볼까요~^^* 회전각 운동 확인용 선을 가진 동그라미들이 사슬 모양 대형을 이루고 있어요~~^^*

동그라미들이 수평대열에서 수직대열로 대형을 바꾸면서 자신의 몸도 살짝쿵 적절히 방향을 조정해나가는 섬세한 움직임이 느껴지시나요?

음…근데…회전각 운동이 좀 작고 단조롭게 느껴지는 것 같아요. 대형 변화가 단조로와서 그런 것 같기도 하네요~~^^*

우리가 이 동그라미들의 사슬 대형을 자유롭게 변화시키게 되면, 동그라미의 회전각 운동도 좀더 드라마틱하게 이루어 질 것 같은데요!

네!! 그래요!! 동그라미와 우리 사이의 상호작용이 필요해요~~!!!

화면에 입김을 후~ 불어서 동그라미를 움직일 수 있다면 편할 텐데… 프로그램에 우리의 입김의 방향이 전달될 수 없네요…

우리가 화면 안에 들어가서 동그라미를 움직일 수 있으면 더 신날 텐데… 피와 살을 가진 우리는 0과 1의 세계 속에 들어갈 수가 없네요…

우리가 알고 있는 상호작용하는 방법은 마우스/손가락 끝 움직임 밖에 없군요….

상호작용 방법의 제한이 참 많네요…

어머! 근데요!

문제 해결에 사용할 수 있는 방법이나 자원의 제한이 많을 때, 우리의 창의성은 더 활발하게 작동된다고 해요!!!

Constraint 제한 & Creativity 창의성!

제한이 많을 수록 창의성은 커진다~~~!!! YEAH~~~!!!

matter.js + p5.js 컴퓨터 화면과의 상호작용을 mouse로 밖에 할 수 없다는 이 제한적인 상황이 우리의 창의성을 키워줄 것 같아요!

그럼 우리~^^* 감사한 마음 뿜뿜~~ 솟는 즐거운 마음으로~~

matter.js에서 마우스로 상호작용할 수 있는 기능을 찾아 볼까요~~^^*

보물찾기 놀이를 하는 듯 즐겁게 찾아 볼까요~^^*

어머, 저기를 보셔요!

저기 있는 돌멩이 아래,

무슨 종이 조각이 보여요~^^*

와우! 우리의 보물을 찾은 것 같아요!

“MouseConstraint“라고 쓰여 있어요! 빙고!

네~^^* 오늘 저와 함께 즐거운 보물찾기 놀이를 해주셔서 감사합니다~^^*

우리 내일 또 만나서, 이 소중한 보물을 사용해서 재밌는 프로그램을 만들어 볼까요~~^^*

우리가 사용할 수 있는 유일한 상호작용 방법…Mouse…!

“Mouse야 고마워! 창의성을 키워줘서!”

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

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