p5.js

p5.js環境構築（TypeScript）

Posted on by pasocafe00 / 0件のコメント

🙅‍♂2023年3月現在おすすめできない

環境構築（VSCode:TypeScript + p5.js + Parce）

概要

基本は VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 を参考に。

  1. Node.jsのインストール
  2. プロジェクトのフォルダーを作る
  3. 仮のpackage.jsonの作成
  4. Parcelとp5.jsのインストール
  5. 雛形の作成とpackage.jsonの修正
  6. 実行

手順

仮のpackage.jsonの作成

{
  "private": true
}

Parcelとp5.jsのインストール 

npm i parcel -D
npm i p5
npm i @types/p5 -D

雛形の作成

{
  "private": true,
  "scripts": {
    "dev": "parcel src/index.html --open",
    "build": "parcel build src/index.html"
  },
  "devDependencies": {
    "@types/p5": "^1.4.2",
    "parcel": "^2.5.0",
  },
  "dependencies": {
    "p5": "^1.4.1"
  }
}
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello p5</title>
  <!-- スクリプト(main.ts)の読み込み -->
  <!-- Parcelのv2系ではスクリプトの読み込みにtype="module"の指定が必要です -->
  <script src="main.ts" type="module"></script>
</head>
<body>
  <h1>はじめてのp5.js</h1>
</body>
</html>
import p5 from "p5";

const sketch = (p: p5) => {

  // 描画色1・2
    const color1 = p.color("#fffbe4");
    const color2 = p.color("#24495c");
  // 描画色1の強さ
    let color1amount = 1;

  /** 初期化処理 */
    p.setup = () => {
        p.createCanvas(p.windowWidth, p.windowHeight);
        p.angleMode(p.DEGREES); // 回転の単位を弧度から角度に変更
        p.noStroke(); // 線なし（塗りつぶしのみ）に設定
        p.background("#131821"); // 背景色を設定
        p.blendMode(p.LIGHTEST); // 合成モードを「LIGHTEST=明るく」に設定
    };

    /** フレームごとの描画処理 */
    p.draw = () => {
        // 塗り色を設定
        p.fill(p.lerpColor(color2, color1, color1amount));
        // 画面中央を原点に
        p.translate(p.width / 2, p.height / 2);
        // フレーム数分（1フレームあたり13度）回転させる
        p.rotate(p.frameCount * 13);
        // 楕円を描く
        p.ellipse(p.frameCount / 2, 0, p.frameCount, p.frameCount / 3);
        // 「描画色1の強さ」を少し弱くする
        color1amount *= 0.995;
    }
}

new p5(sketch);

実行

npm run dev

やってみての問題点

コメントする