aboutsummaryrefslogtreecommitdiff
path: root/src/main/resources
diff options
context:
space:
mode:
authorJames Barnett <noreply@jamesbarnett.xyz>2020-12-30 23:13:40 +0000
committerJames Barnett <noreply@jamesbarnett.xyz>2020-12-30 23:13:40 +0000
commit3c3322ef1a7aca3517ff94f723004fb809dec6cd (patch)
treefd195eeedbb03cea8b25795b5e3c8fcf1a10c05c /src/main/resources
parentc05b68f786715b20d0a9aef6538141c4227642ae (diff)
downloadkotlin-raycaster-3c3322ef1a7aca3517ff94f723004fb809dec6cd.tar.xz
kotlin-raycaster-3c3322ef1a7aca3517ff94f723004fb809dec6cd.zip
Add adjustable render options. Update UI
Diffstat (limited to 'src/main/resources')
-rw-r--r--src/main/resources/index.html81
-rw-r--r--src/main/resources/style.css45
2 files changed, 113 insertions, 13 deletions
diff --git a/src/main/resources/index.html b/src/main/resources/index.html
index f224a2e..9dd0d5f 100644
--- a/src/main/resources/index.html
+++ b/src/main/resources/index.html
@@ -3,20 +3,78 @@
<head>
<meta charset="UTF-8">
<title>Kotlin Raycaster</title>
- <style>
- .texture-definition {
- display: none;
- }
- #minimap {
- transform: rotate(180deg);
- }
- </style>
+ <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
+ <link rel="stylesheet" href="style.css">
</head>
<body>
+ <div class="container grid-xl">
+ <div class="columns">
+ <div class="column col-xl-12">
+ <div id="output-wrapper" class="loading loading-lg">
+ <canvas id="render-output"></canvas>
+ <canvas id="minimap"></canvas>
+ </div>
+ </div>
+ <div class="column">
+ <div class="columns controls">
+ <div class="column col-12 col-xl-3">
+ <p>A simple <a href="https://en.wikipedia.org/wiki/Ray_casting">raycasting</a> engine written from scratch in Kotlin (transpiled to JS), rendered using only vertical lines drawn on an HTML5 canvas. The source is on <a href="https://github.com/jamesbarnett91/kotlin-raycaster">GitHub</a>.</p>
+ <p>The raycasting rendering method was used in early 90's 3D games, most famously <a href="https://en.wikipedia.org/wiki/Wolfenstein_3D">Wolfenstein 3D</a>.</p>
+ <p>Use WASD to move, or the arrow buttons on mobile.</p>
+ </div>
+ <div class="column col-12 col-xl-1 hide-xl">
+ <div class="divider"></div>
+ </div>
+ <div class="divider-vert show-xl"></div>
+ <div class="column col-12 col-xl-5">
+ <div class="form-group">
+ <label class="form-label label-sm" for="texture-set">Texture set</label>
+ <select id="texture-set" class="form-select select-sm">
+ <option value="wolf3d" selected>Wolfenstein 3D</option>
+ <option value="doom">Doom E1M1</option>
+ <option value="none">None</option>
+ </select>
+ </div>
+ <div class="form-group">
+ <label class="form-label label-sm" for="fov">FOV</label>
+ <div class="input-group">
+ <input id="fov" class="slider" type="range" min="5" max="360" value="90" step="5">
+ <span id="fov-value" class="input-group-addon">90</span>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="form-label label-sm" for="raycast-precision">Precision</label>
+ <div class="input-group">
+ <input id="raycast-precision" class="slider" type="range" min="1" max="150" value="64" step="1">
+ <span id="raycast-precision-value" class="input-group-addon">64</span>
+ </div>
+ </div>
+ <div class="form-group">
+ <label class="form-switch">
+ <input id="minimap-toggle" type="checkbox" checked>
+ <i class="form-icon"></i> Show minimap
+ </label>
+ </div>
+ <div class="form-group">
+ <label class="form-switch">
+ <input id="fisheye-fix" type="checkbox">
+ <i class="form-icon"></i> Fix fisheye (requires low FOV and high precision)
+ </label>
+ </div>
+ <button id="left" class="btn">←</button>
+ <button id="up" class="btn">↑</button>
+ <button id="down" class="btn">↓</button>
+ <button id="right" class="btn">→</button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
<img data-texture-id="1" src="textures/wolf3d/wall-stone-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
<img data-texture-id="2" src="textures/wolf3d/wall-stone-2.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
<img data-texture-id="3" src="textures/wolf3d/wall-wood-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
- <img data-texture-id="4" src="textures/wolf3d/wall-wood-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
+ <img data-texture-id="4" src="textures/wolf3d/wall-wood-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d"> <!-- Reuse texture 3 -->
<img data-texture-id="5" src="textures/wolf3d/wall-wood-2.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
<img data-texture-id="7" src="textures/wolf3d/wall-blue-1.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
<img data-texture-id="6" src="textures/wolf3d/wall-blue-2.png" data-width="64" data-height="64" class="texture-definition" data-set="wolf3d">
@@ -33,10 +91,7 @@
<img data-texture-id="8" src="textures/doom/wall-stone-3.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
<img data-texture-id="9" src="textures/doom/door.png" data-width="64" data-height="64" class="texture-definition" data-set="doom">
- <select id="texture-set">
- <option value="wolf3d" selected>Wolfenstein 3D</option>
- <option value="doom">Doom E1M1</option>
- </select>
+ <img data-texture-id="1" src="textures/blank.png" data-width="64" data-height="64" class="texture-definition" data-set="none">
<script src="kotlin-raycaster.js"></script>
</body>
diff --git a/src/main/resources/style.css b/src/main/resources/style.css
new file mode 100644
index 0000000..c8b7d92
--- /dev/null
+++ b/src/main/resources/style.css
@@ -0,0 +1,45 @@
+body {
+ margin: 0.5em;
+ font-size: 15px;
+}
+
+p {
+ margin: 0 0 0.8em;
+}
+
+.texture-definition {
+ display: none;
+}
+
+#minimap {
+ transform: rotate(180deg);
+ position: absolute;
+ left: 0;
+ top: 0;
+ padding: 10px;
+}
+
+#output-wrapper {
+ position: relative;
+ width: 960px;
+ height: 720px;
+}
+
+.controls {
+ /*max-width: 20em;*/
+}
+
+.slider {
+ margin-right: 0.5em;
+ width: 100%;
+}
+
+.form-switch {
+ font-size: 0.9em;
+}
+
+.btn {
+ height: 3em;
+ width: 23%;
+ touch-action: manipulation;
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2026-05-10 15:40:23 +0000