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

Answer 1

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.

Answer 2

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