panel-sketch 20210411.2

Description:

panelsketch 20210411.2

✏ ️ 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.