---

layout: default

---

<h3>Array2D</h3>

<p>Demonstrates the syntax for creating a two-dimensional (2D) array.

Values in a 2D array are accessed through two index values.

2D arrays are useful for storing images. In this example, each dot

is colored in relation to its distance from the center of the image.</p>

<p><a href="http://processing.org/learning/basics/array2d.html">Original Processing.org Example: Array2D</a><br>

<div class="learning-demo"><script type="application/processing">

float[][] distances;

float maxDistance;

size(200, 200);

maxDistance = dist(width/2, height/2, width, height);

distances = new float[width][height];

for(int i=0; i<height; i++) {

for(int j=0; j<width; j++) {

float d = dist(width/2, height/2, j, i);

distances[j][i] = d/maxDistance * 255;

}

for(int i=0; i<height; i+=2) {

for(int j=0; j<width; j+=2) {

stroke(distances[j][i]);

point(j, i);

}

</script><canvas width="200" height="200"></canvas></div></p>

<div style="height:0px;width:0px;overflow:hidden;"></div>

<div class="code"><pre name="code" class="processing">// All Examples Written by Casey Reas</a> and Ben Fry</a>

// unless otherwise stated.

float[][] distances;

float maxDistance;

size(200, 200);

background(0);

maxDistance = dist(width/2, height/2, width, height);

distances = new float[width][height];

for(int i=0; i&lt;height; i++) {

for(int j=0; j&lt;width; j++) {

float d = dist(width/2, height/2, j, i);

distances[j][i] = d/maxDistance * 255;

}

}

for(int i=0; i&lt;height; i+=2) {

for(int j=0; j&lt;width; j+=2) {

stroke(distances[j][i]);

point(j, i);

}

}</pre></div>