# Understanding coordinates in Processing. Help! Thank you

**URL:** <https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084>\
**Category:** Coding Questions\
**Created:** [March 12, 2024, 2:49am UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084 "2024-03-12T02:49:02Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![BBG](https://avatars.discourse-cdn.com/v4/letter/b/b4bc9f/32.png) [@BBG](https://discourse.processing.org/u/BBG)\
**Post date:** [March 12, 2024, 2:49am UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084/1 "2024-03-12T02:49:02Z")

</div>

//This is a lesson to understand coordinates with lines in processing.  
void setup(){  
size(600, 600);  
}  
void draw(){  
background (255); //white

//DRAW SQUARE WITH LINES  
stroke(0);  
line(100, 200, 100, 400);  
line(100, 200, 300, 200);  
line(300, 200, 300, 400);  
line(100, 400, 300, 400);

//Can I draw a circle within the box  
ellipse(200, 300, 200, 200);

//create a line to dissect the circle like a cross  
line(100, 300, 300, 300);//Across  
line(200, 400, 200, 200);//Up-Down

//Do diagonals.  
//Cross the circle and square twice, diagonally.  
//Have the lines originate and end at the corners of the square.  
line(100, 200, 300, 400); //Upper left corner to lower right corner.  
line(100, 400, 400, 100); //Lower left corner to Upper right corner.  
//Why does the above line(lower left to upper right), go beyond the limits of the square?  
//I have tested different coordinates and cannot seem to fix it.  
//Any help or hint is highly appreciated, thank you.  
//I am not understanding why I am having this issue with coordinates?  
}

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [March 12, 2024, 3:40am UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084/2 "2024-03-12T03:40:57Z")

</div>

Should be: line(100, 400, 300, 200);

Determine the x,y coordinates of each of the four corners of the square and you will see the error that you made.

---

<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:** [March 12, 2024, 10:49am UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084/3 "2024-03-12T10:49:12Z")

</div>

Hello @BBG ,

> [@BBG](#):
>
> //Any help or hint is highly appreciated, thank you.  
> //I am not understanding why I am having this issue with coordinates?

Explore the tutorials, references and examples here:

> **[Welcome to Processing!](https://processing.org/)**
>
> Processing is a flexible software sketchbook and a language for learning how to code. Since 2001, Processing has promoted software literacy within the visual arts and visual literacy within technology…

To get you started:

- [Coordinate System and Shapes / Processing.org](https://processing.org/tutorials/coordinatesystemandshapes)
- [line() / Reference / Processing.org](https://processing.org/reference/line_.html)

This may help:

```auto
void setup()
  {
  size(400, 400);
  }
  
void draw()
  {
  background(255);
  strokeWeight(5);
  stroke(255, 0, 0);
  point(mouseX, mouseY);
  fill(0);
  textSize(16);
  text(str(mouseX) + ", " + str(mouseY), mouseX+5, mouseY-5);
  }

```

Be sure to look up the references for every element of the code!

`:)`

---

<div class="post-metadata">

**Author:** ![ProcessingOrg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/processingorg/32/18341_2.png) [@ProcessingOrg](https://discourse.processing.org/u/ProcessingOrg)\
**Post date:** [March 12, 2024, 11:12am UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084/4 "2024-03-12T11:12:42Z")

</div>

Hello @BBG, to improve readability, kindly format your code by editing your post, selecting the code, and pressing the `</>` button. This will make it easier for others to assist you.

---

<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:** [March 12, 2024, 3:36pm UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084/5 "2024-03-12T15:36:05Z")

</div>

**Example 1:**

Code:

```auto

//This is a lesson to understand coordinates with lines in processing.

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

void draw() {
  background (255); //white

  //DRAW SQUARE WITH LINES
  stroke(0);
  line(100, 200, 100, 400);
  line(100, 200, 300, 200);
  line(300, 200, 300, 400);
  line(100, 400, 300, 400);

  //Can I draw a circle within the box
  ellipse(200, 300, 200, 200);

  //create a line to dissect the circle like a cross
  line(100, 300, 300, 300);//Across
  line(200, 400, 200, 200);//Up-Down

  //Do diagonals.
  //Cross the circle and square twice, diagonally.
  //Have the lines originate and end at the corners of the square.
  line(100, 200, 300, 400); //Upper left corner to lower right corner.
  line(100, 400, 300, 200); //Lower left corner to Upper right corner. // changed!!!!!!!!!!!!!!
}

```

* * *

**Example 2:**

Easier to read when you name the numbers:

```auto

//This is a lesson to understand coordinates with lines in processing.

final float leftX = 100;
final float rightX = 300;
final float middleX = (rightX+leftX)/2;

final float topY = 200;
final float bottomY = 400;
final float middleY = (bottomY+topY)/2;

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

void draw() {
  background (255); //white

  //DRAW SQUARE WITH LINES
  stroke(0);
  line(leftX, topY, leftX, bottomY);
  line(leftX, topY, rightX, topY);
  line(rightX, topY, rightX, bottomY);
  line(leftX, bottomY, rightX, bottomY);

  //Can I draw a circle within the box
  ellipse(middleX, middleY, 200, 200);

  //create a line to dissect the circle like a cross (+)
  line(leftX, middleY, rightX, middleY);//Across
  line(middleX, bottomY, middleX, topY);//Up-Down

  //Do diagonals.
  //Cross the circle and square twice, diagonally.
  //Have the lines originate and end at the corners of the square.
  line(leftX, topY, rightX, bottomY); //Upper left corner to lower right corner.
  line(leftX, bottomY, rightX, topY); //Lower left corner to Upper right corner.
}

```

---

<div class="post-metadata">

**Author:** ![BBG](https://avatars.discourse-cdn.com/v4/letter/b/b4bc9f/32.png) [@BBG](https://discourse.processing.org/u/BBG)\
**Post date:** [March 15, 2024, 3:28pm UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084/6 "2024-03-15T15:28:35Z")

</div>

Thank you all very much, specially for the explanations to help me learn and discover additional resources. This was a project to help me understand coordinates better and you helped me achieve that. Again thanks

---

<div class="post-metadata">

**Author:** ![BBG](https://avatars.discourse-cdn.com/v4/letter/b/b4bc9f/32.png) [@BBG](https://discourse.processing.org/u/BBG)\
**Post date:** [March 15, 2024, 3:34pm UTC](https://discourse.processing.org/t/understanding-coordinates-in-processing-help-thank-you/44084/8 "2024-03-15T15:34:05Z")

</div>

Great lesson, thanks