2D Graphics Programming

GUI Programming

Stages of complexity, performance, and programmer-friendlyness:

Busy waiting for user input: We check permanently if some input has occurred.
Multitasking with event loop (demo: Win32 programming): The operating system calls our functions (hence: callbacks) when something happens.
Event handlers (Java) or delegates (C#), possibly as overriden member functions [überschriebene Methoden]: GUI elements contain behavior through object-oriented programming.

Drawing onto the Screen

Virtually all current systems trigger the repainting of the screen via a pseudo event "Screen has to be repainted". The idea is to collect all drawing code at one place. (Never spread functionality across your software!) If the operating system (OS) finds that it needs to redraw your graphical component, it will invoke this function [diese Funktion aufrufen]. If you want to draw yourselves, you will typically tell the OS that your graphical component needs an update so that the OS (and not you yourself) will call your central drawing routine. In Java Swing the call for a display update is issued via the repaint() function member of the respective graphical component, in Windows Forms via Invalidate(). (experiment)

In Windows Forms, the OS will call the overridden member function virtual void protected OnPaint(PaintEventArgs e). The object e contains a reference e.Graphics to the graphics context. All popular windowing systems use such a graphics context to both store information about
which part of the window has to be drawn etc. and
as an object to invoke all kinds of drawing operations on. For instance, we may write:
using System.Drawing;
// ...
Pen p = new Pen(Color.Blue, 7);
e.Graphics.DrawLine(p, 12, 34, 56, 78);
You can consult the documentation or the automatic code completion for further drawing commands.

Experiment: Control the form of a painted shape by a UI element such as a slider. Nothing will appear on screen as long as we don't force a redraw either by manipulating [hantieren mit] the windows or by explicitly calling Invalidate(), e.g., on the change event of the slider.

Bitmap Effects

.NET allows you to easily load and manipulate Bitmap objects. You may retrieve and changes single pixels through GetPixel and SetPixel. Simple color changes can be achieved by iterating over every pixel and computing a new color for it based on its former RGB value. Demonstrations with Photoshop: gradation curves, contrast and brightness, hue and saturation (convert RGB per pixel to another color system such as HSV, shift these values, convert back).

Blur [Weichzeichner], sharpen [Scharfzeichner], relief [Relief; note the different pronounciation], and similar effects operate not only on each pixel for itself, but also take the neighboring pixels into account. (demonstrations with Photoshop)

Typical errors:

Clamping missing: RGB levels below 0 and above 255 have to be clamped [Fachbegriff, "klammern"].
Bad roundoff [Rundung]: Casting to (int) or similar will consistently yield too dark colors. Use (int)(x+0.5) or even dithering instead.
Bad feedback: Most blur and sharpen algorithms require that the resulting bitmap is written to a different place in memory, not into the original bitmap. Otherwise, the new color values will be used for the next pixels, what leads to strange-looking feedback patterns.

In C#, operations on arrays and on bitmaps can be accelerated dramatically by using pointers. More about this next time.