Move the mouse over the screen and the ‘hallway’ will move along with it.
I made another version of this that uses your camera and facial recognition to controlled the perspective. It only works over https, so it’s hosted directly on GitHub: Prespective Tests
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin: 0; position: fixed; top: 0; right: 0; bottom: 0; left: 0; }
</style>
</head>
<body>
<script>
var width = innerWidth,
height = innerHeight,
center = [width/2, height/2],
dimX = width/20,
dimY = height/10;
var hallData = [
{wall: "top", gradient: ["y1", "y2"], outer: [[0, 0], [width, 0]]},
{wall: "right", gradient: ["x2", "x1"], outer: [[width, 0], [width, height]]},
{wall: "bottom", gradient: ["y2", "y1"], outer: [[width, height], [0, height]]},
{wall: "left", gradient: ["x1", "x2"], outer: [[0, height], [0, 0]]}
];
var scaleX = d3.scaleLinear().domain([0,width/4]).range([0,width]);
var scaleY = d3.scaleLinear().domain([0, height/4]).range([height, 0]);
var svg = d3.select("body").append("svg")
.style("border", "1px black solid")
.attr("width", width)
.attr("height", height)
.on("mousemove", mouseMoved)
.on("mouseout", returnToCenter);
var gradients = svg.append("defs").selectAll("linearGradient")
.data(hallData)
.enter().append("linearGradient")
.each(function(d) {
d3.select(this)
.attr("id", "gradient" + d.wall)
.attr(d.gradient[0], "0%")
.attr(d.gradient[1], "100%")
});
gradients.append("stop")
.attr("offset", "0%")
.attr("stop-color", "steelblue")
.attr("stop-opacity", 1);
gradients.append("stop")
.attr("offset", "90%")
.attr("stop-color", "black")
.attr("stop-opacity", 1);
var door = svg.append("polygon")
.style("fill", "black");
var hallway = svg.append("g").selectAll("polygon")
.data(hallData)
.enter().append("polygon")
.style("stroke", "black")
.style("fill", function(d) {return "url(#gradient" + d.wall + ")"});
function returnToCenter() {
center = [width/2, height/2]
updateCenter(500)
}
function mouseMoved() {
center = [d3.event.x, d3.event.y]
updateCenter()
}
updateCenter();
function doorFrame() {
return [[center[0] - dimX, center[1] - dimY],
[center[0] + dimX, center[1] - dimY],
[center[0] + dimX, center[1] + dimY],
[center[0] - dimX, center[1] + dimY]]
};
function hallPoints(d, i) {
return [...d.outer, doorFrame()[(i+1)%4], doorFrame()[i]]
};
function updateCenter(dur = 0) {
door.transition().duration(dur)
.attr("points", doorFrame)
hallway.transition().duration(dur)
.attr("points", hallPoints)
}
webgazer.setRegression('ridge')
.setTracker('clmtrackr')
.begin()
var setup = function() {
var video = document.getElementById('webgazerVideoFeed');
video.style.display = 'block';
video.style.position = 'absolute';
video.width = width/4;
video.height = height/4;
video.style.top = video.style.left = video.style.margin = 0;
webgazer.params.imgWidth = width/4;
webgazer.params.imgHeight = height/4;
var overlay = document.createElement('canvas');
overlay.id = 'overlay';
overlay.style.position = 'absolute';
overlay.width = width/4;
overlay.height = height/4;
overlay.style.top = overlay.style.left = overlay.style.margin = 0;
document.body.appendChild(overlay);
var cl = webgazer.getTracker().clm;
function drawLoop() {
requestAnimFrame(drawLoop);
overlay.getContext('2d').clearRect(0,0,width,height);
if (cl.getCurrentPosition()) {
cl.draw(overlay);
var coords = cl.getCurrentPosition()
var x = d3.mean(coords, function(d) {return d[0]})
var y = d3.mean(coords, function(d) {return d[1]})
center = [scaleX(x), scaleY(y)];
updateCenter();
}
}
drawLoop();
};
function checkIfReady() {
if (webgazer.isReady()) {
setup();
} else {
d3.timeout(checkIfReady, 100);
}
}
d3.timeout(checkIfReady,100);
window.onbeforeunload = function() {
window.localStorage.clear();
}
</script>
</body>
</html>