Visualizing the Math Behind Images

In 2020, after participating in a math contest, I had the opportunity to collaborate with Prof. Dr. Reinhard Oldenburg from the University of Augsburg. He offered me a contract to help develop a web application aimed at demonstrating the mathematics behind digital image processing. For many, editing images is commonplace, but the underlying mathematical concepts are often overlooked. This project aimed to make those concepts visible and interactive.

You can explore the application here: Mathematik der Bildbearbeitung

What the Project Does

The core idea was to create interactive applets where users could apply various mathematical algorithms to images and see the results instantly. The application covers several types of image manipulation techniques:

• One-Pixel Algorithms: Modifying the brightness or color of each pixel based on a defined rule.
• Transformations: Changing the position of pixels (e.g., mirroring, rotating, scaling).
• Convolutions: Applying filters where the new value of a pixel depends on its neighbors (e.g., blurring, edge detection).
• Image Combinations: Merging two images using mathematical operations.
• Function Composition: Applying multiple algorithms sequentially.
• Real-time Webcam Processing: Demonstrating these algorithms live on the video feed from a user’s webcam using HTML5 capabilities.

My Role and Learnings

This was one of my first significant real-world projects involving web technologies, undertaken outside of personal endeavors. As such, the codebase reflects my learning process at the time. Working alongside Prof. Oldenburg, I helped implement the web application and its various interactive components.

Key takeaways from this project included:

• Applying Programming to Academia: Bridging the gap between theoretical mathematical concepts and practical software implementation.
• Web Technologies: Gaining experience with HTML5 (especially the <canvas> element and webcam access via getUserMedia) and JavaScript for creating interactive web applications.
• Algorithm Implementation: Translating mathematical formulas for image processing into functional code.
• Collaboration: Working in a professional context with specific requirements and goals.

This project was a valuable experience that solidified my interest in software development and showed me how programming could be used to explain complex topics in an engaging way.