streamlit-p5 0.0.4

Bring the power of ProcessingJS (aka P5) to Streamlit. This module allows you to create Processing sketches, interact with those sketches using the mouse and keyboard, and share data between your Processing Sketch and Stremalit.

streamlit_p5

Embed your processing sketches in Streamlit! Check out the demo here

You can find the source code at: https://github.com/salable/streamlit-p5

Installation instructions

pip install streamlit streamlit_p5

Quickstart

streamlit run example.py

Usage instructions

The sketch object takes a few arguments:

• sketch : a string representing your P5js sketch
• width : width of the element in Streamlit
• height : height of the element in Streamlit (make sure to match these with your sketch!)
• data : a Python dict to pass to the p5 sketch

Example:

Basic

import streamlit as st
from streamlit_p5 import sketch

p5_sketch = sketch("""
function setup() {
   createCanvas(700, 500);
}

// The background function is a statement that tells the computer
// which color (or gray value) to make the background of the display window 
function draw() {
   background(204, 153, 0);
}
""", width=700, height=500)

Advanced

import streamlit as st
from streamlit_p5 import sketch

value = sketch("""
let word=""
function setup() { 
  createCanvas(700, 500);
  noStroke();
  word=dataToPass.name. // get value passed from Streamlit
}

function draw() {
  background(204, 120);
  fill(0)
  textFont('Courier New')
  textSize(50)
  text(word, mouseX, mouseY)
}

function mousePressed() {
  sendDataToPython({  //Send data to Streamlit - causes a re-render
          value: {
            mouseX: mouseX,
            mouseY: mouseY
          },
          dataType: "json",
        })
}
""", data={
  "name" : "Bob the Builder"
}, width=700, height=500)

Wanna build this from source? just run:

python setup.py sdist bdist_wheel && twine upload dist/*