Just realized how much math is hidden in a CSS art landscape scene

Was trying to recreate a sunset over water for a CSS art piece last night and I got stuck on the gradient angles. Looked up a tutorial on CodePen and the guy broke down how the sun's reflection on water is basically a clean 45 degree angle trick using repeating linear gradients. Never thought I'd need geometry to make a fake wave look halfway decent lol. It's wild how you think you're just styling a div but really you're doing trigonometry in your head to get the light to bounce right. Has anyone else found themselves accidentally learning math while trying to make a sunset or mountain range?

2 comments

2 Comments

dixon.anthony6d ago

What nobody talks about is how much the math screws with your color perception too. I was doing a desert scene with a mirage effect and realized the gradient stops aren't just about angles but about how your eye processes distance. Had to figure out that the warm colors need tighter stops near the horizon while cool colors can spread out more because the atmosphere scatters light differently at those simulated distances. Ended up calculating the visual weight of each color band like some kind of mad scientist just to make a fake sandy hill look like it had depth. The worst part is once you see it you cant unsee it - now every sunset screenshot I take I'm mentally measuring the angle of the shadows.

reese5516d ago

That whole gradient angle math thing got me good when I tried making a lighthouse scene. Spent like an hour trying to figure out why my rays of light looked more like a giant slice of pizza than actual beams coming from the lantern. Turns out I was calculating the rotate value wrong by like 15 degrees and it threw the whole thing off. Ended up drawing it on graph paper like a nerd before it finally clicked.