# Area of triangle

**URL:** <https://discourse.processing.org/t/area-of-triangle/31652>\
**Category:** Coding Questions\
**Created:** [August 9, 2021, 8:42pm UTC](https://discourse.processing.org/t/area-of-triangle/31652 "2021-08-09T20:42:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![peterson](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@peterson](https://discourse.processing.org/u/peterson)\
**Post date:** [August 9, 2021, 8:42pm UTC](https://discourse.processing.org/t/area-of-triangle/31652/1 "2021-08-09T20:42:18Z")

</div>

```auto
type or paste code here
`</>button*/t/2147askingquestionshowtogetareaoftriangle``
```

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 9, 2021, 11:49pm UTC](https://discourse.processing.org/t/area-of-triangle/31652/2 "2021-08-09T23:49:04Z")

</div>

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](https://discourse.processing.org/t/guidelines-asking-questions/2147) for advice on asking questions on the Forum.

---

<div class="post-metadata">

**Author:** ![peterson](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@peterson](https://discourse.processing.org/u/peterson)\
**Post date:** [August 10, 2021, 9:20pm UTC](https://discourse.processing.org/t/area-of-triangle/31652/3 "2021-08-10T21:20:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 10, 2021, 10:32pm UTC](https://discourse.processing.org/t/area-of-triangle/31652/4 "2021-08-10T22:32:59Z")

</div>

Hi @peterson,

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

```auto
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.

```auto
/*
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/fd652036faae05671f84213deef3acfb39fdb391.png)

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

---

<div class="post-metadata">

**Author:** ![peterson](https://avatars.discourse-cdn.com/v4/letter/p/db5fbb/32.png) [@peterson](https://discourse.processing.org/u/peterson)\
**Post date:** [August 12, 2021, 6:35pm UTC](https://discourse.processing.org/t/area-of-triangle/31652/5 "2021-08-12T18:35:11Z")

</div>

please try to explain step by step

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [August 12, 2021, 7:46pm UTC](https://discourse.processing.org/t/area-of-triangle/31652/6 "2021-08-12T19:46:42Z")

</div>

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:

```auto
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:

> **[Triangle](https://en.wikipedia.org/wiki/Triangle)**
>
> A triangle is a polygon with three edges and three vertices. It is one of the basic shapes in geometry. A triangle with vertices A, B, and C is denoted 
>   
>     
>       
> △
> A
> B
> C
>       
>     
> {\\displaystyle \\triangle ABC}
>   
> .
> In Euclidean geometry, any three points, when non-collinear, determine a unique triangle and simultaneously, a unique plane (i.e. a two-dimensional Euclidean space). In other words, there is only one plane that contains that triangle, and...

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:

```auto
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:

```auto
  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:

```auto
  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:

```auto
  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:

```auto
  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.