# Storing positions on an array and then calling the value (grid)

**URL:** <https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119>\
**Category:** Coding Questions\
**Created:** [September 6, 2021, 2:31pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119 "2021-09-06T14:31:30Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [September 6, 2021, 2:31pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/1 "2021-09-06T14:31:30Z")

</div>

```auto
float xOffset = 0.0;
float yOffset = 0.0;

int rectSize = 30;

int ellipseX = 90;
int ellipseY = 320;
int ellipseSize = 30;

int boxPosX = 250;
int boxPosY = 130;

int spacingX = 45;
int spacingY = 45;

int i;
int l;

boolean ellipseHovering = false;

boolean start = false;

float[] randomX = new float[1000];
float[] randomY = new float[1000];

void setup() {
	size(500, 350);

}

void draw() {
	i = 0;
	l = 0;
	background(0);

	if (start) {
		for (int x = 10; x < width; x = x + spacingX) {
			for (int y = 0; y < height - 10; y = y + spacingY) {
				randomX[i] = x;
				randomY[l] = y;
				i++;
				l++;

				float ellipseRectDist = dist(x + rectSize / 2, y + rectSize / 2, ellipseX, ellipseY);

				rectSize = 30;
				if (ellipseRectDist < 10) {
					rectSize = 0;
				}
				rect(x, y, rectSize, rectSize);

			}
		}

	}

	fill(200, 200, 100);
	//rect (boxPosX, boxPosY, 50, 50);

	fill(255, 100, 100);
	ellipse(ellipseX, ellipseY, ellipseSize, ellipseSize);
	xOffset = mouseX - ellipseX;
	yOffset = mouseY - ellipseY;

	if (mouseX < ellipseX + 15 && mouseX > ellipseX - 15 && mouseY < ellipseY + 15 && mouseY > ellipseY - 15) {
		ellipseHovering = true;
	} else {
		ellipseHovering = false;
	}

}

	void mouseDragged() {
		if (ellipseHovering) {
			ellipseX = mouseX - xOffset;
			ellipseY = mouseY - yOffset;
		}
	}

	void mousePressed() {
		float mouseEllipse = dist(mouseX, mouseY, ellipseX, ellipseY);
		if (start == false && mouseEllipse < ellipseSize) {
			start = true;
		}

		if (start == true && mouseEllipse < ellipseSize) {

			ellipseX = randomX[random(0, i)] + ellipseSize / 2;
			ellipseY = randomY[random(0, l)] + ellipseSize / 2;
		}

	}

```

When I tap on the ellipse it goes on the corner, whereas I want it to go to a random rect’s position.

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [September 6, 2021, 7:17pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/2 "2021-09-06T19:17:53Z")

</div>

I’m not entirely sure how this code runs for you, as in my editor I get some type mismatches, but when I fix these (changing x and yOffset to floats, and casting the results of `random(0, i)` to an int: `int(random(0, i))`), it seems to work as you describe it? I see a circle jumping around in this grid of squares.

Your code is not quite the way I would go about it, but hey, it works! 😉

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [September 6, 2021, 8:34pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/3 "2021-09-06T20:34:05Z")

</div>

I tried to change my code according to what you said but it didnt work. I think I did something wrong but I don’t know what

---

<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:** [September 6, 2021, 9:05pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/4 "2021-09-06T21:05:28Z")

</div>

Here is a running version with minor changes:

```auto
float xOffset = 0.0;
float yOffset = 0.0;

int rectSize = 30;

float ellipseX = 90;
float ellipseY = 320;
int ellipseSize = 30;

int boxPosX = 250;
int boxPosY = 130;

int spacingX = 45;
int spacingY = 45;

int i;
int l;

boolean ellipseHovering = false;

boolean start = false;

float[] randomX = new float[1000];
float[] randomY = new float[1000];

void setup() {
  size(500, 350);
}

void draw() {
  i = 0;
  l = 0;
  background(0);

  if (start) {
    for (int x = 10; x < width; x = x + spacingX) {
      for (int y = 0; y < height - 10; y = y + spacingY) {
        randomX[i] = x;
        randomY[l] = y;
        i++;
        l++;

        float ellipseRectDist = dist(x + rectSize / 2, y + rectSize / 2, ellipseX, ellipseY);

        rectSize = 30;
        if (ellipseRectDist < 10) {
          rectSize = 0;
        }
        rect(x, y, rectSize, rectSize);
      }
    }
  }

  fill(200, 200, 100);
  //rect (boxPosX, boxPosY, 50, 50);

  fill(255, 100, 100);
  ellipse(ellipseX, ellipseY, ellipseSize, ellipseSize);
  xOffset = mouseX - ellipseX;
  yOffset = mouseY - ellipseY;

  if (mouseX < ellipseX + 15 && mouseX > ellipseX - 15 && mouseY < ellipseY + 15 && mouseY > ellipseY - 15) {
    ellipseHovering = true;
  } else {
    ellipseHovering = false;
  }
}

void mouseDragged() {
  if (ellipseHovering) {
    ellipseX = mouseX - xOffset;
    ellipseY = mouseY - yOffset;
  }
}

void mousePressed() {
  float mouseEllipse = dist(mouseX, mouseY, ellipseX, ellipseY);
  if (start == false && mouseEllipse < ellipseSize) {
    start = true;
  }

  if (start == true && mouseEllipse < ellipseSize) {
    ellipseX = randomX[int(random(0, i))] + ellipseSize / 2;
    ellipseY = randomY[int(random(0, l))] + ellipseSize / 2;
  }
}

```

---

<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:** [September 7, 2021, 10:05am UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/5 "2021-09-07T10:05:55Z")

</div>

Hello,

I will assume you are using Processing IDE for development.

Find the Preferences and make sure this is selected:

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a0fd1e0a3846054c4f98f2f773bff7bdecb28005.png)

