Einführung in die Computergrafik und Bildverarbeitung

Dr. Raphael Wimmer

Sommersemester 2025

Kurze Vorstellung

  • Wer bin ich?
  • Womit kenne ich mich aus?
  • Was will ich lernen / können?
  • (Überblick Umfrage)

Konzept

Anstelle einer klassischen Vorlesung mit Übung gibt es:

  • einen interaktiven Präsenztermin (Di, 12:15 - 15:45 Uhr)
  • eine Sammlung an Lehrmaterial
  • einen Abhängigkeitsgraph, der zeigt, welche Themen man in welcher Reihenfolge lernen sollte
  • vier Milestones/Studienleistungen (2D-Bitmapgrafik, 2D-Vektorgrafik, 3D-Grafik, Computer Vision), zu denen Sie eine kleine Übungsaufgabe bearbeiten müssen/sollten.
  • eine Klausur (Präsenz), in der Sie am Rechner mehrere Programmieraufgaben bearbeiten

Organisatorisches

  • Anfangs gibt es einige Präsenz-Termine, in denen wir die Grundlagen frontal-interaktiv besprechen
  • Dann kriegen Sie eine Art Lernlandkarte / Abhängigkeitsgraph / Mindmap der Themen des Kurses inkl. Material und Aufgaben. Ca. 70% der Themen sind Kerninhalte. Diese können Sie in ihrer eigenen Geschwindigkeit bearbeiten. Aus den restlichen Themen wählen Sie dann diejenigen, die Sie am meisten interessieren und vertiefen diese.
  • Als Programmiersprache werden wir Python verwenden (zusätzlich: Jupyter Notebooks, OpenGL, GLSL, OpenCV).
  • Während der Präsenztermine schauen wir uns gemeinsam wichtige Themen und Anwendungen an. Das wird dann eher eine interaktive Übung als eine klassische Vorlesung (“Flipped Classroom”). Außerdem nutzen wir den Termin als Ort für Pair-Programming, Sprechstunde für Probleme, und um Feedback zu geben.

Leistungsnachweis

  • Es gibt einige Milestones zu festen Terminen im Semester, die sie einhalten sollten. Da müssen Sie dann jeweils eine kleine Studienleistung abgeben. Je früher Sie abgeben, und je besser Ihre Lösung, umso mehr Bonuspunkte für die Klausur erhalten Sie.
  • Am Ende des Semesters findet eine Klausur in Präsenz statt. Sie bearbeiten dort primär Programmieraufgaben zu Themen des Kurses. Dabei können Sie natürlich auf allen Code zurückgreifen, den Sie im Laufe des Kurses schon geschrieben haben. Außerdem kommen noch ein paar Theoriefragen dazu. Das Format “Klausur” ist in der Prüfungsordnung vorgegeben. Es dient in diesem Fall auch dazu, sicherzustellen, dass Sie selbst die ganzen Aufgaben während des Semesters bearbeitet haben. Die Klausur wird am Rechner stattfinden, nicht auf Papier. Für die Klausur gibt es 100 Punkte. Eine Notenstufe entspricht 5 Punkten, d.h. ab 50 Punkten bekommen Sie eine 4.0.
  • Bonuspunkte gibt es für:
  • Abgeben der Studienleistungen (max. 20 Punkte insgesamt)
  • Bug Bounty: pro sachlichem Fehler in meinen Materialien 1 Punkt (FCFS)
  • Teilen von guten Quellen (je 1 Punkt, max. 5 Punkte insgesamt)

Materialien

Sie erhalten von mir:

  • nicht: komplette Foliensätze für jeden Termin, aber:
  • Überblicksdokumente
  • einen interaktiven Abhängigkeitsgraphen der Inhalte der Vorlesung
  • Links und Tipps zu Material
  • Foliensätze zu bestimmten Themen
  • Screenshots / Fotos von wichtigen Zeichnungen

Feedback der letzten beiden Male

“Aufwendiger Kurs, aber sehr praktisch weswegen es auch Spaß macht und die Zeit die man dafür aufwendet auch schnell verfliegt.”
“Interessante Vorlesung, die mir neue Themen und Anwendungsmöglichkeiten beigebracht hat. Die Einführungen in die OpenGL und OpenCV waren spannend und mir davor nur vom hören bekannt. Die Studienleistungen ließen sich auch gut bearbeiten. Waren am Anfang etwas überfordernd (da es bei mir kaum/kein Vorwissen gab), aber ließen sich meistens doch ganz gut durcharbeiten.”
“Sehr interessante Vorlesung, die viel praktisches Wissen mit sich bringt”
“Sehr interessant, aber man muss am Ball bleiben”
“Die Studienleistungen waren sehr interessant und anspruchsvoll, haben aber auch Spaß gemacht. Hab mir teilweise etwas schwer getan, auch weil mir die Erfahrung mit Python gefehlt hat. [...] Ansonsten sehr interessante und coole Veranstaltung, bei der man auch viel selber herumprobieren durfte (v.a. bei Studienleistungen) und gut erklärte Beispiele bekommen hat.”

