A Python package for creative coding on the web.
Project description
proceso
A Python package for creative coding on the web
proceso is a Python package for creative coding on the web, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! The package provides a Pythonic interface to the p5.js library and is heavily inspired by py5. proceso is designed for Pyodide-based environments with a focus on PyScript.
Here is an example of how to create a proceso sketch with PyScript using Python, HTML, and CSS:
sketch.py
from proceso import Sketch
p5 = Sketch()
p5.describe("A screen reader accessible description for the canvas.")
index.html
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>My Sketch</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Load PyScript -->
<link rel="stylesheet" href="https://pyscript.net/releases/2023.11.1/core.css" />
<script type="module" src="https://pyscript.net/releases/2023.11.1/core.js"></script>
<!-- Load p5.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script>
<!-- Load custom styles -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- Load sketch -->
<script type="py" src="sketch.py" config="pyscript.json"></script>
</body>
</html>
style.css
html,
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
pyscript.json
{
"packages": ["proceso"]
}
Static Sketches
Similar to Processing, proceso enables beginners to start programming with "static sketches" before introducing animation and interaction. The following example draws a few shapes and a flower on the screen.
from proceso import Sketch
p5 = Sketch()
p5.describe("A rectangle, circle, triangle, and flower drawn in pink on a gray background.")
# Create the canvas
p5.create_canvas(720, 400)
p5.background(200)
# Set colors
p5.fill(204, 101, 192, 127)
p5.stroke(127, 63, 120)
# A rectangle
p5.rect(40, 120, 120, 40)
# A circle
p5.circle(240, 240, 80)
# A triangle
p5.triangle(300, 100, 320, 100, 310, 80)
# A design for a simple flower
p5.translate(580, 200)
p5.no_stroke()
for _ in range(10):
p5.ellipse(0, 30, 20, 80)
p5.rotate(p5.PI / 5)
Active Sketches
proceso's "active sketches" provide the run_sketch() method to handle initialization, looping, and events. The sketch below simulates the synchronization behavior observed in some species of fireflies.
from proceso import Sketch
p5 = Sketch()
p5.describe("Ten white circles moving like fireflies on a dark blue background.")
bugs = []
num_bugs = 10
coupling: object
def setup():
p5.create_canvas(720, 400)
global coupling
coupling = p5.create_slider(0, 10, 5)
for _ in range(num_bugs):
bug = Bug()
bugs.append(bug)
def draw():
p5.background("midnightblue")
for bug in bugs:
bug.sync()
for bug in bugs:
bug.update()
bug.check_edges()
bug.draw()
class Bug:
def __init__(self):
self.x = p5.width * 0.5
self.y = p5.height * 0.5
self.r = 5
self.angle = p5.random(p5.TWO_PI)
self.da_dt = 1
self.dt = 0.01
self.freq = p5.random(5, 10)
def draw(self):
a = p5.remap(self.angle % p5.TWO_PI, 0, p5.TWO_PI, 0, 255)
p5.fill(255, a)
p5.stroke(255, a)
p5.circle(self.x, self.y, 2 * self.r)
def update(self):
self.x += p5.cos(self.angle)
self.y += p5.sin(self.angle)
self.angle += self.da_dt * self.dt
self.da_dt = 0
def check_edges(self):
if self.x > p5.width + self.r:
self.x = -self.r
if self.x < -self.r:
self.x = p5.width + self.r
if self.y > p5.height + self.r:
self.y = -self.r
if self.y < -self.r:
self.y = p5.height + self.r
def sync(self):
K_N = coupling.value() / num_bugs
self.da_dt = self.freq
for bug in bugs:
self.da_dt += K_N * p5.sin(bug.angle - self.angle)
p5.run_sketch(setup=setup, draw=draw)
Getting Started
Cloud: PyScript (account required)
PyScript is a great way to run proceso sketches with PyScript. Here's a project template.
Local: VS Code
Here's one possible setup for running sketches on your local machine:
- Install Visual Studio Code.
- Install the Live Server extension.
- Add your HTML, CSS, JSON, and Python files.
- Open
index.htmlwith Live Server and start coding.
Roadmap
- Improve documentation
- Finish IO API
- Translate p5.js test suite?
- Add CLI with hot reload
- Add bindings for p5.js addon libraries
Acknowledgements
- proceso is, first and foremost, an interface to the p5.js library. Nearly all of the package's documentation and examples are adapted from their p5.js counterparts. Portions of the source code are also adapted from the original JavaScript implementation.
- The
Vectorclass is lovingly borrowed from py5 as are most of py5's naming conventions. - Basthon, Py5.js, and pyp5js all pointed the way.
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 proceso-0.0.14.tar.gz.
File metadata
- Download URL: proceso-0.0.14.tar.gz
- Upload date:
- Size: 60.6 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.11.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | d39ee1c9fc82753935ad7937b8d42b6ba5b9b78be8e385feae08cc1d460c20b2 |
|
| MD5 | 4117825aa39a2e2112d2b66ae4046f3a |
|
| BLAKE2b-256 | 211475265289117856096b862b349fcfde8ff79e5e6c0ba2ba76972711632a37 |
File details
Details for the file proceso-0.0.14-py3-none-any.whl.
File metadata
- Download URL: proceso-0.0.14-py3-none-any.whl
- Upload date:
- Size: 65.9 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.11.5
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 40a2aff4aac52416a0f011624cc33e10d529691e9b7cdf16886cb9a0a73916ae |
|
| MD5 | 279028031db5530aa55991ba29ac4184 |
|
| BLAKE2b-256 | 2bbd1ea8dee0c005f090ce629307ae6d0b1fbb2dea71f5900956c1002feafa1b |
