오늘은 시원한 샤워 물방울들을 표현하는 프로그램을 만들어 보겠습니다~^^*
잠시 천장을 올려다 보시며 머리 위로 쏟아지는 물방울들을 상상해 보셔요~~^^*
쏘ㅑ~~~ 쏘ㅑ~~~ 쏘ㅑ~~~
음…근데…뭔가 업사이드다운된 이미지의 기시감이 느껴지시지 않나요?
네!!!
수중공기정화장치의 공기 방울들이 바닥에서 수면 위로 올라가며 사라지듯이
해바라기 샤워 물방울들은 천장에서 쏟아져 내려가며 사라지네요!
그렇습니다!!!
지난 번에 공부했던 수중공기정화장치 프로그램의 응용/복습이라고 할 수도 있을 것 같아요!
<복습: 같은 점>
하나. 방울을 계속 생성해요.
둘. 점점 투명하게 만들어요.
셋. 투명하게 된 방울은 방울 배열에서 삭제해요.
<응용: 다른 점>
하나. 캔버스 화면 위쪽 부분에서 생성이 되어요.
둘. 캔버스 화면 아래 방향으로 이동을 해요.
<혹시 기억하고 계셔요?>
방울의 투명도가 0인지를 점검하여 삭제하는 과정은,
배열의 맨 뒷부분에서 앞으로 나아가며 진행이 되어요!
아!! 네~~!!
거의 비슷한 프로그램을 다시 공부하는 이유가 궁금하시다구요~?^^*
그것은 바로~~!!!!
오늘부터 우리는 입자를 본격적으로 공부할 것인데요~~!!! 그 기초를 다시 잘 다지기 위해서 복습/응용 프로그램을 만들어 보게 되는 것 같아요~~!!!
아래 동영상 강의를 클릭하시면 오늘 공부 내용을 보실 수 있어요~^^*
그럼 이제 코드를 살펴 볼까요~^^*
라벤더 향기와 빛을 품은 물방울이, 욕실 벽과 바닥에 닿으면 튀기도 하면서, 자연스럽게 투명하게 사라지는 여름 샤워를 표현해 보았습니다~.
자세한 내용은 주석을 참고 하셔도 좋을 것 같아요~~^^*
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="particle.js"></script>
<script src="sketch.js"></script>
</body>
</html>class Particle {
constructor(x, y) {
this.pos = createVector(x, y);
this.vel = p5.Vector.random2D();
this.vel.mult(random(5, 1));
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(this.lifetime,this.lifetime, 255 + this.lifetime, this.lifetime);
strokeWeight(2);
fill(this.lifetime,this.lifetime, 255 + this.lifetime, this.lifetime);
ellipse(this.pos.x, this.pos.y, this.r * 2);
//라벤더 향기 품고 점점 투명해지는 여름 샤워 물방울 어떠셔요~^^*
}
}
let particles = [];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(200,200,255);
//여름 별장 욕실은 역시 연보라~~ 라벤더 빛~~
for (let i = 0; i < 10; i++) {
particles.push(new Particle(200, 20));
//한 번에 물방울 10개씩 만들어, 풍성한 해바라기 샤워를 즐겨 볼까요~^^*
}
for (let particle of particles) {
let gravity = createVector(0, 0.2);
particle.applyForce(gravity);
particle.update();
particle.edges();
particle.show();
//물방울은 중력의 영향을 받고, 아래로 움직이며, 욕실 벽과 바닥에 닿으면 튀기도 하면서,새하얀 빛이 라벤더 빛으로 바뀌면서 점점 투명해져요~^^*
}
for (let i = particles.length - 1; i >= 0; i--) {
if (particles[i].finished()) {
particles.splice(i, 1);
}
//물방을 배열을 맨 뒤에서부터 앞으로 나아가며 물방울의 투명도를 점검하여, 물방울이 투명하면, 물방울 배열에서 삭제할게요~^^*
//우리 컴퓨터 일손을 조금이라도 덜어줄게요~^^*
}
}자~ 이제~ 여름 샤워를 즐겨 볼까요~~^^* 향긋하고 시원한 라벤더 향과 빛을 지닌 샤워를 느긋하고 개운하게 즐겨 보셔요~~^^*
아침의 커튼을 설레며 여는 시원한 샤워~
저녁의 커튼을 단정히 닫는 따뜻한 샤워~
회복과 재생과 변신의 힘을 얻는 빛의 샤워~^^*
오늘도 설레고 단정하고 빛나는 샤워를 누리는 하루 보내시기 바래요~^^*
오늘도 저와 함께 코딩 공부 해주셔서 감사합니다~^^*
우리 내일 또 만나서 코딩 공부해요~~^^*
네!!! 꿈은 이루어 집니다!!!
Silverback9 
댓글 남기기