Zeitplan

29. April 2025 - Einführung, Überblick

Klassische frontale Vorlesung zum Einstieg.

Themen heute:

  • Überblick über das Kurskonzept
  • Organisatorisches
  • Advance Organizer / Überblick über die Themen des Kurses

Danach eine Übung mit:

  • Grundlagen Python
  • Grundlagen Jupyter Notebooks

Ausblick: 6. Mai 2025 - Wiederholung Grundlagen, Praxis Rastergrafik

  • Grundlagen Farbräume, Rastergrafik
  • Welche Python-IDE soll ich verwenden?
  • apt, pip, conda, virtualeenv, docker - Environments und Paketmanager für Python
  • Bilder laden und modifizieren

Wichtige Veranstaltungen diese Woche

  • Semester-Kickoff der FS[i] heute, 16:00 Uhr, Wiese zwischen PT und VG

Advance Organizer

(kommt noch)

Einführung Python

Material:

Voraussetzungen für Teilnahme am nächsten Termin

  • Lauffähige lokale Python-Installation und IDE
  • (optional) lokale JupyterLab-Installation
  • Alle Notebooks in GRIPS bearbeitet
  • Feedback vorbereitet: wo gibt es Probleme, welche Hilfestellung wäre gut?
  • Laptop dabei, um einige der gezeigten Dinge mal selbst auszuprobieren

GraphIT

https://graphit.ur.de/wiki/Courses/CGBV_25SS

Graph heute

Überblick: 6. Mai 2025 - Wiederholung Grundlagen, Praxis Rastergrafik

  • GraphIT
  • Umgebungsvariablen und Pfade
  • Welche Python-IDE soll ich verwenden?
  • apt, pip, conda, virtualeenv (, docker) - Environments und Paketmanager für Python
  • uv - die eierlegende Wollmilchsau
  • Grundlagen Farbräume, Farbmodelle, Rastergrafik (Notebooks)
  • Bilder laden und modifizieren (Notebooks)

Graph heute

PATH

  • Umgebungsvariablen: Key-Value-Paare, die vom OS innerhalb einer Shell den Programmen zur Verfügung gestellt werden.
  • Anzeigen/setzen mit export (Linux) bzw. SET (Windows)
  • PATH-Umgebungsvariable: wo liegen die ausführbaren Dateien
  • Reihenfolge relevant - das erstbeste Executable mit passendem Namen wird genommen.
  • (auch später relevant: PYTHONPATH)

Python IDEs

PEP 8 - Style Guide für Python

Paketmanagement in Python

Es gibt drei verbreitete Möglichkeiten, Python-Module zu installieren:

  • Paketmanagement des Betriebssystems (z.B. apt unter Debian/Ubuntu Linux)
  • pip - Pythons Paketmanager
  • conda - Paketmanagement der Anaconda-Distribution

Um für jede Anwendung separate Module zu installieren: virtual environments

Paketmanagement durch Betriebssystem

  • Primär bei Linux-Distributionen, z.B. Debian/Ubuntu
  • apt install python3-matplotlib
  • Vorteile: global verfügbar, sicher, vorkompilierte Binaries
  • Nachteile: nicht immer aktuell, nicht alle Python-Pakete verfügbar, immer nur eine Paketversion installierbar

Paketmanagement mit pip

  • Pakete werden aus dem Python Package Index (PyPI) installiert (PyPI enthält quasi alle Pakete)
  • pip3 install matplotlib
  • pip3 install -r requirements.txt: Textdatei mit Paketnamen und ggf. Versionen.
  • Vorteile: global oder (default) lokal installierbar, immer aktuellste Version, quasi alle Pakete verfügbar.
  • Nachteile: nicht zwingend robust/sicher, Kompilierungsschritt bei C-Erweiterungen notwendig
  • Tool pipx: installiert Python-Programme in einer eigenen virtuellen Umgebung und fügt sie zum Pfad hinzu (Repo / Anleitung)

Paketmanagement mit conda

  • Anaconda: Python-Distribution für Scientific Computing (multi-platform)
  • Minimale Distribution: miniconda
  • conda: package manager für Anaconda (Intro)
  • pip und conda können parallel eingesetzt werden (1, 2)
  • Alternative: Mamba
  • Vorteile: sicher, robust, vorkompilierte Binaries, integrierte Unterstützung von virtual environments
  • Nachteile: nicht immer aktuell, wenige Python-Pakete verfügbar, fügt Overhead (Ressourcen, Debugging) hinzu

Virtual Environments

  • Grundidee: für jedes Projekt eine eigene Python-Installation (Doku)
  • Funktionsweise: Überschreiben der Pfade zu Binaries, Bibliotheken in der aktuellen Shell
  • Virtualenv im Unterverzeichnis .env anlegen: python3 -m venv .env
  • Virtualenv aktivieren: source .env/bin/activate (Linux) / .env\Scripts\activate.bat
  • deaktivieren durch Beenden der Shell
  • Viele IDEs unterstützen venv (VS Code, PyCharm)
  • Conda: conda create --name myenv / conda activate myenv

