Image (vuo.image)

Nodes for creating, filtering, and getting information from 2D images.

Many of the nodes in this node set are image filters — they take an input image and apply an effect to it to produce an output image. To see a list of the image filter nodes, search the Node Library for “image filter”. Some nodes in this node set generate an image, or create an image from two input images. To see a list of these, search the Node Library for “image generator” or “image transition,” respectively.

To use a 2D image in 3D space, you can use the Make 3D Object from Image in the vuo.scene node set.

Pixels and channels

An image consists of a grid of pixels. Each pixel is represented as a combination of colors (often red, green, and blue). The image can be separated by these color components into channels. In addition to color channels, some images have an alpha channel that represents the image’s opacity. An image with an alpha channel may have transparent or semi-transparent regions, whereas an image without an alpha channel is always fully opaque. The popover for an image port lists the image’s channels, along with other information about the image’s format that may be useful if you’re writing GLSL shaders.

GPU acceleration

Most of the nodes in this node set do their image processing on the GPU for faster performance. This includes nodes that filter images and nodes that generate images.

A few nodes do their work entirely on the CPU. This includes nodes that deal with image files (such as Fetch Image and Save Image), nodes that deal with image metadata (such as Get Image Size), the Sample Color from Image node, the Are Equal node, and the Find Barcode node.

Image data may be stored in GPU RAM only or in both GPU and CPU RAM, depending on where the image came from. Images loaded from files (such as the output of the Fetch Image node) are stored in both GPU and CPU RAM. Images generated on the GPU (such as the output of an image filter node) are initially stored in GPU RAM only. But if they’re sent to a node that processes image data on the CPU (such as Sample Color from Image), they’re additionally stored in CPU RAM.

Scale Factor and Retina screens

Each image has a Scale Factor. If the image’s filename has a scale suffix (such as the @2x in image@2x.png), it is used as the image’s Scale Factor. Otherwise the Scale Factor is 1x.

The Scale Factor is used by nodes that convert between pixels and points:

• The Radius port on these nodes:
  • Blur Image Directionally
  • Blur Image Radially
  • Blur Image
  • Dilate Image
  • Make Cartoon Image
  • Outline Image
  • Sharpen Image
  • Skeletonize Image
• Render Image to Window:

Image filter nodes give their output image the same scale factor as the input image.

Coordinates

In Vuo Coordinates, (0,0) is the center of an image. An image has a width of 2, with X-coordinate -1 on the left edge and 1 on the right edge. An image’s height is determined by its aspect ratio, with the Y-coordinate increasing from bottom to top.

Example compositions:

