Color Shapes – Live Wallpaper image from Google Play
I saw this really cool animated wallpaper on an Android device a while back. The background was covered in little squares that were pulsing in and out and slowly changing colors. I was a little envious, sitting here with my lame-o iPhone.
But the animated wallpaper got me thinking: I wonder if I could build something like that in canvas? Turns out, it’s not too tough (and it takes less code than you’d think)!
See the Pen Pulsing Squares by Rob Glazebrook (@rglazebrook) on CodePen.
I’m generating a grid of squares. Each square gets its own frequency at which it pulses and its own starting point within that frequency, to ensure each square pulses in and out a little differently than its neighbors.
Be sure to check it out on CodePen to get the full experience. I’m using Sketch.js here to simplify building out the demo, and I’ve added some controls that let you customize the experience: try changing the size of the squares and changing the speed at which the hue changes.
