Skip to content

Instantly share code, notes, and snippets.

@neizod neizod/LICENSE.txt forked from 140bytes/LICENSE.txt
Created Jan 25, 2012

Embed
What would you like to do?
Area of a Triangle

Area of a Triangle

83b. Find area between 3 points which form a triangle.

How to use

Invoke function using 3 arguments of pair of coordination.

Nth arg (array) .... pair of coordination e.g. [1, 2]

Concept

from original triangle pqr:

. p                           ^
  ^ ***___                    |
    ^     ***___              | p[1]-r[1]
      ^         ***___    r   |
        ^         s ._____.   v
          ^         |    /    ^
            ^       |   /     |
              ^     |  /      | b
                ^   | /       |
                  ^ |/        |
                    . q       v
<------------------> <---->
     q[0]-p[0]         a

cut form p to s, and transform it into this:

. p               p".         ^
                    | \       |
                    |  \      | p[1]-r[1]
 p'               s |   \ r   |
.___________________._____.   v
^                   |    /    ^
    ^               |   /     |
        ^           |  /      | b
            ^       | /       |
                ^   |/        |
                    . q       v
<------------------> <---->
     q[0]-p[0]         a

now, there are three triangle (qsr, qsp', rsp"); or, for this hack, two triangle (large: rqp', small: rsp"), which calculate much easier!

Credit

@maettig 95b -> 93b -> 83b

function(
p, // 1st coordinate pair
q, // 2nd
r // 3rd
) {
return Math.abs( // make sure the final area is positive
(q[0]-p[0]) * (r[1]-q[1]) + // square area of the large one
(r[0]-q[0]) * (p[1]-q[1]) // square area of the small one
)/2 // turn those square area into triangle area
}
function(p,q,r){return Math.abs((q[0]-p[0])*(r[1]-q[1])+(r[0]-q[0])*(p[1]-q[1]))/2}
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2012 Nattawut Phetmak <neizod@gmail.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "areaTriangle",
"description": "this will calculate the area of triangle.",
"keywords": [
"area",
"triangle",
"math"
]
}
<!DOCTYPE html>
<title>Area of a Triangle</title>
<div>Expected value: <b>2.5, 3, 0</b></div>
<div>Actual value: <b id="ret"></b></div>
<script>
// write a small example that shows off the API for your example
// and tests it in one fell swoop.
var tri_area = function(p,q,r){return Math.abs((q[0]-p[0])*(r[1]-q[1])+(r[0]-q[0])*(p[1]-q[1]))/2}
document.getElementById( "ret" ).innerHTML = [tri_area([1,3],[0,0],[2,1]),
tri_area([4,7],[6,3],[4,4]),
tri_area([1,1],[4,4],[9,9])];
</script>
@tsaniel

This comment has been minimized.

Copy link

commented Jan 26, 2012

Interesting Maths, and it seems it cannot be shortened any more (maybe Maths trick can).
But I don't quite understand how to transform from the original triangle into the three triangles, can you explain more?

@neizod

This comment has been minimized.

Copy link
Owner Author

commented Jan 26, 2012

ok, i'll try this :D

from maths: triangle area is 1/2 (width * height), where the height must be perpendicular to the width.
so no matter how lean the triangle is, the area of triangle which share the same width and height will be equal.
e.g. this 3 triangles area is equal since there share the same width and height:
      .               .    .     ^
     /|             ^/    / \    |
    / |           ^ /     * *    |
   /  |         ^  /     /   \   | h
  /   |       ^   /      *   *   |
 /    |     ^    /      /     \  |
._____|   ._____/       ._____.  v

<----->   <----->       <----->
   w         w             w
  1. mark new point "s", which is locate at the junction of vertical line of point q, and horizontal line of point r.
  2. mark a line from point p to point s and cut it. new point p which lay on 2 side of the cut line will be named point p' and p".
  3. (actually, there is no need to done this step) to see this clearly, move point p' and p" to make right triangles.
  4. now we got 3 right triangles, which we perfectly known its width and height. so the calculation is not that hard. ;)
@tsaniel

This comment has been minimized.

Copy link

commented Jan 26, 2012

I get it :D. Grate tutorial, @neizod (and sorry for my bad Maths).
Actually, the word "transform" confused me.

@maettig

This comment has been minimized.

Copy link

commented Jan 27, 2012

Here is how we calculated this in school. It's longer (107 bytes) but much easier to understand.

function(a,b,c){return Math.abs((a[0]-b[0])*(a[1]+b[1])+(b[0]-c[0])*(b[1]+c[1])+(c[0]-a[0])*(c[1]+a[1]))/2}

While playing around with your version I got this (93 bytes):

function(a,b,c){return Math.abs((a[1]-c[1])*(c[0]-=b[0])+c[0]*(c=c[1]-b[1])+(b[0]-a[0])*c)/2}
@neizod

This comment has been minimized.

Copy link
Owner Author

commented Jan 27, 2012

@maettig i'm in shock..

@maettig

This comment has been minimized.

Copy link

commented Jan 30, 2012

83 bytes by applying simple math. ;-)

function(a,b,c){return Math.abs((b[0]-a[0])*(c[1]-b[1])+(c[0]-b[0])*(a[1]-b[1]))/2}
@tsaniel

This comment has been minimized.

Copy link

commented Jan 30, 2012

@maettig: It's insane. (ok my maths sucks).
By the way, how is your dumpGlobalLeaks going?

@maettig

This comment has been minimized.

Copy link

commented Feb 2, 2012

Calculate the area of a polygon in 104 bytes. Bonus: SVG visualization.

@neizod

This comment has been minimized.

Copy link
Owner Author

commented Feb 20, 2012

@maettig sorry i take so long for review this, thanks for your hack! ^___^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.