panel-sketch 20210411.2

To sketch high performing, interactive visualizations running in the browser and drawing inspiration from p5js

✏ ️ Panel Sketch

THIS IS APLHA SOFTWARE AND YOU MAY EXPERIENCE ROUGH EDGES.

The purpose of the panel-sketch package is to make it easy for Pythonistas to quickly sketch interactive visualizations and other applications running in

• The browser - also without a Python backend
• The Jupyter Notebook.
• Your favorite editor or IDE.

It is heavily inspired by p5js, p5js sketches and pyp5js but not limited to the p5js universe.

You can also think of it as a Code Sandbox or JS Fiddle but for #Python 🐍.

Check out the panel-sketch examples on Binder

Jupyter Notebook	Jupyter Labs	Panel Apps

It leverages Python to Javascript frameworks. Currently Pyodide and Transcrypt. But potentially also Brython or similar in the future.

License

The panel-sketch python package and repository is open source and free to use (MIT License).

Installation

With pip

pip install panel-sketch

Usage

from panel_sketch import Sketch

import panel as pn
pn.config.sizing_mode="stretch_width"

args={"r": 10, "g": 200, "b": 40} # This will give us the color for our sketch

sketch_python = """
# https://p5js.org/examples/interaction-wavemaker.html


from pyp5js import *

t = 0


def setup():
    createCanvas(600, 600)
    stroke(250)
    strokeWeight(3)
    fill(window.args.r, window.args.g, window.args.b)


def draw():
    global t
    background(10, 10)
    fill(window.args.r, window.args.g, window.args.b)

    xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, True)
    yAngle = map(mouseY, 0, height, -4 * PI, 4 * PI, True)
    for x in range(0, width, 30):
        for y in range(0, height, 30):

            angle = xAngle * (x / width) + yAngle * (y / height)

            myX = x + 20 * cos(2 * PI * t + angle)
            myY = y + 20 * sin(2 * TWO_PI * t + angle)

            ellipse(myX, myY, 10)

    t = t + 0.01
"""

sketch = Sketch(object=sketch_python, template="pyp5js", compiler="pyodide", args=args)
sketch.viewer.view

Reference Guides

Sketch Reference Example

Examples

Gallery App

Additional Resources

You can find more inspiration via the links below.

• p5js and p5js sketches
• pyp5js
• Pyodide
• Transcrypt
• Brython
• Panel
• Awesome Panel

Roadmap

When I get the time I would like to

• Add basic template examples.
• Enable using the content of notebook cells instead of a string to instantite Sketch.
• Add more notebook examples
• Enable easy import and export of sketches
• Find out how I can serve the target js modules in notebook (Enable Transcrypt in Notebook).
• Support alternatives to p5js like three.js
• (re-)align with pyp5js
• Add example app to awesome-panel.org.
• Support extensions to p5js like m5.js
• Create youtube tutorial video
• Add badges for 100% test coverage etc.
• Distribute as conda package

Change Log

• 20210410: First Release to PyPi.