How to use p5.js in angular 5 application

Question

I have done

npm install p5 --save

I edited the .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" 
  ]

and imported as

import * as p5 from 'p5';

in app.component.ts file

but now where to add the function setup() and function draw() . I have tried adding it directly but it doesn't work

maybe they are in the p5 namespace, since you imported * as p5? — Brendan Whiting, Mar 25 '18 at 04:33
Actually it is searching for a p5.d.ts file which is not available what should i do — Nityananda Gohain, Mar 25 '18 at 06:26
Not sure if it exists. There seems to be a discussion about it: https://github.com/processing/p5.js/issues/583. But you shouldn't have to have the type definitions to use the library. I dunno. — Brendan Whiting, Mar 25 '18 at 07:59
Possible duplicate of [p5.js integration with Angular / not using global functions](https://stackoverflow.com/questions/48522496/p5-js-integration-with-angular-not-using-global-functions) — Kevin Workman, Mar 25 '18 at 16:30
Possible duplicate of https://stackoverflow.com/questions/45380883/angular-and-p5-js-p5-loadsound-is-not-a-function — Kevin Workman, Mar 25 '18 at 16:31

chris · Answer 1 · 2018-11-30T15:53:00.520

10

Update: also works for Angular CLI 7.1.0

Angular CLI: 6.2.3

Node: 10.9.0

package.json:

"p5": "^0.7.2"

import libraries

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

p5 setup

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

edited Nov 30 '18 at 15:53

answered Nov 25 '18 at 02:29

chris

2,490
4
32
56

1

"When you import p5 dom library in an Angular application..." – Ambrus Tóth Jan 21 '20 at 17:17

score 8 · Answer 2 · answered Jun 15 '18 at 21:39

That's the way you import it that causes the problem. You should import it by typing:

import 'p5';

Then declare a variable:

private p5;

You should now be able to do something like this:

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

Here's my ng version :

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

and last version of p5 in package.json:

 "p5": "^0.6.1"

Everything's working fine for me.

Hope it will help.

Thank you. Better encapsulation here than other examples I have seen. — James Tasse, Feb 20 '22 at 18:51

Kreitlow · Answer 3 · 2019-01-29T16:41:00.263

Found a GitHub repo with examples that show how to import and implement. It helped fill in what I was missing, how to actually display the canvas.

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

In the template HTML add a div with an ID.

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

Then in your component when you create the canvas you can attach it to this 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 = () => {

Working for me in Angular 7

score 4 · Answer 4 · edited Nov 21 '20 at 18:51

I have created an abstract class to be able to extend it and work in a simpler way, example of use:

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

I pass you the repository https://github.com/soler1212/P5JSInvoker

How to use p5.js in angular 5 application

4 Answers4