From 6b81836e6b9815a2996a55ad37dcaa4d89f99e42 Mon Sep 17 00:00:00 2001 From: s1n Date: Sat, 28 Mar 2020 10:31:08 -0700 Subject: 3/28/2020, 10:30 --- input-lag/.htaccess | 1 + input-lag/css/main.css | 13 ++++++++ input-lag/index.html | 57 ++++++++++++++++++++++++++++++++++ input-lag/js/main.js | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 155 insertions(+) create mode 100644 input-lag/.htaccess create mode 100644 input-lag/css/main.css create mode 100644 input-lag/index.html create mode 100644 input-lag/js/main.js (limited to 'input-lag') 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 @@ + + + + + + + + s1nical - Input Lag + + + + + + + + + + + + + + + + + + + + + + + + + + \ 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 -- cgit v1.2.3