Understanding coordinates in Processing. Help! Thank you

Processing Coding Questions
1

//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?
}

2

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.

1 Like
3

Hello @BBG ,

Explore the tutorials, references and examples here:

To get you started:

This may help:

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!

:)

1 Like
4

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.

1 Like
5

Example 1:

Code:



//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:



//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.
}
1 Like
6

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

2 Likes
8

Great lesson, thanks

1 Like