Article: Metallic circle, a PathGradientBrush experiment

In GDI+ brushes are used to specify the color of two-dimensional graphic elements. The PathGradientBrush looked somewhat mysterious, so I decided to try and create a metallic circle using it. The PathGradientBrush interpolates between colors that got associated with some points along a Path; in the transversal direction, it interpolates towards a "central" color.

 

Program structure

The environment used is the Microsoft .NET Framework (version 2.0 or above) and the C# programming language.

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace MetallicCircle {
	public class Form1 : Form {
		private System.Windows.Forms.Panel panel1;
		private Brush brush1;

		public Form1() {
			// initialize panel1 and Form1
		}

		private static Brush createCircularMetalBrush() {
			// create and return a PathGradientBrush that is circular, white at the center,
			// a dark-light-dark-light gradient at the circumference.
		}

		private void panel1_Paint(object sender, PaintEventArgs e) {
			if (brush1==null) brush1=createCircularMetalBrush();
			// use Graphics transformations to fill an ellipse
			Graphics g=e.Graphics;
			g.FillEllipse(brush1, new RectangleF(-1, -1, 2, 2));
		}

		private void panel1_Resize(object sender, EventArgs e) {
			// order a repaint when the size changes
			panel1.Invalidate();
		}
	}
}

The full source is available here.

Painting details

private void panel1_Paint(object sender, PaintEventArgs e) {
	if (brush1==null) brush1=createCircularMetalBrush();
	Graphics g=e.Graphics;
	int cx=panel1.Width/2;
	int cy=panel1.Height/2;
	int r=cx;
	if (r>cy) r=cy;
	r-=20;	// margin

	g.TranslateTransform(cx, cy);
	g.ScaleTransform(r, r);
	g.FillEllipse(brush1, new RectangleF(-1, -1, 2, 2));
}

The Paint handler locates the center (cx,cy) of the circle in the center of the panel, and sets the radius to half the panel width (or height, whichever is smaller) minus some margin. Then some Transform methods of the Graphics class are used to first translate the origin to that center, then scale everything so we can basically paint a circle with a radius equal to 1. Doing so causes the brush to be rescaled as well as the drawing itself, so a single brush of size 1 can be used whatever the size of the Panel and circle are.

Creating the brush

private static Brush createCircularMetalBrush() {
	List<PointF> points=new List<PointF>();
	List<Color> colors=new List<Color>();
	int darkest=80;
	int lightest=255;

	double rplus=1.03;
	for (int i=0; i<360; i+=5) {
		double angle=i*Math.PI/180;
		double cos=Math.Cos(angle);
		double sin=Math.Sin(angle);
		points.Add(new PointF((float)(rplus*cos), (float)(rplus*sin)));
		angle=(i-45)*Math.PI/180;
		cos=Math.Cos(angle);
		int c=darkest+(int)((lightest-darkest)*cos*cos);
		colors.Add(Color.FromArgb(c, c, c));
	}
	PathGradientBrush brush = new PathGradientBrush(points.ToArray());
	brush.SurroundColors = colors.ToArray();
	brush.CenterColor = Color.White;
	return brush;
}

The PathGradientBrush needs an array of points and a matching array of colors. We choose to have the points on the circle's circumference, at a regular angular distance of 5 degrees, so we basically are describing a polygon with 72 edges. Since that would actually fit on the inside of the intended circle, and our brush has to cobver the circle completely, we increase the radius by 3%, hence rplus=1.03;

The matching colors all are shades of gray, varying from some darkest to some lightest value. The best results were obtained by not interpolating linearly; instead a squared cosine function got applied; it has an angular offset of 45 degrees, since we wanted the lightest and darkest points on the diagonal points of the circle.

Conclusion

The Panel and the metallic circle will resize and repaint when the Form gets resized, demonstrating a single brush can be used to paint cirlces of various sizes.