• Animate Concentric Circles: This composition uses a shadertoy shader to render an effect of moving concentric colored circles on an image.
• Animate Stripe Width: Shows the effect of changing the stripe width.
• Blend Images: Blends two images into a single image. You can experiment with the Blend Images node's input ports to change how the images are blended. Images by Pexels on Pixabay and Marat Gilyadzinov on Unsplash.
• Blur Image: Displays a blurred image. Image by Pexels on Pixabay.
• Bulge Checkerboard: Warps a checkerboard image with a bulge distortion that follows the mouse pointer.
• Cap Saturation: Imposes an upper limit on the saturation of colors in an image. Image by Andreas Gücklhorn on Unsplash.
• Color My World: Displays an image in varying amounts of color over time. Image by Nicman on Pixabay.
• Compare Directional Blurs: Shows an image with 3 different directional blur shapes.
• Compare Dithering Algorithms: Demonstrates each of the Map Image to Palette node's Dithering options applied to a grayscale color gradient.
• Compare Dithering Intensities: Demonstrates different levels of the Map Image to Palette node's Dithering Intensity port applied to a grayscale color gradient.
• Compare Dithering Palette Colors: Demonstrates the Map Image to Palette node with different palette sizes applied to a grayscale color gradient.
• Compare Downscaling For Perspective: Demonstrates how the Improve Downscaling Quality node reduces aliasing in areas of an image shrunk by 3D perspective.
• Compare Downscaling For Resizing: Demonstrates how the Improve Downscaling Quality node reduces aliasing in scaled-down images and layers.
• Compare Kaleidoscopes: Shows four different variations of kaleidoscopes. Image by Pexels on Pixabay.
• Compare Noise Range Modes: Shows the different range modes that can be used to generate a noise image.
• Compare Noise Types: Shows the different noise types and grid shapes that can be used to generate a noise image.
• Compare Palette Matching Accuracy: Maps a color gradient to a palette of a few colors, demonstrating different levels for the Map Image to Palette node's Palette Matching Accuracy port and different orderings of the palette colors.
• Compare Posterize and Palette: Shows how the Posterize Image node's predefined, static palette compares to the Make Palette from Image node's custom palette. Image by Ashim D’Silva on Unsplash.
• Compare Ripple Types: Shows an image with 4 different kinds of ripples.
• Compare Sampling Modes: Shows how the bilinear and nearest-neighbor sampling modes differ when upscaling pixel art.
• Compare Stereo Types: Shows the different ways a pair of images (left and right eyes) can be combined into a single image. Click to change the type.
• Crossfade and Zoom: Fades out and zooms out one image, while fading in and zooming in another image. Images by Pexels on Pixabay and Marat Gilyadzinov on Unsplash.
• Crossfade with Blob Mask: Fades from one image to another, using an animated noise mask. Images by Pexels on Pixabay and Marat Gilyadzinov on Unsplash.
• Crossfade with Moving Tiles: Fades from one image to another while randomly moving around parts of each image. Images by Pexels on Pixabay and Marat Gilyadzinov on Unsplash.
• Dilate Image: Dilates an image, with the dilation parameters controlled by the mouse. Image by Nicman on Pixabay.
• Display Image: Displays an image loaded from a file on your computer. Image by Ashim D’Silva on Unsplash.
• Display Image Feedback: Displays an image with blended feedback. Image by Ashim D'Silva on Unsplash.
• Enhance Blue: Increases and decreases the brightness of the image's blue tones as the mouse moves up and down. Image by Andreas Gücklhorn on Unsplash.
• Enlarge Image: Crops and enlarges an area of an image. Image by Ashim D’Silva on Unsplash.
• Explore Checkerboard: Displays a checkerboard image, with the checkerboard's center and angle controlled by the mouse.
• Find Barcode in Image: Receives live video, detects a barcode in it, and displays the result on the screen. Try running this composition while streaming live video from an iPhone camera.
• Fly at Warp Speed: A recreation of Douglas Trumbull's warp speed effect.
• Generate Checkerboard Image: Displays a sliding checkerboard.
• Highlight Eyes in Video: Darkens the background surrounding the human eyes detected in the camera image.
• Make Cyberspace Avatar: Uses live video to deep dive into Cyberspace. Thanks to Gisle Martens Meyer for funding development of some of these nodes!
• Make Drifting Clouds: Displays a sky of drifting clouds.
• Make Oval Patterns: Displays an image pattern created using a scene object and image feedback. Based on a composition by Bodysoulspirit.
• Make Random Image Pattern: Demonstrates creating a random image, and independently controlling its color and pattern.
• Make Stained Glass Image: Demonstrates the stained glass image filter, with tile and border sizes controlled by the mouse. Image by Ashim D’Silva on Unsplash.
• Mark Faces In Image: Draws a rectangle over each face detected in the dropped image.
• Mask Image by Brightness: Applies a brightness mask to an image. Image by Marat Gilyadzinov on Unsplash.
• Mask Image with Image: Applies an image mask to another image. Image by Nicman on Pixabay.
• Mirror Image: Displays a mirrored image. Image by Nicman on Pixabay.
• Move Linear Gradient: Displays a linear gradient image, with the gradient's start point controlled by mouse movements.
• Move Radial Gradient: Displays a radial gradient image, with the gradient's center controlled by mouse movements.
• Move Seagulls Closer Together: Resizes an image of seagulls, causing them to move closer together (instead of being squashed).
• Obscure Faces In Video: Pixellates each human face in the camera's view.
• Offset Colors: Offsets the red, green, and blue channels in an image. Move the mouse to see the offset colors. The image is by Nicman on Pixabay.
• Outline Image: This composition applies the outline effect to an image, and demonstrates how positive and negative intensity affect the image. Image by Marat Gilyadzinov on Unsplash.
• Pixellate Image Radially: Splits an image into radial slices with arc sizes that vary over time.
• Posterize Image: Applies a "posterize" image filter, changing the number of colors in the image as the mouse moves left and right. Image by Ashim D’Silva on Unsplash.
• Quick Start: Generates a noise pattern with a stained glass effect.
• Recolor Image: Applies new colors to an image. Image by Marat Gilyadzinov on Unsplash.
• Remove Parts of Photo: Shows how to seamlessly remove parts of a photograph.
• Render Text Image: This composition creates a text image and renders it.
• Ripple Image Gradients: A simple ethereal animation.
• Rotate Image: Displays a rotated image. Image by Nicman on Pixabay.
• Save Sepia Image: This composition fetches an image, sepia tones it, and saves it to the desktop. Image by Marat Gilyadzinov on Unsplash.
• Scan Barcodes: Detects barcodes within image files, and displays the information encoded by each one.
• Separate Hue Saturation Lightness: Displays an original image and its hue, saturation, and lightness channels as separate images. Image by Nicman on Pixabay.
• Separate Red Green Blue: Displays an original image and its red, green, and blue channels as separate images. Image by Andreas Gücklhorn on Unsplash.
• Sharpen Image: This composition allows you to experiment with different image sharpening amounts and thresholds. Image by Pexels on Pixabay.
• Show Color From Image: Samples a color from an image, and shows that color in an enlarged circle. Image by Nicman on Pixabay.
• Show Frost Noise: Demonstrates the noise parameters in the Frost Image node. Image by Nicman on Pixabay.
• Show Mouse With Shadertoy: This composition highlights the position where the mouse was last pressed, demonstrating how to use Vuo's mouse status within a Shadertoy shader.
• Show Noise Image: Demonstrates creating an animated noise image, and controlling its center and scale.
• Show Web Page: Loads a web page from the internet, with the ability to scroll through the page and click links.
• Simulate Film Projector: Applies filters to the built-in camera feed to make it look like an old-fashioned film projection.
• Simulate Motion Blur: Applies a radial blur filter to the built-in camera feed.
• Simulate Old TV: Inserts live video into an image of an old-fashioned CRT television set. Careful: loud noises may disturb the reception. Photo by PJ Gal-Szabo.
• Simulate Printed Image: Uses the CMYK halftone image filter to make an image look like it was printed in a newspaper. Image by Ashim D'Silva on Unsplash.
• Spin Sphere with Control Panel: Demonstrates using web anchor links to control other parts of a composition.
• Spin Watery Sphere: Displays a spinning sphere with an animated noise image stretched seamlessly across the surface. Use the mouse to control the draggable camera.
• Tile Image: Displays a tiled image. Image by Pexels on Pixabay.
• Tschuri: Creates a 3D warped rotating icosphere with a particle cloud and outputs it as an image.
• Unscramble Image: Animates the parameters of the Scramble Image filter, to gradually reveal it over time. Image by Pexels on Pixabay.
• Vignette Image: Applies a vignette to an image. Image by Andreas Gücklhorn on Unsplash.
• Warp Image for Fisheye Projection: Warps an spherical image for use in a dome projector. Image by Redcup2 on Flickr. Mesh data file by Paul Bourke.
• Zoom Blur Hue: Applies a radial (zoom) blur to the hue channel of an image. Image by Ashim D'Silva on Unsplash.

