Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Context-dependent Tools - Demo 1
<!-- Adjust a continuous property based on distance -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="objectDefaultFiles/object.js"></script>
<script src="objectDefaultFiles/pep.min.js"></script>
<meta charset="UTF-8">
<title>randomColor</title>
<style>
#container {
width: 290px;
height: 290px;
border: 5px solid black;
border-radius: 50%;
}
</style>
</head>
<body style="width: 300px; height: 300px">
<div id="container"></div>
<script>
let realityInterface = new RealityInterface();
let container = document.getElementById('container');
function setColor(hue) {
container.style.backgroundColor = 'hsl(' + hue + ', 90%, 70%)';
}
realityInterface.subscribeToMatrix();
realityInterface.addMatrixListener(function(modelView, _projection) {
var scaleFactor = Math.abs(modelView[0]);
var zDistance = Math.abs(modelView[14]);
let closeDistance = 500 * scaleFactor;
let farDistance = 1000 * scaleFactor;
let percentage = Math.max(0, Math.min(1, (zDistance - closeDistance) / (farDistance - closeDistance)));
let newHue = Math.round(percentage * 255);
setColor(newHue);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.