Wie kann Python im Browser laufen?
Browser verstehen von Haus aus nur JavaScript – und WebAssembly, ein kompaktes Maschinenformat, das fast so schnell läuft wie ein normales Programm. Das Projekt Pyodide übersetzt den offiziellen Python-Interpreter CPython nach WebAssembly. Das Ergebnis ist kein Nachbau und keine Simulation, sondern dasselbe Python, das du auch auf deinem Rechner installieren würdest, hier in Version 3.14.
Beim ersten Klick auf »Ausführen« lädt dein Browser Python einmalig herunter, rund 7 MB. Danach liegt es im Cache, und jeder weitere Start dauert nur noch einen Augenblick. Solange du nichts ausführst, lädt die Seite kein Python – deshalb öffnen sich die Beispielseiten so schnell.
Und die Daten?
Dein Code läuft komplett auf deinem Gerät. Weder der Code noch die Ausgaben werden an einen Server geschickt. Python, der Editor und alle Dateien kommen direkt von python.heppert.com, ohne fremde Dienste.
Was funktioniert – und was nicht
Die komplette Standardbibliothek steht bereit: math, random, datetime, collections, itertools, json, re, fractions, decimal und viele mehr. print() schreibt in die Konsole unter der Leinwand, input() fragt dort nach einer Eingabe.
Anders als auf dem Desktop gibt es kein Fenster und keine grafischen Bibliotheken wie pygame oder tkinter. Für Grafik bringt diese Website zwei Helfer mit:
- c4f – eine kleine Zeichen- und Spiel-API, die im Stil von pygame funktioniert: Leinwand, Formen, Text, Pixel, Tastatur, Maus und Touch.
- turtle – die bekannte Schildkrötengrafik mit
forward,left,circle,colorund Co.
Auch Dateien gehen: Ein Programm kann mit open() lesen und schreiben. Die Dateien liegen in einem virtuellen Dateisystem im Arbeitsspeicher und verschwinden, wenn du die Seite schließt.
Zeichnen mit c4f
Eine Leinwand anlegen, Formen zeichnen, anzeigen – mehr braucht ein Bild nicht:
from c4f import Screen
screen = Screen(400, 300, background="white")
screen.rect(40, 40, 120, 80, (47, 85, 212))
screen.circle((260, 150), 60, "tomato")
screen.line((0, 290), (400, 290), "black", 3)
screen.text("Hallo!", (200, 20), "black", size=24, align="center")
Für Animationen und Spiele brauchst du eine Schleife. Wichtig ist das await: Damit gibt das Programm dem Browser kurz die Kontrolle zurück, sodass er das Bild anzeigen und Tastendrücke weiterreichen kann.
from c4f import Screen
screen = Screen(400, 300)
screen.controls(["LEFT", "RIGHT"]) # Touch-Tasten fürs Handy
x = 200
while True:
if screen.pressed("LEFT"):
x -= 4
if screen.pressed("RIGHT"):
x += 4
screen.clear("white")
screen.circle((x, 150), 20, "tomato")
await screen.frame(60) # anzeigen und bis zum nächsten Bild warten
| Befehl | Wirkung |
|---|---|
Screen(b, h, background=farbe) |
Leinwand anlegen |
screen.clear(farbe) / screen.fill(farbe) |
alles einfärben |
screen.rect(x, y, b, h, farbe, width=0) |
Rechteck (width 0 = gefüllt) |
screen.circle((x, y), r, farbe) |
Kreis |
screen.ellipse(x, y, b, h, farbe) |
Ellipse im Rechteck |
screen.line(start, ende, farbe, dicke) |
Linie |
screen.polygon(punkte, farbe) |
Vieleck |
screen.text(text, (x, y), farbe, size=16) |
Text |
screen.pixels(x, y, b, h, daten) |
Pixel aus Bytes (RGBA) |
await screen.frame(fps) |
anzeigen und warten |
screen.events() |
Tasten und Klicks seit dem letzten Aufruf |
screen.pressed("UP") |
Ist eine Taste gerade gedrückt? |
await ask("Frage: ") |
Eingabe in der Konsole abfragen |
Farben sind Tupel aus Rot, Grün und Blau von 0 bis 255, zum Beispiel (255, 128, 0), oder Namen wie "tomato". Mit hsv(h) aus c4f bekommst du Regenbogenfarben für Werte von 0 bis 1.
Schildkrötengrafik mit turtle
import turtle
t = turtle.Turtle()
t.speed(6)
for i in range(36):
t.forward(120)
t.left(170)
turtle.done()
Die Schildkröte zeichnet im Browser Schritt für Schritt, speed() regelt das Tempo von 1 (gemütlich) bis 10 (flott), 0 zeichnet sofort.
Tastenkürzel
- Strg + Enter (Mac: ⌘ + Enter) oder Umschalt + Enter: Code ausführen
- Tab rückt ein, Strg + Z macht rückgängig
- Bei Spielen: erst ins Bild klicken, dann reagieren die Pfeiltasten
Technik und Lizenzen
Python im Browser: Pyodide 314.0.7 mit CPython 3.14 (Mozilla Public License 2.0). Editor: CodeMirror 6 (MIT). Schrift: Geist (SIL Open Font License). Die Programme laufen in einem Web Worker, damit die Seite auch bei langen Rechnungen bedienbar bleibt. Alle Lizenztexte: lizenzen.txt.