Dancing Architecture

I created a generative animation that overlays animated neon green geometric shapes onto a photograph of the brutalist Soviet era circus building from my home city, with the shapes filling in the dark regions of the image and pulsing organically using noise. The inspiration came from the opening animation shown at the start of each of Bruno Imbrizi's classes : a brutalist black-and-white building with red shapes moving in and around its' dark spots . That was (I assume) made in Photoshop, but I wanted to recreate the same effect through code.

JavaScript: all code written in vanilla JS
canvas-sketch framework
canvas-sketch-util: for 3D Perlin noise and math utilities
HTML Canvas API: used for pixel reading (getImageData) and rendering
Node.js: runtime environment

A photo of a brutalist building as the source image

The process went through three iterations. Their detailed documentation and source code can be found at https://github.com/andreeaiaconi/creative-coding/blob/main/final-project/project-reflection.md

I started by sampling the building photo's brightness on a grid and placing neon rectangles over dark cells, animated with a noise sweep. That gave the right feel but it ignored the actual inner shapes of the building. I then switched to the marching squares algorithm to trace the dark regions as contour lines-this was much more sensitive to the architecture's nooks and crannies, maybe too much so. The final version used marching squares again but filled the polygons instead of outlining them, at a coarser grid resolution so the shapes feel chunky and geometric while still following the building's real shadows. Three layered brightness thresholds add depth, with the darkest areas rendered most opaque. The three attempts can be found at the link above.

The raw image: