Update colors and typography

author: James Barnett <noreply@jamesbarnett.xyz> 2025-08-01 19:26:25 +0100
committer: James Barnett <noreply@jamesbarnett.xyz> 2025-08-01 19:26:25 +0100
commit: 4ed6cae45c96166f22b1d295bda12dd9913385a8 (patch)
tree: 453a52d77c370ba71a57ab3683d537dda52650b0
parent: abe1f21f84df5864e8a7781864d9e32436bde2d4 (diff)
download: js-raytracer-4ed6cae45c96166f22b1d295bda12dd9913385a8.tar.xz
js-raytracer-4ed6cae45c96166f22b1d295bda12dd9913385a8.zip
11 files changed, 147 insertions, 68 deletions
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..489fc48
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,113 @@
+@font-face {
+  font-family: 'tamzen';
+  src: url('./tamzen-8-r.ttf') format('truetype');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'tamzen';
+  src: url('./tamzen-8-b.ttf') format('truetype');
+  font-weight: bold;
+}
+
+body {
+  font-size: 16px;
+  line-height: 16px;
+  background: #0a0a0a;
+  color: #bbb;
+  font-family: 'tamzen', monospace;
+}
+
+.tab {
+  border-bottom: .05rem solid #a3a3a3;
+  font-size: 1.1em;
+}
+
+.tab .tab-item a {
+  border-bottom: .3rem solid transparent;
+}
+
+.divider-vert::before {
+  border-left: .05rem solid #a3a3a3;
+}
+
+.form-select:not([multiple]):not([size]) {
+  background: #000 url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center/.4rem .5rem;
+  font-size: 1em;
+}
+
+a {
+  font-weight: bold;
+}
+
+p {
+  margin: 0 0 0.8rem;
+}
+
+#output-wrapper {
+  margin-top: 0.5em;
+}
+
+#render-output {
+  width: 100%;
+  height: 65vmin;
+  object-fit: contain;
+}
+
+.controls {
+  margin-top: 0.5em;
+}
+
+.slider {
+  margin-right: 0.5em;
+  width: 100%;
+}
+
+.nested-slider {
+  padding-left: 40px;
+}
+
+.console {
+  height: 120px;
+  padding: 0 0 0 1em;
+  white-space: pre-line;
+}
+
+#res-label {
+  padding-bottom: 4px;
+  padding-top: 0px;
+  margin-top: -1px;
+  font-size: 15px;
+}
+
+.divider-vert {
+  padding: 0;
+}
+
+.render-option-heading {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.form-label.label-sm {
+  font-size: 1em;
+}
+
+.btn.btn-link {
+  font-weight: bold;
+  font-size: 1.1em;
+}
+
+.code code {
+  background: #333;
+  color: #dd0;
+  padding: 1em;
+}
+
+.score-col {
+  line-height: 1.8em;
+}
+
+#threads-value {
+  background: #0a0a0a;
+}
diff --git a/css/tamzen-8-b.ttf b/css/tamzen-8-b.ttf
new file mode 100644
index 0000000..b5eadcf
--- /dev/null
+++ b/css/tamzen-8-b.ttf
diff --git a/css/tamzen-8-r.ttf b/css/tamzen-8-r.ttf
new file mode 100644
index 0000000..b16c24b
--- /dev/null
+++ b/css/tamzen-8-r.ttf
diff --git a/index.html b/index.html
index 84494f5..b9095cb 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <title>Raytracer</title>
     <link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="css/style.css">
   </head>
   <body>
 
@@ -44,7 +44,7 @@
               </div>
               <div class="divider-vert"></div>
               <div class="column col-2">
-                <span>Render options</span>
+                <span class="render-option-heading">Render options</span>
                 <div class="form-group">
                   <label class="form-switch">
                     <input id="diffuse-toggle" type="checkbox" checked>
@@ -77,7 +77,7 @@
                 </div>
               </div>
               <div class="column col-3">
