Day 54 – Meal Wheel

A fun Lindt chocolate contest inspired this page! I saw this giant Lindt bunny near downtwon. If you see people lining up, then you line up behind them without question. Yep. There was a prize wheel and I won some chocolate. There was a golden bunny car on site too. Love the ears! I think the little chocolate bunny is the cutest though.


I used html5 canvas to draw my wheel. I looked at this Prize Wheel tutorial and made adjustments. I divided Math.PI into 6, creating a full circle of 12 sections. By incrementing the start and end angles with a for loop, I drew an arc and then a line to the center for each section and filled it with a color from an rainbow array. To fill the text in each section, I used cos and sin functions to calculate the x and y distances from the text to the center of the circle.

The angle would be the beginning angle of the arc section plus half of the incremented angle value. This gives us the angle between the start of the section and halfway of the section. For x, we use cos(angle) = adjacent/hypotenuse, with the hypotenuse being how far away we want the text to be from the center. The adjacent value tells us how far away the x value is from the x value of the center of the circle. So the x placement of the text would be

x value of the center of the circle + cos (beginning angle + half of the arc angle) * distance of text away from center >> this leads to a formula of width/2 + cos (angle + (Math.PI/6)/2) * textRadius

Similarly the y value, we can use the sine function to get height/2 + sin (angle + (Math.PI/6)/2) * textRadius.

Now the text is where it should be, but it’s horizontal! To rotate the text so it aligns with the wheel section, we can just rotate the text to the same angle as halfway of the section. I used rotate(angle + (Math.PI/6)/2) to align the text. I drew the arrow with simple lines and then filled the section.

To make the wheel spin, you just change the starting angle you draw the wheel from. Set a spin time and then set an interval to draw the wheel at the next starting angle until the spin time is up. When the wheel has stopped spinning, you want to get the text of the pie section chosen. You take the total degrees the wheel has spun and get the remainder from 360. This tells you how far the wheel has “shifted” from the original starting position, ignoring any complete rotations.

Here’s where it got a little tricky. Say you got 390 degrees, that means the wheel has shifted 30 degrees from its original starting point. You’d be tempted to divide 30 degrees by the angle of one wheel section to get the index. This would be wrong! The reason is because the wheel rotation and the index are in opposite directions. When the wheel is rotated to the right 30 degrees, the stationary arrow is actually pointing to “30 degrees LEFT of the original starting position of the wheel”. You must take 360 degrees and minus this angle, then divide by the angle per section. You can then use Math.floor on the final value to get the index value.

Finally, show the food chosen by looking at the food array at the index value and display it on the screen. Tada! Your food is ready to be ordered.
Screen Shot 2015-03-31 at 9.51.55 PM

Day 54 – Meal Wheel


Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s