commit
0e287c9d03
6 changed files with 1727 additions and 0 deletions
@ -0,0 +1 @@ |
|||||
|
node_modules/ |
||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,282 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<title>mousetrack PoC</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<canvas style="pointer-events: none; position: fixed; z-index: 999999999999999; top: 0; left: 0; opacity: 1" id="mousecanvas"></canvas> |
||||
|
|
||||
|
<h1>HTML Ipsum Presents</h1> |
||||
|
|
||||
|
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> |
||||
|
|
||||
|
<h2>Header Level 2</h2> |
||||
|
|
||||
|
<ol> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ol> |
||||
|
|
||||
|
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> |
||||
|
|
||||
|
<h3>Header Level 3</h3> |
||||
|
|
||||
|
<ul> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ul> |
||||
|
<h1>HTML Ipsum Presents</h1> |
||||
|
|
||||
|
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> |
||||
|
|
||||
|
<h2>Header Level 2</h2> |
||||
|
|
||||
|
<ol> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ol> |
||||
|
|
||||
|
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> |
||||
|
|
||||
|
<h3>Header Level 3</h3> |
||||
|
|
||||
|
<ul> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ul> |
||||
|
<h1>HTML Ipsum Presents</h1> |
||||
|
|
||||
|
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> |
||||
|
|
||||
|
<h2>Header Level 2</h2> |
||||
|
|
||||
|
<ol> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ol> |
||||
|
|
||||
|
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> |
||||
|
|
||||
|
<h3>Header Level 3</h3> |
||||
|
|
||||
|
<ul> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ul> |
||||
|
<h1>HTML Ipsum Presents</h1> |
||||
|
|
||||
|
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p> |
||||
|
|
||||
|
<h2>Header Level 2</h2> |
||||
|
|
||||
|
<ol> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ol> |
||||
|
|
||||
|
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote> |
||||
|
|
||||
|
<h3>Header Level 3</h3> |
||||
|
|
||||
|
<ul> |
||||
|
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li> |
||||
|
<li>Aliquam tincidunt mauris eu risus.</li> |
||||
|
</ul> |
||||
|
|
||||
|
<pre><code> |
||||
|
#header h1 a { |
||||
|
display: block; |
||||
|
width: 300px; |
||||
|
height: 80px; |
||||
|
} |
||||
|
</code></pre> |
||||
|
|
||||
|
<script src="https://cdn.socket.io/4.5.3/socket.io.min.js"></script> |
||||
|
<script> |
||||
|
const socket = io(); |
||||
|
|
||||
|
let lastX = -1; |
||||
|
let lastY = -1; |
||||
|
|
||||
|
let mousePath = []; |
||||
|
|
||||
|
let scanInterval = 200; |
||||
|
let lastScan = -1; |
||||
|
let startTime = Date.now(); |
||||
|
|
||||
|
let uuid = crypto.randomUUID(); |
||||
|
|
||||
|
function shouldScan() { |
||||
|
let now = Date.now(); |
||||
|
if (now - lastScan > scanInterval) { |
||||
|
lastScan = now; |
||||
|
return true; |
||||
|
} |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
// scan mouse position every scanInterval milliseconds and add to path array |
||||
|
document.addEventListener('mousemove', onMouseMove); |
||||
|
document.onwheel = onScroll; |
||||
|
|
||||
|
function onMouseMove(e) { |
||||
|
if (shouldScan()) { |
||||
|
let x = e.pageX; |
||||
|
let y = e.pageY; |
||||
|
|
||||
|
console.log("scanned mouse, coords are: " + x + ", " + y); |
||||
|
// important to remember: these coordinates are relative to the PAGE, not the viewport |
||||
|
|
||||
|
mousePath.push({ |
||||
|
x: x, |
||||
|
y: y, |
||||
|
distance: Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2)), |
||||
|
time: Date.now() - startTime, |
||||
|
path: window.location.origin + window.location.pathname, |
||||
|
uuid: uuid |
||||
|
}); |
||||
|
lastX = x; |
||||
|
lastY = y; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// calculate the x and y from the delta values in the scroll event |
||||
|
function onScroll(e) { |
||||
|
if (lastX === -1 && lastY === -1) { |
||||
|
console.log("no mouse position to calculate from, skipping scroll event"); |
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
let x = lastX + e.deltaX; |
||||
|
let y = lastY + e.deltaY; |
||||
|
|
||||
|
console.log("scanned scroll, coords are: " + x + ", " + y + " (deltaX: " + e.deltaX + ", deltaY: " + e.deltaY + ")"); |
||||
|
|
||||
|
mousePath.push({ |
||||
|
x: x, |
||||
|
y: y, |
||||
|
distance: Math.sqrt(Math.pow(x - lastX, 2) + Math.pow(y - lastY, 2)), |
||||
|
time: Date.now() - startTime, |
||||
|
uuid: uuid |
||||
|
}); |
||||
|
lastX = x; |
||||
|
lastY = y; |
||||
|
} |
||||
|
|
||||
|
// send path array to server in regular interval |
||||
|
setInterval(() => { |
||||
|
if (mousePath.length > 0) { |
||||
|
socket.emit('movement', mousePath); |
||||
|
mousePath = []; |
||||
|
} |
||||
|
}, 2000); |
||||
|
</script> |
||||
|
<script> |
||||
|
function linearInterpolate(x1, x2, y1, y2, travel_time, elapsed) { |
||||
|
if (elapsed > travel_time) { |
||||
|
return { x: x2, y: y2 }; |
||||
|
} |
||||
|
|
||||
|
let totalXtoCover = Math.abs(x2 - x1); |
||||
|
let totalYtoCover = Math.abs(y2 - y1); |
||||
|
|
||||
|
let interpolatedX, interpolatedY; |
||||
|
|
||||
|
if (x1 < x2) { |
||||
|
interpolatedX = x1 + (totalXtoCover / travel_time) * elapsed; |
||||
|
} else { |
||||
|
interpolatedX = x1 - (totalXtoCover / travel_time) * elapsed; |
||||
|
} |
||||
|
|
||||
|
if (y1 < y2) { |
||||
|
interpolatedY = y1 + (totalYtoCover / travel_time) * elapsed; |
||||
|
} else { |
||||
|
interpolatedY = y1 - (totalYtoCover / travel_time) * elapsed; |
||||
|
} |
||||
|
|
||||
|
return { x: interpolatedX, y: interpolatedY }; |
||||
|
} |
||||
|
|
||||
|
let userPaths = []; |
||||
|
|
||||
|
let canvas = document.getElementById("mousecanvas"); |
||||
|
canvas.width = document.body.clientWidth; |
||||
|
canvas.height = document.body.clientHeight; |
||||
|
|
||||
|
socket.on("pathsync", function(paths) { |
||||
|
if (paths == null || paths === undefined) { |
||||
|
return; |
||||
|
} |
||||
|
console.log("received pathsync event, path count: " + Object.keys(paths).length); |
||||
|
|
||||
|
userPaths = paths; |
||||
|
}); |
||||
|
|
||||
|
let cursorImage = new Image(); |
||||
|
cursorImage.src = "/cursor.svg"; |
||||
|
|
||||
|
let ctx = canvas.getContext("2d"); |
||||
|
|
||||
|
function render() { |
||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
||||
|
|
||||
|
let topOffset = canvas.getBoundingClientRect().top; |
||||
|
|
||||
|
// iterate over paths, interpolate and build cursor positions for the current time (only one image per cursor) |
||||
|
let cursorPositions = []; |
||||
|
for (let key in userPaths) { |
||||
|
let path = userPaths[key]; |
||||
|
let cursorPosition = { x: 0, y: 0, lastPoint: 0, path: path[0].path, uuid: path[0].uuid }; |
||||
|
|
||||
|
for (let j = 0; j < path.length; j++) { |
||||
|
let point = path[j]; |
||||
|
let nextPoint = path[j + 1]; |
||||
|
|
||||
|
if (nextPoint && nextPoint.time < Date.now() - startTime) { |
||||
|
continue; |
||||
|
} |
||||
|
|
||||
|
if (nextPoint) { |
||||
|
// get the elapsed time spent between the two points |
||||
|
let elapsed = Date.now() - startTime - point.time; |
||||
|
let travel_time = nextPoint.time - point.time; |
||||
|
|
||||
|
let interpolated = linearInterpolate(point.x, nextPoint.x, point.y, nextPoint.y, travel_time, elapsed); |
||||
|
|
||||
|
cursorPosition.x = interpolated.x; |
||||
|
cursorPosition.y = interpolated.y; |
||||
|
cursorPosition.lastPoint = nextPoint.time; |
||||
|
|
||||
|
break |
||||
|
} else { |
||||
|
cursorPosition.x = point.x; |
||||
|
cursorPosition.y = point.y; |
||||
|
cursorPosition.lastPoint = point.time; |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
cursorPositions.push(cursorPosition); |
||||
|
} |
||||
|
|
||||
|
// remove cursors with a timestamp older than 1 second |
||||
|
let filteredPaths = cursorPositions.filter(cursor => Date.now() - startTime - cursor.lastPoint < 1000); |
||||
|
|
||||
|
// filter out any paths not matching the current path |
||||
|
filteredPaths = filteredPaths.filter(path => path.path === window.location.origin + window.location.pathname); |
||||
|
|
||||
|
// filter out own cursor |
||||
|
filteredPaths = filteredPaths.filter(path => path.uuid !== uuid); |
||||
|
|
||||
|
filteredPaths.forEach((cursor) => { |
||||
|
ctx.drawImage(cursorImage, cursor.x, cursor.y - topOffset); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
setInterval(render, 1000 / 30); |
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,49 @@ |
|||||
|
const express = require('express'); |
||||
|
const app = express(); |
||||
|
const http = require('http'); |
||||
|
const cors = require("cors"); |
||||
|
const server = http.createServer(app); |
||||
|
const { Server } = require("socket.io"); |
||||
|
const io = new Server(server, { |
||||
|
cors: { |
||||
|
origin: true, |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
app.use(cors()); |
||||
|
|
||||
|
app.get('/', (req, res) => { |
||||
|
res.sendFile(__dirname + '/index.html'); |
||||
|
}); |
||||
|
|
||||
|
app.get("/cursor.svg", (req, res) => { |
||||
|
res.sendFile(__dirname + "/cursor.svg"); |
||||
|
}); |
||||
|
|
||||
|
let paths = {}; |
||||
|
|
||||
|
io.on('connection', (socket) => { |
||||
|
console.log('a user connected'); |
||||
|
|
||||
|
let userid = socket.id; |
||||
|
|
||||
|
// take stream of movement packet, append as necessary
|
||||
|
socket.on('movement', (data) => { |
||||
|
if (paths[userid] === undefined) { |
||||
|
paths[userid] = data; |
||||
|
} else { |
||||
|
paths[userid] = paths[userid].concat(data); |
||||
|
} |
||||
|
console.log(paths); |
||||
|
|
||||
|
}); |
||||
|
|
||||
|
// send old paths to new user
|
||||
|
setInterval(() => { |
||||
|
socket.emit('pathsync', paths); |
||||
|
}, 1000); |
||||
|
}); |
||||
|
|
||||
|
server.listen(3000, () => { |
||||
|
console.log('listening on *:3000'); |
||||
|
}); |
||||
File diff suppressed because it is too large
@ -0,0 +1,16 @@ |
|||||
|
{ |
||||
|
"name": "server", |
||||
|
"version": "1.0.0", |
||||
|
"description": "", |
||||
|
"main": "index.js", |
||||
|
"scripts": { |
||||
|
"test": "echo \"Error: no test specified\" && exit 1" |
||||
|
}, |
||||
|
"author": "", |
||||
|
"license": "ISC", |
||||
|
"dependencies": { |
||||
|
"cors": "^2.8.5", |
||||
|
"express": "^4.18.2", |
||||
|
"socket.io": "^4.5.3" |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue