< P5.JS > Particle system

Particle System_Nature Of Code

 

#01 : Particle System_Nature Of Code #4.1

 

## 4.1 강의 개요

 

4.1의 강좌의 Description 을 보면, Mover 클래스를 Particle 클래스로 클래스의 이름을 변환하고, 추가로 객체 파티클의 수명을 더한다. 마지막으로 이 수명이 더해진 파티클을 배열을 활용하여 여러 개의 객체를 만드는 것으로 보여진다.

## 새롭게 알게 된 부분

 

• 객체의 무한한 생성
  • draw() 함수안에서 객체를 생성해주면, draw() 함수는 프로그램이 실행되는 동안 반복해서 실행이 되니, 객체를 무한히 생성할 수 있다.
  • 배열들은 투명해지면서 없어진 것처럼 보이지만, 실제로 없어진 것이 아니라 투명해진 것이기 때문에 계속 생성하면 과부하가 걸린다.
  • 이 문제를 해결하고자, 배열을 삭제하는 함수를 사용한다.

 

• 배열 삭제

for(let i = particles.length-1; i >= 0; i--) {     if(particles[i].finished()) {       particles.splice(i, 1);     }   }

• 배열을 삭제하기 위한 반복문에서 배열 크기에 -1을 하는 이유는 배열의 올바른 범위 값을 입력하기 위함.
• 각 배열들이 finished() 메소드의 반환 값(수명이 다했는지 true or false)을 받았는지 확인하고, 조건이 성립하면 해당 배열을 삭제한다.

## 개인적인 공부

 

• for-of문

• 수업시간에도 for-of 문을 다루었지만, 파이썬의 기본 for문과 비슷하여 조금 찾아봤다. 

for-of문은 반복할 수 있는 객체를 순회할 수 있도록 해주는 반복문이다. 즉, 이 강좌의 예제에서는 array가 반복 할 수 있는 객체인 것이다. 이 array 를 순회하는 반복문.

 

객체에 열거할 수 있는 프로퍼티의 값을 지정된 변수에 대입한다. 

쉽게 말하자면, 객체의 크기만큼 반복하고 객체의 값을 변수에 대입한다.

---

#02 : Particle System_Nature Of Code #4.2

 

## 강의 개요

 

이미터 : 무언가 발산하는 장치. 파티클이 뿜어져 나오는 장치를 만들자.

 

## 새롭게 알게 된 부분

 

• Particle클래스와는 다르게 Emitter클래스에서 생긴 것.
  • < particles 배열 >

emit(num) {     for(let i=0;i<num;i++) {       this.particles.push(new Particle(this.pos.x,  this.pos.y));     }

particles 배열에 파티클의 값을 넣어서 마치 중첩 되는 듯하게 만들었다.

 

• sketch.js 에 emitters 배열 추가
  • 이미터들을 생성하기 위함.

function mousePressed() {   emitters.push(new Emitter(mouseX, mouseY)); }

마우스의 입력 값이 들어올 때 마다, emitters 배열에 emitter객체를 추가해 해당 마우스의 현재 위치 값에 생성되도록 한다.

## 개인적인 공부

 

• 궁금한 점
  • Emitter클래스를 통해 Particle클래스의 파티클이 뿜어져 나오는 덩어리를 만들었다. 이게 상속이라는 개념인가? 찾아보니 상속은 extends를 사용하는 듯 보이는데 여기서는 상속이 아닌건가?

인간미가 돋보였던 강의..

---

#02 : Particle System_Nature Of Code #4.3

 

## 강의 개요

 

상속과 다형성을 입혀보자.. 이 강의에서 상속이라는 개념이 나오는 것 같다!

 

## 새롭게 알게 된 부분

 

• index.html 파일 순서
  • 순차적으로 실행되기 때문에 먼저 수행되어야할 파일의 순서를 잘 지정해주어야한다. 한참을 찾았는데 강의를 듣다보니 파일의 순서를 지적했다..

 

• 상속
  • 기존 클래스로 새로운 클래스를 만드는 것.
    • 두 클래스를 부모와 자식으로 맺어주는 것.

• 키워드 extends 를 사용하여 상속관계를 만든다.

• 자식이 되는 클래스(하위 클래스)는 부모가 되는 클래스(상위 클래스)의 모든 변수, 메소드를 상속 받는다. 상위 클래스는 하위 클래스의 영향을 받지 않는다.

• 강의에서 사용된 상속관계

class Confetti extends Particle {   constructor(x, y) {     super(x, y);     this.angle = random(TWO_PI);   }   display() {     noStroke();     fill(255, this.lifetime);     push();     translate(this.x, this.y);     rotate(this.angle);     square(0,0, this.r*2);     pop();   } }

• 하위 클래스 confett는 상위 클래스 particle 의 모든 것들(속도, 가속도, 위치 등)을 포함하고 추가로, 사각형을 그리는 메소드를 추가했다.

class Particle extends p5.Vector {   constructor(x, y) {     super(x, y);     this.vel = p5.Vector.random2D();     this.vel.mult(random(0.5, 2));     this.acc = createVector(0, 0);     this.r = 5;     this.lifetime = 255;   }   finished() {     return (this.lifetime < 0);   }   applyForce(force) {     this.acc.add(force);   }   update() {     this.vel.add(this.acc);     this.add(this.vel);     this.acc.set(0, 0);     this.lifetime -= 5;   }   display() {     noStroke();     strokeWeight(2);     fill(255, this.lifetime);     ellipse(this.x, this.y, this.r * 2);   } }

• particle 클래스가 p5.Vector 클래스에 상속되어 pos 벡터를 지웠다.

왜 굳이 p5.Vector 클래스를 상속하여 pos 벡터를 지우는건지는 아직 이해가 잘 안된다.

 

다형성은 찾아봐도 어려운 부분 같다..

• 저널링 7의 깃허브 저장소

• https://github.com/ted050505/Particle_System