フローフィールド画面-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

フローフィールド画面

Susan Sarandon

Oct 03, 2024 pm 08:18 PM

Flow Field Screen

Vanilla JS と HTML Canvas を使用した動的フローフィールド

抽象的なパーティクルアニメーションに魅了されたことがありますか?これらの流れるような動的なビジュアルは、プレーンな JavaScript と HTML の Canvas 要素を使用する驚くほど簡単な手法で実現できます。この記事では、数千のパーティクルにアニメーションを与え、自然な動きを与えるフローフィールドを作成するプロセスを詳しく説明します。

1. プロジェクトのセットアップ

まず、キャンバスを設定するための HTML ファイル、スタイルを設定するための CSS ファイル、ロジックを処理するための JavaScript ファイルの 3 つのファイルが必要です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flow Fields</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <canvas id="canvas1"></canvas>
    <script src="script.js"></script>
</body>
</html>

ログイン後にコピー

説明：

を定義します。すべてのアニメーションが行われる要素です。
styles.css はキャンバスのスタイルを設定するためにリンクされます。
メインのアニメーションロジックは script.js に含まれています。

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;
    }
}

ログイン後にコピー

説明：

コンストラクター: 各パーティクルはランダムな位置と移動速度で初期化されます。履歴配列は過去の位置を追跡して軌跡を作成します。
draw(): この関数は、履歴に基づいてパーティクルのパスを描画します。パーティクルは視覚効果を高めるカラフルな軌跡を残します。
update(): ここでは、流れ場から角度を計算することによって粒子の位置が更新されます。速度と方向は三角関数によって制御されます。
reset(): パーティクルが軌跡を終了すると、新しいランダムな位置にリセットされます。

4. エフェクトクラス: アニメーションの構成

Effect クラスは、パーティクルと、パーティクルの動きを制御する流れフィールド自体の作成を処理します。

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();
        });
    }
}

ログイン後にコピー

説明：

コンストラクター: キャンバスの寸法、パーティクルの数、およびフローフィールドを初期化します。
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() 関数を再帰的に呼び出すことでアニメーションを滑らかに保ちます。

結論

Particle クラスと Effect クラスを分解することにより、バニラ JavaScript のみを使用して、流動的でダイナミックな流れフィールドアニメーションを作成しました。 HTML キャンバスのシンプルさと JavaScript の三角関数を組み合わせることで、これらの魅惑的な視覚効果を構築できます。

パーティクルの数、色、流れ場の式を自由にいじって、独自のユニークな効果を作成してください。

以上がフローフィールド画面の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7922

Java チュートリアル

1652

CakePHP チュートリアル

1411

Laravel チュートリアル

1303

PHP チュートリアル

1249

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

フロントエンド開発でVSCodeと同様に、パネルドラッグアンドドロップ調整機能を実装する方法は？ Apr 04, 2025 pm 02:06 PM

フロントエンドのVSCodeと同様に、パネルドラッグアンドドロップ調整機能の実装を調べます。フロントエンド開発では、VSCODEと同様のVSCODEを実装する方法...

See all articles

フローフィールド画面

Vanilla JS と HTML Canvas を使用した動的フローフィールド

1. プロジェクトのセットアップ

説明：

2. CSS を使用してキャンバスをスタイル設定する

説明：

3. パーティクルクラス: 魔法の作成

説明：

4. エフェクトクラス: アニメーションの構成

説明：

5. アニメーションループで命を吹き込む

説明：

結論

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

フローフィールド画面

Vanilla JS と HTML Canvas を使用した動的フロー フィールド

1. プロジェクトのセットアップ

説明：

2. CSS を使用してキャンバスをスタイル設定する

説明：

3. パーティクル クラス: 魔法の作成

説明：

4. エフェクトクラス: アニメーションの構成

説明：

5. アニメーション ループで命を吹き込む

説明：

結論

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック

Vanilla JS と HTML Canvas を使用した動的フローフィールド

3. パーティクルクラス: 魔法の作成

5. アニメーションループで命を吹き込む