HorizonTones


A desktop wallpaper that tells time in the colors of the sky.
When I’m working at a screen, it’s easy to miss the light changing outside. For Time at ITP, I wanted to make a clock you could read through color, the way you might sense the hour by glancing out a window.

I wanted to create a desktop wallpaper and screensaver where the colors could shift in the background while I worked.

Course / Team
Time 2023 (ITP) / Peter Zhang
Role
Concept, Visual Design, Creative Coding    Tools
p5.js, SunCalc





Full 24-hour gradient cycle





Four moments in one sky

 I built the palette around sunrise, solar noon, sunset, and nadir, when the sun is at its lowest point below the horizon. These studies show the color pair for each moment.

Sunrise
Solar noon
Sunset
Nadir


The Sketch


When the sketch opens, SunCalc calculates sunrise, solar noon, and nadir for New York City. The sketch uses those times to set the lengths of its transitions, then reads the computer’s clock to work out how far to blend between neighboring palettes.

In p5.js, animated Perlin noise controls how much of each color appears across a grid of small squares. The colors drift across the screen from frame to frame as the palette changes over the course of the day.



Open live sketch↗           View source on GitHub↗