Turn Your Name Into a Snowflake

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Gerontius snowflake

A wintry gift for my readers!

Have you always wanted to write your name in the snow? Here I offer a single, precious snowflake, made uniquely for you based on your name.

Just follow this link, type your name into the box, and enjoy your special snowflake.

Sending snowflakes to friends

If you want to send a snowflake to your friends, you can link to this blogpost or send them the snowflake link directly.

Another, better option is to send them a special link so that when they click on it, the snowflake automatically uses their name.

To create a special link, first type out the link address: http://dreamsofgerontius.com/scripts/snowflake.html

Then add the characters “?=” followed by their name directly afterwards. You can’t add any spaces.

So, http://dreamsofgerontius.com/scripts/snowflake.html?=Tina wishes Tina a Merry Christmas.

http://dreamsofgerontius.com/scripts/snowflake.html?=DonaldTrump creates a special snowflake for Donald Trump.

Here are some more snowflakes I created in honour of the recently passed astronaut, John Glenn, and in anticipation of Star Wars: Rogue One.

How it works

This is a semi-technical description of how the snowflakes are generated. Believe it or not, some people are interested in this sort of thing! The code below is re-written and simplified compared to the real code, so don’t try searching for these exact routines in the source.

The snowflake link goes to a page containing some simple JavaScript with a lot of maths behind it. The script asks you to type in your name, then the magic happens!

First the characters in your name are turned into a sequence of numbers by the following line of code:
convertedNameArray[i] = userName.charCodeAt(i);

The numbers are normalised, meaning they are scaled to fit within a range between 0 and 1.

Then over 100 small crystal lumps are placed symmetrically around a six-pointed star. Each crystal is placed somewhere on a semi-circular arc near the previous crystal. The exact position on the arc for each crystal depends on the number sequence created from your name:
function calcXPrime(initX,initY,angle) {return initX * Math.cos(angle) - initY * Math.sin(angle);}
function calcYPrime(initX,initY,angle) {return initX * Math.sin(angle) + initY * Math.cos(angle);}
var sign = (getNextChar() < 0.5) ? -1:1
var lumpAngle = 0.5 * Math.PI + sign * 0.5 * Math.PI * getNextChar();
var x1Val = calcXPrime(spacing,0,lumpAngle); //"spacing" is the radius of the arc
var y1Val = calcYPrime(spacing,0,lumpAngle);

The function “getNextChar()” gets the next number in the sequence created from your name.

The functions calcXPrime() and calcYPrime() turn an angle into distances in the X-direction and Y-direction. They should be familiar to anyone who remembers their GCSE maths.

Once all the crystals are placed, another function chooses a random group of crystals every tenth of a second. These crystals change shape, or sometimes they disappear and reappear later. The effect is to make your snowflake twinkle and sparkle:
var intervalID = setInterval(function() {moveFlake();},100);
function moveFlake() {
var flakeID = Math.floor(Math.random() * idCounter); //idCounter is the total number of groups of crystals
var filename=randomImage(); //gets a random crystal image
document.getElementById(flakeID).innerHTML='&ltimg src="'+filename+'"&rt';
if(Math.random() < 0.15) {
document.getElementById(flakeID + i).innerHTML=""; //make the crystals disappear 15% of the time

A Merry Christmas to all!

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

Leave a Reply

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