Math.random() adds variation to a UI when fixed values would look mechanical. It returns a floating-point value in the half-open range [0, 1): 0 is possible, while 1 is not. That small range becomes useful when you scale it, shift it, or round it for a particular visual or interaction value. section 2.7.1 section 1.3.2
To make a random floating-point value from 0 up to a maximum, multiply by that maximum. For example, Math.random() * 100 produces a value from 0 up to, but not including, 100. To move the range, first scale by its width and then add the minimum: Math.random() * (max - min) + min. With min 5 and max 10, the result is at least 5 and less than 10. section 2.7.1
Listing 2.6 Generating a random floating-point number between two values
function randomFloat(min, max) {
return Math.random() * (max - min) + min;
}
Use this helper when a visual property or motion value needs a random floating-point value within a chosen lower and upper bound. section 2.7.1
Many browser tasks need whole numbers rather than fractions. Math.floor(Math.random() * array.length) creates an array index from 0 through the final valid index. For an inclusive integer range, floor the scaled range after accounting for both endpoints: Math.floor(Math.random() * (max - min + 1)) + min. A call with 1 and 6 can simulate a six-sided die roll. section 2.7.1
Random values can drive visible frontend details directly:
- Generate red, green, and blue components with Math.floor(Math.random() * 256), then combine them in an rgb(...) color string. section 2.8
- Give a canvas confetti piece random initial velocity, size, rotation, rotation speed, and color so a burst does not repeat one rigid shape. section 14.2.3
- Offset 100 confetti pieces randomly from the canvas center before animation updates their position and rotation. section 14.2.3
Randomized confetti launch
A celebration effect can turn one number into a left-or-right horizontal velocity: Math.random() * 7 - 3.5 produces a value from -3.5 up to 3.5. A separate expression can create an upward vertical velocity, while later animation steps apply gravity, drag, position changes, and rotation. Randomness establishes each piece’s starting character; the update loop supplies the motion. section 14.2.3
Listing 14.6a Creating a shower of confetti (part 1)
HTML:
<canvas id="confettiCanvas"></canvas>
<div id="ui">
<h2>Step 42: Submit Your Email</h2>
<div class="info">You made it! All that's left is to submit
your email so we can send you the results.</div>
<label for="email">Email:
<input id="email" type="email" size="30" value="user@example.com">
</label>
<button id="submitBtn">Complete the Task</button>
</div>
JavaScript:
function createConfettiCelebration(canvas) { #1
const ctx = canvas.getContext('2d');
const confettiPieces = []; #2
const gravity = 0.15; #3
const drag = 0.005;#4
let isAnimating = false;
function createConfetti(x, y) { #5
return {
x: x,
y: y,
vx: Math.random() * 7 - 3.5, #6
vy: Math.random() * -7 - 5, #7
width: Math.random() * 10 + 5,
height: Math.random() * 5 + 3,
rotation: Math.random() * Math.PI * 2, #8
rotationSpeed: Math.random() #8
➥ * 0.2 - 0.1, #8
color: `hsl(${Math.random() * 360}, 70%, 50%)`,
};
}
function burst(centerX, centerY, count = 100) { #9
for (let i = 0; i < count; i++) {
const offsetX = Math.random() * 60 - 30; #10
const offsetY = Math.random() * 60 - 30; #10
confettiPieces.push(createConfetti(
centerX + offsetX,
centerY + offsetY
));
}
}
Inspect the confetti creator to see range scaling and shifting applied to canvas velocity and dimensions. section 14.2.3
The practical pattern is simple: begin with Math.random(), decide whether the target needs a fraction or an integer, then scale and shift the value to the range required by the UI. Use the range boundaries deliberately: [0, 1) makes multiplication especially convenient for array indexes and 0–255 color components. section 2.7.1 section 2.8
