IONIC 3rd party libs

Question

I'm new to ionic and need a little help:

I have implemented things like chart.js with the tutorial from here, and I really liked the outcome.

But I tried to do the same thing with p5.js from processing and could not get it to work.

I have to display data for a class on Data Visualization and want to use Ionic with mo.js, p5.js, or phaser.js to display the data.

Answer 1

First of all you need the p5 library from somewhere. The easiest way here is npm. So install p5 using npm:

npm install p5

Then you need to import the library from node_modules so webpack knows it should put it in your vendor.js bundle:

import * as p5 from 'p5/lib/p5.min';

Then you can use it like that:

let sketch = p => {
  let x = 100;
  let y = 100;

  p.setup = () => {
    p.createCanvas(700, 410);
  };

  p.draw = () => {
    p.background(0);
    p.fill(255);
    p.rect(x, y, 50, 50);
  };
};

let myp5 = new p5(sketch);

I have to admit I do not know anything about p5 itself so I can not tell you if it is even a good idea to use it in an ionic project or if the example code on how to use it produces something useable, it is just an example I found on github. I verified that it is working by checking if it created a canvas element and it did create one with the dimension defined in the example (it was created as a sibling element of the ion-app element):

<canvas id="defaultCanvas0" style="width: 700px; height: 410px;" width="2100" height="1230"></canvas>