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.
63 lines
2.8 KiB
63 lines
2.8 KiB
<!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>
|