This repository has been archived by the owner on Jan 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
80 lines (58 loc) · 5.56 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>How much blur? - A visual background blur calculator</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/jquery_ui.css">
<meta property='og:image' content='http://howmuchblur.com/img/fb.png'/>
<meta property='og:title' content='How much blur?'/>
<meta property="og:description" content="A tool to compare lenses in their ability to blur the background of your shot!" />
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://howmuchblur.com"/>
<meta property="fb:admins" content="1149896699" />
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<div id="main">
<h1 id="title">How much blur? - A visual lens calculator</h1>
<p><div class="fb-like" data-href="http://howmuchblur.com" data-send="false" data-width="450" data-show-faces="false" data-font="arial"></div></p>
<p>One of the most returning questions on photography forums is which out of two different lenses has the smallest depth of field (DOF). However, what many people actually mean when they ask this is which lens has the best ability to blur the background in their shots. The answers given are not always very clear. However, they could be just that. All it takes is some simple math. This tool will give you the answers you are looking for. Add some lenses, select your subject size, and hit update to see the results in a graph!</p>
<p id="after_inputs"><a id="add">Add some more</a></p>
I want to take a shot in landscape orientation, which contains <input type="radio" id="radio1" name='size' value='head' /> someone's head and shoulders (0.9 x 0.6 meters), <input type="radio" id="radio2" name='size' value='person' /> a full person (3 x 2 meters), or <input type="radio" name='size' id="radio3" value='other' /> something completely different, which has a width of <input id="img_width" type="text" value="5" style="width:60px;" /> meters.
<p><a id="update"><b>Update!</b></a></p>
<p style="text-align:center;margin-left:40px;"><b>Background blur versus background distance</b></p>
<div id="container"><div id="graph"></div>
<p class="graph" id="yaxis">Theoretical blur disk diameter as percentage of image width [%]</p>
<p class="graph" id="watermark">Generated by http://howmuchblur.com</p>
</div>
<p style="text-align:center;margin:4px 0px 0px 40px;" class="graph">Distance between subject and background</p>
<p>With this nice little slider you can set the distance range of the graph:</p>
<div id="slider" style="font-size:0.8em;"></div>
<p>It is important to intepret the results correctly. The first obvious observation to make is that the background blur increases when the background is further away, regardless of focal length or aperture settings. In order to give meaning to the results, think about what kind of shot you want to make, and what distance there will be between the subject and the background.</p>
<p>As you probably have seen by now, the relative blurring ability of lenses is very much dependent on the specifics of your shot. As a rule of thumb it can be concluded that a wider aperture is more important for blurring closer backgrounds, whereas the focal length comes more and more into play when the background is further away. Please note that there are two additional effects which determine the amount of background blur in your shot:</p>
<ol><li> Each lens has its own bokeh characteristics, which can make background blur appear more or less smooth.</li><li>
A shorter focal length will have a wider field of view, and therefore it is likely that there will be more objects in the background at a closer distance.</ol>
<p>You can always link back to this specific comparison by using the following url:
<input type="text" id="url_box" readonly="readonly" style="text-align:left;width:980px;" /></p>
<p style="color:#666;"><i>This is version 1.2 of how much blur. Stay tuned for more features and photography greatness. You can always send your suggestions to <span id="mail"></span>. And no, I do not support my growing family through this website!</i></p>
</div>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><![endif]-->
<script src="js/flot/jquery.flot.js"></script>
<script src="js/jquery_ui.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>