Image of a wind speed map

I want to render an animated vector field map similar to this wind speed visualization. How can I do this?


I'm assuming you want to build this without the aid of a readily-available rendering engine. I'd conceptually de-couple the end-result using multi-layer rendering, like this:

  1. Map image texture layer

    it's only purpose is to handle the drawing of the map, without any special effects

  2. Vector animation layer

    this layer renders the animation (real-time or pre-constructed)

Then, you want an orchestrator to merge the two layers and manage codependant parameters like size, speed etc. The output of the orchestrator (given a base image for the first layer, a vector animation for the second layer, a timelapse value and a delta time point within the lapse) should be the animated image sampled at time point delta (delta belongs to [0, timelapse]). Then, a higher level rendering system draws the sampled animation on/off screen.

You can either use a real-time animation that contains all the sprite data (probably an array of [start and end coordinates, bezier curve data] for each sprite) and interpolate with a given delta time for all elements of the array, or have the animation pre-built and simply merge the two layers.

edit: As I see from the animated image you posted, some sprites last longer than others. In this case, for the model described above, the vector animation consists of an array of { startXY, endXY, timelapse, curveData } for each sprite. When sampled at a timepoint delta, if the current element's timelapse < delta, skip drawing it. Also, if you want transparency (i.e. a fade in and out effect) you could set the current sprite's transparency to delta / timelapse.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.