{"id":16860994,"url":"https://github.com/nickmcintyre/proceso","last_synced_at":"2025-08-31T23:43:10.648Z","repository":{"id":159499287,"uuid":"634682235","full_name":"nickmcintyre/proceso","owner":"nickmcintyre","description":"A Python package for creative coding on the web","archived":false,"fork":false,"pushed_at":"2024-04-02T01:34:10.000Z","size":562,"stargazers_count":18,"open_issues_count":3,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-08-25T21:36:28.415Z","etag":null,"topics":["jupyterlite","p5js","processing","pyodide","pyscript","python"],"latest_commit_sha":null,"homepage":"https://proceso.cc","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nickmcintyre.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-30T22:42:46.000Z","updated_at":"2024-08-17T23:38:03.000Z","dependencies_parsed_at":"2024-10-13T14:28:35.741Z","dependency_job_id":"4d64707c-c416-48d0-9725-a39407b77d18","html_url":"https://github.com/nickmcintyre/proceso","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nickmcintyre/proceso","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickmcintyre%2Fproceso","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickmcintyre%2Fproceso/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickmcintyre%2Fproceso/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickmcintyre%2Fproceso/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nickmcintyre","download_url":"https://codeload.github.com/nickmcintyre/proceso/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nickmcintyre%2Fproceso/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273055895,"owners_count":25037871,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-31T02:00:09.071Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jupyterlite","p5js","processing","pyodide","pyscript","python"],"created_at":"2024-10-13T14:28:34.184Z","updated_at":"2025-08-31T23:43:10.611Z","avatar_url":"https://github.com/nickmcintyre.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# proceso\n\u003e A Python package for creative coding on the web\n\nproceso 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](https://p5js.org) library and is heavily inspired by [py5](https://py5coding.org). proceso is built with [PyScript](https://pyscript.net).\n\nHere is an example of how to create a proceso sketch with PyScript using Python, HTML, and CSS:\n\n**sketch.py**\n\n```python\nfrom proceso import Sketch\n\n\np5 = Sketch()\np5.describe(\"A screen reader accessible description for the canvas.\")\n```\n\n**index.html**\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en-us\"\u003e\n\n\u003chead\u003e\n    \u003ctitle\u003eMy Sketch\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width,initial-scale=1.0\"\u003e\n    \n    \u003c!-- Load PyScript --\u003e\n     \u003clink rel=\"stylesheet\" href=\"https://pyscript.net/releases/2024.2.1/core.css\" /\u003e\n     \u003cscript type=\"module\" src=\"https://pyscript.net/releases/2024.2.1/core.js\"\u003e\u003c/script\u003e \n    \u003c!-- Load p5.js --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- Load custom styles --\u003e\n    \u003clink rel=\"stylesheet\" href=\"style.css\" /\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n    \u003c!-- Load sketch --\u003e\n    \u003cscript type=\"py\" src=\"sketch.py\" config=\"pyscript.json\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\n\u003c/html\u003e\n```\n\n**style.css**\n\n```css\nhtml,\nbody {\n    margin: 0;\n    padding: 0;\n}\n\ncanvas {\n    display: block;\n}\n```\n\n**pyscript.json**\n\n```json\n{\n    \"packages\": [\"proceso\"]\n}\n```\n\n## Static Sketches\n\nSimilar to [Processing](https://processing.org), 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.\n\n```python\nfrom proceso import Sketch\n\n\np5 = Sketch()\np5.describe(\"A rectangle, circle, triangle, and flower drawn in pink on a gray background.\")\n\n# Create the canvas\np5.create_canvas(720, 400)\np5.background(200)\n\n# Set colors\np5.fill(204, 101, 192, 127)\np5.stroke(127, 63, 120)\n\n# A rectangle\np5.rect(40, 120, 120, 40)\n# A circle\np5.circle(240, 240, 80)\n# A triangle\np5.triangle(300, 100, 320, 100, 310, 80)\n\n# A design for a simple flower\np5.translate(580, 200)\np5.no_stroke()\nfor _ in range(10):\n    p5.ellipse(0, 30, 20, 80)\n    p5.rotate(p5.PI / 5)\n```\n\n[View sketch](https://4b2d42a1-0e0c-430f-8b20-4b2c7ff0dc3e.pyscriptapps.com/98a781e8-5e31-4f82-a2e5-881f9fed7b13/latest/)\n\n## Active Sketches\n\nproceso'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.\n\n```python\nfrom proceso import Sketch\n\n\np5 = Sketch()\np5.describe(\"Ten white circles moving like fireflies on a dark blue background.\")\n\nbugs = []\nnum_bugs = 10\ncoupling: object\n\n\ndef setup():\n    p5.create_canvas(720, 400)\n    global coupling\n    coupling = p5.create_slider(0, 10, 5)\n    for _ in range(num_bugs):\n        bug = Bug()\n        bugs.append(bug)\n\n\ndef draw():\n    p5.background(\"midnightblue\")\n\n    for bug in bugs:\n        bug.sync()\n\n    for bug in bugs:\n        bug.update()\n        bug.check_edges()\n        bug.draw()\n\n\nclass Bug:\n    def __init__(self):\n        self.x = p5.width * 0.5\n        self.y = p5.height * 0.5\n        self.r = 5\n        self.angle = p5.random(p5.TWO_PI)\n        self.da_dt = 1\n        self.dt = 0.01\n        self.freq = p5.random(5, 10)\n\n    def draw(self):\n        a = p5.remap(self.angle % p5.TWO_PI, 0, p5.TWO_PI, 0, 255)\n        p5.fill(255, a)\n        p5.stroke(255, a)\n        p5.circle(self.x, self.y, 2 * self.r)\n\n    def update(self):\n        self.x += p5.cos(self.angle)\n        self.y += p5.sin(self.angle)\n        self.angle += self.da_dt * self.dt\n        self.da_dt = 0\n\n    def check_edges(self):\n        if self.x \u003e p5.width + self.r:\n            self.x = -self.r\n        if self.x \u003c -self.r:\n            self.x = p5.width + self.r\n        if self.y \u003e p5.height + self.r:\n            self.y = -self.r\n        if self.y \u003c -self.r:\n            self.y = p5.height + self.r\n\n    def sync(self):\n        K_N = coupling.value() / num_bugs\n        self.da_dt = self.freq\n        for bug in bugs:\n            self.da_dt += K_N * p5.sin(bug.angle - self.angle)\n\n\np5.run_sketch(setup=setup, draw=draw)\n```\n\n[View sketch](https://4b2d42a1-0e0c-430f-8b20-4b2c7ff0dc3e.pyscriptapps.com/2db32203-cd60-416f-999c-f730253358e8/latest/)\n\n## Getting Started\n\n**Cloud: PyScript (account required)**\n\n[PyScript](https://pyscript.com) is a great way to run proceso sketches with PyScript. Here's a [project template](https://pyscript.com/view/4b2d42a1-0e0c-430f-8b20-4b2c7ff0dc3e/58197361-1c5f-4d47-93a9-91570255fe85/latest/).\n\n**Local: VS Code**\n\nHere's one possible setup for running sketches on your local machine:\n\n1. Install [Visual Studio Code](https://code.visualstudio.com/).\n2. Install the [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) extension.\n3. Add your HTML, CSS, JSON, and Python files.\n4. Open `index.html` with Live Server and start coding.\n\n## Roadmap\n\n- Improve documentation\n- Finish IO API\n- Translate p5.js test suite?\n- Add CLI with hot reload\n- Add bindings for p5.js addon libraries\n\n## Acknowledgements\n\n- 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.\n- The `Vector` class is lovingly borrowed from py5 as are most of py5's naming conventions.\n- [Basthon](https://framagit.org/basthon/), [Py5.js](https://github.com/Luxapodular/Py5.js), and [pyp5js](https://github.com/berinhard/pyp5js/) all pointed the way. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickmcintyre%2Fproceso","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickmcintyre%2Fproceso","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickmcintyre%2Fproceso/lists"}