Silverback9

오늘 본격적으로 matter.js의 MouseConstraint를 활용하는 프로그램 공부를 시작해 보겠습니다~~!!! YEAH~~!!!

p5.js의 mouse 조정 기능을 우리는 이미 사용해 보았는데요~~^^*

p5.js의 mouse는 p5.js의 Canvas 영역 안에서 작동이 되는데요~~^^*

p5.js에서 Canvas를 생성하면, 지정된 크기의 화면이 하나의 객체로 생성이 되는데요~~^^*

이 p5.js Canvas 화면 객체 위에서의 마우스의 움직임만이 프로그램에 유의미한 신호를 줄 수 있는데요~~^^*

오늘 우리는 matter.js의 MouseConstraint를 사용해 보기로 해서요~~^^*

matter.js에서의 mouse 움직임 신호가 p5.js의 Canvas 화면 객체 위의 움직임 신호 역할을 할 수 있도록 어떤 조정작업이 필요할 것 같아요~~^^*

그런데요~~^^*

p5.js의 프로그램이 p5.js 웹사이트에서 온라인으로 플레이된다는 것을 생각해 보면요~~^^*

이것은!

그렇죠! 이것은!

맞아요! 바로! 이것은!

웹사이트를 관장하는 HTML5의 CANVAS API와 관련이 있을 것 같아요!

p5.js에서 우리가 만드는 Canvas 화면 객체는 p5.js에 의해 보호막이 한 겹 씌워져 있는 상태라고 볼 수도 있을 것 같아요. p5.js 의 mouse 조종은 이 보호막 위에서 작동되는 것 같구요.

그런데, matter.js의 mouse 조종은, p5. js의 보호막이 벗겨진 상태의 Canvas 화면에 작동될 것 같거든요…p5.js의 보호막이 걷어내어진 상태의 Canvas는 HTML5의 Canvas인 것 같아요…

음..p5.js의 Canvas와 HTML5의 Canvas가 같은 Canvas가 되도록 하면 참 좋겠죠?

그래서, 우리 p5.js의 elt를 사용해 보면 어떨까요?

네…오늘 API의 개념을 적용하는 경험을 하는 신기한 날이네요~~^^*

elt를 사용해서, p5.js의 고수준 간접 접근과 HTML5의 저수준 직접 접근 방법을 모두 자유롭게 사용해 보기로 해요, 우리~~^^*

const {
    Engine,
    World,
    Bodies,
    Composite,
    Constraint,
    Mouse,
    MouseConstraint
} = Matter;

let canvas = createCanvas(400, 400);
let canvasMouse = Mouse.create(canvas.elt);
    let options = {
        mouse: canvasMouse,
    }

p5.js의 pixel 밀도를 HTML5 canvas 기반 matter.js 의 mouse 기능을 p5.js에서 수행하는 canvasMouse의 pixel 비율로 설정해서, mouse가 가리키는 위치좌표가 p5.js canvas와 HTML5 canvas 두 곳 모두에서 같은 위치를 나타낼 수 있도록 해 보겠습니다~

canvasMouse.pixelRatio = pixelDensity();

네~~^^*

오늘도 저와 함께, HTML5 Canvas 와 p5.js canvas에서의 마우스 움직임이 같아질 수 있도록 조율하는 작업을 시작해 주셔서 감사합니다~~^^*

오늘은 API를 직접 다루어 보는 신기한 경험을 한 감사한 날이네요~~^^*

음…좀…신기한 것이요….p5.js와 함께 HTML를 본격적으로 다루어 보는 미래 활동의 사전경험이 될 것 같아요~~^^*

새로운 것을 조금씩 더해가며 기존의 것을 배워나가는 신기하고 감사한 경험, 함께 해주셔서 감사합니다~~^^*

우리 바로 곁에서 또는 멀리서 응원하는 따뜻한 마음들에 힘 입어~~^^*

우리를 내려다 보며 지켜주는 힘찬 마음들에 힘 입어~^^*

우리의 꿈을 향해 오늘도 파다닥 날아가 볼까요~~^^*

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

우리 내일 또 만나서, MouseConstraint 코딩 공부 함께 할까요~~^^*

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