Package: proceso
procesoA Python package for creative coding on the webproceso 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 thep5.jslibrary and is heavily inspired bypy5. proceso is built withPyScript.Here is an example of how to create a proceso sketch with PyScript using Python, HTML, and CSS:sketch.pyfromprocesoimportSketchp5=Sketch()p5.describe("A screen reader accessible description for the canvas.")index.html<!DOCTYPE html><htmllang="en-us"><head><title>My Sketch</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"><!-- Load PyScript --><linkrel="stylesheet"href="https://pyscript.net/releases/2024.2.1/core.css"/><scripttype="module"src="https://pyscript.net/releases/2024.2.1/core.js"></script><!-- Load p5.js --><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"></script><!-- Load custom styles --><linkrel="stylesheet"href="style.css"/></head><body><!-- Load sketch --><scripttype="py"src="sketch.py"config="pyscript.json"></script></body></html>style.csshtml,body{margin:0;padding:0;}canvas{display:block;}pyscript.json{"packages":["proceso"]}Static SketchesSimilar toProcessing, 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.fromprocesoimportSketchp5=Sketch()p5.describe("A rectangle, circle, triangle, and flower drawn in pink on a gray background.")# Create the canvasp5.create_canvas(720,400)p5.background(200)# Set colorsp5.fill(204,101,192,127)p5.stroke(127,63,120)# A rectanglep5.rect(40,120,120,40)# A circlep5.circle(240,240,80)# A trianglep5.triangle(300,100,320,100,310,80)# A design for a simple flowerp5.translate(580,200)p5.no_stroke()for_inrange(10):p5.ellipse(0,30,20,80)p5.rotate(p5.PI/5)View sketchActive Sketchesproceso's "active sketches" provide therun_sketch()method to handle initialization, looping, and events. The sketch below simulates the synchronization behavior observed in some species of fireflies.fromprocesoimportSketchp5=Sketch()p5.describe("Ten white circles moving like fireflies on a dark blue background.")bugs=[]num_bugs=10coupling:objectdefsetup():p5.create_canvas(720,400)globalcouplingcoupling=p5.create_slider(0,10,5)for_inrange(num_bugs):bug=Bug()bugs.append(bug)defdraw():p5.background("midnightblue")forbuginbugs:bug.sync()forbuginbugs:bug.update()bug.check_edges()bug.draw()classBug:def__init__(self):self.x=p5.width*0.5self.y=p5.height*0.5self.r=5self.angle=p5.random(p5.TWO_PI)self.da_dt=1self.dt=0.01self.freq=p5.random(5,10)defdraw(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)defupdate(self):self.x+=p5.cos(self.angle)self.y+=p5.sin(self.angle)self.angle+=self.da_dt*self.dtself.da_dt=0defcheck_edges(self):ifself.x>p5.width+self.r:self.x=-self.rifself.x<-self.r:self.x=p5.width+self.rifself.y>p5.height+self.r:self.y=-self.rifself.y<-self.r:self.y=p5.height+self.rdefsync(self):K_N=coupling.value()/num_bugsself.da_dt=self.freqforbuginbugs:self.da_dt+=K_N*p5.sin(bug.angle-self.angle)p5.run_sketch(setup=setup,draw=draw)View sketchGetting StartedCloud: PyScript (account required)PyScriptis a great way to run proceso sketches with PyScript. Here's aproject template.Local: VS CodeHere's one possible setup for running sketches on your local machine:InstallVisual Studio Code.Install theLive Serverextension.Add your HTML, CSS, JSON, and Python files.Openindex.htmlwith Live Server and start coding.RoadmapImprove documentationFinish IO APITranslate p5.js test suite?Add CLI with hot reloadAdd bindings for p5.js addon librariesAcknowledgementsproceso 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.TheVectorclass is lovingly borrowed from py5 as are most of py5's naming conventions.Basthon,Py5.js, andpyp5jsall pointed the way.