uv - die eierlegende Wollmilchsau

  • Tool für gängiges Python-Projektmanagement (Doku
  • sehr schnell (Rust, Caching)
  • Wrapper für viele gängige Aktionen:
    • uv python install <Version> - installiert Python
    • uv init <Projektname> - erzeugt Projektverzeichnis, initialisiert venv und Git.
    • uv add <Package> - fügt Paket zu Projekt hinzu
    • uv run <script.py> - führt Script in aktuellem venv aus
    • uv pip <...> / uv venv <...> - wrappt pip/venv
  • Ausführliche Diskussion

13. Mai 2025 - Bildfilter, Studienleistung 1

  • Recap: Bildfilter, Bilder (live)
  • Rückblick: Bildfilter, Punktoperatoren, Morphologische Operationen, Faltungen (siehe Notebooks)
  • Python: mit Kommandozeilenparametern arbeiten
  • Studienleistung 1: ein simpler Bildeditor

Unser Graph heute

Wiederholung: Bildfilter

  • Überblick: Typische Bildfilter
  • Überblick: Punktoperatoren, Geometrische Operatoren, Lokale Operatoren, Globale Operatoren
  • Faltungen

Studienleistung 1: Bitmap-Grafik (1)

Entwickeln Sie eine Anwendung filtertool, mit der man (destruktiv) Bilder bearbeiten kann. Bilder liegen als RGB- oder Graustufenbild vor und können mit Pillow eingelesen und geschrieben werden. Ansonsten sollen alle Bildoperationen selbst geschrieben werden.

Abgabe: Mi, 28. Mai 2025, 23:59 Uhr (5 Bonuspunkte - pro angefangener weiterer Woche 1 Punkt weniger)

Studienleistung 1: Bitmap-Grafik (2)

Verpflichtende Features:

  • Batch-Kommandozeilenbetrieb (python3 filtertool.py --threshold 90 --blur 3 --edges image.jpg oder python3 filtertool.py --blend screen --opacity 50 image1.jpg image2.jpg)
  • sinnvolle grafische Anzeige des Ergebnisses mit tkinter
  • Standardfilter (selbst implementiert)
    • Threshold
    • Brightness / Contrast
    • Blur / Sharpen
  • Blending von zwei Bildern mit min. zwei verschiedenen Blend-Modi

Studienleistung 1: Bitmap-Grafik (3)

Wahlpflichtfeatures (3 Features):

  • interaktive Auswahl der Filter über GUI
  • Filter nur auf selektierbaren Bereich anwenden
  • Canny Edge Detection
  • Erode/Dilate
  • Stylized Pixel Binning
  • Swirl
  • (eigenes Feature vorschlagen)

Studienleistung 1: Bitmap-Grafik (4)

  • bei Verwendung fremder Code-Beispiele: Quellenangabe im Quelltext
  • bei Verwendung von ChatGPT o.ä: formlose Angabe im Quelltext (Vorsicht: ChatGPT liefert manchmal subtil falsche Lösungen!)
  • keine weiteren (Grafik) Bibliotheken verwenden
  • Abgabe von Quellcode und kurzer Video-Demo (ca. 1 Minute) über GRIPS

Aufgaben bis zum nächsten Mal

  • Registriert Euch in GraphIT
  • Markiert mindestens zehn Themen im Kurs, die Euch interessieren
  • Markiert mindestens zehn Themen im Kurs, die Ihr schon kennt
  • Bearbeitet die Notebooks des heutigen Termins fertig
  • Schaut die beiden Videos zu Pionieren der Computergrafik an

20. Mai 2025 - Image Filters, Tk-GUIs

Überblick

  • Kommandozeilenprogramme
  • GUIs mit tkinter
  • Besprechung Studienleistung
  • Implementierung von Helligkeit-/Kontrastfiltern
  • Blending Modes

Kommandozeilenparameter parsen

python3 app.py --mode simple -a file.txt

Mehrere Möglichkeiten in Python:

Posterize

  • Ziel: Helligkeitswerte auf n unterschiedliche Helligkeitswerte runden.
  • Möglichkeiten: runden auf bestimmte Werte, Look-Up-Tables (LUTs)
  • Implementierung in GIMP: dest[RED] = RINT (src[RED] * (levels-1)) / (levels-1); src/dest in [0.0; 1.0]
  • RINT(x) = math.floor(x + 0.5)

Blending / Mixing

  • siehe Wikipedia
  • Aufgabe: wir implementieren verschiedene Blend Modes in einem Jupyter Notebook

Warum 259

  • Übungsaufgabe: Kontrastfilter implementieren
  • Lösungen of mit ImageEnhance-Modul oder mit einer merkwürdigen Formel
  • Woher kommt die 259?
  • Warum diese Formel?
  • Welche besseren Alternativen gibt es?

Aufgaben bis zum nächsten Mal

  • Registriert Euch in GraphIT
  • Markiert mindestens zehn Themen im Kurs, die Euch interessieren
  • Markiert mindestens zehn Themen im Kurs, die Ihr schon kennt
  • Bearbeitet die aktuelle Studienleistung