P5.js and Blazor, such fun.

So I started watching a YouTube channel called The Coding Train He managed to inspire me to play around with client side JavaScript, now anyone that knows me knows I dislike front end design but times are changing. This lead to me playing with the Processing library in java then P5 in JavaScript.

So the whole point of this post is that I was playing with Blazor in the Visual Studio 2019 preview, I wanted to integrate P5 into Blazor knowing that Blazor can call JavaScript functions and JavaScript can call C# functions.

However this wasn’t as simple as I first thought. P5 uses a canvas in the page it runs in, but because of how Blazor works, JS isn’t written in the page it will run in. It is written in the main index.html for the site. Because of how Blazor runs this makes all JS libraries available in all pages.

So here is my Blazor page

P5Testing.cshtml

@page "/P5Testing"
@using Microsoft.JSInterop
@inject IJSRuntime JSRuntime

<h2 onclick="@setP5" >P5 Testing</h2>

<div onloadend="@setP5" id='container'></div>
@functions{


    async void setP5()
    {
        await JSRuntime.InvokeAsync<object>("setp5");
    }


}

This has some fun little things I have found, Onload does not function correctly, I have tried running my setP5 function from that, so my canvas will automatically load but it does not so I have the onClick on the title.

So on most tutorials on how to call JS functions you will see
await JSRuntime.Current.InvokeAsync<return type>(“function”,”Arguments”);
This is out of date how ever on the learn Blazor page that mentions IJSRuntime
Now as a newbie I tried IJSRuntime.InvokeAsync, This didn’t work and I managed to find a Microsoft page on razor components and JS Interop This gave me the last piece of the puzzle to call my JS function!

Sketch.JS

window.setp5 = () => {
    new p5(sketch, window.document.getElementById('container'));
    return true;
};

let sketch = function(p){

    p.setup = function(){ 
    }

    p.draw = function(){
    }
};

Using the P5.js examples page for instance containers, I managed to get my canvas working!
So not only was I not prepared for this version of JS, I had to translate my previous JS code to this bizzaro version that I am not used to. But I got there.

Index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Paint</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
</head>
<body>
    <app>Loading...</app>

    <script src="_framework/components.webassembly.js"></script>
    <script src="sketch.js"></script>
</body>
</html>

One problem I saw people running into was putting their sketch.js before the webassembly.js this causes issues.

But hey there we go all sorted and I now have P5 running in Blazor, it took a good hour away from me but it is sorted now.

Andrew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s