# Linear array of values to grid

**URL:** <https://discourse.processing.org/t/linear-array-of-values-to-grid/14206>\
**Category:** Beginners\
**Created:** [September 25, 2019, 10:37pm UTC](https://discourse.processing.org/t/linear-array-of-values-to-grid/14206 "2019-09-25T22:37:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tombass](https://avatars.discourse-cdn.com/v4/letter/t/e495f1/32.png) [@tombass](https://discourse.processing.org/u/tombass)\
**Post date:** [September 25, 2019, 10:37pm UTC](https://discourse.processing.org/t/linear-array-of-values-to-grid/14206/1 "2019-09-25T22:37:30Z")

</div>

Say i have an array of 16 values eg {10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25} but i want to display them in a 4 x 4 grid. What is the easiest way to get them into a 2d array that looks like this?

```auto
{
  {10,11,12,13},
  {14,15,16,17},
  {18,19,20,21},
  {22,23,24,25}
}

```

i’m sure i did this before but cannot remember how!

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [September 25, 2019, 11:18pm UTC](https://discourse.processing.org/t/linear-array-of-values-to-grid/14206/2 "2019-09-25T23:18:58Z")

</div>

One way is to use a for inside another for :

```auto
int step = 4 ;
int myNewArrayLength = myArray.length / step ;
int[] myNewArray = [myNewArrayLength] ; 

for (int i = 0 ; i < myArray.length ; i += step){
    for (int y = i ; y < i + step ; y ++){
      myNewArray[i / step].push(y);
   }
}

```

But there is probably a better way, with proper Java methods …

---

<div class="post-metadata">

**Author:** ![hotfooted](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hotfooted/32/3670_2.png) [@hotfooted](https://discourse.processing.org/u/hotfooted)\
**Post date:** [September 26, 2019, 1:33am UTC](https://discourse.processing.org/t/linear-array-of-values-to-grid/14206/3 "2019-09-26T01:33:30Z")

</div>

you don’t have to turn it into a 2d array array to display.

if you know the width and height you can

```auto
  for(int y = 0; y < height; y++) {
    for(int x = 0; x < width; x++) {
      int xy = x + y * width;
      fill(values[xy]);
      rect(x * rectSize, y * rectSize, rectSize, rectSize);
    }
  }

```

if you don’t know the width and height and want to keep the 1d array you can still present them in 2d with a few conditions

```auto
    //calculate the stride* 
    int stride = sqrt(arr.length);
    //calculate the x & y on the fly
    for (int i = 0; i < arr.length; i++) {
    //note you are doing mod and div operations for every index
    //ok if your array is small not if it isn't
    int x = floor(i % stride);
    int y = floor(i / stride);
  }

```

\*assumes width and height are sqr. there is a way around this but it isn’t perfect.

here’s an example

```auto
int[] values;
int rectSize = 8;
boolean drawStyle;
void setup() {
  size(512, 512, P2D);
  noStroke();
  
  drawStyle = false;
  //instantiate the array
  values = new int[16];
  //fill the array with random values
  for(int i = 0; i < values.length; i++) {
    values[i] = (int)random(255);
  }
}

void keyPressed() {
  drawStyle = !drawStyle;
}

void draw() {
  background(255, 0, 255);  
  if(drawStyle) {
    draw1();
  }
  else {
    draw2();
  }
  fill(255);
  text(drawStyle ? "draw1" : "draw2", 0, height - 16);
}

void draw1() {
  //calculate the stride
  int stride = (int)sqrt(values.length);
  int x, y;
  //calculate each x and y and fill a point
  for(int i = 0; i < values.length; i++) {
    x = floor(i % stride);
    y = floor(i / stride);
    fill(values[i]);
    rect(x * rectSize, y * rectSize, rectSize, rectSize);
  }
}

void draw2() {
  int vWidth = 4;
  int vHeight = 4;
  for(int y = 0; y < vHeight; y++) {
    for(int x = 0; x < vWidth; x++) {
      int xy = x + y * vWidth;
      fill(values[xy]);
      rect(x * rectSize, y * rectSize, rectSize, rectSize);
    }
  }
}

```

after all that it’s probably best to decide the appropriate array format from the get go.

---

<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:** [September 26, 2019, 5:22am UTC](https://discourse.processing.org/t/linear-array-of-values-to-grid/14206/4 "2019-09-26T05:22:01Z")

</div>

> [@tombass](#):
>
> What is the easiest way to get them into a 2d array that looks like this?

```auto
/**
 * IntArr1dTo2d (v1.0)
 * GoToLoop (2019/Jan/)
 * https://Discourse.Processing.org/t/linear-array-of-values-to-grid/14206/4
 */

static final int ROWS = 4, COLS = 4;

int[] arr = { 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25 };
int [][] matrix;

void setup() {
  println(arr);
  println();

  matrix = intArr1dTo2d(ROWS, COLS, arr);

  int i = 0;
  for (int[] arr1d : matrix) println("[" + i++ + "] " + join(str(arr1d), ','));

  exit();
}

@SafeVarargs static final int[][]
  intArr1dTo2d(final int rows, final int cols, final int... arr1d) {

  final int r = abs(rows), c = abs(cols), len = r * c;
  final int[][] arr2d = new int[r][c];

  int idx = 0, row = 0, col = 0;

  if (len != 0 & arr1d != null) for (final int v : arr1d) {
    arr2d[row][col] = v;
    if ((col = (col + 1) % c) == 0) if (++row == r) break;
  }

  return arr2d;
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 29, 2019, 4:05pm UTC](https://discourse.processing.org/t/linear-array-of-values-to-grid/14206/5 "2019-09-29T16:05:28Z")

</div>

> [@hotfooted](#):
>
> you don’t have to turn it into a 2d array array to display.

This is an important point – this is also how Processsing implements images and the canvas (PImage / PGraphics). It does not reorganize the values into 2D – instead, it uses 2D access logic.

Pixel color values are saved in a 1D array, pixels. You can either access `pixels[i]`, or you can use `get(x, y)` – which returns `pixels[y*width + x]` – or `set(x, y, c)` – which is equivalent to `pixels[y*width+x] = c`.

- [pixels[] / Reference / Processing.org](https://processing.org/reference/pixels.html)
- [set() / Reference / Processing.org](https://processing.org/reference/set_.html)
- [get() / Reference / Processing.org](https://processing.org/reference/get_.html)