아~~^^* 햇살이 바삭한 아침이예요~~~^^*
저는 지금 햇살 좋은 하늘을 올려다 볼 수 있는, 그런데~~^^* 에어컨 바람이 감돌아 시원한 곳에 와 있어요~~^^*
제가 곧 볼 일이 있어서요~~~^^* 오후에 공부하고 다시 돌아올게요~~^^*
목요일은 일정이 그렇게 되어 가네요~~~^^*
장마 중 햇살일지 장마 끝 햇살일지는 아직 모르겠지만,
이 햇살이 너무 반갑고 감사해요~~^^*
그래서, 이 햇살처럼 상큼하고 고소하고 새콤할 것 같은, 시원한 아이스 아메리카노 선물드려요~~^^* 눈으로 시원하게 마셔요~~~^^* 곁들여 드리는 것은요~~^^* 아주 맛있어 보이는 크라상이예요~~~^^* 눈으로 맛있게 드셔요~~~^^*
크라상이 사진으로는 좀 작아 보이는데요. 실물로 보시면 엄청 큰 크라상이예요~^^*
눈 부르게 많이 드셔요~~^^*
신선한 커피의 좋은 카페인과 오늘 구운 크라상의 에너지로 즐거운 오전 오후 보내시고요~~
우리 저녁에 다시 여기서 만나요~~~^^*
네~~ 오전 오후 즐겁게 보내셨나요~~^^*
아이스 아메리카노도 마시고 크라상도 먹었으니, 우리 힘을 좀 방출해 볼까요~^^*
셀프세차장 고고~~^^*
네^^* 오늘은 달밤의 셀프세차장을 프로그램으로 표현해 보겠습니다~~^^*
아래 동영상 강의를 클릭하셔서 5:10까지 보시면 오늘 공부 끝~~^^*
두둥실 보름달은 떴구요~~~
폼건에서 거품은 포실포실 쏴쏴 몽글몽글 하늘로 날아 오르구요~~^^*
두둥실 보름달은~~~~?
그렇죠~~^^* 어제 선물드린 동그라미를
화면 왼쪽 상단에 크게 한 번 띄워보겠습니다~~^^*
어머 그럼 자동차는요~~~?
네^^* 아주 귀여운 자동차를 그려서 화면 중앙 하단에 주차시켜 놓겠습니다~^^*
포슬포슬 쏴쏴 몽글몽글 폼건은~~~?
그렇죠~~^^* 지난 번 만들어 놓은 동그라미 입자를
(1) 입자 배열에 담고
(2) 마우스/손가락 움직임으로
(3) 폼건 노즐의 방향을 조정하겠습니다~^^*
그럼 이제 코드를 저와 함께 살펴 보시죠~~^^*
<!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 = 16;
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);
}
}
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.1);
particle.applyForce(gravity);
//중력의 작용을 받도록 하겠습니다~^^*
let dirX = map(mouseX, 0, width, -0.3, 0.3);
let dirY = map(mouseY, 0, height, -0.3, 0.3);
let yourControl = createVector(dirX, dirY);
particle.applyForce(yourControl);
//마우스 움직임에 따라 폼건 노즐의 방향이 변환합니다~^^*
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 = [];
//폼건 거품 입자들을 담을 배열입니다~^^*
let imgMoon;
let imgCar;
//보름달과 자동차 이미지 파일을 저장할 변수입니다~^^*
function preload(){
imgMoon = loadImage('texture.png');
imgCar = loadImage('car.png');
//보름달과 자동차 그림 파일을 로드하여 보름달 및 자동차 이미지 변수에 저장합니다~^^*
}
function setup() {
createCanvas(400, 400);
emitters.push(new Emitter(300, 200));
}
function draw() {
background(100);
//달밤이라 좀 어두운 듯 밝은 듯한 밤공기예요~^^*
image(imgMoon, 0, 0, 100, 100);
image(imgCar, 50, 200, 300, 300);
//보름달 이미지를 왼쪽 상단에 크기 100*100으로 배치해요~^^*
//자동차 이미지를 하단 중앙에 크기 300*300으로 배치해요~^^*
for (let emitter of emitters) {
emitter.emit(2);
//한 번에 비누거품 2 두개씩 만들어 뿜어내는 폼건입니다~^^*
emitter.show();
emitter.update();
}
}마우스/손가락을 화면 위에서 움직이며 우리의 귀여운 자동차를 정성스럽게 세차해 주셔요~~^^* 달밤의 낭만을 만끽하시기 바래요~~^^*
단 1회 폼건 사용으로 자동차를 비누거품으로 잘 덮으려면~~~~^^*
세차를 하니 차도 깔끔하고 기분도 개운하고~~^^*
수고 많으셨어요~~~^^*
오늘도 저와 함께 코딩 공부 해주셔서 감사합니다~~~^^*
우리 내일 또 만나서 함께 코딩 공부해요~~~ 화염을 만들어서 이열치열~~^^*
편안한 저녁 보내시구요~~~^^*
네!! 꿈은 이루어 집니다~~!!
Silverback9 
댓글 남기기