p5.js Jupyter Widget
ipyp5 ====
:warning: Disclaimer: this is a work in progress! :warning:
p5.js in the Jupyter Notebook using the Jupyter Widgets.
This project aims to be a follow-up of p5-jupyter-notebook, so that p5 can be used in JupyterLab (and in the classic Notebook) as a proper package.
Current Status

- Define a sketch using the instance mode of p5. This explains the use of
pin the sample sketch. - The sketch is synced to the widget as a raw string and evaluated on the frontend.
TODO
- Figure out how to expose a Python wrapper to the p5 API
- How to avoid round trips to the server (syncing of values) when making animations (updating values at every frame)?
- Proper testing, packaging and documentation once the problems above are solved
Goal
The ideal goal (disclaimer: not implemented yet) would be to write code like this in a notebook cell:
class MySketch(BaseSketch):
W, H = 400, 400
def setup(s): s.createCanvas(s.W, s.H) s.rectMode(s.CENTER)
def draw(s): s.background('#ddd') s.translate(200, 200) for i in range(4): s.push() s.rotate(s.frameCount / 200 * (i + 1)) s.fill(i 5, i 100, i * 150) s.rect(0, 0, 200, 200) s.pop()
sketch = MySketch() sketch
Contributing
See CONTRIBUTING.md