-                <span>Performance options</span>
+                <span class="render-option-heading">Performance options</span>
                 <div class="form-group">
                   <label class="form-switch">
                     <input id="direct-transfer" type="checkbox" checked>
@@ -165,15 +165,15 @@
                 </div>
                 <div class="columns">
                   <div class="column col-12" >
-                    <div class="h4">Score</div>
+                    <div class="h4 text-bold">Score</div>
                   </div>
                 </div>
-                <div class="columns">
-                  <div class="column col-6">
+                <div class="columns score-col">
+                  <div class="column col-6 text-bold">
                     <div>Multi-core</div>
                     <div id="multi-core-score" class="h1 loading-lg">-</div>
                   </div>
-                  <div class="column col-6">
+                  <div class="column col-6 text-bold">
                     <div>Single core</div>
                     <div id="single-core-score" class="h1 loading-lg">-</div>
                   </div>
diff --git a/src/RaytraceDispatcher.ts b/src/RaytraceDispatcher.ts
index 12f2502..b408bef 100644
--- a/src/RaytraceDispatcher.ts
+++ b/src/RaytraceDispatcher.ts
@@ -150,21 +150,18 @@ export class RaytraceDispatcher {
 
     let borderWidth = 0;
     if (this.context.height <= 720) {
-      borderWidth = 2;
+      borderWidth = 4;
     } else {
-      borderWidth = 5;
+      borderWidth = 8;
     }
 
-    const borderColour = new Colour(220, 128, 128);
-    const unrenderedAreaColour = new Colour(160, 160, 160);
-
     for (let y = 0; y < height; y++) {
       for (let x = 0; x < width; x++) {
 
         if (y < borderWidth || y >= (height-borderWidth) || x < borderWidth || x >= (width-borderWidth)) {
-          this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, borderColour);
+          this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, this.context.options.chunkBorderColour);
         } else {
-          this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, unrenderedAreaColour);
+          this.framebuffer.writePixelAt(chunk.xStart+x, chunk.yStart+y, this.context.options.chunkUnrenderedColour);
         }
 
       }
diff --git a/src/models/RaytraceContext.ts b/src/models/RaytraceContext.ts
index 1f22d32..b6ff1c1 100644
--- a/src/models/RaytraceContext.ts
+++ b/src/models/RaytraceContext.ts
@@ -41,6 +41,8 @@ export interface RaytracerOptions {
   directMemoryTransfer: boolean;
   chunkSize: number;
   chunkAllocationMode: ChunkAllocationMode;
+  chunkBorderColour: Colour,
+  chunkUnrenderedColour: Colour
 }
 
 export enum ChunkAllocationMode {
diff --git a/src/ui/benchmarkCharts.ts b/src/ui/benchmarkCharts.ts
index b4ebc87..d272567 100644
--- a/src/ui/benchmarkCharts.ts
+++ b/src/ui/benchmarkCharts.ts
@@ -48,10 +48,14 @@ const option: EChartsOption = {
         usersDevice: {
           color: "#5755d9",
           fontWeight: "bold",
-          fontSize: "14px"
+          fontSize: 20
         },
       },
+      fontSize: 16
     },
