To sketch high performing, interactive visualizations running in the browser and drawing inspiration from p5js
Project description
✏ ️ 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.
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.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
File details
Details for the file panel-sketch-20210411.2.tar.gz
.
File metadata
- Download URL: panel-sketch-20210411.2.tar.gz
- Upload date:
- Size: 25.3 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.4.1 importlib_metadata/3.10.0 pkginfo/1.7.0 requests/2.25.1 requests-toolbelt/0.9.1 tqdm/4.60.0 CPython/3.8.4
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 6826d598ad07f2f4cd41158bf6c4d7d63170aa323bea79900b17131c637cb118 |
|
MD5 | b997abceb7117eb5f1fc5a4ee9495a43 |
|
BLAKE2b-256 | 15d52e9caa52a6ba99ea0b15d514938f43b30e631753e505e1f5afce8d5f8679 |
File details
Details for the file panel_sketch-20210411.2-py3-none-any.whl
.
File metadata
- Download URL: panel_sketch-20210411.2-py3-none-any.whl
- Upload date:
- Size: 31.7 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/3.4.1 importlib_metadata/3.10.0 pkginfo/1.7.0 requests/2.25.1 requests-toolbelt/0.9.1 tqdm/4.60.0 CPython/3.8.4
File hashes
Algorithm | Hash digest | |
---|---|---|
SHA256 | 0a64d6c1591d11aa5823c8b7d1bbb7d16e5bbc9e44944143ad46682551f13332 |
|
MD5 | 35e82f2cc3aeec51f78442a11ff70ad8 |
|
BLAKE2b-256 | 21560d52d427ec28cb5f236aa411fa3abfe926ee1f987f845eeae37a705d42ee |