Proceso: A Python package for creative coding on the web

Gallery
1

Hello!

I started tinkering with p5.js and PyScript last week and wound up creating a new sketchbook for the web called proceso (“process” in Spanish). It’s heavily inspired by py5 and aims to integrate p5.js into the Python ecosystem. Many thanks to @villares and @hx2A for their help in getting started!

Here’s an example of how to create a “static sketch” without animation or interaction:

index.html

<!DOCTYPE html>
<html lang="en-us">

<head>
    <title>Simple Shapes</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://pyscript.net/releases/2023.03.1/pyscript.css" />
    <script defer src="https://pyscript.net/releases/2023.03.1/pyscript.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
    <py-config>
        packages = ["numpy", "proceso"]
    </py-config>
</head>

<body>
    <main></main>
    <py-script src="sketch.py"></py-script>
</body>

</html>

style.css

html,
body {
    margin: 0;
    padding: 0;
}

canvas {
    display: block;
}

sketch.py

"""
Simple Shapes
Adapted from https://p5js.org/examples/hello-p5-simple-shapes.html
CC-BY-NC-SA

This example includes a circle, square, triangle, and a flower. 
"""
from proceso import Sketch


p5 = Sketch()

# 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)
# An ellipse
p5.ellipse(240, 240, 80, 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)

And here’s an “active sketch” that simulates flocking on the p5 Editor and on PyScript.

If you pip install proceso locally, IDE’s such as Visual Studio Code will display documentation, provide autocomplete, and so on. After installation, you can run python -m http.server in a folder containing files like those listed above.

The package has a hard NumPy dependency for its Vector class (thanks py5!) and will work with any packages supported by Pyodide. I plan to have documentation and JupyterLite support ready for a couple of summer camps that I’m teaching.

In the meantime, have a look at the example sketches in the GitHub repo and feel free to open an issue if you find a bug or have a suggestion. Happy coding!

Cheers,
Nick

6 Likes
2

This looks great, @mcintyre ! I added this to my todolist to experiment with in the near future.

1 Like