lasercat-workshop
Version:
Cats & Lasers & johnny-five
58 lines (54 loc) • 1.39 kB
HTML
<html>
<head>
<title>LaserCat</title>
<style>
div#main {
position: absolute;
top: 50%;
left: 50%;
background: #ccc;
width: 500px;
height: 500px;
margin: -250px 0 0 -250px;
}
div#marker {
position: absolute;
top: 250px;
left: 250px;
background: #911;
width: 8px;
height: 8px;
border-radius: 50%;
margin: -4px 0 0 -4px;
}
</style>
</head>
<body>
<div id="main"></div>
<div id="marker"></div>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://localhost:9582/socket.io/socket.io.js"></script>
<script>
(function () {
var main = $("#main")
var marker = $("#marker")
var socket = io("http://localhost:9582")
socket.on('connect', function(s) {
console.log('connected')
})
main.mousemove(function (e) {
var offset = main.offset()
var x = e.pageX - offset.left
var y = e.pageY - offset.top
marker.css({left: x, top: y})
socket.emit("x", map(x, 0, 500, 180, 0))
socket.emit("y", map(y, 0, 500, 0, 180))
})
function map (n, fromLow, fromHigh, toLow, toHigh) {
return (n - fromLow) * (toHigh - toLow) / (fromHigh - fromLow) + toLow
}
})()
</script>
</body>
</html>