Creative Coding 독학 제176일 2024년09월19일(목)

2024년 9월 19일

오늘은 다른 물체를 하나 더 만들어, 상자가 충돌에 의해 경험하는 물리현상을 우리 눈으로 볼 수 있도록 만들어 보겠습니다~^^*

음…저는…화면 아랫부분에 두꺼운 선반을 하나 걸쳐 놓고 싶어요.

너비는 화면 너비만큼~ 두께는 50 pixel 정도로 해 볼게요~

matter.js의 물체의 위치좌표는 물체의 중심을 나타내게 되니까….그리고 우리의 캔버스가 400*400 이니까… x좌표는 화면 정가운데인 200으로 잡고~ y좌표는 화면 바닥에서 50 pixel 올라간 지점으로 잡아 볼게요. 컴퓨터 그래픽에서 y축은 위에서 아래로 커지니까….화면 바닥이 height가 될테니, 우리의 새로운 물체의 y좌표는 height – 50으로 잡아 보겠습니다~~^^*

여기에서 질문 하나 드리겠습니다.

물체의 y 좌표가 height - 50 pixel 이고 두께가 50 pixel이면 
(1) 물체는 화면 바닥에 닿아 있다. 
(2) 물체는 화면 바닥에서 50 pixel 위로 떠 있다.
(3) 물체는 화면 바닥에서 25 pixel 위로 떠 있다. 
(4) 물체는 화면 바닥 위로 25 pixel 보이고 아래로 25 pixel 감추어져 있다.   

 (힌트는, 
   (1) matter.js에서 위치 좌표는 물체의 중심을 나타냅니다.
   (2) 컴퓨터 그래픽에서 y 축 값이 커질수록 아래로 내려갑니다. )

정답은!

정답은 바로!

네! 정답은 바로!

두구두구두구……네! 맞습니다!

(1) 물체의 윗면: [height -50] -  1/2(50) = height - 50 - 25 = height - 75  

(2) 물체의 아랫면: [height - 50] + 1/2(50) = height - 50 + 25 = height - 25

그러므로, 물체의 아랫면이 height - 25 즉 화면 바닥에서 25 pixel 올라와 있습니다~^^*

네!! 정답은 (3)번이 될 것 같습니다!!! 그럼 우리 한 번 확인해 볼까요~^^*

이 물체의 이름을 Boundary라고 부르도록 할게요~~^^* 물체의 생성 방법은 우리의 Box와 동일합니다~~^^*

그런데,이 물체는 선반 역할을 해 줄 것이라, 중력의 영향을 받아 화면 아래로 내려가면 안될 것 같아요. 그래서, Boundary의 위치좌표가 고정될 수 있어야 할 것 같습니다!

여기 옵션 하나 추가해 주세요~~~^^*

 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,
            isStatic: true
        }

자 그럼 이제 우리~~^^* 전체 코드를 함께 살펴 볼까요~~^^*

<!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
    http://boundary.js
  </body>
</html>

class Boundary {
    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,
            isStatic: true
        }
        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);
        noStroke();
        fill(0); //세련된 검은 선반을 준비해 봅시다~
        rect(0, 0, this.w, this.h);
        pop();
    }
}

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 = [];
let shelf;

function setup() {
    createCanvas(400, 400);
    engine = Engine.create();
    world = engine.world;
    shelf = new Boundary(200, height-50, width, 50);   
}
    
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();
    }
    shelf.show();
}

이제 세련된 검은 선반 위에 상자들이 때로는 통!통!통! 때로는 와르르~~~~ 그러나 전반적으로는 차~곡차~곡 쌓이는 모습을 구경하러 저와 함께 가실까요~~^^*

네~~^^* 우리는 matter.js의 Physics Engine을 사용하면서~~^^* p5.js에서 rendering을 우리 스스로 조정하면서~~^^*

아주 튼튼한 선반 위에 상자들이 쌓이는 모습을 프로그램으로 완성해 보았습니다~~!!! YEAH~~!!!

우리의 새로운 여정의 첫 강의 동영상을 마무리하게 되었네요~~!!! YEAH~~!!!