네~~^^* 오늘은, 공기방울을 무한하게 만들고 그 무한하게 만들어지고 있는 공기방울 하나하나를 눈에 보이게 눈에 안보이게 끊임없이 표현하고 있는 우리 컴퓨터의 일감을 줄여주도록 해보겠습니다~^^*
아래 동영상 강의를 클릭하시면 오늘 공부내용을 시작(6:50)하실 수 있어요~~^^*
공기방울이 투명하게 되어 눈에 안보이게 되면, 공기방울 배열에서 삭제하여, 컴퓨터가 투명해진 공기방울들을 계속 눈에 보이지 않게 표현하는 일을 할 필요가 없도록 하면 어떨까요?^^*.
그렇게 하기 위해서는,
(1) 공기방울이 투명해 졌는가를 묻고
(2) 공기방울이 투명해 졌다는 답을 듣게 되면
(3) 그 공기방울을 공기방울 배열에서 삭제한다.
이렇게 세 단계의 작업이 추가로 필요할 것 같아요~^^*
if (particles[i].finished()) {...}
// 공기방울 배열의 i 번째 있는 공기방울이 끝났는 지를 함수 finished()에게 물어서,
// 답이 TRUE 라고 돌아오면, 작업을 합니다.
// 답이 FALSE 라고 돌아오면, 작업을 하지 않습니다. finished(){
return this.alpha < 0;
}
//이 공기방울의 불투명도가 0보다 작으면, TRUE 값을 리턴합니다.
//이 공기방울의 불투명도가 0과 같거나 크면, FALSE 값을 리턴합니다. if (particles[i].finished) {
particles.splice(i, 1);
}
// 공기방울 배열의 i 번째 요소부터 한 개의 요소를 배열에서 잘라 삭제합니다.
// 즉, 공기방울 배열의 i 번째 공기방울을 배열에서 삭제합니다. 그런데요~~~~^^*
공기방울 배열을 처음의 요소부터 마지막 요소까지 차레로 점검하여, 불투명도가 0 보다 작은 요소를 배열에서 제거하는 것이 좋을까요~~~^^*
아니면~~~^^*
공기방울 배열을 마지막 요소부터 처음의 요소까지 차례로 점검하여, 불투명도가 0 보다 작은 요소를 배열에서 제거하는 것이 좋을까요~~~^^*
다시 말해서,
배열을 앞에서 뒤로 가면서 점검/삭제하는 것이 좋을까요?
배열을 뒤에서 앞으로 가면서 점검/삭제하는 것이 좋을까요?
음…..
배열을 앞에서 뒤로 가면서 점검하여 해당요소를 삭제하면, 그 요소 뒤에 있던 요소들이 앞으로 한 칸씩 이동을 해야할 것 같아요.
그러면, 배열의 다음 요소를 찾아가는 것이 좀 헷갈릴 것 같거든요. 다음 요소를 찾아가려고 헸는데, 자리가 달라져 있으니까, 여기 어디 나는 누구? 가 될 같아요.
그래서!!!!!
배열을 뒤에서 앞으로 가면서 점검해 보도록 하겠습니다! YEAH!
배열 맨마지막 요소부터 점검을 하며 내려가서, 해당 요소를 발견하여 배열에서 삭제하면, 그 삭제된 해당요소 뒤편에 있는 요소들은 배열 한 칸씩 이동을 하겠지만 이 요소들은 이미 점검을 마친 상태라 우리가 다시 찾아볼 필요가 없겠지요~~~?.
우리는 아직 점검되지 않은 요소들, 즉, 그 삭제된 해댱요소 앞에 있는 요소들을 점검해야 하는데, 이 요소들은 자리이동을 안하였으니, 그냥 심플하게, 삭제된 요소가 있던 자리에서 출발하여, 앞으로 계속 나아가며 배열을 점검하면 될 것 같아요~~^^*.
for( let i = particles.length -1; i >= 0 ; i--) {
if ( particles[i].finished() ){
particles.splice(i, 1);
}
}
//배열의 인덱스는 0 부터 length - 1 까지 존재하므로, [length - 1] 부터 [0] 까지 거꾸로 차근차근 점검/삭제해 보겠습니다.
// 배열 요소가 다섯 개이면, length = 5, 인덱스는 [0], [1], [2], [3]. [4]까지 있게 됩니다.
// 즉 배열 인덱스는 [0] ~ [length - 1] 입니다. 
전체 코드를 살펴 보실까요~~^^*
let particles = [];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
let p = new Particle();
particles.push(p);
for( let i = particles.length-1; i >= 0; i--)
//공기방울 배열을 맨뒤에서 앞으로 나아가면서~^^*
{
particles[i].update();
particles[i].show();
if(particles[i].finished()) {
//공기방울이 완전히 투명해 졌다면
particles.splice(i, 1);
//공기방울 배열에서 삭제해 보겠습니다~^^*
}
}
print(particles.length);
//console 창에서 공기방울 배열 길이를 확인해 보셔요~
//무한증식되지 않지요~~^^*
//우리 컴퓨터 쉴 수 있어서 코딩한 보람이 있네요~~~!!
}
class Particle{
constructor(){
this.x = 200;
this.y = 380;
this.vx = random(-1, 1);
this.vy = random(-5, -1);
this.alpha = 255;
}
update(){
this.x += this.vx;
this.y += this.vy;
this.alpha -= 3;
}
show(){
noStroke();
fill(255, this.alpha);
ellipse(this.x, this.y, 16);
}
finished(){
return this.alpha < 0;
// 공기방울의 불투영도가 0 보다 작으면, 즉 완전히 투명해 졌으면~
// TRUE 값을 리턴합니다~^^*
}
}우리 컴퓨터 이제 좀 쉴 수 있니~~^^*? 토닥토닥 다정하게 부르시면서~~클릭해 주세요~~~^^* 콘솔창에 프린트 되고 있는 공기방울 배열의 길이를 확인해 보셔요~~*
이루고 싶은 소망 때문에, 하고픈 일도 해야 할 일도 많으실텐데…. 일의 배열의 길이를 적절히 조절하면서, 스스로에게 쉼도 선물하는, 맛있는 점심시간 되시기 바래요~~^^*
오늘도 바쁘신 가운데 짬내어 저와 함께 코딩공부 해 주셔서 감사합니다~^^* 소중한 공부 동행, 감사드려요~~^^*
내일 또 우리 코딩 공부 함께 해요~~~~^^*
네!!! 꿈은 이루어 집니다!!!
Silverback9 
댓글 남기기