Skip to content

Instantly share code, notes, and snippets.

@benptc

benptc/index-continuous-colors.html

Last active March 31, 2020 16:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save benptc/1b7c1d082c543d29256948eaedc9bf37 to your computer and use it in GitHub Desktop.
Save benptc/1b7c1d082c543d29256948eaedc9bf37 to your computer and use it in GitHub Desktop.
Download ZIP
Context-dependent Tools - Demo 1
Raw
index-continuous-colors.html
<!-- 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