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.
Nope.
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.
It took about an hour of headscratching before I realized that the problem was that I was calling behaviors in “draw.” Oops. It is still somewhat counterintuitive to put anything involving action (specifically the .mousePressed() function) in “setup,” but it does make sense ultimately – this thing is a thing, more than a JavaScript object is a thing, and it doesn’t need to be redrawn 30 times a second in order to work.
But I left all my weird hacks commented in the code as a badge of my learning curve.
Sketch is here.
Code is here.