Nodes:

• Add Analog Image Distortion (vuo.image.analogDistortion): Distorts the image so it appears to have been transmitted as an analog television signal.
• Add Film Grain (vuo.image.filmGrain): Lightens and darkens random parts of the image to make it look like it was shot on photographic film stock.
• Adjust Image Colors (vuo.image.color.adjust): Alters an image’s color characteristics.
• Apply Liquid Mask (vuo.image.mask.liquid) [Pro node]: Removes uninteresting content from the image.
• Apply Liquid Resizing (vuo.image.resize.liquid) [Pro node]: Changes the dimensions of an image, while attempting to preserve interesting content in the image.
• Apply Mask (vuo.image.apply.mask): Uses the brightness and opacity of colors in a mask image to control the opacity in another image.
• Are Equal (Image) (vuo.image.areEqual): Outputs true if all images have the same dimensions, and if their contents are close to equal.
• Blend Image with Feedback (vuo.image.feedback): Displays an image with a feedback trail.
• Blend Images (vuo.image.blend): Blends two images into a single image.
• Blur Image (vuo.image.blur): Distorts the image with a blur effect.
• Blur Image Directionally (vuo.image.blur.directional): Distorts the image with a blur effect along a line.
• Blur Image Radially (vuo.image.blur.radial): Distorts the image with a blur effect radiating out from, or around, a point.
• Bulge Image (vuo.image.bulge2): Distorts the image by making parts of it appear to move outward or inward.
• Change Sampling Mode (vuo.image.samplingMode): Changes the way that pixels are interpolated when using other nodes to resample an image.
• Change Wrap Mode (vuo.image.wrapMode): Changes the way that areas outside the image are rendered by other nodes.
• Combine 3D Stereo Images (vuo.image.combine.stereo) [Pro node]: Merges two images — the left and right eyes — into a single image.
• Combine Image HSL Channels (vuo.image.color.combine.hsl): Combines hue, saturation, lightness, and opacity channels into a single image.
• Combine Image RGB Channels (vuo.image.color.combine.rgb): Combines red, green, blue, and opacity channels into a single image.
• Convert Cubemap to Equirectangular (vuo.image.cube.equi) [Pro node]: Warps an image from cubemap format to equirectangular format.
• Convert Equirectangular to Fisheye (vuo.image.equi.fisheye) [Pro node]: Warps an image from equirectangular (spherical) format to circular fisheye format.
• Crop Image (vuo.image.crop): Outputs only a rectangular part of an image.
• Crop Image Pixels (vuo.image.crop.pixels): Outputs only a rectangular part of an image.
• Dilate Image (vuo.image.dilate): Distorts the image by expanding or shrinking bright areas.
• Fetch Image (vuo.image.fetch): Loads or downloads an image from a URL.
• Fetch Images (vuo.image.fetch.list): Loads or downloads images from a set of URLs.
• Find Barcode in Image (vuo.image.findBarcode2): Tries to find and decode a barcode in an image.
• Find Faces in Image (vuo.image.findFaces) [Pro node]: Tries to find human faces in an image, including eye, nose, and mouth positions.
• Flip Image Horizontally (vuo.image.flip.horizontal): Horizontally mirrors an image.
• Flip Image Vertically (vuo.image.flip.vertical): Vertically mirrors an image.
• Frost Image (vuo.image.frost): Distorts the image as though it were seen through frosted glass.
• Get Cubemap Images (vuo.image.get.cube): Retrieves the 6 individual images from a cubemap.
• Get Face Landmarks (vuo.image.get.face): Retrieves the eye, nose, and mouth positions, in Vuo Coordinates.
• Get Image Height (vuo.image.get.height): Gives the image’s height in pixels.
• Get Image Size (vuo.image.get.size): Gives the image’s dimensions in pixels.
• Get Image Width (vuo.image.get.width): Gives the image’s width in pixels.
• Improve Downscaling Quality (vuo.image.mipmap): Makes the image smoother when its size is reduced.
• Interpret Data as Image (vuo.image.interpretData): Converts raw data bytes to an image, creating glitchy-looking textures.
• Invert Image Colors (vuo.image.color.invert): Alters an image’s colors by replacing each color with its opposite.
• Make CGA Image (vuo.image.color.cga): Changes the image’s colors to the closest colors in the 1981 IBM PC’s 4-color CGA (Color Graphics Adapter) palette.
• Make CMYK Halftone Image (vuo.image.halftone.cmyk): Makes the image look like it was printed, by passing it through cyan, magenta, yellow, and black halftone screens.
• Make Cartoon Image (vuo.image.toon): Traces an image’s edges and reduces its colors, to make it look like a comic illustration.
• Make Checkerboard Image (vuo.image.make.checkerboard2): Creates an image with a checkerboard pattern.
• Make Color Image (vuo.image.make.color): Creates a solid-color image.
• Make Crosshatch Image (vuo.image.crosshatch): Creates a crosshatch pattern from an image.
• Make Cubemap (vuo.image.make.cube): Creates a cubemap from 6 individual images.
• Make Grayscale Image (vuo.image.color.gray): Converts an image to grayscale.
• Make Image from Web Page (vuo.image.make.web): Renders an image of a web page.
• Make Image with Shadertoy (vuo.image.make.shadertoy2): Creates an image from Shadertoy’s variant of GLSL source code.
• Make Kaleidoscope Image (vuo.image.kaleidoscope): Applies a radial reflection effect to an image.
• Make Linear Gradient Image (vuo.image.make.gradient.linear2): Creates a gradient that transitions smoothly between the given colors along a straight line.
• Make Noise Image (vuo.image.make.noise): Creates an image where each pixel uses periodic noise to blend between 2 colors.
• Make Radial Gradient Image (vuo.image.make.gradient.radial2): Creates a circular gradient that transitions smoothly between the given colors.
• Make Random Image (vuo.image.make.random): Creates an image where each pixel is a random blend between 2 colors.
• Make Sepia Image (vuo.image.color.sepia): Converts an image to sepia tone, making it look like an old-fashioned photograph.
• Make Spherical Noise Image (vuo.image.make.noise.sphere): Creates an equirectangular image where each pixel uses periodic noise to blend between 2 colors, suitable for shading a sphere.
• Make Stained Glass Image (vuo.image.stainedGlass): Distorts the image by making it look like it was created out of stained glass.
• Make Stripe Image (vuo.image.make.stripe): Creates an image with a stripe pattern.
• Make Text Image (vuo.image.make.text): Renders an image containing the specified text.
• Make Tileable Image (vuo.image.tileable): Wraps and blends an image so it’s seamlessly tileable.
• Map Image Brightness to Gradient (vuo.image.color.map): Alters an image’s colors by mapping the image’s brightness to a color gradient.
• Map Image to Palette (vuo.image.color.palette): Alters an image’s colors to use only colors from a given palette.
• Mask Image by Brightness (vuo.image.mask.brightness): Changes the darker and/or lighter colors in the image to transparent.
• Measure Sharpness (vuo.image.measureSharpness) [Pro node]: Outputs a numeric representation of the sharpness of the image.
• Mirror Image (vuo.image.mirror): Reflects one half or one quarter of an image.
• Offset Image RGB Channels (vuo.image.color.offset.rgb): Distorts the image with a color-shifting effect.
• Outline Image (vuo.image.outline): Shows only an image’s edges.
• Pixellate Image (vuo.image.pixellate): Distorts the image by displaying it using a grid of rectangles, triangles, or hexagons.
• Pixellate Image Radially (vuo.image.pixellate.radial): Distorts the image by splitting it into radial slices.
• Posterize Image (vuo.image.posterize): Reduces the number of colors in an image, creating a screen-printed poster effect.
• Radially Offset Image RGB Channels (vuo.image.color.offset.radial.rgb): Distorts the image with a color-shifting effect.
• Reduce Haze (vuo.image.reduceHaze): Alters an image’s colors by reducing the amount of the haze color and increasing the contrast.
• Render Image to Window (vuo.image.render.window2): Displays a window containing an image.
• Resize Image (vuo.image.resize): Changes the dimensions of an image.
• Resize Image if Larger (vuo.image.resize.larger): Changes the dimensions of an image if this would make the image smaller.
• Reveal Image (Linear) (vuo.image.reveal.linear): Combines two images, showing an image on each side of a line.
• Ripple Image Directionally (vuo.image.ripple): Distorts the image with a linear wave effect.
• Ripple Image Radially (vuo.image.ripple.radial): Distorts the image with a polar wave effect.
• Rotate Image (vuo.image.rotate): Rotates an image about its center point.
• Sample Color from Image (vuo.image.sample.color): Retrieves the color of part of an image.
• Save Image (vuo.image.save2): Saves an image to a file.
• Scramble Image (vuo.image.scramble): Distorts the image by splitting it into a grid of squares and rearranging the squares.
• Sharpen Image (vuo.image.sharpen): Emphasizes an image’s edges.
• Skeletonize Image (vuo.image.skeletonize) [Pro node]: Shrinks the image to its center lines.
• Solarize Image (vuo.image.color.solarize): Inverts the colors of some parts of the image depending on the brightness.
• Split Image HSL Channels (vuo.image.color.split.hsl): Splits the image into hue, saturation, lightness, and opacity channels.
• Split Image RGB Channels (vuo.image.color.split.rgb): Splits the image into its red, green, blue, and opacity channels.
• Streak Image (vuo.image.streak): Adds a border to an image, where the border is filled with the outermost pixel of the image.
• Streak Image Radially (vuo.image.streak.radial): Preserves a circle in an image.
• Tile Image (vuo.image.tile): Repeats an image by tiling it in a grid.
• Translate Image (vuo.image.translate): Moves an image within its bounds.
• Twirl Image (vuo.image.twirl2): Distorts the image by twirling it around a point.
• Vignette Image (vuo.image.vignette2): Tints the image around the edges.
• Warp Image with Projection Mesh (vuo.image.project.dome) [Pro node]: Stretches an image across a mesh imported from a mesh data file.