From 4ed6cae45c96166f22b1d295bda12dd9913385a8 Mon Sep 17 00:00:00 2001 From: James Barnett Date: Fri, 1 Aug 2025 19:26:25 +0100 Subject: Update colors and typography --- css/style.css | 113 ++++++++++++++++++++++++++++++++++++++++++ css/tamzen-8-b.ttf | Bin 0 -> 23540 bytes css/tamzen-8-r.ttf | Bin 0 -> 26228 bytes index.html | 14 +++--- src/RaytraceDispatcher.ts | 11 ++-- src/models/RaytraceContext.ts | 2 + src/ui/benchmarkCharts.ts | 14 +++++- src/ui/benchmarkView.ts | 6 ++- src/ui/demoView.ts | 6 ++- style.css | 47 ------------------ webpack.config.js | 2 +- 11 files changed, 147 insertions(+), 68 deletions(-) create mode 100644 css/style.css create mode 100644 css/tamzen-8-b.ttf create mode 100644 css/tamzen-8-r.ttf delete mode 100644 style.css 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 Binary files /dev/null and b/css/tamzen-8-b.ttf differ diff --git a/css/tamzen-8-r.ttf b/css/tamzen-8-r.ttf new file mode 100644 index 0000000..b16c24b Binary files /dev/null and b/css/tamzen-8-r.ttf differ diff --git a/index.html b/index.html index 84494f5..b9095cb 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Raytracer - + @@ -44,7 +44,7 @@
- Render options + Render options
- Performance options + Performance options
-
Score
+
Score
-
-
+
+
Multi-core
-
-
+
Single core
-
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/*' } ], }), ], -- cgit v1.2.3