Area of triangle

p5.js Coding Questions
1 
type or paste code here
`</>button*/t/2147askingquestionshowtogetareaoftriangle``
2

Hello, @peterson, and welcome to the Processing Forum!

The text in your post is strangely formatted, making it difficult to read.

Also, when seeking help here, it is important to be specific regarding what you are trying to find out. For example, are you asking about calculating the area of a triangle, given the coordinates of its three vertices? If you clarify this, we may be able to help.

Which mode of Processing are you using? Is it Java, Python, or p5.js?

See Guidelines—Asking Questions for advice on asking questions on the Forum.

3 
type or paste code here
`p5.js``
4

Hi @peterson,

In p5.js, the area of a triangle can be computed using the following formula:

abs(x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0

Below is p5.js code for drawing a triangle and computing its area. Since the coordinates of the vertices relate to pixels, the computed area is in square pixel units.

/*
Computes area of triangle based on coordinates of vertices
abs(x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0
*/

function setup() {
  createCanvas(400, 400);
  background(255, 255, 128);
  noLoop();
  textAlign(CENTER, CENTER);
}

function draw() {
  // vertices of triangle are (40, 36), (80, 360), and (320, 180)
  let x1 = 40;
  let y1 = 36;
  let x2 = 80;
  let y2 = 360;
  let x3 = 320;
  let y3 = 180;
  
  // draw triangle with gray stroke and white fill
  stroke(128);
  fill(255);
  triangle(x1, y1, x2, y2, x3, y3);
  
  label_vertex(x1, y1);
  label_vertex(x2, y2);
  label_vertex(x3, y3);
  label_area(x1, y1, x2, y2, x3, y3);
}

function area_of_triangle(x1, y1, x2, y2, x3, y3) {
  // compute area in pixel units
  return abs(x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0;
}

function label_vertex(x, y) {
  textSize(20);
  // make the text blue
  fill(0, 0, 255);
  text("("+ x + ", " + y + ")", x, y);
}

function label_area(x1, y1, x2, y2, x3, y3) {
  textSize(20);
  // make the text blue
  fill(0, 0, 255);
  // get area
  let area = area_of_triangle(x1, y1, x2, y2, x3, y3);
  // place label of area in center of triangle
  text("Area: " + area, (x1 + x2 + x3) / 3, (y1 + y2 + y3) / 3);
}

This is the image produced by the code:

triangle

Please feel free to ask if you have any questions at all about the code.

5

please try to explain step by step

1 Like
6

The portion of the p5.js script that relates most closely to your question about the area of a triangle is the area_of_triangle function, which consists of this code:

function area_of_triangle(x1, y1, x2, y2, x3, y3) {
  return abs(x1 * (y2 - y3) + x2 * (y3 - y1) + x3 * (y1 - y2)) / 2.0;
}

Notice that it performs some math with the coordinates of the vertices to compute the area.

To cause the function to run, in order to compute the area of a particular triangle, we specify the name of the function, followed by parentheses that contain the six quantities that are the x and y coordinates of the three vertices of that triangle. The coordinate pairs representing the vertices are (x1, y1), (x2, y2), and (x3, y3). Notice the order in which the quantities are listed in the header of the function.

The formula, along with a huge amount of additional information about triangles, is described in this article:

Of course, the article contains much more information than you actually need in order to use the formula.

This portion of the script sets up the size of the canvas on which we draw the triangle, along with other specifications, such as the light yellow background color:

function setup() {
  createCanvas(400, 400);
  background(255, 255, 128);
  noLoop();
  textAlign(CENTER, CENTER);
}

The draw function contains the code that specifies the coordinates of the vertices, as follows:

  let x1 = 40;
  let y1 = 36;
  let x2 = 80;
  let y2 = 360;
  let x3 = 320;
  let y3 = 180;

If you copy the script in order to run it on a computer, you can change the numbers to change the shape of the triangle. Just make sure that the numbers you put in do not exceed 400, which would make the triangle extend outside the canvas.

This is the line of code that actually draws the triangle, using the coordinates that we specified:

  triangle(x1, y1, x2, y2, x3, y3);

Notice that lower down in the code, we have defined the functions label_vertex and label_area. Those functions do what their names suggest. With these statements, we run those functions from within the draw function:

  label_vertex(x1, y1);
  label_vertex(x2, y2);
  label_vertex(x3, y3);
  label_area(x1, y1, x2, y2, x3, y3);

Those lines of code make the information representing the coordinates and the area appear on the screen.

Now, let’s take a look at the code inside the label_area function. It includes this line:

  let area = area_of_triangle(x1, y1, x2, y2, x3, y3);

That is the line that causes the area_of_triangle function to run, which then computes the area of the triangle, based on the given formula and the numbers that we assigned to the coordinates.