Skip to content

Instantly share code, notes, and snippets.

@neizod

neizod/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Created January 25, 2012 18:17
Show Gist options
  • Save neizod/1677702 to your computer and use it in GitHub Desktop.
Save neizod/1677702 to your computer and use it in GitHub Desktop.
Download ZIP
Area of a Triangle
Raw
README.md

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

Raw
annotated.js
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
}
Raw
index.js
function(p,q,r){return Math.abs((q[0]-p[0])*(r[1]-q[1])+(r[0]-q[0])*(p[1]-q[1]))/2}
Raw
LICENSE.txt
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2012 Nattawut Phetmak <[email protected]>
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.
Raw
package.json
{
"name": "areaTriangle",
"description": "this will calculate the area of triangle.",
"keywords": [
"area",
"triangle",
"math"
]
}
Raw
test.html
<!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
Copy link

tsaniel 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
Copy link
Author

neizod 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
Copy link

tsaniel commented Jan 26, 2012

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

@maettig
Copy link

maettig 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
Copy link
Author

neizod commented Jan 27, 2012

@maettig i'm in shock..

@maettig
Copy link

maettig 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
Copy link

tsaniel commented Jan 30, 2012

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

@maettig
Copy link

maettig commented Feb 2, 2012

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

@neizod
Copy link
Author

neizod 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