+    axisTick: {
+      length: 20
+    }
   },
   series: [
     {
@@ -74,16 +78,22 @@ const option: EChartsOption = {
   grid: {
     left: '0%',
     top: '5%',
+    bottom: '5%',
     containLabel: true
   },
   color: [
     '#5755d9',
     '#f1f1fc'
   ],
+  backgroundColor: "#0a0a0a",
+  textStyle: {
+    fontSize: 16,
+    fontFamily: "tamzen"
+  },
 }
 
 export function initScoreChart(dom: HTMLElement) {
-  scoreChart = echarts.init(dom);
+  scoreChart = echarts.init(dom, 'dark');
   scoreChart.setOption(option);
 
   window.addEventListener('resize', function() {
diff --git a/src/ui/benchmarkView.ts b/src/ui/benchmarkView.ts
index 487ec63..baba3e8 100644
--- a/src/ui/benchmarkView.ts
+++ b/src/ui/benchmarkView.ts
@@ -82,7 +82,7 @@ function initDispatcher(width: number, height: number, options: RaytracerOptions
     spheres,
     planes,
     lights,
-    new Colour(221, 221, 221),
+    new Colour(40, 40, 40),
     options
   );
 
@@ -106,6 +106,8 @@ function getBenchmarkRenderOptions(multiCore: boolean) {
     maxDrawDistance: 1000,
     directMemoryTransfer: true,
     chunkSize: 0,
-    chunkAllocationMode: ChunkAllocationMode.SEQUENTIAL
+    chunkAllocationMode: ChunkAllocationMode.SEQUENTIAL,
+    chunkBorderColour: new Colour(220, 128, 128),
+    chunkUnrenderedColour: new Colour(120, 120, 120)
   }
 }
diff --git a/src/ui/demoView.ts b/src/ui/demoView.ts
index e42696b..9b9c3c2 100644
--- a/src/ui/demoView.ts
+++ b/src/ui/demoView.ts
@@ -68,7 +68,7 @@ function initDispatcher(width: number, height: number, options: RaytracerOptions
     spheres,
     planes,
     lights,
-    new Colour(221, 221, 221),
+    new Colour(40, 40, 40),
     options
   );
 
@@ -92,7 +92,9 @@ function parseOptions(): RaytracerOptions {
     maxDrawDistance: 1000,
     directMemoryTransfer: getInputElement('direct-transfer').checked,
     chunkSize: parseInt(getInputElement('chunk-size').value, 10),
-    chunkAllocationMode: getChunkAllocationMode()
+    chunkAllocationMode: getChunkAllocationMode(),
+    chunkBorderColour: new Colour(220, 128, 128),
+    chunkUnrenderedColour: new Colour(120, 120, 120)
   };
 }
 
diff --git a/style.css b/style.css
deleted file mode 100644
index 9f3302e..0000000
--- a/style.css
+++ /dev/null
@@ -1,47 +0,0 @@
-body {
-  font-size: 15px;
-}
-
-p {
-  margin: 0 0 0.8rem;
-}
-
-#output-wrapper {
-  margin-top: 0.5em;
-}
-
-#render-output {
-  width: 100%;
-  height: 65vmin;
-  object-fit: contain;
-}
-
-.controls {
-  margin-top: 0.5em;
-}
-
-.slider {
-  margin-right: 0.5em;
-  width: 100%;
-}
-
-.nested-slider {
-  padding-left: 40px;
-}
-
-.console {
-  height: 120px;
-  padding: 0 0 0 1em;
-  white-space: pre-line;
-}
-
-#res-label {
-  padding-bottom: 4px;
-  padding-top: 0px;
-  margin-top: -1px;
-  font-size: 15px;
-}
-
-.divider-vert {
-  padding: 0;
-}
-\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 900a109..1162afd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -25,7 +25,7 @@ module.exports = {
     new CopyPlugin({
       patterns: [
         { from: 'index.html' },
-        { from: 'style.css' }
+        { from: 'css/*' }
       ],
     }),
   ],
author	James Barnett <noreply@jamesbarnett.xyz>	2025-08-01 19:26:25 +0100
committer	James Barnett <noreply@jamesbarnett.xyz>	2025-08-01 19:26:25 +0100
commit	4ed6cae45c96166f22b1d295bda12dd9913385a8 (patch)
tree	453a52d77c370ba71a57ab3683d537dda52650b0
parent	abe1f21f84df5864e8a7781864d9e32436bde2d4 (diff)
download	js-raytracer-4ed6cae45c96166f22b1d295bda12dd9913385a8.tar.xz js-raytracer-4ed6cae45c96166f22b1d295bda12dd9913385a8.zip