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

Processing Coding Questions
1 
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.

2

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! :wink:

2 Likes
3

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

4

Here is a running version with minor changes:

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;
  }
}
5

Hello,

I will assume you are using Processing IDE for development.

Find the Preferences and make sure this is selected:

image

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
image488×523 22.3 KB

In this case it states:

image

References:

:)

1 Like
6

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?

7

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?

8

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

9

That would be another idea https://editor.p5js.org/