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.

43 lines
1.5 KiB

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Graphische Datenverarbeitung - 2D - Bresenham</title>
  6. <script type="text/javascript" src="bresenham.bundle.js"></script>
  7. <link rel="icon" type="image/png" href="ai-logo.png">
  8. </head>
  9. <body>
  10. <nav class="navbar navbar-light bg-light">
  11. <div class="container">
  12. <a class="navbar-brand" href="/index.html">
  13. <img src="ai-logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
  14. Graphische Datenverarbeitung
  15. </a>
  16. <div class="navbar-brand">Bresenham</div>
  17. </div>
  18. </nav>
  19. <br>
  20. <div class="container">
  21. <div class="row">
  22. <figure class="figure col-sm-6">
  23. <canvas id="result" class="figure-img mx-auto d-block" width="300" height="300"></canvas>
  24. <figcaption class="figure-caption text-center">
  25. Implement the Bresenham algorithm to create a rotating line
  26. </figcaption>
  27. </figure>
  28. <figure class="col-sm-6 figure">
  29. <canvas id="original" class="figure-img mx-auto d-block" width="300" height="300"></canvas>
  30. <figcaption class="figure-caption text-center">
  31. Reference image. The reference uses the build-in line drawing functionality
  32. and is smoothed. Your line will look a bit more jagged.
  33. </figcaption>
  34. </figure>
  35. </div>
  36. </div>
  37. </body>
  38. </html>