Home > Development, WP7 Development > How To Make the Coolest Snow EVER in WP7/XNA: Part 1

How To Make the Coolest Snow EVER in WP7/XNA: Part 1

Alright, I wanted to get a programming article written up so I decided to publicize how I do snow in my app – Christmas Lyrics. Took me a long time to realize parametric sine/cosine functions were where its at! Using the method I describe, you will be able to easily include windy snow in any XNA-based app you create! 😀

The math I use can essentially be bubbled down to these two formulas:

ASin(X * B);

ACos(X * B);

MY frameworks generally consist of a base class called a “Renderable” and then a “Scene” which has a list of renderables and bubbles events like OnUpdate() and OnDraw() to each object in the list.

So you start out with a class, Snowflake : Renderable and it looks like this.

public class Snow : Renderable


    public Vector2 Position { get; set; }

    private Random r;

    private float scale { get; set; }

    private int iteration { get; set; }

    private int sign { get; set; }

    private int algo { get; set; }


    private float theX = 0;

    private float xCoef = 0;

    private float sineCoef = 0;

    private float speed = 0;

    public float alpha = 0;

The above code basically just gets us ready to use a single snowflake. How my system is designed is essentially like this; you generate an amount of these snowflake objects. Usually between 300 – 400 of them (the perf is surprisingly good) and then just let them take care of their own updating. Its a really simple system designed to abstract all the logic away from the main scenes and allow the objects themselves to process their own changes.

A lot of the variables are self explanatory. I create a Position variable for storing the snowflakes position, a Random for the random number, and so on. Most of the other variables are just used for the mathematics. What I do is generate a random function for each snowflake so they have a proper amount of variance between eachother. The rest of the variables simply define the function that the snowflake will be using.

Next we will create the heart of the snowflake – basically the OnLoad method which generates the random mathematical function that the snowflake will bind to.

public void Reset(int seed)


        //Generate a new random instance based on various information

        r = new Random((int)DateTime.Now.Ticks + seed * 500);

        //Randomize the alpha channel

        alpha = r.Next(140) + 115;

        //Give it a random speed

        speed = r.Next(5) + 1;

        //SineCoef is used in the mathematical function

        sineCoef = r.Next(5) + 1;

        //XCoef is also used in the math

        xCoef = r.Next(5) / 10 + 0.5f ;

        //theX Basically keeps track of time.

        theX = 0;

The two odd variables are sineCoef and xCoef. You can relate them back to the mathematical function at the top by replacing A with sineCoef and B with xCoef. These are simply the modifiers for the function that give it variety.

The next code-block sums up the “Reset” function by randomizing scale, setting a random starting X position, and choosing whether to use sine or cosine.

        if (r.Next(2) == 0)

            scale = (speed / 10) + 0.3f;//5.0f/((float)r.Next(10) + 5);


            scale = 5.0f / ((float)(r.Next(10) + 5));

        Position = new Vector2(r.Next(350) + (50 * seed), -10);

        if (scale > .8f)

            alpha = 255;

        algo = r.Next(2);

        if (r.Next(2) == 1)

            sign = -1;


            sign = 1;


The only thing of note in that code block is the algo variable which is what determins which algorithm to use (sine or cosine). Additionally, you will notice that I randomly set the scale using two different methods. One of them is a pure random size while the other one adjusts the size based on the speed of the snowflake. This trick gives it a sort of paralax/layering feel by making slower snowflakes appear larger. But the ones that do not adhere to that scale tend to look like random wind gusts. So it works out pretty well.

Next up I simply define the constructor for my snowflake and tell it to reset the snow. I allow the user to pass in a “Seed” which it uses to give a nice randomness about each snowflake. I realized without this feature – they tend to clump together when first created so I tried to play around with methods to randomly reset them.

    public Snow(int seed)




    public Snow() : this(0) { }

Next I create a public method called “GetScale”. In retrospect I should have just used the smooth .NET 4.0 syntax when defining the variable at the top but this is, at the end of the day, a learning project. So I will keep it in its original form 🙂

    public float GetScale()


        return scale;


The very last part of my snowflake class is the OnUpdate function which gets run every gameloop in the Update() method call. A relatively simple method which just uses the mathematical information we generated to reposition the snowflake over time.

    public void Update()



        theX += 0.1f;

        float x = 0;

        float y = speed;

        if (algo == 0)

            x = sineCoef * (float)Math.Sin(theX * xCoef);// 0.01f;


            x = sineCoef * (float)Math.Cos(theX * xCoef);

        Position += new Vector2(x * sign,y);




Essentially I use a vector-like system based off the sine/cosine functions to determin how far in one direction to update the snowflakes position.

That is it for Part-1! The next section will show how to implement the snowflake class into a “Scene” and I will describe my framework in a little more detail. I hope this has helped give you ideas for snow of your own. If you wish I can also upload my finished code for the world to use because honestly – this generates some really awesome snow and I would love to see my code be put to good use!

If you want to see the snowfall in action check out my app, ChristmasLyrics (There is a free trial which demonstrates this method of snowfall)

Christmas Lyrics Download

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: