p5js를 사용하여 컬러 입자 효과를 만드는 방법입니다.쉬웠어

제가 처음 발표한 개발자에게 며칠 전에 만든 감동적인 것들을 가져왔습니다.유색 입자!🥳
✨ 맞아요!입자 효과는 재미있는 애니메이션이다.작은 공과 그들의 연결선은 매우 아름다운 시각적 체험을 제공했고 많은 사용 사례도 있다.
🤩다음은 우리가 건설할 프로젝트의 초보적인 상황이다.
우리는 어떻게 이런 효과를 창조하는지 깊이 연구할 것이다.시간을 낭비하지 말고 우리 갑시다!
이 블로그는 두 부분으로 나뉘는데,'입문'과'코드 작성!'이다.우리는 먼저 편집기를 초기 설정한 후에 그것을 인코딩할 것이다.

Note: This blog assumes that you know basics of P5.js along with OOPS concepts.

⚜️ 개시하다⚡

먼저 IDE 또는 편집기를 설정하여 입자를 생성합니다.
첫 번째 단계: 기본 보일러 보드 코드로 HTML CSS 및 JS 파일을 만들고 설정합니다.
2단계: HTML 파일에 다음 포함할 스크립트 추가p5js library.

https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js;

3단계: CSS 파일의 기본 채우기 및 여백을 재설정합니다.어떻게 해야 할지 알아?😛
4단계: 초기 설정 완료: P

🔱 됐어!😈

이렇게 하려면 JavaScript 파일을 사용합니다.
코드에서 우리가 해야 할 일을 개술해 보겠습니다.

입자를 저장할 어레이를 생성합니다.

입자류를 생성합니다.

setup () 함수를 설정합니다.

draw() 함수를 설정합니다.

우리 하나씩 하나씩 하자.🔥
1. 배열을 만듭니다.잠시 후 우리는 입자를 이 진열에 밀어 넣을 것이다.

const particles = [];

2. 입자에 클래스를 생성합니다.

This class will contain:

1. a constructor for instantiating a Particle( ) object.
2. methods for particle functionality. (movement, bouncing back etc).

constructor 방법은 이 종류의 대상을 만들고 초기화하는 데 사용되는 특수한 방법이다.

class Particle {
     constructor() { /* code here */ }
}

🔹이 구조 함수는 입자에 존재하는 속성을 포함할 것이다.
🔸우리는 우리의 입자가 X-Y축에서 이동하기를 희망한다. 만약 우리의 입자가 이동하고 있다면, 이것은 그것이 반드시 하나가 있어야 한다는 것을 의미한다. velocity입자도 하나size 또는 반경이 있는데, 왜냐하면 그것은 기본적으로 하나의 원이기 때문이다.
🔹이 세 가지 속성은 다음과 같습니다.

pos = 입자의 위치

vel = 입자의 속도와

size = 입자의 반경.

    constructor() {
        //POSITION
        this.pos = createVector(random(width), random(height));
        //VELOCITY
        this.vel = createVector(random(-1, 1), random(-1, 1));
        //SIZE
        this.size = 10;
    }

createVector 지정된 X 및 Y 좌표vector에 생성됩니다.벡터는 크기와 방향이 있는 실체다.
🔸우리는 createVector() 의 pos 에 무작위 X-Y 값을 제공했다. 왜냐하면 우리는 입자가 화면에 나타나는 무작위 위치를 원하기 때문이다.이를 위해, 우리는 p5를 사용합니다.js 내장 방법random().
🔹프레임이 업데이트될 때 입자의 위치를 변경할 수 있도록 vel 속성에 무작위 값 범위가 -1에서 1까지의 벡터를 지정하거나 pos의 X와 Y 좌표에 세 개의 값인 -1, 0, 1을 추가합니다.
너는 너에게 줄 수 있는 입자 size개(작게 유지)🤭).
🔸입자와 선에 무작위 색을 부여하기 위해서, 우리는 0 to 255 변수에서 r, g, b 변수까지의 무작위 값을 지정할 것입니다.constructor() 결국 이렇게 될 거야.

constructor() {
     //POSITION
     this.pos = createVector(random(width), random(height));
     //VELOCITY
     this.vel = createVector(random(-1, 1), random(-1, 1));
     //SIZE
     this.size = 10;

     this.r = random(0, 255);
     this.g = random(0, 255);
     this.b = random(0, 255);
}

🔹지금, 매번 호출draw() 함수, 우리는 그 중에서 update 방법을 만들 것이다
입자류.
🔸 function update() 속도 벡터를 위치 벡터에 추가한 다음에 다른 edges()라는 함수를 호출하여 충돌 검사를 한다.잠시 후에 만들 것입니다.계속 읽어!

