Background

The Mizuho Bank at 1251 6th Ave in Manhattan installed three large digital displays, two which bend around a corner, as well as a projector. They hired TAD Associates to create graphics for these new installments. I was responsible to help design these graphics as well as to program and animate most of the content for the three digital displays.

digital displays: Procedural Content

The digital displays cycle through five procedural modes and a video mode. I was responsible for creating the five procedural modes. All five are coded in JavaScript and PHP, and all five are responsive to each display size and any input content.

The three digital displays will be addressed below as “small display”, “medium display”, and “large display”. The small display is a 5:2 screen on a flat wall. The medium display is a 6:1 screen that crosses a concave corner 50% across its width. The large display is a ~11:1 screen that crosses a convex corner ~80% across its width. All three displays are meant to be rendered at 60 fps.

Golden Fields Video

The part of the digital displays I contributed least to was the Golden Fields, as seen on the large display here. My responsibility with this was mostly just optimization. It isn’t generative; it’s pre-rendered. However, the hardware behind the displays struggled to play the video as-is because of their size. Furthermore, one display’s width exceeds 4096 pixels; thus, the video would be too large for the codec required.

I was able to optimize the software by utilizing the best of the file format and codec required for the player. However, I still had to search long and hard for the sweet spot where the bitrate is low enough to run smoothly but high enough to still look pleasant.

The video itself, designed by a coworker, shows a field of orange grass that floods with golden fluid soon before revealing the client’s company logo.

Mode 1: Artful

To the right was a later test build of the first mode, Artful, on the medium screen. This version was prior to optimization and the sun’s completion.

This mode involves a calming graphical effect. The medium and large displays show a video on the left side with a 3D mirror-like object and wave-like overlay, and a fluid effect on the right side with a blurry sun-like graphic. A dot grid animates onto and off of the screen. The small display only shows the left side.

The 3D object is ironically one of the simplest parts of this project. It’s a 3D wireframe-like cube rotating on a loop rendered flat and used as a mask over a vertically-flipped copy of the background video. However, the cube is generated through JavaScript and rendered live onto the screen; thus, its animation and even its shape can be changed live.

The wave-like overlay is a complicated series of composites of the video that achieves a translucent, glassy appearance.

The fluid effect in the background and inside the sun are based on an open-source fluid effect project. Making it work efficiently at 60 fps was a challenge; in the end, it sadly had to be cached rather than procedurally generated. Granted, this did not affect the appearance, which was most important to the client for this project.

The client can change the left-side video. Although the small display does not show the video itself, the graphical effects match in color to the video.

Mode 2: Welcome

The second mode, Welcome, shows a custom image, video, or line of text as a 3D animation of the content pressing into a pin toy. These pins also slowly move slightly up and down in a wave-like fashion in order to add ambience.

Originally, the pins resembled an actual metallic pin toy: reflective and shiny. However, onsite testing revealed that bright matte pins on a matte blue background both appeared more appealing and matched the client’s style better.

The pins are on a curved surface to give the illusion of perspective despite the long aspect ratios of the displays. This allows for the appearance of a wider lens without the resulting distortion.

The pins also scale as they move upward. This intentional deviation from how real pin toys work chiefly increases readability and frankly just looks better.

Animation responds to luminosity from a custom image or video. Brighter pixels allow for taller, bigger pins, while darker pixels appear small and flush against the surface.

Mode 3: Ticker

The Ticker mode, as shown here running on the middle display, shows news articles from Mizuho’s site within and behind tall, glossy, abstract towers, each one’s perspective differing from another.

Each tower varies in color and is set to one of three perspectives. One perspective faces the  viewer directly, one is tilted upward to show two sides, and one is tilted downward to show three. The mode is locked into these angles, but it is capable of displaying the towers in any angle, tilted either upward or downward. Generally, towers toward the left are bigger and move faster than towers toward the right. The towers are “aware” of the corners of the two larger screens; the text side will not cross the corner. The second side of the towers fade into the background.

The background news articles move slowly as well, with the leftmost column moving fastest.

These news articles are not meant to be read entirely; the headers are the main focus. As the towers move, the articles inside the towers move as well. Some articles are static, some scroll steadily, and some scroll to the next article once its tower reaches a certain vertical point on the screen.

The news articles were initially intended to pull articles straight from the website, but the client found it better to simply submit chosen articles into the mode. This way, the client can choose exactly what articles to display. Whether articles are displayed in the background or in a tower is randomized every time the display switches to this mode, though news articles can appear in multiple places.

Mode 4: Cultural

The Cultural Mode displays various images related to an upcoming holiday as they drift horizontally across the screen. These images are in fact composed of colored circular particles that, in tandem, separate into chaos scattering across the screen, before joining together again to reform their shapes. They repeat this as they drift, switching between clarity and chaos gradually enough that the line between the two is unclear.

The background color gradient and the images are user-defined. The Cultural Mode is not currently active on location.

Mode 5: Employee

To the right is the fifth and final mode, Employee, on the large screen. This mode shows historical figures over a relevant background to commemorate a month or holiday. For example, this mode is dedicated to Black History Month throughout February, as seen in the demonstration to the right.

All given historical figures slowly drift over a collage of images. They slowly grow to emphasize themselves, then shrink to give the next figure the spotlight.

The entire canvas has a comic-book-like effect. A gradient behind the images adds color and typically matches the subject in some way. The background also slowly moves. The background and figures’ order randomize each time the display switches to the mode; every time somebody watches it, especially on the small screen, they may see somebody or something new.

The individual historical viewers, the background collage, and the color gradient are all user-defined.

Glass Projector

In addition to the three displays, the client had a projector installed that points toward a glass wall. With the client desiring a binary number theme, the designers at TAD animated several modes for this projector involving zeros and ones.

I mostly helped and advised with animation for this part. I helped optimize the working files for editing and rendering, and I created the effect needed for one of the modes, shown at the right.