# Get() returns an empty pixels array

**URL:** <https://discourse.processing.org/t/get-returns-an-empty-pixels-array/31132>\
**Category:** Coding Questions\
**Created:** [July 9, 2021, 8:35am UTC](https://discourse.processing.org/t/get-returns-an-empty-pixels-array/31132 "2021-07-09T08:35:57Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![k5221](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@k5221](https://discourse.processing.org/u/k5221)\
**Post date:** [July 9, 2021, 8:35am UTC](https://discourse.processing.org/t/get-returns-an-empty-pixels-array/31132/1 "2021-07-09T08:35:57Z")

</div>

Hi, I want to show the cropped picture created by shuffling the certain portion of the original videocam image. “capture.get()” function in draw() works correctly, but because the returning object has an empty array as the property “pixels”, I can’t use it to shuffle the object or the array. Could anyone help me with this? Thank you so much in advance!

```auto
function setup() {
  createCanvas(400, 300);
  background(150);  
  noLoop();

  capture = createCapture(VIDEO);
  capture.loadPixels();
  capture.size(width,height);
  capture.hide();

  selected = createImage(50, 50);
  selected.loadPixels();
}

function draw() {
  image(capture, 0, 0)
  
  selected = capture.get(100, 100, 150, 150)
  console.log(selected.pixels)//returning []
  selected = pixelShuffle(selected)//shuffling the array
 
  image(selected, 50, 50) //not showing the shuffled version of the picture
}

```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [July 9, 2021, 1:00pm UTC](https://discourse.processing.org/t/get-returns-an-empty-pixels-array/31132/2 "2021-07-09T13:00:14Z")

</div>

Hello, @k5221, and welcome to the Processing Community .

You may try out the following as a model for your code. Note that all the instructions that modify the selection are confined to the `pixelShuffle` function. As written here, the function does not shuffle the pixels, but instead changes their color. Of course, you will need to revise the code within that function to conform to your needs.

```auto
let capture;
let selected;
function setup() {
  createCanvas(400, 300);
  background(150);  
  capture = createCapture(VIDEO);
  capture.hide();
  selected = createImage(50, 50);
}

function draw() {
  image(capture, 0, 0);
  selected = capture.get(100, 100, 150, 150)
  selected = pixelShuffle(selected);//shuffling the array
  image(selected, 50, 50) //not showing the shuffled version of the picture
}

function pixelShuffle(img) {
  let pink = color(255, 102, 204);
  img.loadPixels();
  for (let i = 0; i < img.pixels.length; i += 16) {
    img.pixels[i] = red(pink);
    img.pixels[i + 1] = green(pink);
    img.pixels[i + 2] = blue(pink);
    img.pixels[i + 3] = alpha(pink);
  }
  img.updatePixels();
  return img;
}

```

_EDITED 2x on July 9, 2021 to revise the supplied code._

---

<div class="post-metadata">

**Author:** ![k5221](https://avatars.discourse-cdn.com/v4/letter/k/bbe5ce/32.png) [@k5221](https://discourse.processing.org/u/k5221)\
**Post date:** [July 11, 2021, 5:11am UTC](https://discourse.processing.org/t/get-returns-an-empty-pixels-array/31132/3 "2021-07-11T05:11:54Z")

</div>

Hello @javagar, thank you so much for your help!  
I have pixelShuffle function here by modifying a random sort algorithm, but it doesn’t seem to be working (looks like it just returns the original image). If possible, could you look at this?

```auto
function pixelShuffle(pixels) {
  pixels.loadPixels();
  for(var i = (pixels.length - 1); 0 < i; i -= 4){

    var r = Math.floor(Math.random() * (i + 1));
    var arr1 = pixels.splice(r, 4);
    var arr2 = pixels.splice(i, 4);
    pixels = pixels.concat(arr1);
    Array.prototype.splice.apply(pixels, [r, 0].concat(arr2));
  }
  pixels.updatePixels();
  return pixels;
}

```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [July 11, 2021, 8:13am UTC](https://discourse.processing.org/t/get-returns-an-empty-pixels-array/31132/4 "2021-07-11T08:13:52Z")

</div>

Using `pixels` as the name for its parameter, your `pixelShuffle` function seems to confuse the distinction between the image and the p5.js `pixels` array.

Note, from [p5.js: Reference: pixels](https://p5js.org/reference/#/p5/pixels), that `pixels` is a `Uint8ClampedArray`. For a description of the methods associated with that type, see [MDN Web Docs: Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray).

Try this example as an initial pattern for your script:

```auto
let capture;
let selected;
function setup() {
  createCanvas(400, 300);
  background(150);  
  // noLoop();
  capture = createCapture(VIDEO);
  capture.hide();
  selected = createImage(50, 50);
}

function draw() {
  image(capture, 0, 0);
  selected = capture.get(100, 100, 150, 150)
  selected = pixelShuffle(selected);
  image(selected, 50, 50);
}

function pixelShuffle(img) {
  img.loadPixels();
  
  // shuffle img.pixels, which is a Uint8ClampedArray
  shuffle(img.pixels, true);
  
  img.updatePixels();
  return img;
}

```

All the `pixelShuffle` function does in the above example is simply use the p5.js `shuffle` function to shuffle `img.pixels` randomly, which creates noise. However, the important thing is that it demonstrates that the function, as written, does return a changed image.

Beginning with that example, you can replace these lines in the `pixelShuffle` function with your own code for shuffling `img.pixels`:

```auto
  // shuffle img.pixels, which is a Uint8ClampedArray
  shuffle(img.pixels, true);

```

Be careful to only use methods on `img.pixels` that can be applied to the `Uint8ClampedArray` type.

_EDITED on July 11, 2021 to add the following:_

Since `img.pixels` is a `Uint8ClampedArray`, you will not be able to use the `splice` method on it, so you will need to find an alternative.

Below is an example of a `pixelShuffle` method that swaps portions of `img.pixels`, followed by a resulting image. You can adapt it to your needs by modifying the code.

```auto
function pixelShuffle(img) {
  
  img.loadPixels();
  
  // modify img.pixels, which is a Uint8ClampedArray
  let temp;
  for (i = 0; i < img.pixels.length / 2; i += 4) { 
    // compare the red components of the pixels
    if (img.pixels[i] > img.pixels[i + img.pixels.length / 2]) {
      // swap the red components
      temp = img.pixels[i];
      img.pixels[i] = img.pixels[i + img.pixels.length / 2];
      img.pixels[i + img.pixels.length / 2] = temp;
    }
  }
  
  img.updatePixels();
  return img;
}

```

![img](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4cc4eb4ed547881581387091b331b4b7db431743.jpeg)