update(){
        this.pos.add(this.vel);
        this.edges();
    }

🔹우리는 이미 입자에 속성을 부여했지만, 우리는 여전히 캔버스에 그것들을 그리지 않았다.입자 클래스에 함수를 만들어서 입자를 그립니다.

drawParticle() {
        noStroke();
        fill(this.r,this.g, this.b)
        circle(this.pos.x, this.pos.y, this.size);
    }

🔸캔버스의 가장자리를 검사하기 위해서 edges() 라는 함수를 만들 것입니다.

Logic behind function edges() :

if X or Y position of the particle is less than < 0 OR X or Y position of particle is less than < width or < height of canvas respectively, then multiply -1 with velocity X or Y vector respectively.

 edges() {

        if(this.pos.x < 0 || this.pos.x > width) {
            this.vel.x *= -1;
        }
        if(this.pos.y < 0 || this.pos.y > height) {
            this.vel.y *= -1;
        }
    }

🔹입자를 선으로 연결하기checkParticles()는 입자 사이에 일정한 거리가 있는지 확인하고 진짜라면 입자 사이를 그립니다line.네트🕸️🕷️)

  checkParticles(particles) {
        particles.forEach(particle => {
            const d = dist(this.pos.x, this.pos.y, particle.pos.x, particle.pos.y);
            if (d < 120) {
                stroke(this.r,this.g, this.b);
                line(this.pos.x, this.pos.y, particle.pos.x, particle.pos.y)
            }
        });
    };

🔸 stroke() 페이지가 다시 로드될 때마다 무작위 색상으로 행이 음영처리됩니다.

Note: The next step is optional!

✨입자에 정지 효과를 생성합니다.그것을 일종의 장려로 간주하다.🤭
🔹 repel() 함수는 입자를 마우스 커서에서 멀리 떨어뜨려 정지 효과를 낸다.

 repel() {
        this.pos.x = constrain(this.pos.x, 0, width);
        this.pos.y = constrain(this.pos.y, 0, height);
        let distance = dist(this.pos.x, this.pos.y, mouseX, mouseY);
        let mouse = createVector(mouseX, mouseY);
        let difference = p5.Vector.sub(mouse, this.pos);
        difference.setMag(1);
        //If the mouse comes near a particle, it moves away
        if (distance < 400) {
          this.pos.sub(difference);
        }
      }
}

😈 이 방법은 선택할 수 있기 때문에 나는 그것을 설명할 생각은 없다.계속해서 위 함수에서 무슨 일이 일어났는지 찾아내 보세요.😁
🎉 그래서 우리는 Particle류를 성공적으로 만들었다.현재 우리는 setup() 함수를 만들 것이다.
3. setup() 함수를 설정합니다.
🔸창의 너비와 높이가 같은 크기의 캔버스를 만듭니다.

function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
}

🔹 입자 수의 값을 저장하는 상수를 만듭니다.우리는 입자의 수량이 창의 너비와 정비례하기를 바란다.

function setup() {
      createCanvas(window.innerWidth, window.innerHeight);
      const particlesLength = Math.floor(window.innerWidth / 9);
}

🔸 입자 () (입자 클래스 (Particle class) 에서 가져오는) 순환을 만듭니다.

 function setup() {                 
      createCanvas(window.innerWidth, window.innerHeight);
      const particlesLength = Math.floor(window.innerWidth / 9);
      for (let i = 0; i < particlesLength; i++) {
      particles.push(new Particle());     
      }
 }

이게 바로 설정 기능!🥳
4: draw() 함수를 설정합니다.
🔹우리는 입자 그룹을 사용할 것입니다. 그룹의 모든 입자에 대해 입자 클래스에서 만든 모든 방법을 실행하여 모든 기능을 제공할 것입니다.

 function draw() {
        background(0);
        particles.forEach((p, index) => {
            p.update();
            p.drawParticle();
            p.checkParticles(particles.slice(index));
            p.repel();
        })
    }

🔸우리는 for를 background()로 설정하여 함수가 실행될 때마다 그림을 다시 그립니다.
😎마지막으로, 우리는 코드를 완성하고, 당신의 시스템에서 당신의 프로그램을 실행하고, 그리고 펑 소리!여기저기 알갱이들이야!!🤩
최종 JS 코드와 라이브 데모를 확인하십시오.👇🏻
🎉🎉🎉축하합니다.🥳, 멀리 와줘서 고마워.당신은 p5js로 약간의 입자 효과를 창조하기를 희망합니다.✨✨✨
나는 이 블로그에서 새로운 것을 얻을 수 있기를 바란다.💯.
너의 생각을 댓글로 달아줘.💭. 피드백📝 너의 친구와 나누다🌏. 다음 블로그에서 봐요.🙋🏻‍♂️
트위터: