설명:

2. CSS로 캔버스 스타일 지정

캔버스에 검정색 배경을 제공하고 모든 패딩과 여백이 제거되었는지 확인하는 간단한 스타일을 추가해 보겠습니다.

* {    margin: 0;    padding: 0;    box-sizing: border-box;}canvas {    background-color: black;}

설명:

3. 입자 클래스: 마법 만들기

Particle 클래스는 애니메이션의 핵심이 있는 곳입니다. 각 입자는 캔버스를 가로질러 이동하면서 과거 위치의 흔적을 남기고 흐르는 효과를 만들어냅니다.

class Particle {    constructor(effect) {        this.effect = effect;        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.speedModifier = Math.floor(Math.random() * 5   1);        this.history = [{ x: this.x, y: this.y }];        this.maxLength = Math.floor(Math.random() * 200   10);        this.timer = this.maxLength * 2;        this.colors = [\\'#4C026B\\', \\'#8E0E00\\', \\'#9D0208\\', \\'#BA1A1A\\', \\'#730D9E\\'];        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];    }    draw(context) {        context.beginPath();        context.moveTo(this.history[0].x, this.history[0].y);        for (let i = 1; i < this.history.length; i  ) {            context.lineTo(this.history[i].x, this.history[i].y);        }        context.strokeStyle = this.color;        context.stroke();    }    update() {        this.timer--;        if (this.timer >= 1) {            let x = Math.floor(this.x / this.effect.cellSize);            let y = Math.floor(this.y / this.effect.cellSize);            let index = y * this.effect.cols   x;            let angle = this.effect.flowField[index];            this.speedX = Math.cos(angle);            this.speedY = Math.sin(angle);            this.x  = this.speedX * this.speedModifier;            this.y  = this.speedY * this.speedModifier;            this.history.push({ x: this.x, y: this.y });            if (this.history.length > this.maxLength) {                this.history.shift();            }        } else if (this.history.length > 1) {            this.history.shift();        } else {            this.reset();        }    }    reset() {        this.x = Math.floor(Math.random() * this.effect.width);        this.y = Math.floor(Math.random() * this.effect.height);        this.history = [{ x: this.x, y: this.y }];        this.timer = this.maxLength * 2;    }}

설명:

4. 효과 클래스: 애니메이션 구성

효과 클래스는 입자 생성과 입자의 움직임을 제어하는 ​​흐름장 자체를 처리합니다.

class Effect {    constructor(canvas) {        this.canvas = canvas;        this.width = this.canvas.width;        this.height = this.canvas.height;        this.particles = [];        this.numberOfParticles = 3000;        this.cellSize = 20;        this.flowField = [];        this.curve = 5;        this.zoom = 0.12;        this.debug = true;        this.init();    }    init() {        this.rows = Math.floor(this.height / this.cellSize);        this.cols = Math.floor(this.width / this.cellSize);        for (let y = 0; y < this.rows; y  ) {            for (let x = 0; x < this.cols; x  ) {                let angle = (Math.cos(x * this.zoom)   Math.sin(y * this.zoom)) * this.curve;                this.flowField.push(angle);            }        }        for (let i = 0; i < this.numberOfParticles; i  ) {            this.particles.push(new Particle(this));        }    }    drawGrid(context) {        context.save();        context.strokeStyle = \\'white\\';        context.lineWidth = 0.3;        for (let c = 0; c < this.cols; c  ) {            context.beginPath();            context.moveTo(c * this.cellSize, 0);            context.lineTo(c * this.cellSize, this.height);            context.stroke();        }        for (let r = 0; r < this.rows; r  ) {            context.beginPath();            context.moveTo(0, r * this.cellSize);            context.lineTo(this.width, r * this.cellSize);            context.stroke();        }        context.restore();    }    render(context) {        if (this.debug) this.drawGrid(context);        this.particles.forEach(particle => {            particle.draw(context);            particle.update();        });    }}

설명:

5. 애니메이션 루프로 생동감을 불어넣기

모든 것이 작동하도록 하려면 캔버스를 지속적으로 지우고 입자를 다시 렌더링하는 애니메이션 루프가 필요합니다.

