PixiJS でパーティクルを描画して p5.js で扱うための下準備（まずは独立したキャンバスでシンプルな描画から）

Last updated at 2023-01-16Posted at 2022-12-31

はじめに

この記事では、p5.js で PixiJS の描画を使うことを目的とし、その下準備として PixiJS の描画を p5.js Web Editor上で行うということをやります。

過去に行ったこと

以前、以下のような記事を書いたことがありました。

●p5.js Web Editor上で PixiJS の「ノイズ・色彩・ブラーのフィルタ」を組み合わせて使ってみる - Qiita
　https://qiita.com/youtoy/items/1180c80b91064d4e043d

この時は、p5.js側でキャンバスを用意して、それを PixiJS で利用するやり方にしていました。
しかし、その方法が最適なのかが分かっていません。それとは別のやり方も試してみるという意味で、今回は、PixiJS側で描画領域を用意する形（それを p5.js で読み込むという別のやり方）で試してみることにしました。

PixiJS を使った描画

ここから、PixiJS を使ったプログラムを書いていきます。

ライブラリを読み込み

まず下準備として、PixiJS を CDN から読み込む方法を確認します。

CDN からの読み込みについては、以下で公開されている最新版を使いました。
●pixi.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
　https://cdnjs.com/libraries/pixi.js

PixiJS の描画領域に描画をするだけのプログラム

HTMLファイルでは、上記の　CDN からの PixiJS の読み込みをしつつ、PixiJS用のキャンバスを準備します。具体的には、以下の内容にしました。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.0.5/pixi.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <canvas id="myCanvas"></canvas>

    <script src="sketch.js"></script>
  </body>
</html>

それでは、JavaScript のプログラムの話にうつります。今回、とりあえずのテスト用として、以下の内容を作ってみました。
内容は、p5.js のキャンバスは用意しつつ、PixiJS のキャンバスも用意し、PixiJS のキャンバスのほうで、スプライトを移動させるというものにしました。

let app;
let sprite;

function setup() {
  createCanvas(400, 200);

  app = new PIXI.Application({
    width: width,
    height: height,
    backgroundColor: "#111111",
    view: document.getElementById("myCanvas"),
  });

  const container = new PIXI.Container();
  app.stage.addChild(container);

  sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
  sprite.x = width / 2;
  sprite.y = height / 2;
  sprite.width = 10;
  sprite.height = 10;
  sprite.alpha = 1;

  container.addChild(sprite);
}

function draw() {
  background(220);

  sprite.x += 1;
  sprite.y -= 1;
}

上記を実行すると、以下のような内容が描画されます。
上には p5.js のキャンバスが、下には PixiJS の描画領域が表示され、PixiJS の描画領域のほうで白い矩形が動くという内容です。

PixiJS の描画を p5.js側に取り込む

次に、PixiJS で行った描画を、p5.js側に取り込んでみます。

先ほどの JavaScript のプログラムに、以下の内容を追加します。

PixiJS の描画領域は隠す（ canvasPixi.style.display = "none"; ）
PixiJS の描画内容を p5.js のキャンバスに描き込む（ drawingContext.drawImage(canvasPixi, 0, 0); )

具体的な内容は、以下のとおりです。

let canvasPixi, app;
let sprite;

function setup() {
  createCanvas(400, 300);

  canvasPixi = document.getElementById("myCanvas");
  canvasPixi.style.display = "none";

  app = new PIXI.Application({
    width: width,
    height: height,
    backgroundColor: "#111111",
    view: canvasPixi,
  });

  const container = new PIXI.Container();
  app.stage.addChild(container);

  sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
  sprite.x = width / 2;
  sprite.y = height / 2;
  sprite.width = 10;
  sprite.height = 10;
  sprite.alpha = 1;

  container.addChild(sprite);
}

function draw() {
  background(220);

  drawingContext.drawImage(canvasPixi, 0, 0);

  sprite.x += 1;
  sprite.y -= 1;
}

上記を実行した結果は、以下となります。描画領域は 1つだけになり、p5.js のキャンバスに該当するものですが、その描画処理は PixiJS で行ったものになります。

ひとまず、今回の目的の 1つは達成できました。

Sprite関連の公式情報

今回、描画で用いている Sprite は、座標・大きさ・透明度を指定してみました。これから、さらにいろいろな描画を行っていけるよう、以下の公式情報を確認していければと思いました。

●PixiJS: Sprites
　https://pixijs.io/guides/basics/sprites.html

●PixiJS API Documentation
　https://pixijs.download/dev/docs/PIXI.Sprite.html
●PixiJS: Sprite
　https://api.pixijs.io/@pixi/sprite/PIXI/Sprite.html

今後試したいこと

今後は、PixiJS の描画でパーティクルを扱うような内容を試せればと思います。

パーティクルの軽いお試し

とりあえず、PixiJS側で 8万個の小さい矩形を描画して動かす、ということをやってみました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up