Tangerine Development

When I woke up one Sunday morning, the clouds were creeping over the top of the Sandia Mountains as they sometimes do. They lazily drip over the top, mixing with the peaks of the mountains, hiding the rest in mist. I tried to take a picture, but as usual with my photography, it was sorely lacking. Luckily Google image search exists.

A misty mountain photographed by someone with skills. Pixabay

I've been working on this project on and off since February. It took me a very long time to get the effect that I wanted where you would have a parallax effect with the moving mountains. Originally I tried pushing and popping values from the arrays that represent the mountain peaks, but that wound up messing everything up. I eventually settled on using reference arrays of the original values that are also used to ease the mountains back to their original shape after you play with them. This way we don't mess up the indices of the current mountains.

I used D3.js to create this whole interactive. The mountain shapes are d3.js Areas based on this d3 sample. They are multiple arrays initially populated with random noise and then smoothed out a little bit, and then referenced as above. The clouds are SVG rectangles with semi-transparent PNG backgrounds that I made from a photo of clouds I found on the internet.

PS- When I was working on this project, I kept thinking about this song.

Hey whoopie cat.