You will see errors in your code underlined in red.  
Click your mouse over the error and a message will show what the error is:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/9b37dd2e1836e1844d717be3c27f93541c213f7f.png)

In this case it states:

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

References:

> **[Datatype Conversion / Examples](https://processing.org/examples/datatypeconversion.html)**
>
> It is sometimes beneficial to convert a value from one type of data to another. Each of the conversion functions converts its parameter to an equivalent representation within its datatype. The convers…

> **[Reference](https://processing.org/reference/intconvert_.html)**
>
> Converts any value of a primitive data type (boolean, byte, char, color, float, int, or long) or String to its integer representation. Whe…

> **[Reference](https://processing.org/reference/floatconvert_.html)**
>
> Converts an int or String to its floating point representation. An int is easily converted to a float, but the contents of a String must resemble a number, or NaN…

`:)`

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [September 7, 2021, 3:04pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/6 "2021-09-07T15:04:57Z")

</div>

Hey. I can’t use it because i’m using a chromebook. Do you have any alternatives other the one im using rn which is openprocessing?

---

<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:** [September 7, 2021, 6:44pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/7 "2021-09-07T18:44:14Z")

</div>

I don’t understand.

Do you mean my code? But your code was processing java flavor as well?

openprocessing is good.

Why don’t you want to use it?

---

<div class="post-metadata">

**Author:** ![Kenga123456](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@Kenga123456](https://discourse.processing.org/u/Kenga123456)\
**Post date:** [September 8, 2021, 9:21pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/8 "2021-09-08T21:21:55Z")

</div>

Glv said he was assuming that I was using processing IDE which I don’t. In openprocessing I don’t think I can debug the same way as he is doing. So thats why I was asking whether he had an alternative that could debug roughly the same way

---

<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:** [September 8, 2021, 10:36pm UTC](https://discourse.processing.org/t/storing-positions-on-an-array-and-then-calling-the-value-grid/32119/9 "2021-09-08T22:36:43Z")

</div>

That would be another idea [https://editor.p5js.org/](https://editor.p5js.org/)