By plotting the XY of the circumference of the circle we can work out the Y co-ordinate and determine the height of each segment depending on the number of degrees it covers from it's start position to it's end. The diagram below shows that the segments are of equal size but depending upon their position can appear to have different heights when viewed by the user. The first idea of how I could represent this random result was a fruit machine reel, because it also shows that there are different options, only one of which is chosen.Ī fruit machine reel is circular with only about 50% visible when viewed side on. The aim of the game is to spin the reels and create combinations of these symbols, with prize money won according to the combination created. These reels have various pictures on them, usually fruit (including the iconic cherries).

I didn't want to use a canvas for this, so I wondered if I could use image tags. Fruit machines are coin-operated devices with three or more spinning reels. I had the idea of showing the result of a random choice via an animation on my site homepage. So, this is a bit of experimentation, playing with the position and size of images to see if I can create an animated fruit machine reel.

Fruit machine reels