diff options
| author | s1n <[email protected]> | 2019-09-07 20:51:18 -0700 |
|---|---|---|
| committer | s1n <[email protected]> | 2019-09-07 20:51:18 -0700 |
| commit | 34f27ba06b273566eabcd7e14e55f681903af7f8 (patch) | |
| tree | 74c63755747be7840a939a76fe1eaa65a1cab390 /input-lag | |
| parent | add some style to links, seperate root redir (diff) | |
| download | s1n.pw-admin-34f27ba06b273566eabcd7e14e55f681903af7f8.tar.xz s1n.pw-admin-34f27ba06b273566eabcd7e14e55f681903af7f8.zip | |
add demos to directory, input lag
Diffstat (limited to 'input-lag')
| -rw-r--r-- | input-lag/css/main.css | 13 | ||||
| -rw-r--r-- | input-lag/index.html | 19 | ||||
| -rw-r--r-- | input-lag/js/main.js | 84 |
3 files changed, 116 insertions, 0 deletions
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..6642dd7 --- /dev/null +++ b/input-lag/index.html @@ -0,0 +1,19 @@ +<!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>Document</title> + <!-- 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> + </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 |