Jeremy Abel

Process: Album Cover

Maxo’s logo was constructed out of foamcore, using a 3D model as a guide.

▲ Because I wanted to hang the logo from the ceiling for the photoshoot, I had to make sure the structure was pretty robust. Each panel was mounted to every surrounding panel by strips of adhesive-backed foamcore.

The logo was then painted with several coats of white gesso, and any seams were sanded away.

▼ Various bits of orange mop material, pink netting, brass wool, and pom-poms were arranged around and in the crack

Process: Website

The Chordslayer website makes the logo the center of a realtime dynamic visualization of each song on the album.

Maxo started by making spreadsheets for each song, consisting of timestamped chord changes, background colors, and logo textures. This data drives the sequencer at the heart of the site, ensuring that everything is perfectly in sync with the music. True to the album’s name, each song has over 200 chord changes.

A special MIDI file for each song is also used for timing the flashing effects on individual cubes. This part shows the flashes on the last four chords of Sunset BB, followed by the twinkling outro effect.

For the liquid background, the two colors assigned to each chord change are mapped onto a gradient, interpolated in the HSL colorspace for richer color transitions.

The gradient is distorted by a realtime fluid simulation, based on Jos Stam’s Real-Time Fluid Dynamics for Games. I’m also using Felix Woitzel’s GLSL 2D vector buffer, a neat way of storing two 16-bit floats per pixel in a single RGBA texture. This allows us to keep all calculations on the GPU by representing the fluid’s 2D vector field with one pixel per vector. Each vector’s x component is encoded in the R & G channels, and the y component in the B & A channels. We can then pass this data around the GPU as a texture, performing the required math in a series of 4 shaders shown below. The output of the third shader is the input to the first.

In order to get some nice crisp shapes out of the distorted gradient, the gradient is doubly mapped to the fluid’s distortion field. As the fluid’s coordinates go from 0 to 1 across the screen, the gradient’s coordinates go from 0 to 1 twice. This leads a nice crisp line at x = 0.5, but it also leads to large amount of ugly aliasing, due to the infinite slope at that point.

The solution was to replace the hard sawtooth with a smoother one:

Using Cinema4D’s camera mapper, the photography from the album art was projected back onto the logo model, allowing us to move it around in 3d space. Because the projection is done at a static angle, we can’t excessively rotate the model, but it’s definitely good enough for our purposes here.

The compositing of the final logo texture uses about 6 different images, all combined in a custom GLSL shader. RGB masks are used to prevent the textures from covering the central crack bits, and the upper area of the crack is also masked, which allows us to tint it with a color to match the texture around it. Additional RGB masks are used to isolate each individual cube for glow effects.