How to Create Simulation with p5.js in your angular application.

For starters, p5.js is an extensive open-source JavaScript library primarily used to create interactive visuals and art for the web. It leverages HTML canvas elements, making them a fantastic tool for generating dynamic and interactive outputs.

To begin, let’s create your first Angular application. This article assumes you are already familiar with creating an Angular app. If not, please refer to this article: [How to create and deploy your first Angular app?] for detailed instructions.

Once your Angular app is set up, the next step is to install the p5.js library. Use the following command to install it:

npm i p5.js

Once it's installed create a new component wherever you like inside the angular app directory.

ng g c simulationTest

First thing first, create a div element inside your component HTML file. with a unique template reference or ID.

<div #canvas id="p5Canvas"></div> 

Now import our newly installed library inside the simulationTest component ts file.

import * as p5 from 'p5.js'

In the same component, create a new variable of type p5 | null. This variable will be used to create and manage simulations.

export class SimulationTestComponent {
  p5Instance: p5 | null = null;
}

Next, obtain the reference to the HTML element inside the component where the drawing will take place.

export class SimulationTestComponent {
  p5Instance: p5 | null = null;
  @ViewChild('canvas') canvas:ElementRef;
}

Initialize the drawing element inside the AfterViewInit lifecycle hook, which is triggered only after the div element has been added to the browser's DOM.

export class SimulationTestComponent implements AfterViewInit{
  p5Instance: p5 | null = null;
  @ViewChild('canvas') canvas:ElementRef;
  p5Sketch:any;

  ngAfterViewInit(): void {
     setTimeout(()=> {
      this.initiateP5Sim();
   })

  initiateP5Sim() {
    this.p5Sketch = (p:p5)=> {
      p.setup = ()=> {
         p.createCanvas(600,200);
         p.background(220);
         x = 0;
         speed = 3;
      }
      p.draw = () => {
        p.background(0);
        x = x + speed;
        if (x > width){
           speed *= -1;
        }
       if (x == 0){
          speed *= -1 ;
        }
        p.ellipse(x, 60, 20, 20);
      }
    }
    this.createSketch(this.p5Sketch, this.canvas.nativeElement)
  }

  createSketch(sketch:(p:p5) => void, canvas:HTMLElement): void {
     this.destroySketch();
     this.p5Instance = new p5(sketch, canvas)
    }

  destroySketch() {
     if(this.p5Instance) {
         this.p5Instance.remove();
         this.p5Instance = null;
      }
    }
}

Here, I’ve added a basic bouncing ball code from the p5.js tutorial. The createSketch method is used to create the canvas inside the canvas div element.

The destroySketch method ensures there are no duplication issues or previously created canvases lingering in the view. This way, you can avoid conflicts and keep your application clean.

Using this approach, you can create any simulation or artwork with p5.js in an Angular application.

If you found this article interesting and helpful, please share it with your peers. Don’t forget to check out my other articles as well. Thank you for your support! 😊