Spielwiese & Technik

Python im Browser ausführen

Auf dieser Website läuft echtes Python – nicht auf einem Server, sondern in deinem Browser. Hier kannst du selbst loslegen und nachlesen, wie das funktioniert.

Bereit · Python startet beim ersten Klick
# Spielwiese: Ändere den Code und drücke »Ausführen«.
from c4f import Screen, hsv
import math

screen = Screen(640, 400, background=(14, 15, 18))
print("Hallo aus Python im Browser!")

for i in range(720):
    angle = i * 0.21
    radius = i * 0.26
    x = 320 + math.cos(angle) * radius
    y = 200 + math.sin(angle) * radius
    screen.circle((x, y), 3 + i / 150, hsv(i / 720))
    if i % 12 == 0:
        await screen.frame(60)  # zwischendurch anzeigen: so entsteht die Animation

print("Fertig:", i + 1, "Kreise")

Strg+Enter (Mac: ⌘+Enter) führt den Code aus. Alles bleibt in deinem Browser.

Konsole

    

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, color und 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.