sundial(prototype)

Inspiration

Shadows Tell Time: My Sundial Web Adventure What Sparked the Idea When I heard the hackathon theme was "time," my brain went straight to ancient sundials—those cool setups where a stick’s shadow tells you the hour based on the sun. How wild is it that people thousands of years ago, like the Egyptians or Greeks, kept track of their day with just a stick and some sunlight? I thought, “What if I could bring that to life on a website?” I imagined a 3D sundial where the shadow moves as time ticks by, blending old-school vibes with modern web tech. It felt like the perfect way to show off something creative and tie it to the theme, plus I was stoked to play with 3D graphics for the first time! What I Learned This project was a total learning curve, and I loved every minute of it:

3D Graphics Are Awesome: I dove into Three.js to build the sundial and make shadows work. Figuring out how to make a stick cast a shadow on a flat base was like solving a puzzle. Animations Bring It to Life: Using TWEEN.js to slide the camera from a top-down view to a 3D angle was super fun. It made the website feel alive and engaging. Math Meets Time: I learned sundials rely on the sun moving about 15 degrees per hour. So, I used the formula (\theta = 15 \times (h + \frac{m}{60} - 12)) (where (h) is hours and (m) is minutes) to position the shadow. It’s a simple way to mimic solar time, but I also peeked at how real sundials account for location and stuff like the equation of time. Web Dev Hacks: I hit a snag when TWEEN.js wouldn’t load—turns out, opening the HTML file directly in the browser was a no-go. Switching to a local server (like python -m http.server) saved the day. Keep It User-Friendly: I figured out how to add just enough info about sundials without overwhelming people, so the focus stays on the cool visuals.

How I Built It I built a single-page website that’s all about showing a 3D sundial in action, using just HTML, CSS, JavaScript, and a couple of libraries. Here’s how it came together:

Setting Up the Basics:

I started with a simple HTML file and a canvas for Three.js to do its 3D magic. Added Three.js and TWEEN.js from CDNs for graphics and animations. Ran into a glitch when scripts wouldn’t load, so I used python -m http.server 8000 to serve the file locally and keep things smooth.

Crafting the Sundial:

Base: I made a flat circle (CircleGeometry, radius 5) to act as the sundial’s base, colored gray to look like stone. It’s tilted (-\frac{\pi}{2}) radians to lie flat and catches shadows. Gnomon (the Stick): A thin cylinder (CylinderGeometry, height 2) stands upright in the center, casting the shadow that tells the time. Hour Markings: I placed 12 small boxes around the base at 30-degree intervals ((2\pi / 12)), so you can read the time like on a real sundial.

Making the Sun Move:

A DirectionalLight plays the role of the sun, set up to cast shadows. To keep it simple, I used the computer’s time (new Date()) to figure out the hour angle: (\theta = 15 \times (h + \frac{m}{60} - 12)) degrees, turned into radians. I set the sun at a 45-degree angle ((\frac{\pi}{4})) above the horizon and positioned it with:[x = 10 \cos\left(\frac{\pi}{4}\right) \sin(\theta), \quad y = 10 \sin\left(\frac{\pi}{4}\right), \quad z = 10 \cos\left(\frac{\pi}{4}\right) \cos(\theta)] This moves the light around the sundial every frame, so the shadow shifts with the time.

Cool Camera Trick:

The camera starts high up at ((0, 10, 0)), giving a top-down view of the sundial. TWEEN.js swoops it down to ((5, 5, 5)) over 2 seconds with a smooth curve, keeping the sundial in focus. It’s like a movie shot that hooks you right away.

Making It Look Good:

I used CSS to give the page a starry night vibe with a gradient background (linear-gradient(#1a1a2e, #16213e)). Added a little header with the project name and a quick blurb about sundials, plus a footer explaining how they work. Made sure the canvas resizes with the window so it looks great on any screen.

Keeping It Moving:

An animation loop (requestAnimationFrame) updates the sun’s position, runs TWEEN.js for the camera, and redraws the scene, so the shadow moves in real-time.

Challenges I Ran Into This wasn’t all smooth sailing—here’s what tripped me up and how I got past it:

Script Loading Drama: I got a “TWEEN is not defined” error when I tried opening the HTML file directly. Turns out, browsers don’t like loading CDN scripts that way. Switching to a local server fixed it, and now I know to always test web projects properly! Shadow Struggles: Getting the shadows to look right in Three.js was a pain. I had to tweak settings like shadow map size (shadow.mapSize.width = 512) and make sure the base and gnomon were set up for shadows. It took some trial and error to balance quality and speed. Time Isn’t Perfect: My simple formula assumes noon is when the sun’s highest, but real sundials need your location for accuracy. I looked into using the Geolocation API and SunCalc, but it was too much for the hackathon’s time crunch, so I stuck with the basic model. Animation Fiddling: The camera transition felt clunky at first. I played with TWEEN.js easing options (settled on Quadratic.Out) and timing to make it feel natural and polished. Balancing Info and Looks: I wanted to teach people about sundials without cluttering the screen. I kept the text short and sweet in a header and footer, so the 3D sundial stays the star.

The Final Product The website is a slick, single-page app that’s both fun to look at and a nod to history:

Looks: A 3D sundial with a stone-like base, a stick casting a moving shadow, and clear hour markers, all set against a starry sky background. Action: The shadow moves as your computer’s clock ticks, and the camera glides from a top-down view to a 3D angle for a wow factor. Learning: A bit of text up top and at the bottom explains how sundials work and their history, so anyone can get the gist. Smoothness: It runs great on laptops and phones, resizing automatically and loading fast. Why It Rocks: It’s a cool mix of ancient smarts and modern tech, perfect for the hackathon’s time theme, and shows off some serious web dev skills.

Building this was a blast—it took a simple idea and turned it into something I’m proud to show off. It’s like bringing a piece of ancient history to your browser, and I hope it sparks the same curiosity in others that it did for me!

Built With

• 3d
• and-react-three-fiber-for-a-modern
• application
• graphics
• interactive
• shadcn-ui-(radix-ui)
• tailwind-css
• the-project-is-built-with-next.js
• typescript
• web