Mondrian's Broadway Boogie Woogie - in motion

Mondrian’s Broadway Boogie Woogie was completed 1943 in New York and connects his abstract work with the real-world grid of streets in Manhattan.

This makes it attractive to interpret the colored patches as cars and animate them correspondingly…

This is my first larger project using the very nice OPENRNDR library on top of Kotlin.

It still would be very cool to have a clean ending where every car returns to its starting position, settling there while the city noise goes down again, but with the current logic the cars are quite ‘free’ and it looks difficult to generate a suitable schedule for fitting car tracks, unfortunately.

“Making of …”

In case you are curious, here the steps and tools I used to create this animation:

• preparing the images
  • get the largest version of the original from Wikipedia
  • use Pixelmator to split background, cars and some ‘buildings’ into different layers
    • use the quick selection tool to move all red and blue cars to a separate layer
    • similarly extract buildings (large colored rectangles partially on top of streets) to a separate layer
    • fill the holes of the cars with yellow material from other parts of the painting
    • extract these layers as separate png images
• define streets and crossings plus starting points outside the painting
  • use OmniGraffle and add the three images from above as different layers
  • add another layer and mark crossing points plus starting points with circles
  • connect these markers with lines of a color indicating the driving direction for the street
  • export this layered structure as SVG image
• assemble the parts into the animation
  • use Kotlin code to read the SVG (as it is an XML file) and derive the graph structure of streets and crossings
  • use Kotlin code to extract the cars (red and blue rectangles) from the PNG image generated above to extract a small image for every car while recording the starting position for that car
  • use OPENRNDR to visualize all parts
  • create the logic for moving the cars
    • keep safe distance from car in front
    • slow down before crossing when planning to turn
    • observe ‘right of way’, i.e., stop in front of a crossing when another car is already closer to the crossing, to keep intersections clear and avoid blockings
  • add the city sound (Traffic Sound Effect at https://www.mysoundeffect.com/backgrounds - thank you for making this available!)

The logic for the cars required quite a bit of fiddling with the logic and the parameters as traffic jams arise very easily (as in real life)

Here a glimpse ‘behind the scenes’: my debugging view of streets, cars, their visual field (gray rectangles) and various events (green has right-of-way, larger gray circles indicate being blocked etc)