3.4 Rolling the Dice

Okay, so though complicating things with a physics engine to actually role the dice. Let's just generate a random number and tween to that instead. First will need to generate a random number between one in six. Let's create a little function called generate result which will do just that And here we'll write return Math.random. This generates a random number between 0 and 0.9999. So we'll multiply this by six Which will give those around the number between 0 and 5.99999. OK let's add one to that. Now we have a random number between one and 6.9999. We always want to make sure that we've got an integer and it doesn't get rounded up so we'll use math.floor on this whole thing. Great. This function will generate the number our dice should fall on. So we'll need to match a random number to the x, y, z rotations of the dice. As our twin need to know which position to twin to Let's create an object containing a property for each phase. I'm just going to paste this in here as it would be much fun watching me type this out. Okay, so here we have an object with the name of each property being a value of the days and this property being another object containing the rotation values for x, y, and z. Our default position is five which is why it's 0, 0, 0. You may have noticed that your dice always starts at five, this is why. One is 270 degrees in the y-axis. Three is 90 degrees in the x-axis, you get the idea. Right. Now we're ready to roll, sorry. And a roll dice function, let's call our new generate result function And assign the return value toa variable called result. We then went to tween to the days position with this result because we created an object with the positions of one to six. We can use a result as the key to those positions. And inside our existing Twinkle we need not only to place the Y position, but add X and Z positions too as we want the cube to rotate in all directions. So firstly, our exposition will be dispositions then use result as the key to the array dot x. We can just copy and paste this for y and z and change the values. So to recap, when roll dice is called We generate a number between one and six. We then use that value to give us the X, Y and Z rotation positions from our object here and we tell the dice to turn to the new position. Let's see how this looks. Super. We now have a random rolling 3D dice, which works great. There are a couple of things I think we could do, though, to make it a bit better. For dice, kind of twists rather than rolls of the moment or even proving that. Stitch in some random twists first create an empty array called tweens. We're going to hold animations for the back of random animations then create a for loop. [BLANK AUDIO] We'll make ILS at ten. That's the number of times we want to move from face to face. Then copy or to encode and pissed and say this loop. And instead assigning it a variable, we want to push onto out tweens array. We also want to add a bit of chaos but using a random position for the axis each time. For each axis, we call generate result for a run the moment to turn the data by. We don't want all these animations to run it once. So we have to chin. We can do this while we're in the loop. Tweens? I minus one, then we use .chain and then tweens i. This chaining means that when the previous tween is finished the next one will start. Good spot if you've noticed this won't work as i minus one won't mean anything on the first part of the loop. You can get around that by putting in an if. if( i > 0). There, finally we just need to start the first tween in the chain. [INAUDIBLE] code here for a second but change the start call to be made on tweens[0] instead. Let's have a look in the browser. Server is looking more like a random roll. But unfortunately it's landing in weird positions flap position with a number on top. That's because we've now added a good tween to the chain. This has to go last as it's the one we want to land on Tweens.chain myTween, see if and Lovely. A floating dice spinning in space. Hm, dark black space. Let's make this dice a little bit more at home by placing it in a nice bit of green felt and are stales honorees to male page. We should just be able to add a background color. 24873A. Save. Refresh. Nothing. You may see a quick little flash of green there. This gives us a clue to what's happening. Basically when three renders a canvas by default it gives a pick black background just no fun at all luckily there's an easy fix head back to our G.S. and down here where create the three render just give an object with the property Alpha and the value true. Easy. This means that the canvas will be see through. Save and reload. Wow, it's just like we're in Vegas. Let's wrap up.