ImageData

Module Visual.ImageDataGrid

When reading frames from a camera or video with ixfx, you get back ImageData instances.

This can be worked with directly to read pixel values at given locations, or iterated over to read every pixel. Pixel values are given as red, green, blue and opacity (or alpha) values on a 0..255 scale in one single array. Four array positions are thus used to represent a single pixel.

That is:

// pixel 0   | pixel 1   | pixel 2   | ...
  [r, g, b, a, r, g, b, a, r, g, b, a, ... ]

Here’s the basic way to read pixels using ImageData directly:

// (Where 'image' is an ImageData instance)
const data = image.data;
for (let i = 0; i < data.length; i += 4) { // note +=4 to jump to next pixel
  let r = data[i+0];  // red
  let g = data[i+1];  // green
  let b = data[i+2];  // blue
  let a = data[i+3];  // opacity
  // Now we have rgba values for a single pixel...
}

ixfx’s helper functions can read pixels in way that makes code more literate. However, if you’re also wanting to modify pixels, you may be better off using the above technique, since you have all the raw array indexes at-hand.

Reading pixels by x,y

import { ImageDataGrid } from 'https://unpkg.com/ixfx/dist/visual.js'

// Where 'image' is an ImageData instance
const a = ImageDataGrid.accessor(image);

// Read pixel at x:10, y:10, returning _undefined_ if this coordinate is out-of-range
const pixel = a({x:10,y:10}, `undefined`);
// Yields: { r, g, b, opacity }

Tip

Instead of ‘undefined’ we could use a few different logics to determine what happens if we read beyond the bounds of the frame. This is a significant advantage to the lower-level array access.

Or the same example as earlier, reading through every pixel, left-to-right, top-to-bottom.

for (const x=0;x<image.width;x++) {
  for (const y=0;y<image.height;y++) {
    const pixel = a({x,y}, `undefined`);
  }
}

By row or column

You can also scan by row and column, with generators. These will yield an array of pixel values for the row or column.

import { ImageDataGrid } from 'https://unpkg.com/ixfx/dist/visual.js'

// Scan by row, top-to-bottom:
for (const row of ImageDataGrid.byRow(image)) {
  // row is an array of {r,g,b,opacity}
}

// Scan by column, left-to-right:
for (const col of ImageDataGrid.byColumn(image)) {
  // col is an array of {r,g,b,opacity}
}