# P5 JS random/shuffle pixels

**URL:** <https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508>\
**Category:** Coding Questions\
**Created:** [October 15, 2018, 9:04pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508 "2018-10-15T21:04:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanson](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@sanson](https://discourse.processing.org/u/sanson)\
**Post date:** [October 15, 2018, 9:04pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508/1 "2018-10-15T21:04:39Z")

</div>

Hello,

I’m new in P5JS.  
I’m trying to convert my Processing code to P5JS.

The question is this:  
I made a Processing code that loads all pixels of an image, apprends the colors of that pixels and then shuffle them. The idea is that the image appears on the screen as a disarmed headbreaker.

Here is a video of my Processing application:  
[https://www.youtube.com/watch?v=Gr\_sAAxdxvE](https://www.youtube.com/watch?v=Gr_sAAxdxvE)

But I do not know how to do that with P5JS…  
Now I’m only trying to print the image saving all pixels one by one and print it in its correct position (in the final code I shuffle that pixels).

* * *

Here is my Processing code (it works):

```auto
PImage img;

void setup() {
  size(720,1280);
  img = loadImage("san.jpg");
}

void draw() {
  background(0);
  loadPixels(); 
  for (int y = 0; y < 540; y++) {
    for (int x = 0; x < 540; x++) {
      int loc = x + y*540;
      float r = red(img.pixels[loc]);
      float g = green(img.pixels[loc]);
      float b = blue(img.pixels[loc]);
      fill(r,g,b);
      noStroke();
      rect (x,y,1,1);
    }
  }
}

```

* * *

Here is my P5JS code (it does not work):

```auto
var img;

function preload() {
  createCanvas(540,540);
  img = loadImage('assets/san.jpg'/*, function(img)
  {
    image(img, 0, 0);
  }*/);
}

function setup() {
  background(0);
  loadPixels(); 
  for (var y = 0; y < 540; y++) {
    for (var x = 0; x < 540; x++) {
      var loc = x + y*540;
      var r = red(img.pixels[loc]);
      var g = green(img.pixels[loc]);
      var b = blue(img.pixels[loc]);
      fill(r,g,b);
      noStroke();
      rect (x,y,1,1);
    }
  }
}

```

**6346: Uncaught Error: Needs p5.Color or pixel array as argument.**

I do not unidertand the error.  
Do you know how to fix it?

Thanks!!  
P.S: Sorry for my english 🙂

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 15, 2018, 9:27pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508/2 "2018-10-15T21:27:43Z")

</div>

Hey,

Your error comes from the fact that in p5.js, pixels are encoded like this :

```auto
img.pixels = {
//first pixel r,g,b,alpha
0,255,0,255,
//second pixel r,g,b,alpha
255,0,0,255,
//etc...
};

```

When in Processing, you can access to r,g,b values by using `red(img.pixels[i]);`  
Look at :

[https://p5js.org/reference/#/p5.Image](https://p5js.org/reference/#/p5.Image)

---

<div class="post-metadata">

**Author:** ![sanson](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@sanson](https://discourse.processing.org/u/sanson)\
**Post date:** [October 15, 2018, 9:32pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508/3 "2018-10-15T21:32:09Z")

</div>

Thanks!  
And do you know how can I save the color pixels in a var?  
Like what I am making with Processing.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 15, 2018, 9:45pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508/4 "2018-10-15T21:45:50Z")

</div>

You just have to say :

```auto
let img = loadImage("your_image.jpg");
let copy = img;

```

---

<div class="post-metadata">

**Author:** ![sanson](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@sanson](https://discourse.processing.org/u/sanson)\
**Post date:** [October 15, 2018, 9:53pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508/5 "2018-10-15T21:53:59Z")

</div>

Yes, I understand that.

But what I’m trying to do is save all the color pixels of my image. Then I could shuffle that pixels on the screen (like the video in the post [https://www.youtube.com/watch?v=Gr\_sAAxdxvE](https://www.youtube.com/watch?v=Gr_sAAxdxvE)).

I want that the image appears on the screen as a disarmed jigsaw puzzle.  
With Processing I saved my rgb color in 3 wars, and then use it to colorize rectangles.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 15, 2018, 10:05pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508/6 "2018-10-15T22:05:55Z")

</div>

If I understand well, you could just shuffle the array of pixels of your source image instead of storing all the r,g,b values.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [October 15, 2018, 10:09pm UTC](https://discourse.processing.org/t/p5-js-random-shuffle-pixels/4508/7 "2018-10-15T22:09:13Z")

</div>

> <https://gist.github.com/GoSubRoutine/dd290c28663ef13aaf2f1b5e8d0adffa>

> [@Pushing a 7712x960 Binary image to p5.js is Super slow. Is there a better way?](https://discourse.processing.org/t/pushing-a-7712x960-binary-image-to-p5-js-is-super-slow-is-there-a-better-way/371/8):
>
> Made my own version using a DataView + its method setInt32() as a wrapper to write to pixels[] 4 bytes (RGBa) at once: grinning Dunno whether it’s faster or not, but you can check it out online here: clown_face /\*\* \* Fill Image with Random Gray (v1.0.3) \* GoToLoop (2018-May-26) \* \* https://Discourse.Processing.org/t/ \* pushing-a-7712x960-binary-image-to-p5-js- \* is-super-slow-is-there-a-better-way/371/8 \* \* Bl.ocks.org/GoSubRoutine/dd290c28663ef13aaf2f1b5e8d0adffa \*/ "…