logo
By Lawrence

12 minutes

Time of Day

Lesson 1.3 ended under the car. Floor it from the start line, and 100 m out the shadow is gone. That is 3.2 s into the drive.

The rest of the light is stuck as well. One sun hangs over the start line and never moves, and one sky photo lights the car and never changes. This lesson gives them a clock, stopped at 16:12. Lesson 1.8 sets it going.

The sun from the hour

The sun's height follows a wave. It rises at dawn, tops out at noon, sets at dusk and spends the night below the ground. One trip round the wave, 2π, takes 24 hours:

h = sin((hour − 6) / 24 · 2π)

In the code it is one line:

src/components/DayNightCycle/DayNightCycle.core.ts
/** Sun height for an hour: rises at 6, peaks at 12, sets at 18. */
export function sunHeightAt(hour: number): number {
  return Math.sin(((wrapHour(hour) - 6) / 24) * Math.PI * 2);
}
sunHeightAt(6)     // 0       sunrise
sunHeightAt(9)     // 0.707
sunHeightAt(12)    // 1       noon
sunHeightAt(16.2)  // 0.454   our 16:12
sunHeightAt(0)     // −1      midnight

That number is a height, not an angle: 0.454 is the sine of 27°. dayLightAt turns it into the light's direction, colour and strength, and the direction comes from these lines:

Continue reading

Unlock the Full Course

Every lesson, the runnable examples, and the finished build — yours to keep.

$9one-time

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search