Click here to Skip to main content
15,867,568 members
Articles / Web Development / HTML
Article

Sierpinski Triangle - An Introduction into Silverlight by Example

Rate me:
Please Sign up or sign in to vote.
4.28/5 (14 votes)
20 May 20074 min read 105K   315   40   17
An Introduction into Silverlight by Example

Screenshot - sierpinskitriangle.gif

Live Online Demo

Introduction

"In the right light, at the right time, everything is extraordinary."
— Aaron Rose

What is Silverlight?

"Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of Microsoft .NET–based media experiences and rich interactive applications for the Web."
http://silverlight.net/

This project is meant to provide some basic guidance on how to create your first Silverlight application. The topic is one of the most famous fractals in mathematics: Sierpinski Triangle. This should allow the reader to become familiar with both the basics of creating an application in Silverlight, and the basics of working with XAML objects both in files and programmatically through C#.

I always recommend building something like a "Hello World" application, when learning a new development platform. The Sierpinksi Triangle has just enough flavor to keep beginners interested without confusing the issue with unneeded complexity.

Prerequisites

In order to create Silverlight applications you will need a machine, I recommend a virtual PC, and have it set up with the following Silverlight prerequisites:

  • Runtimes

    To get started with Silverlight, download the Silverlight 1.1 Alpha release to use .NET languages.

  • Microsoft Silverlight 1.1 Alpha [download]

    The runtime required to view Silverlight applications created with .NET Microsoft

  • Developer Tools

    Download the Visual Studio developer tools to start developing Silverlight applications

  • Microsoft Visual Studio codename "Orcas" Beta 1 [download]

    The next generation development tool

  • Microsoft Silverlight Tools Alpha for Visual Studio codename "Orcas" Beta 1 [download]

    The add-on to create Silverlight applications using .NET

  • Designer Tools

    Download the Expression designer tools to start designing Silverlight applications

  • Expression Blend 2 May Preview [download]

    Professional design tool to create user interaction for Silverlight

  • Software Development Kit

    For documentation, samples and add-ins, also download the SDK's.

  • Microsoft Silverlight 1.1 Alpha Software Development Kit (SDK) [download]

    Download this SDK to create Silverlight Web experiences that target Silverlight 1.1 Alpha. The SDK contains documentation and samples.

Background

Wikipedia.org Article: The Sierpinski triangle (fractal) [view]

"The Sierpinski triangle, also called the Sierpinski gasket, is a fractal named after Wac?aw Sierpi?ski who described it in 1915. Originally constructed as a curve, this is one of the basic examples of self-similar sets."

Sierpinski Triangle demonstrates the following features:

  • how to work with polygons and points
  • how to use brushes and colors
  • how to work with backgrounds and images
  • how to use the timer

Using the code

Working with Silverlight means in a large part you will eventually have to work with XAML. A simple fractal like a Sierpinki Triangle is perfect opportunity to learn enough to become familiar with XAML, without being so demanding to have to learn everything about XAML first.

Main Methods

drawSierpinskiTriangle()

This is the real work horse of the application. Part of the definition of a Sierpinski Triangle is that it is self similar. In other words a perfect candidate for recursion.

Basically we are taking sets of triangles with white borders, and randomly colored interiors and placing them on the canvas in a repeating recursive pattern.

C#
private void drawSierpinskiTriangle(int[] x, int[] y, int d)
{
    // check to see if triangles are getting too small to render
    if (d <= dMin)
    {
        // make a white color brush to draw our triangle borders with
        m_brushStroke = new SolidColorBrush();
        m_brushStroke.Color = Colors.White;

        // make a random color brush to fill our triangles with
        m_brushFill = new SolidColorBrush();
        m_brushFill.Color = Color.FromRgb(
            (byte)m_random.Next(255),
            (byte)m_random.Next(255),
            (byte)m_random.Next(255));

        // add the Polygon Element
        Polygon polygon = new Polygon();
        polygon.Stroke = m_brushStroke;
        polygon.Fill = m_brushFill;
        polygon.StrokeThickness = .5;

        // create a set of points
        Point Point1 = new Point(x[0], y[0]);
        Point Point2 = new Point(x[1], y[1]);
        Point Point3 = new Point(x[2], y[2]);

        // load our polygon with our calculated points
        Point[] pointCollection = new Point[3];
        pointCollection[0] = Point1;
        pointCollection[1] = Point2;
        pointCollection[2] = Point3;
        polygon.Points = pointCollection;

        // find out canvas to draw on
        Canvas m_parentCanvas = (Canvas)this.FindName("parentCanvas");
        m_parentCanvas.Children.Add(polygon);  // bottom of the recursion
    }
    else
    {
        // centers of the sides:
        int xMc = (x[0] + x[1]) / 2, yMc = (y[0] + y[1]) / 2;
        int xMb = (x[0] + x[2]) / 2, yMb = (y[0] + y[2]) / 2;
        int xMa = (x[1] + x[2]) / 2, yMa = (y[1] + y[2]) / 2;

        int[] xNew1 = { x[0], xMc, xMb };
        int[] yNew1 = { y[0], yMc, yMb };
        drawSierpinskiTriangle(xNew1, yNew1, d / 2);    // recursion

        int[] xNew2 = { x[1], xMc, xMa };
        int[] yNew2 = { y[1], yMc, yMa };
        drawSierpinskiTriangle(xNew2, yNew2, d / 2);    // recursion

        int[] xNew3 = { x[2], xMb, xMa };
        int[] yNew3 = { y[2], yMb, yMa };
        drawSierpinskiTriangle(xNew3, yNew3, d / 2);    // recursion
    }
}

