ipyp5

p5.js Jupyter Widget


Keywords
Jupyter, Widgets, IPython, p5js, jupyter-widget, jupyterlab, jupyterlab-extension
License
BSD-3-Clause
Install
pip install ipyp5==0.1.0

Documentation

ipyp5

Build Status Documentation Status Code style: black pypi Python Versions License Binder

⚠️ Disclaimer: this is a work in progress! ⚠️

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

screencast

  • Define a sketch using the instance mode of p5. This explains the use of p in 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