How to use p5.js in angular 5 application

p5 js examples
p5 js editor
p5 js interactive
p5 js tutorial
p5 js hello world
getting started with p5 js
processing p5 js mode
p5 js processing

I have done

npm install p5 --save

I edited the .angular.cli.json

"scripts": [

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

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() {

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

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

  p.draw = () => {
    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.

How to use p5.js in angular 5 application, 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;. How to use p5.js in angular 5 application. Ask Question Asked 1 year, 10 months ago. Active 1 year ago. Viewed 4k times 4. 2. I have done. npm install p5 --save

Update: also works for Angular CLI 7.1.0

Angular CLI: 6.2.3

Node: 10.9.0


"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.rect(100, 100, 100, 100);

    let canvas = new p5(sketch);

p5 sketch always below other angular components, If you're using the default createCanvas() function, then it creates a new canvas and adds it to the bottom of the page. You can move that  P5.js in Angular Application Example. GitHub Gist: instantly share code, notes, and snippets.

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.


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');
}; = { x: 0, y: 0 };
p.draw = () => {

Working for me in Angular 7

Using p5js with Angular 5 - p5.js, Could someone explain how to use p5.js in my Angular 5 project? I am pretty new to both and was unable to import and use p5js in my Angular component. as p5 from 'p5'; @Component({ selector: 'app-p5', templateUrl: '. Build a notes application from scratch for your first Angular 5 app. Learn Angular CLI, use RxJS, implement Firebase as the back-end, and deploy to production with Docker. By continuing to use this site you agree to our Cookie Policy .

Using the p5.ts libary for angular 5 project - Beginners, hey im trying to get p5.ts to work on angular 5 I know theirs a typescript variant for p5js on git but Im unsure how to install/add it to the app  The easiest way to start is by using the empty example that comes with the p5.js complete download. If you look in index.html, you'll notice that it links to the file p5.js. If you would like to use the minified version (compressed for faster page loading), change the link to p5.min.js.

loadSound is not a function when I using it with Angular · Issue , I got problem when using p5js with Angular4. it said that the loadSound is not a function. This is OrionStark opened this issue on Nov 22, 2017 · 5 comments. A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

wxactly / angular-p5.js, AngularJS wrapper for p5.js, a client-side library for creating graphic and example · Switch to factory, and test dependency with $injector.has(), 5 years ago ##Usage. ###p5 directive. Define a p5.js sketch as a service - p5.js will run in  An end-to-end tutorial on how to use Google's latest addition to the Angular family, Angular 5, to create a web application. Join the DZone community and get the full member experience. In this

  • maybe they are in the p5 namespace, since you imported * as p5?
  • @BrendanWhiting are you saying something like p5.setup();
  • Yes, try that. You could also try import * from 'p5'
  • Actually it is searching for a p5.d.ts file which is not available what should i do
  • Not sure if it exists. There seems to be a discussion about it: But you shouldn't have to have the type definitions to use the library. I dunno.
  • thanks for the answer and the link!