This repository was archived by the owner on Nov 11, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 270
/
Copy pathindex.html
87 lines (76 loc) · 3.78 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Precision of new Math APIs</title>
<meta name="og:title" content="maqth">
<meta name="keywords" content="JavaScript, es6, ecmascript, math, expm1, log1p">
<meta name="author" content="bterlson">
<link rel="stylesheet" href="https://edgeportal.blob.core.windows.net/media/demotemplate.css">
<link rel="stylesheet" href="styles/demo.css">
</head>
<body>
<!-- DEMO INTRO -->
<header class="section section--page-intro demo__header">
<div class="container">
<div class="section__header">
<h1>Precision of new Math APIs</h1>
</div>
</div>
</header>
<!-- DEMO CONTENT -->
<section role="region" class="section">
<div class="container">
<header class="section__header">
<h2>Math.log1p</h2>
</header>
<div class="section__body">
<div class="section-body">
<p>The built-in function <a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-math.log1p">Math.log1p(x)</a>
calculates the value of the expression <code>Math.log(1 + x)</code>. At first glance it may seem
strange to include such a simple helper, but its purpose is not convenience but to preserve
precision when x is very small. Take a look at the following chart:</p>
<div class="math-chart" id="log1p-demo">
</div>
<div class="longform-caption">
<p>Note how once we reach input values smaller than around 10<sup>-13</sup> we start losing
significant amounts of precision while Math.log1p does not. To understand why we have to look at
how floating point works. Floating point values are stored in 3 components - a sign bit, a
significand, and an exponent. The value of the floating point is determined by evaluating <code>sign
* significand * 10<sup>exponent</sup></code>. In JavaScript, floats are 64 bits wide (also
known as double precision floats) and allocate 1 bit for the sign, 11 bits for the exponent,
leaving 52 bits for the significand.</p>
<p>So now let's look at our calculation of Math.log(1 + x) when x is very small. Since we have a
very tiny number less than 1, wecan express all the leading zeroes as a negative exponent and
reserve all of the significand to express precision following the first non-zero digit. But when
we add 1 to this number, we end up with a number very slightly more than 1. In this case, we
need to set the exponent to 0, forcing us to use the significand to encode all of the subsequent
0's after the initial 1. This leaves us significantly fewer bits available for precision since
most of the significand is now dedicated to encoding the 0's following the initial 1.</p>
<p>To illustrate this problem further, you can evaluate <code>0 + 1E-100 === 0</code> as compared to
<code>1 + 1E-100 === 1</code> and note that the former is true while the latter is not. This is
the same issue - JavaScript floats do not have sufficient bits to represent a number slightly
more than 1, but slightly more than 0 is no problem because we can use a negative exponent.</p>
</div>
</div>
</div>
</div>
</section>
<section role="region" class="section">
<div class="container">
<header class="section__header">
<h2>Math.expm1</h2>
</header>
<div class="section__body">
<p>The built-in function <a href="https://people.mozilla.org/~jorendorff/es6-draft.html#sec-math.expm1">Math.expm1(x)</a>
calculates the value of the expression <code>Math.pow(Math.E, x) - 1</code>.</p>
<div class="math-chart" id="expm1-demo">
</div>
<p>Again note that doing this calculation by hand results in significant loss of precision when x is very
small.</p>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="scripts/demo.js"></script>
</body>
</html>