You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <title>Graphische Datenverarbeitung - Math - Matrix</title> <script type="text/javascript" src="matrix.bundle.js"></script> <link rel="icon" type="image/png" href="ai-logo.png"></head>
<body> <nav class="navbar navbar-light bg-light"> <div class="container"> <a class="navbar-brand" href="/index.html"> <img src="ai-logo.png" width="30" height="30" class="d-inline-block align-top" alt=""> Graphische Datenverarbeitung </a> <div class="navbar-brand">Matrix</div> </div> </nav> <br> <div class="container"> <div class="row"> <figure class="figure col-sm-8"> <canvas id="result" class="figure-img mx-auto d-block" width="500" height="500"></canvas> <figcaption class="figure-caption text-center"> Implement the Matrix class. You may use the sliders to transform the sphere's midpoint </figcaption> </figure> <div class="col-sm-4"> <div class="form-group text-left col-sm-12"> <input class="form-check-input" type="checkbox" id="userotation"></input> <label class="form-check-label" for="rotation">Rotation</label> <input class="form-control-range" type="range" min="0" max="6.28318" step="0.01" id="rotation" disabled></input> </div> <div class="form-group text-left col-sm-12"> <input class="form-check-input" type="checkbox" id="usetranslation"></input> <label class="form-check-label" for="translation">Translation X</label> <input class="form-control-range" type="range" min="-1" max="1" step="0.02" id="translation" disabled></input> <p> Translation is done before rotation. Therefore the translate direction might be different from what you expect. </p> </div> <div class="form-group text-left col-sm-12"> <input class="form-check-input" type="checkbox" id="usescale"></input> <label class="form-check-label" for="scale">Scale</label> <input class="form-control-range" type="range" min="1" max="2" step="0.01" id="scale" disabled></input> <p> We only scale the sphere midpoint positions. The slider is from 1 to 2. The camera is in the origin. Scaling to 2 will move the spheres further away from the camera. </p> </div> </div> </div> </div></body>
</html>
|
