오늘은 국지성 호우를 이곳 저곳 마음대로 생성하는 프로그램을 만들어 보겠습니다~^^*
어제 만든 샤워 프로그램을 살짝 디벨롭하여~^^*
마우스/손가락으로 클릭/누르는 곳마다 소나기가 내리도록 해 볼게요~^^*
근데요~~~ 제가 오전에 볼 일이 좀 있어서요~~^^*
우리 오후에 다시 만나서 코딩 공부 할까요~~^^*
모닝 샤워 시원하게 하신 후~
시원한 소나기가 내리는 순간을 상상을 하시며~
시원한 아이스 아메리카노 한 잔 여유롭게 드시며 오전 보내시고~
우리 오후에 다시 만나요~~^^*
넵, 종종 걸음으로 다시 이 페이지로 돌아올게요~^^*
네~^^* 오늘 낮시간 즐겁게 보내셨나요~^^*
이제 코딩 공부할 시간~~~^^*이 다시 또 돌아왔습니다~~^^*
네!!! 오늘의 미션은 여러 곳에 소나기 만들어 뿌리기예요!
소나기 하나는 우리가 어제 만든 샤워를 그대로 써도 될 것 같은데…요…
소나기 여러 개는…..음….
네~~ㅡ 소나기를 만들어 뿌리는 새로운 클래스를 만들어 보면 어떨까요?
이름하여~~~~ Emitter~~~^^*
소나기를 뿌리는 Emitter가 여러 개 필요하니까, 배열 emitters[]를 만들어 볼게요~^^*
그럼 우리 이제, 클래스 두 개(Particle, Emitter), 배열 두 개(particles[], emitters[])를 가지게 되었네요~
하나. Class Particle은 물방울의 모양과 행동양식을 담고 있습니다~
둘. Class Emitter는 소나기를 만드는 위치와 Class Particle의 행동지시 방법을 담고 있습니다~
셋. 배열 particles[]는 하나의 소나기가 생성해 내는 물방울들을 담습니다.
넷 배열 emitters[]는 우리가 마우스/손가락을 클릭하기/누르기를 통해 생성한 소나기 스팟을 담고 있습니다.
어제 프로그램에서는 메인 프로그램이 클래스 Particle를 다루었는데요.
오늘 프로그램에서는 메인 프로그램은 클래스 Emitter를 다루고, 클래스 Emitter는 클래스 Particle을 다루게 되어요.
그래서, 배열 emitters[]는 메인 프로그램에서 정의되고, 배열 particles[]는 클래스 Emitter에서 정의되어요~
자~ 이제 큰 그림은 완성된 것 같은데요!!!
자세한 내용은 코드를 함께 살펴 볼까요~~~^^*
<!DOCTYPE html>
<html lang="en">
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
http://emitter.js
http://particle.js
http://sketch.js
</body>
</html>
class Particle {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = p5.Vector.random2D();
this.vel.mult(random(0.5, 2));
this.acc = createVector(0, 0);
this.r = 4;
this.lifetime = 255;
}
finished() {
return this.lifetime < 0;
}
//물방울이 완전히 투명하다면 True 값을 반환합니다.
applyForce(force) {
this.acc.add(force);
}
edges() {
if (this.pos.y >= height - this.r) {
this.pos.y = height - this.r;
this.vel.y *= -1;
}
if (this.pos.x >= width - this.r) {
this.pos.x = width - this.r;
this.vel.x *= -1;
} else if (this.pos.x <= this.r) {
this.pos.x = this.r;
this.vel.x *= -1;
}
}
update() {
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.set(0, 0);
this.lifetime -= 5;
}
show() {
stroke(255, this.lifetime);
strokeWeight(2);
fill(255, this.lifetime);
//소낙비는 한꺼번에 쏟아져서 마치 우유가 쏟아지는 듯 하지요~^^*
//바닥에 닿으면, 맑은 물방울로 보이구요~^^*
//그래서~ 물방울을 처음엔 하얗고, 시간이 지나면 점점 투명해 지도록 만들어 볼게요~~^^*
ellipse(this.pos.x, this.pos.y, this.r * 2);
}
}class Emitter {
constructor(x, y) {
this.position = createVector(x, y);
this.particles = [];
}
//국지성 호우 스팟은 각각 지정된 좌표에, 물방물 배열을 생성하여 소나기를 내립니다~
emit(num) {
for (let i = 0; i < num; i++) {
this.particles.push(new Particle(this.position.x, this.position.y));
}
}
//지정된 갯수의 물방울을 한 번에 만들어 물방울 배열에 담습니다~.
update() {
for (let particle of this.particles) {
let gravity = createVector(0, 0.2);
particle.applyForce(gravity);
particle.update();
particle.edges();
}
//물방울들은 중력의 작용을 받고, 벽이나 바닥에 부딪히면 튑니다~
for (let i = this.particles.length - 1; i >= 0; i--) {
if (this.particles[i].finished()) {
this.particles.splice(i, 1);
}
}
//물방울 배열의 맨뒤에서 앞으로 나아가며, 물방울 투명도를 점검하여, 완전히 투명하다면, 물방울 배열에서 삭제합니다. 컴퓨터 복지 향상을 위하여~~~^^*
}
show() {
for (let particle of this.particles) {
particle.show();
}
}
//물방울을 보여 줍니다~^^*
}let emitters = [];
//국지성 호우가 내릴 곳들이 배열입니다~^^*
function mousePressed() {
emitters.push(new Emitter(mouseX, mouseY));
//마우스/손가락 클릭하는/누르는 곳이 바로 국지성 호우 스팟입니다~
//마우스/손가락 클릭하여/눌러 생성된 Emitter는 배열 emitters[]의 요소로 저장됩니다.
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(100, 200, 255);
//맑은 하늘에 갑자기 소나기가 우유빛으로 엄청 내려요~^^*
for (let emitter of emitters) {
emitter.emit(2);
//한 번에 물방울 2 두개씩 만들어 내리는 소나기입니다~^^*
emitter.show();
emitter.update();
}
}맑은 하늘에 소낙비를 여기 저기 만들어 뿌려 볼까요~~^^* 캔버스 곳곳을 마우스/손가락으로 클릭해/눌러 보셔요~~~^^*
눈이 함박 내리거나 비가 담뿍 내리면 마음이 왠지 순수해 지는 것 같아요~^^* 서로의 행복과 성장을 바라고 지켜주기를 원하는 순수한 사랑의 마음이 세상 모든 존재들에게 천천히 오래오래 스며드는 것 같아요~^^*
오늘도 저와 함께 코딩 공부해 주셔서 감사합니다~^^*
우리 내일도 만나서 함께 코딩 공부 해요~~^^*
이 소나기를 맞고, 우리의 코딩 실력도 한 뼘 자라있을 거예요~~^^*
네!!! 꿈은 이루어 집니다~~!!!
Silverback9 
댓글 남기기