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.

Files for panel-sketch, version 20210411.2
Filename, size File type Python version Upload date Hashes
Filename, size panel_sketch-20210411.2-py3-none-any.whl (31.7 kB) File type Wheel Python version py3 Upload date Hashes View
Filename, size panel-sketch-20210411.2.tar.gz (25.3 kB) File type Source Python version None Upload date Hashes View

Supported by

AWS AWS Cloud computing Datadog Datadog Monitoring Facebook / Instagram Facebook / Instagram PSF Sponsor Fastly Fastly CDN Google Google Object Storage and Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Salesforce Salesforce PSF Sponsor Sentry Sentry Error logging StatusPage StatusPage Status page