streamlit-p5 0.0.3

Embed the power of Processing.org in your Streamlit app

streamlit_p5

Embed your processing sketches in Streamlit!

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/*
twine upload dist/*