Coding/P5.JS

< P5.JS > Particle system

ted0505 2022. 2. 9. 12:47

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의 깃허브 저장소