const effect = new Effect(canvas);function animate() {    ctx.clearRect(0, 0, canvas.width, canvas.height);    effect.render(ctx);    requestAnimationFrame(animate);}animate();

설명:

결론

입자 및 효과 클래스를 세분화하여 바닐라 JavaScript만을 사용하여 유동적이고 역동적인 흐름장 애니메이션을 만들었습니다. JavaScript의 삼각 함수와 결합된 HTML 캔버스의 단순성을 통해 우리는 이러한 매혹적인 시각적 효과를 구축할 수 있습니다.

입자 수, 색상 또는 흐름장 공식을 자유롭게 활용하여 자신만의 고유한 효과를 만들어보세요!

","image":"http://www.luping.net/uploads/20241022/17296041676717aa472ee02.jpg","datePublished":"2024-11-09T01:12:23+08:00","dateModified":"2024-11-09T01:12:23+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
온라인 도구
소프트웨어 튜토리얼
사이트 탐색
프로그램 작성
첫 장 > 프로그램 작성 > 유동장 화면

유동장 화면

2024-11-09에 게시됨
검색:279

Flow Field Screen

바닐라 JS 및 HTML 캔버스를 사용한 동적 흐름 필드

추상적인 입자 애니메이션에 매료된 적이 있나요? 이러한 유동적이고 역동적인 시각적 효과는 일반 JavaScript와 HTML 캔버스 요소를 사용하는 놀랍도록 간단한 기술을 통해 얻을 수 있습니다. 이 기사에서는 수천 개의 입자에 애니메이션을 적용하여 자연스러운 움직임을 제공하는 흐름장을 만드는 과정을 자세히 설명합니다.

1. 프로젝트 설정

시작하려면 캔버스를 설정하기 위한 HTML 파일, 스타일 지정을 위한 CSS 파일, 로직 처리를 위한 JavaScript 파일의 세 가지 파일이 필요합니다.



    Flow Fields

설명:

  • 모든 애니메이션이 실행될 요소를 정의합니다.
  • styles.css는 캔버스 스타일을 지정하기 위해 연결됩니다.
  • 주요 애니메이션 로직은 script.js에 포함되어 있습니다.

2. CSS로 캔버스 스타일 지정

캔버스에 검정색 배경을 제공하고 모든 패딩과 여백이 제거되었는지 확인하는 간단한 스타일을 추가해 보겠습니다.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

canvas {
    background-color: black;
}

설명:

  • 여백과 패딩을 0으로 설정하면 캔버스가 전체 화면을 채우게 됩니다.
  • 검은색 배경은 흰색 입자에 좋은 대비를 제공합니다.

3. 입자 클래스: 마법 만들기

Particle 클래스는 애니메이션의 핵심이 있는 곳입니다. 각 입자는 캔버스를 가로질러 이동하면서 과거 위치의 흔적을 남기고 흐르는 효과를 만들어냅니다.

class Particle {
    constructor(effect) {
        this.effect = effect;
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.speedModifier = Math.floor(Math.random() * 5   1);
        this.history = [{ x: this.x, y: this.y }];
        this.maxLength = Math.floor(Math.random() * 200   10);
        this.timer = this.maxLength * 2;
        this.colors = ['#4C026B', '#8E0E00', '#9D0208', '#BA1A1A', '#730D9E'];
        this.color = this.colors[Math.floor(Math.random() * this.colors.length)];
    }

    draw(context) {
        context.beginPath();
        context.moveTo(this.history[0].x, this.history[0].y);
        for (let i = 1; i = 1) {
            let x = Math.floor(this.x / this.effect.cellSize);
            let y = Math.floor(this.y / this.effect.cellSize);
            let index = y * this.effect.cols   x;
            let angle = this.effect.flowField[index];

            this.speedX = Math.cos(angle);
            this.speedY = Math.sin(angle);
            this.x  = this.speedX * this.speedModifier;
            this.y  = this.speedY * this.speedModifier;

            this.history.push({ x: this.x, y: this.y });
            if (this.history.length > this.maxLength) {
                this.history.shift();
            }
        } else if (this.history.length > 1) {
            this.history.shift();
        } else {
            this.reset();
        }
    }

