Polka-Dot Packing

See (non-overlapping) Spots Before Your Eyes?!

"She wore an ..."

bikini
'...itsy-bitsy-teeny-weenie yellow polka dot bikini..'

But how did they keep the polka dots from overlapping? THAT's what we want to know!

People don't stop to think about it, but software can help design geometric patterns for the clothing industry.

At any rate...(after you watch the song...)

Select how many circles you'd like to pack in the canvas when you hit 'Go.' The circle count will appear below the canvas.

Red circles appear when there are no obstacles. As packing gets more difficult, they go from red to green to teal to purple. You will see the rate of packing slow down as well, obviously.

Summary stats will appear after the goal is achieved or if a 'bailout' condition is met. At that point, you can make more polka-dots!

An 'itsy-bitsy' detail...

Notice the slider and label below. It's been styled with a 'mono-space' font. If you look at the function 'updateNumCirclesSpan' you'll find some weird code where the number of circles is 'prepended' with a 'non-breaking space.'

This is one of the picky-type details we mentioned in our style app: Detail'n with Apple.

It so happens that without the code details above, the label 'shudders' as the number of circles changes. You can confirm this by turning off the styles.

"Shuddering" is an undesirable effect that should be coded away...just the sort of attention to detail that Apple put in their flashlight icon!