Update colors and typography

5 files changed, 26 insertions, 13 deletions

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)
   };
 }