오늘은 추석연휴 마지막 날이예요~^^*
일상으로 돌아가는 발걸음이 새벽녘부터 시작되고 있는 휴일 마지막 날~^^*
오늘은 사물 클래스를 만들어 보도록 하겠습니다~^^*
사각형 모양의 상자를 만들어 보려고 합니다~^^*
Bodies 중 rectangle을 사용하면 될 것 같아요~^^*
그런데, 함수 rectangle()의 parameter 매개변수에는 위치좌표(x, y)와 너비와 높이(width, height) 뿐만 아니라 선택사항 option도 있네요~~^^*
다양한 option들 중 마찰 friction과 배상/복원 restitution을 이번 프로그램에서 사용해 보게 될 거예요~^^*
마찰 friction은 어느 정도 친숙한데, 배상/복원 restitution은 코딩 공부하면서 이번에 처음 나온 것 같아요~~^^*
restitution은 법률적으로는 “배상”의 의미를 가지고 있네요~~^^*
물리적으로는 복원/복귀의 의미를 가지고 있는 것 같구요~^^*
매개 변수 restitution의 값을 조정하여 튕겨나감의 정도를 조정할 수 있는 것 같습니다~ bounce~ bounce~ ^^*
그럼 이제 클래스 box의 구성요소를 정의해 보겠습니다~^^* 마찰 friction 계수 0.3 복원 restitution 계수 0.6으로 잡아 놓도록 할게요~
constructor(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
let options = {
friction: 0.3,
restitution: 0.6
}
this.body = Bodies.rectangle(this.x, this.y, this.w, this.h, options);
Composite.add(world, this.body);
}
뭔가에 부딪힌 후 튕겨 나오는 동작을 표현하다 보면, 사물이 어느 정도 회전하게 보이도록 할 필요가 있을 것 같아요. 자신의 중심을 기준으로 회전각 크기만큼 회전하는 것으로 해 보려면~~^^*
translate(pos.x, pos.y);
rotate(angle);그런데, matter.js 에서 물체의 위치좌표는 물체의 중심을 나타내고, p5.js에서 물체의 위치좌표는 물체의 왼쪽상단 모서리를 나타내기 때문에, p5.js의 위치 좌표를 matter.js에 맞게 바꿀 필요가 또 있을 것 같습니다…!
우리가, matter.js의 render 기능에 의존하지 않고, p5.js에서 우리 스스로 물체를 시각화 render 하고자 하기 때문에 필요한 단계인 것 같아요~^^*
rectMode(CENTER);
rect(0, 0, this.w, this.h);box가 생겨나고 물리현상을 경험하면서, 프로그램 전체 요소들의 변화가 있게 되면, 그 변화를 Engine이 반영할 수 있도록 항상 update를 하면 좋겠지요~^^*
Engine.update(engine);우리가 화면에 마우스/손가락으로 위치를 지정하면 상자 하나가 생성되는 간단한 프로그램을 만들어 보겠습니다~^^* 중요내용은 미리 살펴 보았으니, 코드 안에 주석은 따로 넣지 않을게요~^^*
<!DOCTYPE html>
<html lang="en">
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js
https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
http://sketch.js
http://box.js
</body>
</html>class Box {
constructor(x, y, w, h) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
let options = {
friction: 0.3,
restitution: 0.6
}
this.body = Bodies.rectangle(this.x, this.y, this.w, this.h, 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);
rect(0, 0, this.w, this.h);
pop();
}
}const { Engine, World, Bodies, Composite } = Matter;
let engine;
let world;
let boxes = [];
function setup() {
createCanvas(400, 400);
engine = Engine.create();
world = engine.world;
}
function mousePressed() {
boxes.push(new Box(mouseX, mouseY, random(10, 40), random(10,40)));
}
function draw() {
background(51);
Engine.update(engine);
for (let i = 0; i < boxes.length; i++) {
boxes[i].show();
}
}마우스/손가락을 화면에 클릭/터치 하여 상자를 만들어 봅시다~^^*
상자가 생성되어 아래로 떨어지면서 화면 밖으로 나가서 눈에 안보이게 되네요. 다른 물체와 서로 부딪히거나 접할 때 restitution과 friction 물리 현상을 우리 상자가 경험해 보게 될텐데요…아직은, option의 restitution과 friction 계수를 우리가 느껴볼 수는 없네요….
네!!!
좋은 생각이예요!!!
네~!!! 그렇게 해 볼까요~~!!!
내일 우리, 다른 물체를 하나 더 만들어 상자가 그 물체와 부딪히거나 접할 수 있도록 해 볼까요~~^^*
네~~ 좋아요~~!!!
오늘도 저와 함께 matter.bodies.box를 만들어 주셔서 감사합니다~~^^*
내일은 다른 물체와의 상호작용을 우리 함께 코딩해 보면 좋겠어요~~^^*
Back to the 일상~^^*, 발걸음 경쾌한 아침! 멋진 하루! 보내셔요!
네~~!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기