# Area of triangle

``````type or paste code here

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?

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

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:

please try to explain step by step

1 Like

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.

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.