# Help with arrays!

**URL:** <https://discourse.processing.org/t/help-with-arrays/37329>\
**Category:** Beginners\
**Created:** [June 5, 2022, 5:04pm UTC](https://discourse.processing.org/t/help-with-arrays/37329 "2022-06-05T17:04:08Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JosepAlqueza](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josepalqueza/32/16390_2.png) [@JosepAlqueza](https://discourse.processing.org/u/JosepAlqueza)\
**Post date:** [June 5, 2022, 5:04pm UTC](https://discourse.processing.org/t/help-with-arrays/37329/1 "2022-06-05T17:04:08Z")

</div>

Hello to all!

I have an array (Cities) where the first column is the X position and the second column is the Y position. Combined they represent the position on a map of a city. The third can be ignored.

I need these variables to be stored in the distances arable and there is a third variable (distance), which is the distance between the different cities.

 ![Captura de pantalla 2022-06-05 a las 18.56.27](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/7/1714ac350a0cce6e8e989d99e1438ccbf01402e6.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [June 5, 2022, 6:32pm UTC](https://discourse.processing.org/t/help-with-arrays/37329/2 "2022-06-05T18:32:36Z")

</div>

please post your code as text, never as an image

> [@JosepAlqueza](#):
>
> I need these variables to be stored in the distances arable and there is a third variable (distance), which is the distance between the different cities.

can you please explain?

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [June 5, 2022, 10:55pm UTC](https://discourse.processing.org/t/help-with-arrays/37329/3 "2022-06-05T22:55:07Z")

</div>

I’ve looked at your question and this is what I could come up with, I think it is the solution because the algorithm is correct but check if the syntax are correct because I ran them on p5.js editor and had to edit them so they will run on Processing IDE. Next time you should type your question and not post pictures as Chrissir pointed out. Good luck with your project work.

int cities ={{20,30,40},{2,4,5},{7,3,5},{6,11,17}}

int distance ={ }

function setup(){

createCanvas(400,400);  
background(100)

for ( i = 0; i\< cities.length; i++) {  
for (j = 0; j \< cities[i].length-1; j++) {  
distance = dist((cities[i][j]),(cities[i][j+1]),(cities[i+1][j]),(cities[i+1][j+1]));  
}  
}  
}

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [June 5, 2022, 11:38pm UTC](https://discourse.processing.org/t/help-with-arrays/37329/4 "2022-06-05T23:38:32Z")

</div>

I think this is what you are looking for, the first solution was a short cut.

int cities ={{20,30,40},{2,4,5},{7,3,5},{6,11,17}};

int distances ={ };

int distance ={ };

function setup(){

createCanvas(400,400);  
background(100)

for ( i = 0; i\< cities.length; i++) {  
for (j = 0; j \< cities[i].length-1; j++) {

distances = ((cities[i][j]),(cities[i][j+1])),((cities[i+1][j]),(cities[i+1][j+1]))

```
     }

```

}

for ( i = 0; i\< distances.length; i++) {  
for (j = 0; j \< distances[i].length; j++) {

```
distance = dist((distances[i][j]),(distances[i][j+1]),(distances[i+1][j]),(distances[i+1][j+1]))

    }
 }

```

}

---

<div class="post-metadata">

**Author:** ![JosepAlqueza](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josepalqueza/32/16390_2.png) [@JosepAlqueza](https://discourse.processing.org/u/JosepAlqueza)\
**Post date:** [June 6, 2022, 10:06am UTC](https://discourse.processing.org/t/help-with-arrays/37329/5 "2022-06-06T10:06:22Z")

</div>

ok, I’m sorry

I’m new here and I don’t exactly how it works

---

<div class="post-metadata">

**Author:** ![JosepAlqueza](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josepalqueza/32/16390_2.png) [@JosepAlqueza](https://discourse.processing.org/u/JosepAlqueza)\
**Post date:** [June 6, 2022, 10:39am UTC](https://discourse.processing.org/t/help-with-arrays/37329/6 "2022-06-06T10:39:55Z")

</div>

Hi Chigoz!

First of all I want to thank you for your help but I don’t think I’m doing well. I share my code and the text of my task so you can understand it better and see where the problem is.

PImage SpainMap; //

// Multidimensional Array  
// Position X of every city  
// Position Y  
// Population of the city  
int cities = {  
{930, 350, 800000},  
{1063, 215, 1660000},  
{900, 190, 675000},  
{865, 115, 209000},  
{825, 138, 151000},  
{813, 111, 254000},  
{750, 70, 172000},  
{640, 70, 218000},  
{490, 110, 98000},  
{690, 190, 298000},  
{755, 278, 3300000},  
{738, 317, 85000},  
{613, 378, 59000},  
{633, 485, 684000},  
{895, 445, 461000},  
{1093, 335, 419000},  
{667, 591, 83500},  
{794, 630, 86000},  
};

//Color variable  
color blau = color (1,60,213); //Blue  
color verd = color (0,255,0); //Green  
color vermell = color (255,0,0); //Red  
color negre = color (0,0,0); //Black  
color blanc = color (255,255,255); //Whit

// Cities names  
String names = {“Valencia”, “Barcelona”, “Zaragoza”, “Pamplona”, “Logroño”, “Vitoria”, “Santander”, “Oviedo”, “Santiago de C.”, “Valladolid”, “Madrid”, “Toledo”, “Mérida”, “Sevilla”, “Murcia”, “Palma de M.”, “Ceuta”, “Melilla”};  
// number of the cities  
int total\_Cities = 18;  
// Variable to save the distance between cities  
int distance;  
// Array to save the position on X, Y and the distance between Santiago and the other cities  
int distances = new int[3];

void setup(){

size(1227, 639);  
// Load Image  
SpainMap = loadImage(“MapaEsp.png”);  
// Reajust the image  
SpainMap.resize(1227, 639);

}

void draw(){

image(SpainMap, 0, 0);

// Bucle to generate circles  
for (int i=0; i\<names.length; i++) {  
//Variable to modify the size of the circle  
float circle\_D = map (cities [i] [2], 59000, 3300000, 5,60);

//Conditional estructure  
if (cities [i] [2] \< 200000) { //Cities \< 200.000 population  
fill (blau); //  
circle (cities [i][0], cities [i][1], circle\_D);  
} else if (cities [i] [2] \> 200000 && cities [i] [2] \< 400000) { //Cities \> 200.000 and \< 400.000 population  
fill (verd);  
circle (cities [i][0], cities [i][1], circle\_D);  
} else if (cities [i] [2] \> 400000) { //Cities \> 400.000 population  
fill (vermell);  
circle (cities [i][0], cities [i][1], circle\_D);  
}}

//Bucle to generate the name of the cities  
for (int i = 0; i\<names.length; i++){  
fill (negre); //farcit del text  
text (names [i], cities [i][0]+10, cities [i][1]); //names of the cities  
}

//Elements of the legend  
float x = width/61.35;  
int base = width/3;  
int altura = base/4;  
float diametre = x/2;

//Rect of the legend  
fill(blanc);  
rect (x, height-altura-x, base , altura);  
fill (blau);  
circle (2_x, height-altura+x, diametre);  
fill (verd); //farcilt del cercle  
circle (2_x, height-altura+2_x, diametre);  
fill (vermell);  
circle (2_x, height-altura+3_x, diametre);  
fill (negre);  
//Texts of the legend  
text (“LLEGENDA”, x+x/2, height-altura);  
text (“Ciutats amb menys de 200.000 habitants”, 3_x, height-altura+x+diametre/2);  
text (“Ciutats amb més de 200.000 habitants i menys de 400,000”, 3_x, height-altura+2_x+diametre/2);  
text (“Ciutats amb més de 400.000 habitants”, 3_x, height-altura+3_x+diametre/2);

}

int calc\_Distance(int posX\_1, int posY\_1, int posX\_2, int posY\_2){  
// Apliquem Pitàgores i tornem el valor de la distància entre ciutats  
return(int(sqrt(pow(posX\_2-posX\_1,2)+pow(posY\_2-posY\_1,2))));  
}

 ![MapaEsp](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/6/066862f111b5f9f13851d681d181d9d2c8f0d7da.png)

> Calculate the distance in a straight line between Santiago de Compostela and the city further away from it, as well as convert that distance (which you will obtain in pixels) to kilometers. Keep in mind that, for the scale of the canvas, you can assume that 1 pixel is equivalent to 1.56 km. The program will have to calculate the Santiago de Compostela distance to all cities and save the coordinates and distance from the city further away to the Aray distances created for this purpose. Likewise, the calc\_Distance() function, also created for this purpose, will be used to help calculate the distances. The starting program with the distance variables, the aray distances and the calc\_Distance() function are available in the enunciated folder, named NivellB.  
> Function of calc\_Distance:  
> At some point in draw() you must use the following order:  
> distance = calc\_Distance (X1, Y1, X2, Y2);  
> Which means "keep in the distance variable the value that returns the calc\_Distance function(), which is a function that returns an integer which is the distance (in pixels) between  
> 6  
> cities (i.e. distance saves the value of the distance in pixels between sent cities).  
> The values X1, Y1, X2 and Y2 refer to the position in X and Y of the first and second cities respectively, and you must put, where X1, Y1, X2, Y2, the variables you consider to be .  
> Represent this distance in a violet straight line (255, 0, 255) that goes from Santiago to the aforementioned city, and in which it appears, halfway between the cities, in black and in size 30 (indicate it through the instruction textSize(30)), the distance in kilometers between them. The remainder of the text must be followed in default size, i.e. textSize(10).`Preformatted text`

---

<div class="post-metadata">

**Author:** ![MissChervinsky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/misschervinsky/32/16411_2.png) [@MissChervinsky](https://discourse.processing.org/u/MissChervinsky)\
**Post date:** [June 6, 2022, 2:52pm UTC](https://discourse.processing.org/t/help-with-arrays/37329/7 "2022-06-06T14:52:45Z")

</div>

The fact you pasted it without Preformatting it (Ctrl+E) gave me a heart-ache. So I did this to make it easier to read

```auto
PImage SpainMap; //

// Multidimensional Array
// Position X of every city
// Position Y
// Population of the city
int cities = {
{930, 350, 800000},
{1063, 215, 1660000},
{900, 190, 675000},
{865, 115, 209000},
{825, 138, 151000},
{813, 111, 254000},
{750, 70, 172000},
{640, 70, 218000},
{490, 110, 98000},
{690, 190, 298000},
{755, 278, 3300000},
{738, 317, 85000},
{613, 378, 59000},
{633, 485, 684000},
{895, 445, 461000},
{1093, 335, 419000},
{667, 591, 83500},
{794, 630, 86000},
};

//Color variable
color blau = color (1,60,213); //Blue
color verd = color (0,255,0); //Green
color vermell = color (255,0,0); //Red
color negre = color (0,0,0); //Black
color blanc = color (255,255,255); //Whit

// Cities names
String names = {“Valencia”, “Barcelona”, “Zaragoza”, “Pamplona”, “Logroño”, “Vitoria”, “Santander”, “Oviedo”, “Santiago de C.”, “Valladolid”, “Madrid”, “Toledo”, “Mérida”, “Sevilla”, “Murcia”, “Palma de M.”, “Ceuta”, “Melilla”};
// number of the cities
int total_Cities = 18;
// Variable to save the distance between cities
int distance;
// Array to save the position on X, Y and the distance between Santiago and the other cities
int distances = new int[3];

void setup(){

size(1227, 639);
// Load Image
SpainMap = loadImage(“MapaEsp.png”);
// Reajust the image
SpainMap.resize(1227, 639);

}

void draw(){

image(SpainMap, 0, 0);

// Bucle to generate circles
for (int i=0; i<names.length; i++) {
//Variable to modify the size of the circle
float circle_D = map (cities [i] [2], 59000, 3300000, 5,60);

//Conditional estructure
if (cities [i] [2] < 200000) { //Cities < 200.000 population
fill (blau); //
circle (cities [i][0], cities [i][1], circle_D);
} else if (cities [i] [2] > 200000 && cities [i] [2] < 400000) { //Cities > 200.000 and < 400.000 population
fill (verd);
circle (cities [i][0], cities [i][1], circle_D);
} else if (cities [i] [2] > 400000) { //Cities > 400.000 population
fill (vermell);
circle (cities [i][0], cities [i][1], circle_D);
}}

//Bucle to generate the name of the cities
for (int i = 0; i<names.length; i++){
fill (negre); //farcit del text
text (names [i], cities [i][0]+10, cities [i][1]); //names of the cities
}

//Elements of the legend
float x = width/61.35;
int base = width/3;
int altura = base/4;
float diametre = x/2;

//Rect of the legend
fill(blanc);
rect (x, height-altura-x, base , altura);
fill (blau);
circle (2x, height-altura+x, diametre);
fill (verd); //farcilt del cercle
circle (2x, height-altura+2x, diametre);
fill (vermell);
circle (2x, height-altura+3x, diametre);
fill (negre);
//Texts of the legend
text (“LLEGENDA”, x+x/2, height-altura);
text (“Ciutats amb menys de 200.000 habitants”, 3x, height-altura+x+diametre/2);
text (“Ciutats amb més de 200.000 habitants i menys de 400,000”, 3x, height-altura+2x+diametre/2);
text (“Ciutats amb més de 400.000 habitants”, 3x, height-altura+3x+diametre/2);

}

int calc_Distance(int posX_1, int posY_1, int posX_2, int posY_2){
// Apliquem Pitàgores i tornem el valor de la distància entre ciutats
return(int(sqrt(pow(posX_2-posX_1,2)+pow(posY_2-posY_1,2))));
}

```

---

<div class="post-metadata">

**Author:** ![JosepAlqueza](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josepalqueza/32/16390_2.png) [@JosepAlqueza](https://discourse.processing.org/u/JosepAlqueza)\
**Post date:** [June 6, 2022, 3:04pm UTC](https://discourse.processing.org/t/help-with-arrays/37329/8 "2022-06-06T15:04:44Z")

</div>

I’m sorry and thanks for your help

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [June 6, 2022, 8:36pm UTC](https://discourse.processing.org/t/help-with-arrays/37329/9 "2022-06-06T20:36:52Z")

</div>

This is what I could come up with today, I’m not good with Processing Syntax, go through it and correct the Syntax or someone from the community will help. I did not use the image too. Cheers

PImage SpainMap;

// Multidimensional Array

// Position X of every city

// Position Y

// Population of the city

int cities = {

{930, 350, 800000},

{1063, 215, 1660000},

{900, 190, 675000},

{865, 115, 209000},

{825, 138, 151000},

{813, 111, 254000},

{750, 70, 172000},

{640, 70, 218000},

{490, 110, 98000},

{690, 190, 298000},

{755, 278, 3300000},

{738, 317, 85000},

{613, 378, 59000},

{633, 485, 684000},

{895, 445, 461000},

{1093, 335, 419000},

{667, 591, 83500},

{794, 630, 86000},

};

//Color variable

color blau = color (1,60,213); //Blue

color verd = color (0,255,0); //Green

color vermell = color (255,0,0); //Red

color negre = color (0,0,0); //Black

color blanc = color (255,255,255); //Whit

// Cities names

String names = {“Valencia”,“Barcelona”,“Zaragoza”,“Pamplona”, “Logroño”, “Vitoria”,“Santander”, “Oviedo”,“SantiagodC.”,“Valladolid”, “Madrid”, “Toledo”, “Mérida”, “Sevilla”, “Murcia”, “PalmadeM.”, “Ceuta”, “Melilla”};

// number of the cities

int total\_Cities = 18;

// Variable to save the distance between cities

int distance;

// Array to save the position on X, Y and the distance between Santiago and the other cities

int distances = new int[3];

void setup(){

size(1227, 639);

// Load Image

SpainMap = loadImage(“MapaEsp.png”);

// Reajust the image

SpainMap.resize(1227, 639);

}

void draw(){

image(SpainMap, 0, 0);

// Bucle to generate circles

for (int i=0; i\<cities.length; i++){

for (j = 0; j \< cities[i].length; j++){

//Variable to modify the size of the circle

float circle\_D = map (cities [i] [j], 59000, 3300000, 5,60);

//Conditional estructure

if (cities [i] [j] \< 200000) { //Cities \< 200.000 population

fill (blau); //

circle (cities [4][0], cities [4][1], circle\_D);

circle (cities [6][0], cities [6][1], circle\_D);

circle (cities [8][0], cities [8][1], circle\_D);

circle (cities [11][0], cities [11][1], circle\_D);

circle (cities [12][0], cities [12][1], circle\_D);

circle (cities [16][0], cities [16][1], circle\_D);

circle (cities [17][0], cities [17][1], circle\_D);

} else if (cities [i] [j] \> 200000 && cities [i] [j] \< 400000) { //Cities \> 200.000 and \< 400.000 population

fill (verd);

circle (cities [3][0], cities [3][1], circle\_D);

circle (cities [5][0], cities [5][1], circle\_D);

circle (cities [7][0], cities [7][1], circle\_D);

circle (cities [9][0], cities [9][1], circle\_D);

} else if (cities [i] [j] \> 400000) { //Cities \> 400.000 population

fill (vermell);

circle (cities [0][0], cities [0][1], circle\_D);

circle (cities [1][0], cities [1][1], circle\_D);

circle (cities [2][0], cities [2][1], circle\_D);

circle (cities [10][0], cities [10][1], circle\_D);

circle (cities [13][0], cities [13][1], circle\_D);

circle (cities [14][0], cities [14][1], circle\_D);

circle (cities [15][0], cities [15][1], circle\_D);

}

}

////Bucle to generate the name of the cities

//for (int i = 0; i\<names.length; i++){

//fill (negre); //farcit del text

//text (names [i], cities [i][0]+10, cities [i][1]); //names of the cities

//}

////Elements of the legend

//float x = width/61.35;

//int base = width/3;

//int altura = base/4;

//float diametre = x/2;

////Rect of the legend

//fill(blanc);

//rect (x, height-altura-x, base , altura);

//fill (blau);

//circle (2x, height-altura+x, diametre);

//fill (verd); //farcilt del cercle

//circle (2x, height-altura+2x, diametre);

//fill (vermell);

//circle (2x, height-altura+3x, diametre);

//fill (negre);

////Texts of the legend

//text (“LLEGENDA”, x+x/2, height-altura);

//text (“Ciutats amb menys de 200.000 habitants”, 3x, height-altura+x+diametre/2);

//text (“Ciutats amb més de 200.000 habitants i menys de 400,000”, 3x, height-altura+2x+diametre/2);

//text (“Ciutats amb més de 400.000 habitants”, 3x, height-altura+3x+diametre/2);

//}

//int calc\_Distance(int posX\_1, int posY\_1, int posX\_2, int posY\_2){

//// Apliquem Pitàgores i tornem el valor de la distància entre ciutats

//return(int(sqrt(pow(posX\_2-posX\_1,2)+pow(posY\_2-posY\_1,2))));

//}

}

}

}

---

<div class="post-metadata">

**Author:** ![Chigoz](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@Chigoz](https://discourse.processing.org/u/Chigoz)\
**Post date:** [June 8, 2022, 1:38am UTC](https://discourse.processing.org/t/help-with-arrays/37329/10 "2022-06-08T01:38:08Z")

</div>

I realised that I made mistakes yesterday on this part while looping through the array, my solution was literally manual. This should be the appropriate answer. Please check for Syntax errors.

void draw(){

image(SpainMap, 0, 0);

// Bucle to generate circles

for (int i=0; i\<cities.length; i++){

for (j = 0; j \< cities[i].length; j++){

//Variable to modify the size of the circle

float circle\_D = map (cities [i] [j], 59000, 3300000, 5,60);

//Conditional estructure

if (cities [i] [j]\< 200000) { //Cities \< 200.000 population

fill (blau); //

circle (cities [i][j], cities [i][j], circle\_D);

} else if (cities[i][j]\> 200000 && cities[i][j]\< 400000) {

//Cities \> 200.000 and \< 400.000 population

fill (verd);

circle (cities [i][j], cities [i][j], circle\_D);

} else if (cities [i] [j]\> 400000) { //Cities \> 400.000 population

fill (vermell);

circle (cities [i][j], cities [i][j], circle\_D);

```
   }

  }

```

}