-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
152 lines (138 loc) · 6.17 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<html>
<head>
<meta charset="UTF-8">
<title>Overwatch DPI Tool</title>
<style>
.container {
display: flex;
flex-direction: column;
width: 300px;
align-items: flex-end;
}
input {
width: 60px;
}
.error {
background-color: pink;
}
.pass {
background-color: skyblue;
}
#dotpdeg {
border-style: double;
}
</style>
</head>
<body>
<h1>2022 update</h1>
<p>Pixel skipping is real. Using 400 DPI and high sen is just not fully utilizing your hardware.</p>
<p>However, people don't know how to gauge the usefulness of this tool. People assume when something is given the label a "tool" it can be taken as scientific fact.</p>
<p>But I'm just some guy on the internet who wrote some JavaScript.</p>
<p>This tools is a reflection on how I thought about the problem but you probably shouldn't "believe" in it unless you are willing to do
the analysis yourself.</p>
<p>Read the source code. Its all there.</p>
<h1>Overwatch DPI Tool</h1>
<p>
Low DPI can cause the reticle to skip over hitboxes. <a href="https://www.youtube.com/watch?v=TcjfPKftJBQ">EnVyUs Taimou - Pixel skipping demonstrated</a>
</p>
<p>
Imagine in the extreme case where a DPI hipster plays using 1 DPI and hacks in-game sensitivity to allow
the sensitivity to be set to 4000. This actually results in a very competitive 34.64 cm/360°, but the reticle
will be skipping by 26.4° at a time! The DPI hipster will not be able to hit anything.
</p>
<p>
How much DPI does one need? What is enough DPI such that the reticle can be placed anywhere on the screen?
This depends a few factors: DPI, in-game sensitivity, FOV, screen resolution, and screen ratio.
</p>
<p>
This tool will calculate if a given DPI, in-game sensitivity, and FOV is good enough for various screen sizes.
</p>
<p>
The key thing to figure out is for a given DPI, in-game sensitivity, and FOV, how many samples per degree does that
that result in. This is the overall sampling rate of the mouse, which is then compared to the actual resolution
of various monitors. If the sampling rate is 2x of the resolution of the monitor for a single degree, this means
the settings are enough to reach any part of the monitor.
</p>
<p>
The sampling rate has to be 2x of the resolution due to
<a href="https://en.wikipedia.org/wiki/Shannon–Hartley_theorem">Shannon's law</a>. For our purposes this effectively
halves the calculated sample/degree.
</p>
<p>
To use this tool enter your DPI, in-game sensitivity, and FOV, then find your screen resolution. If
Shannon's law sample/degree is greater than your screen's pixel/degree then it passes with blue, otherwise
it fails with red.
</p>
<p>
<a href="https://www.reddit.com/r/Competitiveoverwatch/comments/50enbs/taimou_demonstrates_pixel_skipping/d73ovzm/">ELI5 instructions</a>
</p>
<h2>Inputs</h2>
<div class="container">
<label>DPI <input id="dpi" type="text" value="400" onkeyup="calculate()"/></label>
<label>In-game sensitivity <input id="sensitivity" type="text" value="10" onkeyup="calculate()"/></label>
<label>FOV <input id="fov" type="text" value="103" onkeyup="calculate()"/></label>
</div>
<hr/>
<h2>Outputs</h2>
<div class="container" id="outputs">
<label>Inch/360° <input id="inchp360" type="text" value="" readonly disabled/></label>
<label>CM/360° <input id="cmp360" type="text" value="" readonly disabled/></label>
<label>Samples/degree <input id="rawdotpdeg" type="text" value="" readonly disabled/></label>
<label>Shannon's law samples/degree <input id="dotpdeg" type="text" value="" readonly disabled/></label>
</div>
<script type="text/javascript">
var resolutions = [
{"width": 1280, "height": 720},
{"width": 1440, "height": 900},
{"width": 1600, "height": 900},
{"width": 1680, "height": 1050},
{"width": 1920, "height": 1080},
{"width": 2560, "height": 1080},
{"width": 2560, "height": 1440},
{"width": 2560, "height": 1080},
{"width": 3840, "height": 2160}
];
var factors = {};
resolutions.forEach(function(resolution) {
factors[resolution.width + "x" + resolution.height] = {
width: resolution.width,
height: resolution.height,
ratio: resolution.width/resolution.height
};
});
function createOutputs() {
var outputs = document.getElementById("outputs");
Object.keys(factors).forEach(function(resolution) {
var label = document.createElement("label");
label.innerHTML = "Pixel/degree @ " + resolution + " <input id=" + resolution + " type=text readonly disabled/>"
outputs.appendChild(label);
});
}
function roundTwoPlaces(number) {
return Math.round(100 * number) / 100;
}
function calculate() {
var dpi = Number(document.getElementById("dpi").value);
var sensitivity = Number(document.getElementById("sensitivity").value);
var fov = Number(document.getElementById("fov").value);
var inchp360 = (360 * 10 / 3) / (dpi * sensitivity * 0.022);
var cmp360 = 2.54 * inchp360;
var rawdotpdeg = dpi * inchp360 / 360;
var dotpdeg = rawdotpdeg / 2;
document.getElementById("inchp360").value = roundTwoPlaces(inchp360);
document.getElementById("cmp360").value = roundTwoPlaces(cmp360);
document.getElementById("rawdotpdeg").value = roundTwoPlaces(rawdotpdeg);
document.getElementById("dotpdeg").value = roundTwoPlaces(dotpdeg);
Object.keys(factors).forEach(function(resolution) {
var factor = factors[resolution];
var pixeldeg = factor.ratio * factor.height / fov;
var output = document.getElementById(resolution);
output.value = roundTwoPlaces(pixeldeg);
output.className = (pixeldeg > dotpdeg) ? "error" : "pass";
});
}
createOutputs();
calculate();
</script>
</body>
</html>