diff options
Diffstat (limited to 'input-lag')
| -rw-r--r-- | input-lag/.htaccess | 1 | ||||
| -rw-r--r-- | input-lag/css/main.css | 13 | ||||
| -rw-r--r-- | input-lag/index.html | 57 | ||||
| -rw-r--r-- | input-lag/js/main.js | 84 |
4 files changed, 155 insertions, 0 deletions
diff --git a/input-lag/.htaccess b/input-lag/.htaccess new file mode 100644 index 0000000..45552cb --- /dev/null +++ b/input-lag/.htaccess @@ -0,0 +1 @@ +Options -Indexes
\ No newline at end of file diff --git a/input-lag/css/main.css b/input-lag/css/main.css new file mode 100644 index 0000000..a044e24 --- /dev/null +++ b/input-lag/css/main.css @@ -0,0 +1,13 @@ +body { + margin: 0; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +svg { + width: 100%; + height: 100%; +}
\ No newline at end of file diff --git a/input-lag/index.html b/input-lag/index.html new file mode 100644 index 0000000..c06358a --- /dev/null +++ b/input-lag/index.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>s1nical - Input Lag</title> + <!-- Site metadata --> + <meta name="description" content="Input Lag Simulation"> + <meta property="og:description" content="Input Lag Simulation"> + <meta property="og:title" content="s1nical - Input Lag"> + <meta property="twitter:card" content="summary"> + <meta property="twitter:site" content="@9inny"> + <meta property="og:image" content=""> + <meta property="og:url" content="https://cyne.cf/input-lag"> + <link rel="apple-touch-icon" sizes="128x128" href="/favicon.jpg"> + <link rel="icon" type="image/jpg" href="/favicon.jpg" sizes="128x128"> + <link rel="canonical" href="https://cyne.cf/input-lag"> + <link rel="author" href="humans.txt" /> + <!-- Schema.org Stuff --> + <script type="application/ld+json"> + { + "name": "s1nical", + "alternateName": "s1n", + "description": "Input Lag Simulation", + "headline": "Input Lag Simulation", + "url": "https://cyne.cf/input-lag", + "image": "", + "sameAs": [ + "https://twitter.com/9inny", + "https://github.com/8cy", + "https://www.reddit.com/user/s1nical/" + ], + "publisher": { + "@type": "Organization", + "logo": { + "@type": "ImageObject", + "url": "" + } + }, + "@type": "WebSite", + "@context": "http://schema.org" + } + </script> + <!-- CSS Links --> + <link rel="stylesheet" href="/input-lag/css/main.css"> + <!-- External Libraries --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> +</head> + + <body> + <script src="/input-lag/js/main.js"></script> + </body> + +</html>
\ No newline at end of file diff --git a/input-lag/js/main.js b/input-lag/js/main.js new file mode 100644 index 0000000..8756bcc --- /dev/null +++ b/input-lag/js/main.js @@ -0,0 +1,84 @@ +var margin = { + top: 20, + right: 10, + bottom: 20, + left: 10 +}; +var width = screen.width - margin.left - margin.right; +var height = screen.height - margin.top - margin.bottom; +var circleRadius = 20; +var delay = 100; // in ms +var circleOffset = circleRadius; + +var svg = d3.select("body").append("svg") + .attr("width", width + margin.left + margin.right) + .attr("height", height + margin.top + margin.bottom) + .append("g") + .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); + +var delays = [1, 5, 10, 20, 50, 100, 500, 1000, 2000]; + +var circle2 = svg.append('circle') + .attr('cx', (width / 2) - circleOffset) + .attr('cy', (height / 2) - circleOffset) + .attr('r', circleRadius) + .attr('fill', 'red') + +var circle1 = svg.append('circle') + .attr('cx', (width / 2) - circleOffset) + .attr('cy', (height / 2) - circleOffset) + .attr('r', circleRadius) + .attr('fill', 'gray') + +var ds = svg.selectAll('.delay') + .data(delays) + .enter() + .append('g') + .attr('class', 'delay') + .attr('left', 100) + .attr('top', 50) + .attr('transform', function (d, i) { + return 'translate(' + i * 100 + ', 0)'; + }) + +function updateButtons() { + svg.selectAll('.delay') + .select('text') + .attr('fill', function (d) { + return d === delay ? 'black' : 'lightblue' + }) +} + +ds.append('text') + .text(function (d) { + return d + ' ms'; + }) + .on('click', function (d) { + delay = d; + updateButtons(); + }); + +svg.append('rect') + .attr('height', height) + .attr('width', width) + .attr('opacity', 0) + .on('mousemove', function () { + var start = performance.now(); + var x = d3.event.x; + var y = d3.event.y; + circle1.attr('cx', x - circleOffset / 2) + circle1.attr('cy', y - circleOffset) + + var step = function (timestamp) { + if (timestamp - start < delay) { + window.requestAnimationFrame(step); + } else { + circle2.attr('cx', x - circleOffset / 2); + circle2.attr('cy', y - circleOffset); + } + } + + window.requestAnimationFrame(step); + }) + +updateButtons();
\ No newline at end of file |