    reset() {
        this.x = Math.floor(Math.random() * this.effect.width);
        this.y = Math.floor(Math.random() * this.effect.height);
        this.history = [{ x: this.x, y: this.y }];
        this.timer = this.maxLength * 2;
    }
}

설명:

  • 생성자: 각 입자는 임의의 위치와 이동 속도로 초기화됩니다. 기록 배열은 과거 위치를 추적하여 트레일을 생성합니다.
  • draw(): 이 함수는 입자의 기록을 기반으로 입자의 경로를 그립니다. 입자는 시각적 효과를 더해주는 다채로운 흔적을 남깁니다.
  • update(): 여기서는 흐름장의 각도를 계산하여 입자의 위치가 업데이트됩니다. 속도와 방향은 삼각함수로 제어됩니다.
  • reset(): 입자가 트레일을 마치면 새로운 무작위 위치로 재설정됩니다.

4. 효과 클래스: 애니메이션 구성

효과 클래스는 입자 생성과 입자의 움직임을 제어하는 ​​흐름장 자체를 처리합니다.

class Effect {
    constructor(canvas) {
        this.canvas = canvas;
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.particles = [];
        this.numberOfParticles = 3000;
        this.cellSize = 20;
        this.flowField = [];
        this.curve = 5;
        this.zoom = 0.12;
        this.debug = true;
        this.init();
    }

    init() {
        this.rows = Math.floor(this.height / this.cellSize);
        this.cols = Math.floor(this.width / this.cellSize);
        for (let y = 0; y  {
            particle.draw(context);
            particle.update();
        });
    }
}

설명:

  • 생성자: 캔버스 크기, 입자 수 및 흐름장을 초기화합니다.
  • init(): 각 그리드 셀에 대한 삼각 함수를 결합하여 흐름장의 각도를 계산합니다. 이 필드는 입자가 움직이는 방식에 영향을 미칩니다.
  • drawGrid(): 디버깅 시 사용되는 캔버스를 셀로 나누는 그리드를 그립니다.
  • render(): 각 입자에 대한 그리기 및 업데이트 메서드를 호출하여 캔버스 전체에서 입자에 애니메이션을 적용합니다.

5. 애니메이션 루프로 생동감을 불어넣기

모든 것이 작동하도록 하려면 캔버스를 지속적으로 지우고 입자를 다시 렌더링하는 애니메이션 루프가 필요합니다.

const effect = new Effect(canvas);

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    effect.render(ctx);
    requestAnimationFrame(animate);
}
animate();

설명:

  • clearRect(): 이전 프레임 위에 그리는 것을 방지하기 위해 각 프레임에서 캔버스를 지웁니다.
  • requestAnimationFrame: animate() 함수를 반복적으로 호출하여 애니메이션을 부드럽게 유지합니다.

결론

입자 및 효과 클래스를 세분화하여 바닐라 JavaScript만을 사용하여 유동적이고 역동적인 흐름장 애니메이션을 만들었습니다. JavaScript의 삼각 함수와 결합된 HTML 캔버스의 단순성을 통해 우리는 이러한 매혹적인 시각적 효과를 구축할 수 있습니다.

입자 수, 색상 또는 흐름장 공식을 자유롭게 활용하여 자신만의 고유한 효과를 만들어보세요!

릴리스 선언문 본 글은 https://dev.to/ibra-kdbra/flow-field-screen-567c?1 에서 복제하였습니다. 침해 내용이 있는 경우, [email protected]으로 연락하여 삭제해 주시기 바랍니다.
최신 튜토리얼 더>
분류더>
일본어를 배우다 한국어를 배우다 중국어를 배우다 외국어를 배우다 게임 일반적인 문제 기술 주변기기 일체 포함 소프트웨어 튜토리얼 프로그램 작성 기사

중국어 공부

도구더>
이미지 base64 디코딩
중국어 병음
유니코드 인코딩
JS 난독화 암호화 압축
URL 16진수 암호화 도구
UTF-8 인코딩 변환 도구
온라인 Ascii 인코딩 및 디코딩 도구
MD5 암호화 도구
해시/해시 텍스트 온라인 암호화 및 암호 해독 도구
온라인 SHA 암호화

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3