Skip to main content

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

Project description

Panel Sketch Logo

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

Panel Sketch Reference Example

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

Basic Example

Reference Guides

Sketch Reference Example

Binder

Examples

Gallery App

Binder

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.

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

panel-sketch-20210411.2.tar.gz (25.3 kB view details)

Uploaded Source

Built Distribution

panel_sketch-20210411.2-py3-none-any.whl (31.7 kB view details)

Uploaded Python 3

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

Hashes for panel-sketch-20210411.2.tar.gz
Algorithm Hash digest
SHA256 6826d598ad07f2f4cd41158bf6c4d7d63170aa323bea79900b17131c637cb118
MD5 b997abceb7117eb5f1fc5a4ee9495a43
BLAKE2b-256 15d52e9caa52a6ba99ea0b15d514938f43b30e631753e505e1f5afce8d5f8679

See more details on using hashes here.

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

Hashes for panel_sketch-20210411.2-py3-none-any.whl
Algorithm Hash digest
SHA256 0a64d6c1591d11aa5823c8b7d1bbb7d16e5bbc9e44944143ad46682551f13332
MD5 35e82f2cc3aeec51f78442a11ff70ad8
BLAKE2b-256 21560d52d427ec28cb5f236aa411fa3abfe926ee1f987f845eeae37a705d42ee

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page