Fairly straightforward, I thought – make a sketch based on hats. Specifically, you put a hat on a figure, then something happens.
I felt pretty confident I could do it in regular-old p5, no problem, so the shift to doing it with DOM elements would be basically painless.
Loading up the background and foreground images was no trouble – everything orderly, hiding, showing, etc. I used a for-loop to create five copies of my hat graphic, again no problems. I made another for-loop to dictate their behavior, and it was there that the difficulty began – I couldn’t make them behave. Weirdly, the program did work when I moved the first hat off the canvas and called an imaginary seventh hat, but try it on the five hats I intended to create and no dice.
But I left all my weird hacks commented in the code as a badge of my learning curve.
Sketch is here.
Code is here.