ADOBE AFTER EFFECTS: Forum Expressions Tutorials Creative Cloud

Animated Tile Heat Map

COW Forums : Adobe After Effects

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Tim SmithAnimated Tile Heat Map
by on May 16, 2013 at 2:35:50 am

Folks:

I've been banging on this for a couple of days and finally need to beg for advice.

I'm trying to create an animated "heat map" of sorts with a limited palette of colors that represent via tiles. The tiles are static, the colors of the tiles change to reflect the "movement" of "heat" around the frame.

The attached still is very close to the look I want, but it is alas static. I'm using Trapcode Form to lay out the tiles, with the colors generated by a layer map pointing to a static png currently. I've tried animating the .png, but it does not change the colors on the tiles: it looks like the mapping is a static reference and cannot be animated.

I know there is a simple answer to this. I'm presuming that I could somehow generate a dynamic map for Trapcode Form, perhaps using a fractal generate with the 4-5 colors? I've made attempts at this but cannot figure it out.

Would anyone care to enlighten me? Or point me in a different direction?

Much appreciated in advance.

Cheers,
ts



Tim Smith
Applied Design Group
San Francisco, CA


Return to posts index

Walter SoykaRe: Animated Tile Heat Map
by on May 16, 2013 at 3:59:01 am

[Tim Smith] "I'm using Trapcode Form to lay out the tiles, with the colors generated by a layer map pointing to a static png currently. I've tried animating the .png, but it does not change the colors on the tiles: it looks like the mapping is a static reference and cannot be animated."

Compound effects like this look at the layer source before its transformations and effects are rendered -- meaning it can't see the animation you apply. Precompose the PNG layer, being sure to "Move all attributes into the new composition." Because the animation is happening inside the precomp, not on the precomp layer itself, it will be visible to Form and other compound effects.


[Tim Smith] "I know there is a simple answer to this. I'm presuming that I could somehow generate a dynamic map for Trapcode Form, perhaps using a fractal generate with the 4-5 colors? I've made attempts at this but cannot figure it out."

You can use the Colorama effect to color your heat map source (again, inside the precomp) or your Form output itself.

Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog - What I'm thinking when my workstation's thinking
Creative Cow Forum Host: Live & Stage Events


Return to posts index

Tim SmithRe: Animated Tile Heat Map
by on May 16, 2013 at 4:55:41 am

Walter:

Thank you for the advice. I will try both - animating the precomposed .png and using the Colorama effect - and report back.

Much appreciated.

ts

Tim Smith
Applied Design Group
San Francisco, CA


Return to posts index


Tim SmithRe: Animated Tile Heat Map
by on May 16, 2013 at 7:33:14 pm

Walter (et. al.):

As promised, here are the results of your recommendations. Many thanks. It's looking much better. I'd be interested if anyone else has any tips or advice to punch this up. Pretty happy so far though.

Colorama animated color map I created (fractal back):



Trapcode Form matrix, with prior map as color / alpha layer (precomped):



Tim Smith
Applied Design Group
San Francisco, CA


Return to posts index

Walter SoykaRe: Animated Tile Heat Map
by on May 17, 2013 at 4:32:17 pm

[Tim Smith] "As promised, here are the results of your recommendations. Many thanks. It's looking much better. I'd be interested if anyone else has any tips or advice to punch this up. Pretty happy so far though."

Thanks for reporting back. I'm glad to see and hear it's working better now!

I'm sure we can advise on further improvements, too, but a little more context around the art direction would be very helpful.

Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog - What I'm thinking when my workstation's thinking
Creative Cow Forum Host: Live & Stage Events


Return to posts index

Tim SmithRe: Animated Tile Heat Map
by on May 17, 2013 at 5:13:40 pm

Hi Walter:

Sorry I'm being a bit vague. This is work for a client on a product I'm under NDA for. About all I can say is it is pre-visualization work for an update to an existing mobile app. So it's basically throwaway work once we've figured out how to translate it into code: I don't need to refine it too much - just enough to get approval from management and the concept across to the dev team.

Your advice got me past the block, and I wanted you to see that it worked - hence the comps I posted. Much appreciated.

Cheers,
ts

Tim Smith
Applied Design Group
San Francisco, CA


Return to posts index


Walter SoykaRe: Animated Tile Heat Map
by on May 17, 2013 at 6:24:25 pm

[Tim Smith] "Sorry I'm being a bit vague. This is work for a client on a product I'm under NDA for. About all I can say is it is pre-visualization work for an update to an existing mobile app. So it's basically throwaway work once we've figured out how to translate it into code: I don't need to refine it too much - just enough to get approval from management and the concept across to the dev team. "

Totally understand.

You could add a sense of depth and a little more visual interest by adding a touch of glow to the scene overall and some subtle falloff to the tiles (hot spot in the center, little bit darker at the edges).

Good luck with the app.

Walter Soyka
Principal & Designer at Keen Live
Motion Graphics, Widescreen Events, Presentation Design, and Consulting
RenderBreak Blog - What I'm thinking when my workstation's thinking
Creative Cow Forum Host: Live & Stage Events


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2017 CreativeCOW.net All Rights Reserved
[TOP]