direction shader for OpenCV flows

100%

direction shader for OpenCV flows

✓ Published0🌍 Public

Last edited Jul 26, 2012

Created on Jul 26, 2012

This example visualizes optical flow direction and magnitude as a color-coded image, showing flow orientation through hue and flow strength through saturation. The GLSL shader reads horizontal and vertical flow components from two texture samplers, `xTex` and `yTex`, and computes per-pixel angle via `atan` and magnitude via `length`. It converts these values to HSL and then RGB using custom conversion functions, producing a smooth, rainbow-like representation of the flow field. The code relies on OpenCV-generated flow data passed as textures to the shader for real-time rendering.

AI-generated description

Similar vizzes

Loading thumbnail…

Hello WebGL III

This example demonstrates WebGL’s ability to generate a gradient directly on the GPU, where the fragment shader colors each pixel based on its x and y coordinates relative to the canvas size. Using a minimal vertex shader and a full-screen triangle fan, it renders a smooth color transition without any external data. The code compiles and links shaders manually via the WebGL API, sets uniform and attribute locations, and calls `drawArrays` to produce the final image.

Mmbostock

57% match

Loading thumbnail…

Colour-full force

Twenty-eight colored circles drift across a black SVG canvas in a soft, gooey cluster. Each circle is assigned a rainbow hue and a random radius, with alternating circles receiving a blurred filter effect that makes them blend together. The motion is driven by D3’s `forceSimulation` with charge, center, and collision forces, while the rendering uses SVG circles and a `feGaussianBlur` with a `feColorMatrix` filter to create the liquid-like appearance.

AAlireza-Dezfoolian

56% match

Loading thumbnail…

Flow Visualization - Tapered, Curved

Interactive nodes show aggregate flows between six circles, with link thickness and green color mapped from randomly assigned strength values. Dragging any circle interactively updates its connected paths, which are drawn as tapered, curved lines using `d3.svg.line` with a basis interpolation and offset calculations. The SVG visualization uses D3 v2, jQuery for node targeting, and includes drop-shadow filters and a background image.

MMbrownshoes

55% match

Loading thumbnail…

shader gear

A real-time shader playground renders a series of WebGL fragment shaders as animated, full-screen visuals. The examples include smoothstep line plotting, mouse-interactive RGB gradients, distance-field circles, rotating polygon shapes with animated sides, and color-mixing loops—all driven by the uniform u_time. Shown side by side, they demonstrate how different GLSL functions shape geometry, color, and motion.

11wheel

54% match

Loading thumbnail…

Hello WebGL II

This example demonstrates vertex-color interpolation in WebGL by rendering a square with different colors bound to each corner. Using the canvas element’s WebGL context, it compiles separate vertex and fragment shaders as text. The shaders define a `varying` color variable that smoothly interpolates RGBA values across the shape. The code explicitly binds two vertex attribute arrays—positions and colors—and draws the square as a triangle fan, illustrating low-level GPU rendering without external libraries.

Mmbostock

54% match

Loading thumbnail…

Directional Force Layout Diagram with node colouring

This interactive force-directed graph displays directional relationships from a CSV dataset, with nodes colored by a categorical scale and link opacity encoded by link value. Users can click nodes to enlarge them and their labels, or double-click to restore them. The visualization uses D3 v3’s `d3.layout.force` for the physics simulation and SVG rendering for the nodes, curved paths with arrow markers, and transitions on click events to animate the size changes.

RRestuta

52% match

Loading thumbnail…

regl-hurricane

Animated WebGL visualization of 10,000 line segments that continuously morph between different geometric patterns—a circle, then two distinct random point distributions. The code uses the regl framework with custom GLSL vertex and fragment shaders to interpolate between precomputed buffer states, cycling through three datasets in a loop. Line color shifts from blue to red based on each segment's position index, while d3 generates the underlying point data and easing functions control the smooth transitions.

11wheel

52% match

Loading thumbnail…

regl-circles

Twenty thousand colored circles fall from the top of the viewport, then settle into horizontal bands based on each circle's speed and size. Two quantized scales map circle index to a target row, and a WebGL shader renders each point with a soft-edged stroke and rounded fill. The animation cycles continuously via a REGL frame loop, with position and color computed per frame in the vertex and fragment shaders using D3 scales and lodash for data shuffling.

11wheel

52% match