OSRW

Code-Lab · Fachschaft Informatik

● Live-Vorschau aktiv Ctrl+Enter
osrw‑hero.html
Three.js r128 · WebGL · Canvas 2D
Live-Vorschau blob:osrw-hero.html
Ein Programmierparadigma ist ein grundlegender Ansatz, wie man ein Problem in Code umsetzt. Dieses Programm verbindet mehrere Paradigmen — typisch für moderne JavaScript-Entwicklung.
📦IIFE — Immediately Invoked Function ExpressionModul-Muster▶
Die gesamte Animation ist in (function(){ ... })() gekapselt. Die Funktion wird sofort aufgerufen und erzeugt einen eigenen Scope — alle Variablen bleiben lokal, kein Konflikt mit anderen Scripts auf der Seite.
(function(){ // alles hier ist privat const renderer = new THREE.WebGLRenderer(...); // renderer existiert NUR hier drin })(); // sofortige Ausführung
Popularisiert von Douglas Crockford (Yahoo, ~2002) in seinem Buch "JavaScript: The Good Parts". Heute ersetzt durch ES6-Module (import/export).
JavaScriptScopeBeginner
🔒Closure — Funktion mit "Gedächtnis"Funktionales Konzept▶
Eine Closure ist eine Funktion, die auf Variablen aus ihrem umgebenden Scope zugreift — auch nachdem dieser eigentlich verlassen wurde. window._edgeFlowUpdate "sieht" noch immer eFlows und efPos, weil sie im gleichen Scope deklariert wurden.
const eFlows = Array.from({length: 40}, () => ({...})); window._edgeFlowUpdate = function(t) { eFlows.forEach(...); // greift auf eFlows zu! // eFlows ist in diesem Scope nicht deklariert — // aber die Closure "erinnert sich" };
Formalisiert von Peter J. Landin (1964, "The Mechanical Evaluation of Expressions"). Fundamentales Konzept in funktionalen Sprachen wie Haskell und Lisp.
FunktionalScopeFortgeschritten
🏗️OOP — Objektorientierte ProgrammierungKlassen & Instanzen▶
Three.js ist objektorientiert aufgebaut. Mit new THREE.Mesh(), new THREE.Scene() etc. werden Instanzen von Klassen erzeugt. Jede Instanz hat eigene Eigenschaften (.position, .material) und Methoden (.add(), .lookAt()).
// Klassen-Instanzen: const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(68, 1, .05, 2000); const renderer = new THREE.WebGLRenderer({...}); // Methoden aufrufen: scene.add(camera); camera.lookAt(0, 0, 0);
Entwickelt von Alan Kay (Xerox PARC, 1970er) in der Sprache Smalltalk. Kay prägte auch den Begriff "Object-Oriented Programming".
OOPThree.jsBeginner
⚙️Prozedurale ProgrammierungFunktionen & Wiederverwendung▶
Komplexe Aufgaben werden in benannte Funktionen aufgeteilt und wiederverwendet. mk() erzeugt Meshes, makeTree() Bäume, createWall() Wandabschnitte — jede Funktion macht genau eine Sache.
// Prozedur für Mesh-Erstellung: function mk(geo, mat, x, y, z) { const m = new THREE.Mesh(geo, mat); m.position.set(x||0, y||0, z||0); m.castShadow = true; return m; } // 100x verwendet: mk(new THREE.BoxGeometry(...), mat, x, y, z)
Geprägt durch Edsger W. Dijkstra ("Structured Programming", 1968) und Niklaus Wirth (Pascal, 1970). Grundlage aller modernen Sprachen.
ProzeduralDRY-PrinzipBeginner
🔗Funktionale ProgrammierungforEach · map · filter▶
Funktionen werden als Argumente übergeben (Higher-Order Functions). .forEach(), .map() und Array.from() mit Arrow-Functions sind funktionale Muster — keine Schleifen, keine Seiteneffekte.
// Imperativ (klassisch): for(let i=0; i<holoBoxDefs.length; i++) { makeHoloLines(holoBoxDefs[i].geo, holoBoxDefs[i].pos); } // Funktional (modern): holoBoxDefs.forEach(d => makeHoloLines(d.geo, d.pos)); // map: Array transformieren const mats = [.27,.3,.25].map(h => new THREE.MeshStandardMaterial({color: new THREE.Color().setHSL(h,.5,.2)}) );
Wurzeln im Lambda-Kalkül von Alonzo Church (1936). In JavaScript popularisiert durch Brendan Eich (JS-Erfinder, 1995), stark beeinflusst von Scheme/Lisp.
FunktionalHigher-OrderFortgeschritten
🖱️Event-Driven ProgrammingReaktiv▶
Das Programm wartet auf Ereignisse (Events) und reagiert mit Callback-Funktionen. Mausbewegungen steuern die Kamera, Scroll-Events ändern die Perspektive — das Programm "lauscht" permanent.
wrap.addEventListener('mousemove', e => { // Callback: wird bei jeder Mausbewegung aufgerufen mouseNX = (e.clientX - r.left) / r.width; mouseNY = (e.clientY - r.top) / r.height; }); window.addEventListener('scroll', () => { scrollP = Math.max(0, Math.min(1, -r.top / wrap.offsetHeight)); }, {passive: true});
Konzept aus den 1960ern, popularisiert mit GUIs (Xerox Star, 1981). Im Web-Kontext formalisiert durch das W3C DOM Event Model (2000). Basis aller interaktiven Web-Anwendungen.
Event-DrivenDOMBeginner
Mathematische Formeln sind das Herzstück jeder 3D-Animation. Hier sind die wichtigsten aus diesem Code — von der linearen Interpolation bis zur Euler'schen Sinusfunktion.
📐Lineare Interpolation (Lerp)Grundlage aller Animation▶
Lerp berechnet einen Punkt zwischen zwei Werten. Mit t = 0 erhält man Wert A, mit t = 1 Wert B, mit t = 0.5 genau die Mitte. Im Code dämpft Lerp die Kamerabewegung: die Kamera "schleicht" zum Ziel statt sofort dorthin zu springen.
// Formel: P = A + (B − A) · t, t ∈ [0, 1] // Kamera-Smoothing (t = 0.07 = sanfte Dämpfung): sMouse += (mouseNX - sMouse) * .07; // Datenpaket-Position auf Kante (t wandert von 0→1→0): efPos[i*3] = f.seg.ax + (f.seg.bx - f.seg.ax) * f.t; efPos[i*3+1] = f.seg.ay + (f.seg.by - f.seg.ay) * f.t; efPos[i*3+2] = f.seg.az + (f.seg.bz - f.seg.az) * f.t;
Grundlegende Mathematik, in der Computergrafik systematisiert durch Ivan Sutherland (Harvard/MIT, 1963) und Ken Perlin (NYU). Verwendung in jeder Game-Engine, jeder 3D-Software.
MathematikAnimationBeginner
🎢Cubic Ease-OutRobert Penner · 2002▶
Easing-Funktionen machen Animation "natürlich". Cubic Ease-Out startet schnell und bremst sanft ab — wie ein Objekt, das langsam zum Stillstand kommt. Wird hier für den Kamera-Einflug beim Seitenaufruf verwendet.
// Formel: f(t) = 1 − (1 − t)³ // t=0 → 0 (Anfang), t=1 → 1 (Ende), schnell am Anfang introT = Math.min(1, introT + .016/INTRO_DUR); const ip = 1 - Math.pow(1 - introT, 3); // ↑ das ist Cubic Ease-Out // Zum Vergleich: Quadratic Ease-In-Out (für Scroll) function ease(x) { return x < .5 ? 2*x*x // einbremsen : 1 - Math.pow(-2*x+2,2)/2; // ausbremsen }
Entwickelt von Robert Penner in seinem Buch "Programming Macromedia Flash MX" (2002). Seine Easing-Gleichungen sind der am häufigsten kopierte Code in der Web-Animation — in jQuery, CSS-Transitions und allen Game-Engines implementiert.
AnimationMathematikFortgeschritten
〰️Sinuswelle — sin(t · ω) · AEuler · 1748▶
Die Sinus-Funktion erzeugt glatte, periodische Schwingungen — ideal für natürlich wirkende Animation. Im Code pulsiert der Hologramm-Glow, schweben der Schriftzug und die Vögel fliegen auf Sinuspfaden. Zwei überlagerte Sinuswellen mit verschiedenen Frequenzen erzeugen organisches Flimmern.
// Grundform: y = sin(t · ω) · A // ω = Kreisfrequenz (Geschwindigkeit), A = Amplitude (Stärke) // Schwebendes Sign (0.45 rad/s, ±0.004 wu Auslenkung): signGroup.position.y = PY + Math.sin(t * .45) * .004; // Überlagerte Wellen → unregelmäßiges Flimmern: const pulse = .3 + Math.sin(t*1.1)*.18 + Math.sin(t*2.7)*.08; // Vogelflügel (8 Hz Flügelschlag): const wing = 1 + Math.sin(t*8 + b.wingPhase) * .3;
Die Sinus-Funktion wurde von Leonhard Euler (Basel/Berlin/St. Petersburg) in "Introductio in analysin infinitorum" (1748) in ihrer modernen Form definiert. Euler entwickelte auch eiπ+1=0 — die schönste Gleichung der Mathematik.
MathematikTrigonometrieBeginner
🌫️Exponentieller Nebel (Beer-Lambert)Bouguer 1729 · Beer 1852▶
FogExp2 berechnet, wie viel Licht durch ein trübes Medium (Nebel, Dunst) dringt. Je weiter ein Objekt entfernt ist, desto mehr "verschwindet" es im Nebel. Die Formel ist exponentiell — kleine Entfernungen kaum sichtbar, große Entfernungen stark abgeschwächt.
// Beer-Lambert-Gesetz: // transmission = e^(−distance × density) // opacity = 1 − transmission // Three.js FogExp2: scene.fog = new THREE.FogExp2(0xbcd8f0, .0007); // ↑ Nebelfarbe ↑ Dichte // Dichte steigt mit worldFade (Übergang digital → real): scene.fog.density = worldFade * .0007;
Entdeckt von Pierre Bouguer (Frankreich, 1729) und unabhängig von Johann Heinrich Lambert (1760) und August Beer (1852) erweitert. Heute fundamental in Optik, Chemie, Astronomie und Computergrafik.
PhysikRenderingFortgeschritten
➕Additive BlendingGPU-Compositing▶
Beim additiven Blending werden Farben addiert statt gemischt. Das erzeugt Leuchteffekte: mehrere halbdurchsichtige Hologramm-Linien übereinander werden heller, nicht trüber. Perfekt für Neon-Glow, Laser und Energie-Effekte.
// Formel: C_out = C_source + C_destination // (statt normalem Alpha-Blending: C_out = α·C_src + (1-α)·C_dst) new THREE.LineBasicMaterial({ color: 0x88eeff, transparent: true, blending: THREE.AdditiveBlending, // ← addiert Farben depthWrite: false // ← kein Z-Buffer-Eintrag }); // Hologramm-Linien, Partikel, Lens Flare nutzen alle AdditiveBlending
Grundlage des Porter-Duff Compositing (Thomas Porter & Tom Duff, SIGGRAPH 1984 bei Lucasfilm/Pixar). Heute in jeder GPU implementiert — von Photoshop bis Unreal Engine.
GPURenderingComputergrafik
👁️Frustum CullingSutherland 1974▶
Frustum Culling prüft, ob ein Punkt oder Objekt innerhalb der Sichtpyramide (Frustum) der Kamera liegt. Im Code wird damit geprüft, ob die Sonne sichtbar ist — nur dann leuchtet der Lens Flare.
// Sichtpyramide aus Projektions- und View-Matrix berechnen: pm.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ); frustum.setFromProjectionMatrix(pm); // Liegt sunWP im Sichtfeld? const sv = frustum.containsPoint(sunWP); // sv = true → Flare sichtbar, false → ausblenden const fa = sv ? (.48 + Math.sin(t*.35)*.04) : 0;
Algorithmus von Ivan Sutherland und Gary Hodgman (1974). Sutherland gilt als "Vater der Computergrafik" (Turing Award 1988, erfand Sketchpad 1963 — das erste CAD-Programm).
3D-GrafikPerformanceFortgeschritten
Welche Technologien stecken unter der Haube? Von WebGL bis Canvas 2D — hier ein Überblick der verwendeten Browser-APIs und Bibliotheken.
🔺Three.js r128Ricardo Cabello · 2010▶
Three.js ist eine JavaScript-Bibliothek für 3D-Grafik im Browser. Sie abstrahiert die komplexe WebGL-API und ermöglicht 3D-Szenen mit Szenegraph, Materialien, Lichtern und Kameras. Die OSRW-Animation nutzt Mesh, Group, Light, Material, Sprite und BufferGeometry.
// Geladen von CDN: <script src="https://cdnjs.cloudflare.com/ ajax/libs/three.js/r128/three.min.js"></script> // Kernkonzepte: Scene → Group → Mesh → Geometry + Material Camera → PerspectiveCamera Light → DirectionalLight, HemisphereLight, PointLight Renderer → WebGLRenderer → GPU
Erstellt von Ricardo Cabello (alias "mr.doob", Spanien) im Jahr 2010. Heute das meistgenutzte 3D-Framework im Web mit über 100.000 GitHub-Stars. Wird von NASA, Google, The New York Times etc. verwendet.
WebGLOpen SourceBibliothek
🖼️HTML5 Canvas 2D APIW3C · 2004▶
Canvas 2D zeichnet pixelbasierte 2D-Grafiken direkt im Browser. Im Code wird es für prozedurale Texturen verwendet: Blueprint-Raster, Rauputz-Texturen, Schriftzug-Konturen, Wolken, Godrays und Vogelsilhouetten — alles generiert per Code, kein Bild geladen.
// Canvas erstellen und Kontext holen: const c = document.createElement('canvas'); c.width = c.height = 512; const ctx = c.getContext('2d'); // Zeichenbefehle: ctx.fillStyle = '#020d24'; ctx.fillRect(0, 0, 512, 512); ctx.strokeStyle = 'rgba(30,120,220,.22)'; ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(512,0); ctx.stroke(); // Als Three.js-Textur verwenden: const tex = new THREE.CanvasTexture(c);
Von Apple für WebKit (Safari) eingeführt (2004), von der WHATWG/W3C als HTML5-Standard (2014) übernommen. Heute in jedem Browser verfügbar. Basis für Diagramm-Bibliotheken wie Chart.js.
HTML52D-GrafikAPI
🔄requestAnimationFramePaul Irish · W3C 2011▶
requestAnimationFrame (rAF) ruft eine Funktion auf, kurz bevor der Browser den nächsten Frame zeichnet — synchron mit dem Bildschirm-Refresh (60 Hz = 60×/s). Spart CPU/GPU wenn der Tab unsichtbar ist und verhindert Ruckler.
// Animations-Schleife: function animate() { requestAnimationFrame(animate); // nächsten Frame planen t += .016; // ~1/60 Sekunde // ... Szene aktualisieren ... renderer.render(scene, camera); // Frame rendern } animate(); // einmal starten, dann rekursiv // Vor rAF: setInterval(render, 1000/60) — ineffizient!
Vorgeschlagen von Paul Irish (Google, 2011) als Verbesserung zu setInterval. Als W3C-Standard implementiert — heute in jedem Browser und jeder Game-Engine (Unity WebGL, Unreal, Babylon.js) verwendet.
Web-APIPerformanceStandard
⚡WebGL & BufferGeometryKhronos Group · 2011▶
WebGL ist eine Browser-API für GPU-beschleunigtes 3D-Rendering, basierend auf OpenGL ES 2.0. BufferGeometry überträgt Vertex-Daten effizient als typisierte Arrays (Float32Array) direkt an die GPU — viel schneller als reguläre JS-Arrays.
// BufferGeometry: Vertex-Daten als Float32Array zur GPU const geo = new THREE.BufferGeometry(); const pos = new Float32Array(FLOW_COUNT * 3); // x,y,z je Punkt const buf = new THREE.BufferAttribute(pos, 3); geo.setAttribute('position', buf); // Jeden Frame aktualisieren: buf.array.set(neuePositionen); buf.needsUpdate = true; // GPU-Upload auslösen
WebGL-Standard von der Khronos Group (2011), basierend auf Vladimir Vukićevićs Canvas3D-Experiment (Mozilla, 2006). Ermöglicht GPU-Rendering direkt im Browser ohne Plugin — Voraussetzung für moderne Web-3D-Anwendungen.
WebGLGPULow-Level
⚖️ Rechtliches