Winwheel.js History

Winwheel.js started off as a little experiment some years ago with HTML5 canvas, which was very new at the time. Working as full stack developer in the IT industry I was always on the look out for cool and interesting new things to learn.


I was also on the Social Club committee for my workplace at the time. Membership to the social club was optional so as an extra incentive for people to join we conducted a small prize giveaway each month at the All Staff meeting. How it would work is that a social club member's name was drawn at random out of a hat and then that person could pick an number, 1 to 5, and they would win the mystery prize of that number.


Somewhere in my early learnings about HTML5 canvas I discovered how to rotate an image on the canvas, so soon had the idea of trying to create a spinning prize wheel for the monthly social club giveaway. I created a prototype and showed it to the other members of the social club committee and they really liked it, so the next monthly staff meeting we unveiled it to the other staff and one lucky person got to hit the spin button and stand at the front of the room of 250 staff waiting for it to stop and point to the prize they would win.


Slightly embarrassingly for them the wheel took more than twice the amount of time to slowdown and stop as it did on my desktop computer, this was due to the code just using setTimeout() for the loop and because the laptop connected to the projector in the meeting room was not as powerful as my desktop PC used for development.


It was a real hit with the staff and I think did help grow the social club numbers. It was certainly more visually appealing than just calling a name and prize number out. The Wining wheel was tweaked here and there and continued to be used for some months until the company closed down (and we all got made redundant, but that's another story).


Winwheel.js 1.x and the birth of dougtesting.net


Shortly after the creation of the first Winning wheel for the social club I decided that this thing might be of interest to others, especially given that HTML5 canvas was quite new at the time, so I tided up the source code adding lots of comments, bought some basic web hosting, finally decided on a domain name, and put the Winwheel.js code up as a .zip download. This was back in early 2012.


There was no detailed documentation like today with the 2.x, the library was intended for fellow developers who could read the code and comments in there and alter the variables and other code to make it do what they needed.


Why the name "dougTesting"?


Coming up with a name / url for the site was pretty hard, the original intention was to play with and "test" out other JavaScript and HTML canvas things, and there was actually another library on the site at the time which created dynamic pie graphs, so I wanted the name to be broader than just "Winwheel.com", for example. The Winwheel library proved have the most interest of the 2, and this is not that surprising given that plenty of others soon started producing some great libraries for graphs.


Development of Winwheel 1.x


As interest in Winwheel.js grew over the years and different people got in contact, I slowly added more features to Winwheel.js. The 2 big ones were...



There were a few other changes and improvements over the lifespan of the 1.x version, however I soon realised that it was not very user friendly for all but experienced developers and that there was so much more I could do with it after continuing to learn about HTML5 canvas and some of the really cool things which could be done with drawing shapes.


Winwheel.js 2.x


I quietly began development on this probably about 2 years before it was released to the world on 2015-09-26. The main goals of the 2.0 version were...



As mentioned earlier my own understanding of Canvas continued to grow in since the creation of Winwheel.js 1.x, in particular I read a very good book called "Core HTML5 Canvas: Graphics, Animation, and Game Development" by David Geary. This opened my eyes to some of the amazing features of canvas and how it was possible to draw and fill shapes. The earliest work on the 2.0 of Winwheel.js was getting code drawn segments and text working. Some of this proved quite challenging, at the time (and still possibly now, I have not re-checked) it was not possible to do vertical text or text that followed the curve of the wheel, so I had to roll my own solutions for these.


I also really wanted to improve the animation system for the spinning of the wheel. The method of doing this in the 1.x was pretty terrible because it did not use requestAnimationFrame() which meant the time it took to complete spinning of the wheel varied depending on how grunty the computer it was running on was. Also the threshold system for controlling the slowdown of the wheel was clunky and no where near as nice as the jQuery like "easings" I had seen. I did originally look to create my own animation system, but discovered Greensock's Animation platform which can animate any numeric property over time – perfect for my Winwheel.js library since most of the properties are numeric!


Another big goal for the 2.0 was documentation. As an IT / web developer who uses a number of libraries in projects for clients, I understand just how challenging trying to use something without good documentation is. Documentation is a MASSIVE task though, and bogged me down for probably nearly a year. I think it was a good process to go though because in the course of writing the documentation and trying to explain variables, functions, and features I realised that some things were more complicated than necessary or did not have good names or that something was missing, so I changed these aspects of the library improving it quite a bit.


Winwheel.js on Github


The next major thing was using Github to host the source code. I was aware of and had joined Github some years ago but never really used it or understood how it worked until changing jobs in late 2015 in to a role where open source development is encouraged and where we use Github quite a bit. Finally I got organised and released Winwheel.js to Github on the 5th of March 2016.


If you spot any bugs in the source code, or have feature requests then please visit https://github.com/zarocknz/javascript-winwheel and use the issue tracker to raise tickets so I can track them. If you don't have a Github account that's fine, you are welcome to flick me a message using the contact email in the footer of this site.


The future of Winwheel.js


Updated 2019-01-02: My day job keeps me very busy which does not leave a lot of time for coding in my spare time, so there are no immediate plans to add any more features to Winwheel.js itself. The next thing I would like to do is rebuild this site using more modern techniques so its nice and responsive.


Well, if you have made it this far, thanks for reading :)