To sketch high performing, interactive visualizations running in the browser and drawing inspiration from p5js
MIT License
THIS IS APLHA SOFTWARE AND YOU MAY EXPERIENCE API CHANGES AND 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
It is heavily inspired by p5js, p5js sketches and pyp5js ❤️ It is not limited to the p5js universe though.
You can also think of it as a Code Sandbox or JS Fiddle but for #Python, #PyData and #PyViz 🐍.
It leverages the powerful Python
to Javascript
frameworks Pyodide and Transcrypt 💪. Potentially Brython and other could be added in the future.
Check out the panel-sketch
examples on Binder
Jupyter Notebook | Jupyter Labs | Panel Apps |
---|---|---|
The panel-sketch
python package and repository is open source and free to use (MIT License).
With pip
pip install panel-sketch
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.servable()
You can find more inspiration via the links below.
When I get the time I would like to
basic
template examples.Sketch
.window.args
to args
reference.Sketch.viewer.view
to Sketch.viewer
. Similarly for Sketch.editor
.