Animated Morphing Clockface Code

I’m building a clock where the entire face is alive, not just the hands. Actually, there will only be one hand that makes a single rotation every 24-hours. The animation must run in a smooth, continuous flow—no ticking or stepped frames—and reflect real-time minutes and seconds as the design evolves. During each cycle the face should: • shift through color transitions, • morph its overall shape, • introduce or fade pattern changes IMPORTANT NOTE: The description above was auto-generated by Freelancer and while not incorrect, it most definitely does not accurately describe the project. It would best be described with some sketches to show how the clockface will change with the hours, days, weeks, months, seasons, and years. The image of the clockface will be auto-generated using code and the following: 1) LOCATION - GPS location (could use the location detector on a phone or other source. 2) TIME - could use the time on your phone (or any other time source) 3) DATE - Could use the date on your phone (or any other date source) 4) SUNSET/SUNRISE, MOONSET/MOONRISE, TIDES (accessed from publicly available sources/tables. NOTE: This is probably very confusing. I can provide a few simple sketches that would make the project much easier to understand. Just let me know how I can send sketches for your review. GOALS: To create a demonstration model that can be animate how the clockface will change of the course of a week, month, season, year. The animation would playback the time interval over the course of about 1 minute or so (or to a time that can be adjusted by the user). Ideally, this demo could be on a website where the clockface could be viewed so see the current time and clockface design, and the website visitor could enter their closest nearby city, and observe how the clock would change for their location of choice. NOTE: Most likely JavaScript + Canvas or SVG will be the best way to go. That said... You are free to choose the most suitable web-friendly stack (HTML5 Canvas, SVG with CSS/GSAP, or a lightweight JavaScript framework). The finished work should include well-commented source files plus a short read-me so I can drop the code straight into an existing page and tweak colours, shapes, and timing later if I wish. This is somewhat of a kinetic art timepiece with a clockface that is catered to your location and the image generated will enable the viewer to see the relationship between the sun and moon and tides in a visual way.

Project ID: 40290829