Page_Loaded()

This method handles all of the initialization of the fractal's variables. It starts the recursion, and kicks off a timer that will handle randomizing the triangle's background colors once the fractal is done drawing.

C#
public void Page_Loaded(object o, EventArgs e) {
    // Required to initialize variables
    InitializeComponent();

    int d = 512;    // basis (width of the triangle)
    int x0 = 0;     // distance from the left
    int y0 = 0;     // distance from the top
    int h = (int)(d * Math.Sqrt(3) / 2);    // height
    // so: suitable for an equilateral triangle
    int xA = x0, yA = y0 + h;        // (bottom-left)
    int xB = x0 + d, yB = y0 + h;    // (bottom-right)
    int xC = x0 + d / 2, yC = y0;    // equilateral triangle (top-center)
    int[] x = { xA, xB, xC };
    int[] y = { yA, yB, yC };

    drawSierpinskiTriangle(x, y, d / 2);     // start recursion

    // timer tick will handle animating triangle background colors
    System.Windows.Browser.HtmlTimer timer = 
                new System.Windows.Browser.HtmlTimer();
    timer.Interval = 50;
    timer.Enabled = true;
    timer.Tick += new EventHandler(timer_Tick);
}    

timer_Tick()

This event will be on a timer once the fractal recursion is completed. It's job is to create a new random color brush, then choose a random triangle and fill its interior with the new color. This is completely a cosmetic effect, just something to give the demo a little color, literally.

C#
void timer_Tick(object sender, EventArgs e)
{
    m_brushFill = new SolidColorBrush();
    m_brushFill.Color = Color.FromRgb(
        (byte)m_random.Next(255),
        (byte)m_random.Next(255),
        (byte)m_random.Next(255));

    Canvas m_parentCanvas = (Canvas)this.FindName("parentCanvas");

    int childIndex = m_random.Next(m_parentCanvas.Children.Count);
    if(childIndex > 2)
        ((Polygon)m_parentCanvas.Children[childIndex]).Fill = m_brushFill;
}

Tips & Tricks

Browser.HtmlTimer

I found there is an HtmlTimer class in Silverlight 1.1. This class is undocumented and marked obsolete.

Visual Studio shows a warning after compilation: 'System.Windows.Browser.HtmlTimer' is obsolete: 'This is not a high resolution timer and is not suitable for short-interval animations. A new timer type will be available in a future release.

Points of Interest

One thing you might notice is that we are always recreating our brush objects, and that we are never reusing any of them. This is because in Silverlight 1.1 Alpha, at least, you can only use a brush on one object. It will generate an exception if you attempt to reuse it again.

Be sure to check out the timer code using System.Windows.Browser.HtmlTimer, for now, it is the easiest way to do draw animations.

Resources

History

  • 2007.05.20 - Uploaded original article

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralSilverlight plugin Pin
Ashley van Gerven22-May-07 1:35
Ashley van Gerven22-May-07 1:35 
GeneralRe: Silverlight plugin Pin
Artem Smirnov27-May-07 23:24
professionalArtem Smirnov27-May-07 23:24 
GeneralRe: Silverlight plugin Pin
Judah Gabriel Himango31-May-07 5:26
sponsorJudah Gabriel Himango31-May-07 5:26 
GeneralRe: Silverlight plugin Pin
Ashley van Gerven31-May-07 13:41
Ashley van Gerven31-May-07 13:41 
GeneralRe: Silverlight plugin Pin
Judah Gabriel Himango31-May-07 16:05
sponsorJudah Gabriel Himango31-May-07 16:05 
General[Message Deleted] Pin
#12320-May-07 18:42
#12320-May-07 18:42 
AnswerRe: Am I the only one who has a problem with this? Pin
Davide Icardi20-May-07 23:04
Davide Icardi20-May-07 23:04 
GeneralRe: Am I the only one who has a problem with this? Pin
CJCraft.com21-May-07 2:23
CJCraft.com21-May-07 2:23 
General[Message Deleted] Pin
#12321-May-07 6:28
#12321-May-07 6:28 
GeneralRe: Am I the only one who has a problem with this? Pin
jmw21-May-07 10:59
jmw21-May-07 10:59 
GeneralRe: Am I the only one who has a problem with this? Pin
Paul Tallett21-May-07 20:51
Paul Tallett21-May-07 20:51 
GeneralRe: Am I the only one who has a problem with this? Pin
eggsovereasy24-May-07 8:13
eggsovereasy24-May-07 8:13 
GeneralRe: Am I the only one who has a problem with this? Pin
eggsovereasy24-May-07 10:18
eggsovereasy24-May-07 10:18 
GeneralRe: Am I the only one who has a problem with this? Pin
Ward21-May-07 21:08
Ward21-May-07 21:08 
GeneralSome confusion Pin
Blumen20-May-07 18:30
Blumen20-May-07 18:30 
GeneralRe: Some confusion Pin
CJCraft.com21-May-07 2:15
CJCraft.com21-May-07 2:15 
GeneralRe: Some confusion Pin
TerryD6422-May-07 5:54
TerryD6422-May-07 5:54 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.