S2JS - Randomness and numbers : Random coloured circles in a loop

We'll move our RandInt function up to our preface area, just to tidy things up.

We'll also generate our random circles inside a for loop to make 100 random circles.

And finally, we'll add some code into fillCircle to pick a random colour. The way we'll do this is generate a random number which will be 0, 1 or 2. In a series of if-then-elses we'll set a different fillStyle depending on the result.

We'll also call our fillCircle function something slightly different -- CircleRandColour, to be more descriptive of its new functionality.

Try changing the number of circles to 10. Try 1000!

Try changing the maximum circle size from 30 to something else.

Challenge: try changing the code to include a fourth random colour in the repertoire.

<HTML> <head> <title> My new Web Page </title> </head> <body> <canvas id=myCanvas width=300 height=300 style="background-color: pink;"> </canvas> <script> var ctx = myCanvas.getContext("2d"); function RandInt(up_to) { n = Math.floor(Math.random() * up_to); return(n); } function CircleRandColour (x, y, radius) { r = RandInt(3); // r will be 0, 1 or 2 if (r == 0) { ctx.fillStyle = "red"; } else if (r == 1) { ctx.fillStyle= "green"; } else if (r == 2) { ctx.fillStyle= "blue"; } ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill(); } for (var i=0; i<=100; i++) { CircleRandColour (RandInt(myCanvas.width), RandInt(myCanvas.height), RandInt(30)+1); } </script> </body> </html>