Including p5.js in streamlit

Using Streamlit
1

As for Include a js file with streamlit, I need to include p5.js into streamlit.

p5.js is a great graphic library to make generative Arts, but I use it as an alternate data plotting tool: I can make dedicated and very specific data plots faster than by tweaking plotly and its tons of options.

A minimal sketch is like this:

function setup() {
    createCanvas(400,400);
}
function draw() {
    background("red");
    circle(mouseX, mouseY, 50);  // moving the mouse on the red square, 
             // you should see a white circle where the mouse pointer is
}

At the moment I am writing all the p5.js code into a single html file, to avoid the need to be served static files (I know that this issue will be addressed in Streamlit before end of January 2023):

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.min.js"></script>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            function setup() {
                createCanvas(400,400);
            }
            function draw() {
                background("red");
                circle(mouseX, mouseY, 50);
            }
        </script>
    </body>
</html>

and then rendering it with:

import streamlit.components.v1 as components

html_content = open("single_file.html", 'r', encoding='utf-8')
components.html(html_content.read(), height=1000)

What about a nicer solution using react-p5?

It is a react component to embed p5.js in a lot cleaner way, but alas I don’t understand how to use it in streamlit, if possible at all. My expertise on react is null.

Can anybody provide an example of how to use react-p5?

2

Here I describe a simple wrapper to include P5js into a Streamlit page.

3

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.