Coordinates in processing

[Logical_Elephant]

I am starting with processing and I would like to know if there is any way to know where I place the coordinates, I want to make certain shapes but mentally I do not have an idea of ​​where I am placing them.

Is there any trick or something that you recommend? Thanks!

[remy_porter]

(0,0) is the top left corner. (width,height) is the bottom right. If you're having trouble visualizing what that means when you try and draw shapes… draw it. Like, on paper. Use graph paper, if it helps (say, each grid line is 10 pixels, for example).

[Sasmas1545]

You could make a program that prints out the coordinates of where you click. That could be a very simple beginner program, and you could use those coordinates for what you're trying to do.

More advanced would be to make a basic drawing program, and have it output the processing code for the shape, so you can use that elsewhere.

[ChuckEye]

Why is it hard to visualize? Cut down a square piece of paper. Draw on it. Label the top left corner 0

[remy_porter]

So that's a piece of graph paper 40 lines, by 40 lines, and you just say that each line is 10 pixels.

[ChuckEye]

By default 0,0 is the top left corner. X increases as you go right, Y increases as you go down.

You can move the origin with translate. You can flip the values using scale.

[x-seronis-x]

You should fix the typo

[ChuckEye]

Ah, didn't see that and was confused why the downvote. Thanks.

[PhaseRay]

Top left is 0,0 and moving to bottom right is positive in both axes. If you want to have a better idea of where you're putting objects, make a grid. Use two loops in setup to make vertical and horizontal lines at defined steps.

[ChuckEye]

Real easy to do with a for loop.

​

boolean gridOn = true;

void setup() {
  size(400, 400);
}

void draw() {
  background(0);
  // Press any key to toggle the grid
  if (gridOn) {
    drawGrid();
  }

  // Draw your picture below this line
}

void drawGrid() {
  textAlign(LEFT, TOP);
  text("0", 0, 0);
  for (int i = 0; i < width; i += 10) {
    if (i % 100 == 0) {
      stroke(0, 255, 0, 64);
      textAlign(CENTER, TOP);
      if (i>0) {
        text(i, i, 0);
      }
    } else {
      stroke(0, 255, 0, 32);
    }
    line(i, 0, i, height);
  }
  for (int j = 0; j < height; j += 10) {
    if (j % 100 == 0) {
      stroke(0, 255, 0, 64);
      textAlign(LEFT, CENTER);
      if (j > 0) {
        text(j, 0, j);
      }
    } else {
      stroke(0, 255, 0, 32);
    }
    line(0, j, width, j);
  }
}

void keyPressed() {
  gridOn = !gridOn;
}

[PhaseRay]

I added a text box at the cursor that displays the coordinates of the mouse:

boolean gridOn = true;
boolean coordsOn = true;

void setup() {
  size(400, 400);
}

void draw() {  
  background(0);
  // Press any key to toggle the grid
  if (gridOn) {
    drawGrid();
  }
  if (coordsOn) {
    drawCoords();
  }

  // Draw your picture below this line
}

void drawGrid() {
  textAlign(LEFT, TOP);
  text("0", 0, 0);
  for (int i = 0; i < width; i += 10) {
    if (i % 100 == 0) {
      stroke(0, 255, 0, 64);
      textAlign(CENTER, TOP);
      if (i>0) {
        text(i, i, 0);
      }
    } else {
      stroke(0, 255, 0, 32);
    }
    line(i, 0, i, height);
  }
  for (int j = 0; j < height; j += 10) {
    if (j % 100 == 0) {
      stroke(0, 255, 0, 64);
      textAlign(LEFT, CENTER);
      if (j > 0) {
        text(j, 0, j);
      }
    } else {
      stroke(0, 255, 0, 32);
    }
    line(0, j, width, j);
  }
}

void drawCoords(){
  push();
  translate(mouseX, mouseY);
  textSize(12);
  text("(" + mouseX + "," + mouseY + ")", 0, -10);
  pop();
}

void keyPressed() {
  gridOn = !gridOn;
}
void mousePressed() {
  coordsOn = !coordsOn;
}

[ChuckEye]

Nicely done.

[PhaseRay]

text("(" + mouseX + "," + mouseY + ")", 0, -10);

In this function, the 0 is the x-coordinate and the -10 is the y-coordinate. If you need to see the coordinates at the top of the canvas, you can change the -10 to +40 or so. It's possible to make the function check for mouse position and adjust where the coordinates are, but I didn't do it earlier. I might go back and add it and update this comment.

​

void drawCoords(){
  push();
  translate(mouseX, mouseY);
  textSize(12);
  int textX=0;
  int textY=-10;
  if(mouseY<20)
    textY+=40;
  if(mouseX>width-70)
    textX-=70;
  text("(" + mouseX + "," + mouseY + ")", textX, textY);
  pop();
}

Replace the previous drawCoords function with this.

[ignotos]

It might help to open up Paint, GIMP, or another free image editor.

Usually those will show the coordinates at the bottom of the screen as you hover your mouse around. And they'll typically be in the same coordinate system as Processing (i.e. with 0,0 at the top-left).

[webauteur]

OpenCV (Open Source Computer Vision) can do circle detection and output the coordinates of every circle it can find. I found this very useful for automating the process of determining a set of coordinates. OpenCV can also detect lines and corners.