funcomputer.de zeigt interaktive Technik-Demos, die komplett in deinem Browser laufen. Kein Plugin, keine fremden Server, nur Code und dein Rechner.
Demos
Jede Demo laeuft ausschliesslich lokal im Browser, gerechnet auf deinem Geraet. Probier sie aus, klick, zieh und hoer hin.
Die Mandelbrot-Menge, live berechnet in einer feurigen Palette. Klick ins Bild, um an dieser Stelle tiefer hineinzuzoomen. Unendliche Struktur aus einer einzigen Formel.
Fuer jeden Bildpunkt steht eine Zahl c. Man wiederholt die Formel z gleich z mal z plus c, beginnend bei null. Bleibt das Ergebnis klein, gehoert der Punkt zur Menge und wird dunkel. Entkommt es, faerbt man nach der Anzahl der Schritte bis zum Entkommen. Zoomen heisst nur, den Ausschnitt pro Pixel zu verkleinern.
// c = Punkt in der Ebene, z startet bei 0
let x=0, y=0, i=0;
while (x*x + y*y <= 4 && i < maxIter) {
const xn = x*x - y*y + cRe; // Realteil von z*z + c
y = 2*x*y + cIm; // Imaginaerteil
x = xn;
i++;
}
// i = Schritte bis zum Entkommen, daraus die FarbeConways beruehmter Zellautomat. Aus vier simplen Regeln entstehen wandernde Muster und ganze Oekosysteme. Zeichne mit der Maus lebende Zellen.
Ein Gitter aus Zellen, jede lebt oder ist tot. Pro Runde zaehlt man fuer jede Zelle die acht Nachbarn und wendet die Regeln an. Eine lebende Zelle mit zwei oder drei Nachbarn ueberlebt, sonst stirbt sie. Eine tote Zelle mit genau drei Nachbarn wird geboren. Man rechnet in ein zweites Gitter und tauscht danach, damit alle Zellen gleichzeitig wechseln.
// n = Anzahl lebender Nachbarn (Summe der 8 Zellen ringsum)
const lebt = grid[y][x] === 1;
next[y][x] =
(lebt && (n === 2 || n === 3)) || // ueberleben
(!lebt && n === 3) // geboren werden
? 1 : 0;Toene direkt aus dem Browser ueber die Web-Audio-Schnittstelle. Halte gedrueckt und bewege dich, links nach rechts steuert die Tonhoehe, oben nach unten die Lautstaerke.
Die Web-Audio-Schnittstelle erzeugt Toene direkt im Browser. Ein Oszillator liefert die Schwingung, ein Gain-Regler die Lautstaerke, beides fuehrt zur Ausgabe. Wichtig ist, dass der Ton erst nach einer Nutzeraktion starten darf, das verlangen die Browser. Die Mausposition setzt dann Tonhoehe und Lautstaerke.
const ac = new AudioContext(); // erst nach Klick
const osc = ac.createOscillator(); // Schwingung
const gain = ac.createGain(); // Lautstaerke
osc.connect(gain).connect(ac.destination);
osc.start();
// Mausposition steuert den Klang
osc.frequency.value = 110 * Math.pow(2, x); // Tonhoehe
gain.gain.value = 1 - y; // LautstaerkeTausende Partikel folgen einem unsichtbaren Stroemungsfeld in warmen Glutfarben. Fahr mit der Maus hindurch und stoere die Stroemung. Generative Kunst in Echtzeit.
Jeder Partikel liest an seiner Position einen Winkel aus einem unsichtbaren Feld und bewegt sich in diese Richtung. Der Winkel kommt aus einer Formel mit Sinus und Kosinus, die weiche Wirbel erzeugt. Statt das Bild ganz zu loeschen, legt man pro Bild einen leicht durchsichtigen Schleier darueber, so bleiben Spuren stehen.
// Winkel aus der Position, das erzeugt Wirbel
const a = (Math.sin(p.x*0.008 + t) + Math.cos(p.y*0.008 - t)) * Math.PI;
p.x += Math.cos(a) * speed;
p.y += Math.sin(a) * speed;
// Spuren: pro Bild leicht abdunkeln statt loeschen
ctx.fillStyle = 'rgba(5,5,6,0.08)';
ctx.fillRect(0, 0, w, h);Kontakt
Fragen, Anregungen oder Hinweise sind willkommen.
Rechtliches
Angaben gemaess §5 DDG (Digitale-Dienste-Gesetz).
Patrick Faulhaber
An den Eichen 3
87758 Kronburg
Deutschland
Kontaktaufnahme ueber das Kontaktformular auf dieser Seite.
E-Mail zum Ablesen
Patrick Faulhaber, Anschrift wie oben.
Die Inhalte dieser Seite werden mit Sorgfalt erstellt. Fuer die Richtigkeit, Vollstaendigkeit und Aktualitaet wird keine Gewaehr uebernommen. Fuer Inhalte externer Links sind ausschliesslich deren Betreiber verantwortlich. Zum Zeitpunkt der Verlinkung waren keine rechtswidrigen Inhalte erkennbar.
Patrick Faulhaber, An den Eichen 3, 87758 Kronburg. Kontakt ueber das Kontaktformular, E-Mail siehe Impressum.
Diese Seite wird bei der Hetzner Online GmbH, Industriestr. 25, 91710 Gunzenhausen, betrieben. Die Server stehen in Deutschland. Mit dem Anbieter besteht ein Vertrag zur Auftragsverarbeitung nach Art. 28 DSGVO.
Beim Aufruf der Seite werden automatisch technische Daten erfasst und in Server-Logdateien gespeichert. Dazu gehoeren die IP-Adresse, Datum und Uhrzeit des Zugriffs, die aufgerufene Ressource, die uebertragene Datenmenge sowie Angaben zum verwendeten Browser und Betriebssystem. Diese Verarbeitung dient dem sicheren und stabilen Betrieb der Seite. Rechtsgrundlage ist das berechtigte Interesse nach Art. 6 Abs. 1 lit. f DSGVO. Die Daten werden nur kurz gespeichert und danach geloescht.
Diese Seite setzt keine Cookies, verwendet keine Analyse- oder Trackingwerkzeuge und bindet keine externen Inhalte ein. Alle Animationen und interaktiven Demos laufen ausschliesslich lokal im Browser deines Geraets. Dabei werden keine Daten an Dritte uebertragen. Es findet keine Profilbildung statt.
Die Seite wird ausschliesslich verschluesselt per TLS uebertragen, erkennbar am Schloss-Symbol im Browser.
Wenn du das Kontaktformular nutzt, verarbeiten wir die von dir eingegebenen Angaben, also Name, E-Mail-Adresse und Nachricht, ausschliesslich zur Bearbeitung deiner Anfrage. Rechtsgrundlage ist dein Einverstaendnis nach Art. 6 Abs. 1 lit. a DSGVO sowie unser berechtigtes Interesse an der Beantwortung nach lit. f. Die Nachricht wird ueber eine verschluesselte Verbindung an unseren Mailanbieter mailbox.org zugestellt und nicht laenger gespeichert, als es zur Bearbeitung noetig ist. Eine kleine Rechenaufgabe schuetzt vor automatisiertem Missbrauch.
Du hast das Recht auf Auskunft, Berichtigung, Loeschung, Einschraenkung der Verarbeitung, Datenuebertragbarkeit sowie Widerspruch. Es besteht zudem ein Beschwerderecht bei der zustaendigen Datenschutzaufsichtsbehoerde. Fuer eine Anfrage genuegt eine kurze Nachricht ueber das Kontaktformular.