Draw smooth cones using WPF and C#

[smooth cones]

The example Draw cones using WPF and C# shows how to draw cones in WPF and C#. This example shows how to draw smooth cones. Or at least smoother cones.

To make smooth cones, the program simply ensures that adjacent sides of the cone share the same vertices. The color of a point on a triangle depends on the angle between the viewing position, the surface normal (the vector perpendicular to the surface) at that point, and lighting direction. If two triangles share a vertex, then they share the same normal vector at the shared vertex. That gives them the same color at that vertex so they are smooth there.

In this example, that gives you smooth cones. If you look at the picture above, you’ll see that the cones’ sides are very smooth at both ends where the sides share vertices.

Points farther from a triangle’s vertices don’t match angles and normals as well so their colors are slightly different and you can see some banding. In the picture above, the cones are smooth near the ends but not as smooth in the middle.

The AddSmoothCone method uses the following code to generate the sides of the smooth cones.

// Make the sides.
// Add the points to the mesh.
int first_side_point = mesh.Positions.Count;
theta = 0;
for (int i = 0; i < num_sides; i++)
{
    Point3D p1 = end_point +
        Math.Cos(theta) * top_v1 +
        Math.Sin(theta) * top_v2;
    mesh.Positions.Add(p1);
    Point3D p2 = end_point + axis +
        Math.Cos(theta) * bot_v1 +
        Math.Sin(theta) * bot_v2;
    mesh.Positions.Add(p2);
    theta += dtheta;
}

// Make the side triangles.
pt1 = mesh.Positions.Count - 2;
pt2 = pt1 + 1;
int pt3 = first_side_point;
int pt4 = pt3 + 1;
for (int i = 0; i < num_sides; i++)
{
    mesh.TriangleIndices.Add(pt1);
    mesh.TriangleIndices.Add(pt2);
    mesh.TriangleIndices.Add(pt4);

    mesh.TriangleIndices.Add(pt1);
    mesh.TriangleIndices.Add(pt4);
    mesh.TriangleIndices.Add(pt3);

    pt1 = pt3;
    pt3 += 2;
    pt2 = pt4;
    pt4 += 2;
}

First the code loops around the circumference of the cone’s ends. For each angle theta around the circumference, the program creates two points, one at each end of the cone.

Next the code loops around the circumference again, this time using the points it previously created to define the cone’s sides. Because it reuses the same points for adjacent sides, the program produces smooth cones.

The following picture shows the difference between the regular cones drawn by the previous example and the smooth cones drawn by this one. The cones aren’t perfect, but they’re much smoother.


[smooth cones]

Download the example to see additional details.

To get even smoother cones, you can draw the cone sides in shorter pieces. I’ll show how to do that in my next post.


Download Example   Follow me on Twitter   RSS feed   Donate




About RodStephens

Rod Stephens is a software consultant and author who has written more than 30 books and 250 magazine articles covering C#, Visual Basic, Visual Basic for Applications, Delphi, and Java.
This entry was posted in algorithms, drawing, geometry, graphics, mathematics, wpf, XAML and tagged , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

One Response to Draw smooth cones using WPF and C#

  1. Pingback: Draw smoother cones using WPF and C# - C# HelperC# Helper

Leave a Reply

Your email address will not be published. Required fields are marked *