# Proceso: A Python package for creative coding on the web

**URL:** <https://discourse.processing.org/t/proceso-a-python-package-for-creative-coding-on-the-web/41895>\
**Category:** Gallery\
**Created:** [May 3, 2023, 4:08am UTC](https://discourse.processing.org/t/proceso-a-python-package-for-creative-coding-on-the-web/41895 "2023-05-03T04:08:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcintyre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mcintyre/32/14561_2.png) [@mcintyre](https://discourse.processing.org/u/mcintyre)\
**Post date:** [May 3, 2023, 4:08am UTC](https://discourse.processing.org/t/proceso-a-python-package-for-creative-coding-on-the-web/41895/1 "2023-05-03T04:08:28Z")

</div>

Hello!

I started tinkering with p5.js and [PyScript](https://pyscript.net) last week and wound up creating a new sketchbook for the web called [proceso](https://github.com/nickmcintyre/proceso) (“process” in Spanish). It’s heavily inspired by [py5](https://py5coding.org) 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**

```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**

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

canvas {
    display: block;
}

```

**sketch.py**

```python
"""
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](https://editor.p5js.org/mcintyre/full/kcDmXl_Tb) and on [PyScript](https://pyscript.com/view/4b2d42a1-0e0c-430f-8b20-4b2c7ff0dc3e/ab3d05fe-ae90-435b-b351-2029a591b574/latest/).

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](https://pyodide.org/en/stable/usage/packages-in-pyodide.html). I plan to have [documentation](https://proceso.cc) 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

---

<div class="post-metadata">

**Author:** ![hx2A](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hx2a/32/14322_2.png) [@hx2A](https://discourse.processing.org/u/hx2A)\
**Post date:** [May 4, 2023, 8:11pm UTC](https://discourse.processing.org/t/proceso-a-python-package-for-creative-coding-on-the-web/41895/2 "2023-05-04T20:11:49Z")

</div>

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