Prost! Erste Schritte mit Prosec(c)o
Durch meinen gestrigen Beitrag angefixt, wollte ich heute unbedingt etwas mit PyScript und Proseco anstellen. Nachdem mich die Dokumentation erst einmal in die Irre führte (pip install proceso funktionierte bei mir einfach nicht), fand ich durch wildes Herumexperimentieren heraus, daß ich Proseco auch lokal auf meinem Rechner ohne eine vorhergegangene Installationsorgie betreiben kann:
Das Einzige, was vorhanden sein muß, ist ein installiertes, einigermaßen aktuelles Python und der Texteditor Eures Vertrauens (bei mir ist es Visual Studio Code mit den üblichen Python Extensions). Danach habe ich mir von diesem Projekt-Template einfach die Dateien index.html, pyscript.json, style.css und sketch.py heruntergeladen und zusammen in einem Projektverzeichnis abgelegt. Falls Ihr nichts seltsames vorhabt, könnt Ihr erst einmal die ersten drei Dateien unverändert lassen, lediglich in der Datei sketch.py müßt Ihr Euren eigenen Code hineinschreiben. In meinem Fall war das:
from proceso import Sketch
from random import randint
p5 = Sketch()
def setup():
p5.create_canvas(640, 400)
p5.background(49, 197, 244)
p5.fill(146, 82, 161)
p5.rect(40, 40, p5.width - 80, p5.height - 80)
p5.fill(randint(30, 220), randint(30, 220), randint(30, 220), 100)
def draw():
p5.circle(p5.mouse_x, p5.mouse_y, 20)
def mouse_clicked():
p5.fill(randint(30, 220), randint(30, 220), randint(30, 220), 100)
p5.run_sketch(setup=setup, draw=draw, mouse_clicked=mouse_clicked)Wenn ich dann die index.html hinter einem (lokalen) Webserver (ich nutze dafür immer noch den betagten, aber bewährten MAMP) aufrufe, bekommt Ihr untenstehendes Ergebnis angezeigt:
Das ist eine abgewandelt Version des bekannten Py5-Beispielscripts (ein Mausklick ändert die Farben der Bällchen), das ich noch ein wenig aufgepeppt habe.
Wenn Ihr Euch die index.html anschaut,
<!DOCTYPE html>
<html lang="de">
<head>
<title>Python mit Balls</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- Load PyScript -->
<link rel="stylesheet" href="https://pyscript.net/releases/2024.1.3/core.css" />
<script type="module" src="https://pyscript.net/releases/2024.1.3/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>
<main></main>
<!-- Load sketch -->
<script type="py" src="sketch.py" config="pyscript.json"></script>
</body>
</html>dann seht Ihr, daß die PyScript-Dateien (JavaScript und CSS) sowie die minimierte P5.js-Datei von extern geladen werden. Ich habe es versucht: Zwar kann ich die p5.js-Datei auch lokal auf meinem Rechner installieren und zur Mitarbeit bewegen, die PyScript core.js-Datei dagegen war ums Verrecken nicht zur lokalen Mitarbeit bereit, sie bestand darauf, auf dem Server von pyscript.net aufgerufen zu werden.
Das steht natürlich ein wenig meinen Bemühungen um digitale Souveränität im Wege, ist aber leider bei vielen Diensten, die über CDNs geladen werden, gängige Praxis. Daher habe ich das erst einmal hingenommen. Doch wenn jemand von Euch da draußen eine Idee hat, wie man die core.js und die core.css auch lokal installiert bekommt, bitte ich um Mitteilung in meinen Kommentaren.
Die (lokal) installierte style.css birgt keine Geheimnisse,
aber CSS-Gurus wissen sicher, wie sie sich darin austoben können.
Noch ein Geheimnis ist für mich die Konfigurationsdatei pyscript.json:
Das ist der einzige Ort, an dem überhaupt proseco vorkommt und darüber weiß vermutlich PyScript, daß und wo es sich das Modul Proseco hereinziehen muß. Momentan nehme ich daß noch einfach so hin (ich freue mich, daß ich alles zum Laufen. bekommen habe), aber irgendwann will ich die Zusammenhänge kapieren. Still digging!
Meine erste Einschätzung ist, daß Proseco sehr vielversprechend ist. Es vermählt nicht nur P5.js mit dem Python-Ökosystem, sondern erlaubt auch die Erstellung von interaktiven Web-Anwendungen. Es ist daher für alle interessant, die – wie ich – Pickel von den geschweiften Klammern von JavaScript bekommen. Schaun wir mal, was ich damit noch alles anstellen kann. Ich habe also immer noch zu tun!
Bild: Python with Balls, erstellt mit OpenArt.ai. Prompt: »Colored Franco-Belgian Comic Style. Illustration of a green python with glasses and a glass of Prosecco in hand is being pelted with colorful plastic balls by white rabbits. The rabbits wear colorful vests and top hats and carry a pocket watch with a large dial. The setting is a fairytale-like small town with colorful, crooked houses«. Modell: Flux (Pro), Style: None.