A deviation from the theme of building your own blog as this deals with the technical stuff on the
experrymental page and therefore more of an article on how do you make stuff fly round the screen.
The experrymental page came about as somewhere that I was practicing Javascript for the sake of practicing Javascript. Unlike the blog pages or most of the site where the processing is being done server side with PHP, this page is executing the code on the user's PC (which is why you may get messages from your popup blocker, given that these blockers are looking for scripts that are trying to run on the user's machine).
So, the premise for the page was pretty simple, just make available the rubbish that I was practicing with. Seemed pretty straight forward, but as soon as I made it available it seemed to take on a life of its own and ultimately became a project to enable a user to enter text onto the screen and have it rotate round in different ways whilst having the background change color and the EBR logo flying around.
The page is pretty simple - each "bit" has a timer that counts down to zero and when it reaches zero, it does something different, for example the logo will change direction, anything changing color will get a new target color to change to or moving text will have a new destination to move to. Each timer is independent so you don't end up with all changes happen at the same time. Also, whilst researching some of this stuff I found several examples of text being rotated around the mouse so I thought it would be good to include that as well.
Great! Now we have the definition of what's going to be created, just need to code it. Now comes the big challenge. Everything that is coded to be processed server side is easy as I know what is going to do the processing. Unfortunately with client side processing, I have no idea what you (the user) are going to look at this website with - Microsoft Internet Explorer, Netscape Navigator, Mozilla Firefox to name a few examples. And they all seem to process stuff differently which is pretty annoying. That means that a lot of the scripts need to start with finding out what browser the user is using and then insert logic of "if IE, do this, otherwise do that".
For the most part I'm pretty sure the page works OK on all latest version browsers. There are also some "fudges" in there to make it work on some older browsers. Specifically IE6 as that's what I have at work and I noticed it wasn't working properly. The problem I have with IE6 is that it doesn't seem to let me specify the size of a box (div tag). So, if you look simply at the background color effects, there are 36 boxes that change color according the pattern specified. In IE6, nothing was happening as these boxes (div tags) are empty - it seemed to be resizing the boxes according to content. The fudge is that I've just put tables in there and filled them up with non-breaking spaces. Seems to work.
What's all this got to do with PI I hear you ask. Well, bugger all really. PI comes in when calculating the shapes for the text to rotate or be displayed in. The triangle, square and rectangle just use a simple means of keeping track of where each letter is in an array to enable rotation. If we look at the square, it calculates the size of the square (in particular each corner), then each letter is assigned a letter of l, r, u or d for left, right, up or down. When a letter with array d gets equal to or less than the position of the bottom row, it changes direction and becomes an r. Really simple.
Then came the circle (and oval, but it's the same as a circle except the y coordinate is halved). Back to high school math here and something to do with the fact that the circumference of a circle is 2πr and the fact that Sine (sin) and CoSine (cos) allow you to convert the 2π bit into a value of -1 to 1. Without going into all the math, if you divide 2π by the number of letters (lets call this n) you have you can plot a circle by using x = r*Sin((2π/n)*letternumber) and y = r*Cos((2π/n)*letternumber). This is just a fancy way of drawing a circle by using a pen and a piece of string. The string is pinned to the page and then you move the pen round the center to get the circle. All the above equations do is calculate that for you from that center point.
As Homer would say mmmmmmm PI. Rather than go back and correct the triangle, square and rectangle, I left them as they were and modified the circle to create the Pentagon through Dodecagon. Given that we can calculate the circumference of a circle, if I divide the circumference by (say) 10 and join each dot, I would get a decagon. Tada! Nothing more difficult than that to get these shapes. OK, maybe a little. I still use the array associated by each letter to assign a number to each letter to determine what side it is on. By using a number it is flexible to cope with any shape and can also be used in the calculation, so a letter on side 2 should keep moving the specified increment (determined by the speed setting) until it reaches the start of side 3. It would know it's reached its destination by x = r*Sin((2π/n)*(sidenumber +1)) and y = r*Cos((2π/n)*(sidenumber +1))
In theory the formula will take any number of sides. I stopped at 12 as any more and it's difficult to tell the difference between the shape and a circle so it becomes meaningless. One may also conclude that I thought it would be too hairy, but that would be another joke for another time.
