# Downscaling an image to an array

**URL:** <https://discourse.processing.org/t/downscaling-an-image-to-an-array/22746>\
**Category:** Coding Questions\
**Created:** [July 20, 2020, 5:04pm UTC](https://discourse.processing.org/t/downscaling-an-image-to-an-array/22746 "2020-07-20T17:04:53Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 20, 2020, 5:04pm UTC](https://discourse.processing.org/t/downscaling-an-image-to-an-array/22746/1 "2020-07-20T17:04:53Z")

</div>

currently stuck with this problem, and its probably easy however m brain cant figure it out.

```auto

PImage img;
ArrayList<Float> array = new ArrayList<Float>();
int cols = 202;
int rows = 200;
int res,ry;
void setup(){
  size(600,600);
  img = loadImage("sil.jpg");
  res = img.width/cols;
  ry = img.height/rows;
  
  for(int i=0;i<cols;i++){
        for(int j=0;j<rows;j++){
          int p = int(i*res + j*ry * img.width);
          if(p<img.pixels.length){
            float r = red(img.pixels[p]);
            float g = green(img.pixels[p]);
            float bb = blue(img.pixels[p]);
            float br = brightness(img.pixels[p]);
            float h = (red(img.pixels[p]) + green(img.pixels[p]) + blue(img.pixels[p]) + brightness(img.pixels[p]))/4;
            //h = ;
            //if(r>h)h = r;
            //if(g>h)h = g;
            //if(bb>h)h = bb;
            //if(br>h)h = br;
            //h = map(blue(img.pixels[p]),0,ma,0,100);
            //array[p] = h;
            array.add(h);
    }}}
};

void draw(){
  background(0);
  for(int i=0;i<cols;i++){
    for(int j=0;j<rows;j++){
      int p = i+ j*cols;
      noStroke();
      fill(array.get(p));
      rect(j*res,i*res,res,res);
      //rect(i,j,1,1);
    }
  }
};

```

the image extraction works fine providing that both cols and rows are equal but causes issues otherwise. What am I doing worng?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 20, 2020, 9:22pm UTC](https://discourse.processing.org/t/downscaling-an-image-to-an-array/22746/2 "2020-07-20T21:22:01Z")

</div>

Hello @paulgoux,

This is as far as I got and had fun working through this.

I did not get to down scaling yet… just working through your code.

> **Code**
>
> ```auto
> PImage img;
> ArrayList<Integer> array = new ArrayList<Integer>();
> int x, y;
> 
> void setup()
> {
> size(500, 200);
> img = loadImage("test.png");
> background(255);
>   
> for(int y=0; y<img.height; y++)
> {
> for(int x=0; x<img.width; x++)
> {
> int p = int(y*img.width + x);
> if(p<img.pixels.length)
> {
> int r = int(red(img.pixels[p]));
> int g = int(green(img.pixels[p]));
> int b = int(blue(img.pixels[p]));
> int h = (int(r*256*256 + 256*g + b) | 0xFF000000);
> array.add(h);
> //println(r, g, b, hex(array.get(p)));
> stroke(array.get(y*img.width + x));
> point(x, y);
> }
> }      
> }
> noLoop();
> }
> 
> void draw()
> {  
> for(int y=0; y<img.height; y++)
> {
> for(int x=0; x<img.width; x++)
> {
> int p = int(y*img.width + x);
> if(p<img.pixels.length)
> {
> //float r = red(img.pixels[p]);
> //float g = green(img.pixels[p]);
> //float b = blue(img.pixels[p]);
> //int h = (int(r*256*256 + 256*g + b) | 0xFF000000);
> //array.add(h);
> //println(r, g, b, hex(array.get(p)));
> stroke(array.get(y*img.width + x));
> point(x+250, y);
> }
> }      
> }
> }
> 
> ```

The image I used:  
 ![test](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b6146eb672f2b03eb3732395ed13a24600aae97d.png)

`:)`

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [July 20, 2020, 10:42pm UTC](https://discourse.processing.org/t/downscaling-an-image-to-an-array/22746/3 "2020-07-20T22:42:20Z")

</div>

Hello @paulgoux,

I would consider storing your sampled pixel colors in a 2D array instead of an arraylist:

```auto
float[][] array = new float[cols][rows];

```

I find it easier to grasp in regards to what you want to do after.

I checked your code with the arraylist though and here are few comments:

- you need to separate your x resolution and your y resolution since the numbers of rows and columns can be differents as well as the size of your image
- when you compute your resolutions, don’t forget to convert you cols and rows variables to a float so you get the correct result (otherwise you get an int as a result)
- The order in wich you store your colors is really important and you need to first start to loop for the columns then loop for the row to get the same logic as the pixel array
- To get the index of your pixel, it is better to round both `i * resX` and `j * resY` so it gives you the index of the closest pixel. Otherwise, you are rounding the index directly and can have a pixel on the other side of the image.

That beeing said, this is the result code. I also reduced the size of the image by a factor of 2:

```auto
PImage img;
ArrayList<Float> array = new ArrayList<Float>();
int cols = 200;
int rows = 200;
float rx, ry;

void setup() {
  size(1600, 533);
  img = loadImage("test.jpg");
  rx = img.width / (float)cols; // Parse the cols variable to a float to keep decimals for rx
  ry = img.height / (float)rows; // Parse the rows variable to a float to keep decimals for ry

  for (int j = 0; j < rows; j++) { // Start looping through the rows
    for (int i = 0; i < cols; i++) { // And then the columns to keep the same "pixel order" in your array
      int p = int(i * rx) + int(j * ry) * img.width; //Get closest x AND closet y to get your index BUT DON'T get closest index directly => int(i * rx + j * ry * img.width)

      float h = (red(img.pixels[p]) + green(img.pixels[p]) + blue(img.pixels[p]) + brightness(img.pixels[p]))/4.0;
      array.add(h);
    }
  }
};

void draw() {
  background(0);
  
  // Resize picture by half
  rx /= 2.0;
  ry /= 2.0;

  // Display resized image
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      noStroke();
      fill(array.get(i + j * cols)); // Get index with same method as you would use for the index of a pixel of an image
      rect(i * rx, j * ry, rx, ry);
    }
  }
  
  // Display original image
  image(img, 800, 0);

  noLoop();
};

```

Original image:

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

Half sized:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c6e982f739bb92ba5fe17d9bee73ccd58b69d0d5.png)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 20, 2020, 10:45pm UTC](https://discourse.processing.org/t/downscaling-an-image-to-an-array/22746/4 "2020-07-20T22:45:24Z")

</div>

See changes to your code in draw():

> **Code**
>
> ```auto
> PImage img;
> ArrayList<Float> array = new ArrayList<Float>();
> int cols = 30;
> int rows = 50;
> float res, ry;
> void setup(){
> size(600,600);
> img = loadImage("test.png");
> res = img.width/cols;
> ry = img.height/rows;
>   
> for(int i=0;i<cols;i++){
> for(int j=0;j<rows;j++){
> int p = int(i*res + j*ry * img.width);
> if(p<img.pixels.length){
> float r = red(img.pixels[p]);
> float g = green(img.pixels[p]);
> float bb = blue(img.pixels[p]);
> float br = brightness(img.pixels[p]);
> float h = (red(img.pixels[p]) + green(img.pixels[p]) + blue(img.pixels[p]) + brightness(img.pixels[p]))/4;
> //h = ;
> //if(r>h)h = r;
> //if(g>h)h = g;
> //if(bb>h)h = bb;
> //if(br>h)h = br;
> //h = map(blue(img.pixels[p]),0,ma,0,100);
> //array[p] = h;
> array.add(h);
> }}}
> };
> 
> void draw(){
> background(0);
> for(int i=0;i<cols;i++){
> for(int j=0;j<rows;j++){
> int p = j + i*rows;
> //noStroke();
> //fill(array.get(p));
> //rect(j*res,i*res,res,res);
> //rect(i,j,1,1);
> stroke(array.get(p));
> point(i, j);
> }
> }
> };
> 
> ```

`:)`

200x200:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f80a7dc5659925c196fc8f6fdb216f4ff2025c84.jpeg)

30x50:  
 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b43f927cbb1c7e9f25ca4c547fccd2ffcc961479.png)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [July 20, 2020, 11:07pm UTC](https://discourse.processing.org/t/downscaling-an-image-to-an-array/22746/5 "2020-07-20T23:07:39Z")

</div>

thanks a lot everyone!!