Creative Coding 독학 제177일 2024년09월20일(금)

2024년 9월 20일

비가 와요~~~^^*

가을비가 와요~~^^*

가을비가 내리고 있어서요~~^^*

우리~~^^* 빗방울이 지붕을 타고 흐르듯, 동그라미들이 선반을 타고 흐르도록 해 볼까요~~?^^*

비도 오는데 말이죠~~^^*

네~~^^* 가을비가 내리고 있어서 말이죠~~^^*

제가 동그라미들을 정성껏 만들고~^^* 선반도 벽에 살짝 기울여 두어 개 달고~~^^*

다시 돌아올게요~~^^*

그동안~~^^*

오늘 새벽의 가을의 모습을 선물 드릴테니~~^^* 안구정화하고 계셔요~~^^*

네^^* 좀 선선해 졌을까 싶어서 새벽 산책을 다녀왔거든요~~^^*

좀 많이 걷고 이제 테이블 맡에 앉았어요~~^^*

가을 새벽을 눈으로 산책하고 계셔요~~^^* 예쁜 선반 두 개 들고 곧 돌아올게요~~^^*

네~^^* 오늘 새벽에는 하늘이 참 맑았어요~~^^*

맑은 하늘 보시며 비 오는 가을 아침을 즐기시기 바래요~^^*

점심도 맛있게 드시구요~~^^*

저는 곧 동그라미들 많이 만들어 돌아올게요~~^^*

네~^^* 어릴 떄, 혹시 그런 상상해 보신 적 있으셔요^^*

아침에 눈을 떴는데~~ 창 밖에 억수비가 내리고 있는 거예요~~

머리에 샴푸를, 할머니가 동백기름 바르시 듯, 곱게 바르고 우산을 쓰지 않고 저 억수비 속으로 들어가 볼까?

머리에 샴푸를 발라서 억수비 속을 뛰어다니면 어떻게 될까? 머리에서 비눗방울들이 뽀로록! 뽀로록! 솟아나지 않을까?

그래서! 준비했습니다! 새로운 p5.js 함수! mouseDragged()!

마우스로 한 번만 클릭하는 것이 아니라, 마우스를 클릭한 채로 주욱 움직이면, 머리에서 비눗방울들이 뽀로록! 뽀로록! 솟아나듯 동그라미가 생성되는 거예요~~^^*

우리 동그라미는 앙증맞은 작은 크기로 생성해 보기로 해요~~^^* 비눗방울 느낌으로~~^^*

비눗방울이 미끌미끌 잘 흐르도록 마찰 friction 계수를 0으로 할까요? 그리고 지붕을 따라 잘 흘러 내리도록, 복원 restitution 계수를 0.6으로 작게 잡아 볼게요~~^^*

let circles = [];

function mouseDragged() {
    circles.push(new Circle(mouseX, mouseY, random(5, 10)));
}

class Circle{
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        let options = {
            friction: 0,
           restitution: 0.6
        }
        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);
        pop();
    }
}

자 이제 우리 붙박이 선반을 살짝 기울여진 각도로 벽에 튼튼하게 달아 봅시다~ 뚝딱뚝딱~^^*

선반이 동그라미들을 부드럽게 흘려 보내도록, 선반의 마찰 계수와 복원 계수도 동그라미처럼 0과 0.6으로 잡아보도록 할게요~^^*

그리고, 선반을 살짝 기울여야 하니까, 회전각 계수도 설정해 보도록 할까요? 화면에서 실행해 보고 언제든 회전각 크기를 적절하게 조절할 수 있으면 더욱 좋겠지요~^^*

그래서! 선반을 생성하는 함수를 호출하면서, 회전각 크기도 매개변수 parameter로 넘겨주도록 해 보겠습니다.

let boundaries = [];

  boundaries.push(new Boundary(150, 100, width* 0.6, 20, 0.3));
  boundaries.push(new Boundary(250, 300, width* 0.6, 20, -0.3));
//선반 길이는 화면 너비의 60%, 높이는 20 pixel로 설정해 볼게요~^^*

class Boundary {
    constructor(x, y, w, h, a) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        let options = {
            friction: 0,
           restitution: 0.6,
           angle: a,
           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);
        fill(0);
        rect(0, 0, this.w, this.h);
        pop();
    }
}

네~^^* 주요 함수와 옵션과 매개변수 준비 작업이 다 된 것 같아요!

이제 비눗방울들이 지붕을 따라 부드럽게 흘러 내리듯, 선반 위를 부드럽게 흘러 내리는 동그라미들을 표현하는 프로그램의 전체 코드를 우리 함께 살펴 볼까요~~^^*

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/addons/p5.sound.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <script src="circle.js"></script>
    <script src="boundary.js"></script>
  </body>
</html>

class Circle{
    constructor(x, y, r) {
        this.x = x;
        this.y = y;
        this.r = r;
        let options = {
            friction: 0,
           restitution: 0.6
        }
        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);
        pop();
    }
}

class Boundary {
    constructor(x, y, w, h, a) {
        this.x = x;
        this.y = y;
        this.w = w;
        this.h = h;
        let options = {
            friction: 0,
           restitution: 0.6,
           angle: a,
           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);
        fill(0);
        rect(0, 0, this.w, this.h);
        pop();
    }
}

const { Engine, World, Bodies, Composite } = Matter;

let engine;
let world;
let circles = [];
let boundaries = [];

function setup() {
    createCanvas(400, 400);
    engine = Engine.create();
    world = engine.world;
    boundaries.push(new Boundary(150, 100, width* 0.6, 20, 0.3));
    boundaries.push(new Boundary(250, 300, width* 0.6, 20, -0.3));  
}
    
function mouseDragged() {
    circles.push(new Circle(mouseX, mouseY, random(5, 10)));
}

function draw() {
    background(51);
    Engine.update(engine);
    for (let i = 0; i < circles.length; i++) {
        circles[i].show();
    }
    for (let i = 0; i < boundaries.length; i++) {
        boundaries[i].show();
    }
}

어머! 가을비가 그쳤네요! 괜찮아요! 우리는 프로그램을 이미 완성했으니, 컴퓨터로 비눗방울 놀이를 하면 되어요~~^^* 마우스/손가락을 지긋히 누르며 화면 위에 주욱~ 비눗방울을 만들어 보셔요~~^^* 아이 재밌어요~~^^*

우와~~ 우리가 matter.js 두번째 동영상 강의도 끝내었네요~~^^*

샴푸를 머리결 곱게 바르고 억수비 내리는 지붕 위를 미끄럼 타며 비눗방울들을 또르륵! 또르륵! 만들어 내는 우리의 마우스/손가락은 샴푸의 요정~~^^*

오늘 저와 함께 샴푸의 요정이 되어 가을비 내리는 반가운 하늘에 예쁜 비눗방울들을 선물해 주셔서 감사합니다~^^*

우리 내일 또 만나서~^^* 코딩 모험 이어갈까요~^^*

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

Silverback9

Creative Coding 독학 제177일 2024년09월20일(금)

댓글 남기기 응답 취소

Creative Coding 독학 제177일 2024년09월20일(금)

이 글 공유하기:

댓글 남기기 응답 취소