如何在Angular 5应用程序中使用p5.js

Question

我已经完成了。

npm install p5 --save

我编辑了.angular.cli.json文件。

"scripts": [
    "../node_modules/p5/lib/p5.min.js",   
    "../node_modules/p5/lib/addons/p5.sound.js",   
    "../node_modules/p5/lib/addons/p5.dom.js" 
  ]

并作为引入

import * as p5 from 'p5';

在 app.component.ts 文件中

现在应该在哪里添加 setup() 和 draw() 函数呢？我尝试直接添加，但它不起作用。

- Nityananda Gohain

---

也许它们在p5命名空间中，因为你使用*作为p5导入了吗？ - Brendan Whiting

@BrendanWhiting，你是在说类似于p5.setup()的东西吗？ - Nityananda Gohain

是的，请尝试一下。您也可以尝试使用 import * from 'p5'。 - Brendan Whiting

实际上它正在搜索一个不存在的p5.d.ts文件，我该怎么办？ - Nityananda Gohain

不起作用 - musmans

Answer 1

更新：适用于 Angular CLI 7.1.0。

Angular CLI版本：6.2.3

Node版本：10.9.0

package.json:

"p5": "^0.7.2"

导入库

import * as p5 from 'p5';
import "p5/lib/addons/p5.sound";
import "p5/lib/addons/p5.dom";

p5的设置

ngOnInit() {
    const sketch = (s) => {

      s.preload = () => {
        // preload code
      }

      s.setup = () => {
        s.createCanvas(400, 400);
      };

      s.draw = () => {
        s.background(255);
        s.rect(100, 100, 100, 100);
      };
    }

    let canvas = new p5(sketch);
  }

- chris

---

当你在Angular应用程序中导入p5 dom库时... - Ambrus Tóth

Answer 2

那是你导入它的方式引起了问题。 你应该通过输入以下内容进行导入：

import 'p5';

然后声明一个变量：

private p5;

现在您应该能够做到这样：

ngOnInit() {
  this.createCanvas();
}

private createCanvas() {
  this.p5 = new p5(this.sketch);
}

private sketch(p: any) {
  p.setup = () => {
    p.createCanvas(700, 600);
  };

  p.draw = () => {
    p.background(255);
    p.fill(0);
    p.rect(p.width / 2, p.height / 2, 50, 50);
  };
}

这是我的ng版本：

Angular CLI: 1.7.4
Node: 9.11.1
OS: win32 x64
Angular: 5.2.11
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

在 package.json 中，p5 的版本应该是最新的。

 "p5": "^0.6.1"

对我来说一切都正常。

希望它能有所帮助。

- CephalicStorm

---

谢谢。这里的封装比我看到的其他例子要好。 - James Tasse

Answer 3

我发现了一个 GitHub 仓库，里面有一些例子展示了如何导入和实现。它帮助我填补了我所缺失的，即如何实际显示画布。

<https://github.com/avsmips/angular4-p5js-app>

在模板 HTML 中添加一个带有 ID 的 div 元素。

<div id="analog-clock-canvas"></div>

然后在你的组件中创建画布时，可以将其附加到这个 div 上。

private drawing = function (p: any) {
p.setup = () => {
  p.createCanvas(p.windowWidth, p.windowHeight).parent('analog-clock-canvas');
  p.angleMode(p.DEGREES);
  p.rectMode(p.CENTER);
  p.background(0);
};
p.center = { x: 0, y: 0 };
p.draw = () => {

在Angular 7中为我工作

- Kreitlow

Answer 4

我创建了一个抽象类，以便能够扩展它并以更简单的方式工作， 使用示例：

import { P5JSInvoker } from 'src/p5-jsinvoker';

export class RandomWalkerComponent extends P5JSInvoker implements OnInit{

  constructor() {
    super()
    this.startP5JS(document.body);
  }

  setup(p:p5) {
    p.createCanvas(400, 400);
  }

  draw(p:p5) {
    p.stroke(0);
    p.circle(200, 200, 2);
  }
}

我把仓库传给你了。 https://github.com/soler1212/P5JSInvoker

- Aleix Soler