From 30d64a29426ba1c26d27c8d5f90e701ac834c7dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Norman=20K=C3=B6hring?= Date: Wed, 25 Jan 2023 11:53:01 +0100 Subject: [PATCH] raise visibility with a lot of stars --- index.html | 10 ++++++-- src/main.ts | 20 +++++++--------- src/stars.ts | 67 +++++++++++++++++++++++++++++----------------------- 3 files changed, 53 insertions(+), 44 deletions(-) diff --git a/index.html b/index.html index e2ebea8..bc8d8e2 100644 --- a/index.html +++ b/index.html @@ -27,10 +27,10 @@ backdrop-filter: blur(4px); border-right: 2px solid #336; transform: translate(0, 0); - transition: transform .2 ease; + transition: transform .2s ease-out; } #info.hidden { - transform: translate(-20rem, 0); + transform: translate(-22rem, 0); } label { position: fixed; @@ -44,9 +44,15 @@ background: #0008; line-height: 1; cursor: pointer; + transition: opacity .2s ease; } label.highlighted { color: yellow; + z-index: 10000; + } + label.dimmed { + opacity: .3; + z-index: 0; } diff --git a/src/main.ts b/src/main.ts index 5310c8f..4fb3c84 100644 --- a/src/main.ts +++ b/src/main.ts @@ -57,8 +57,8 @@ async function init() { pointer.y = -(event.clientY / window.innerHeight) * 2 + 1 }) document.addEventListener('click', () => { - for (let star of stars.children) { - ;(star as Star).highlighted = false + for (let star of stars.children as Star[]) { + star.highlighted = false } let closest: Intersection> | null = null @@ -83,12 +83,12 @@ async function init() { } }) - for (let child of stars.children) { - ;(child as Star).labelEl.addEventListener('click', (event) => { + for (let child of stars.children as Star[]) { + child.labelEl.addEventListener('click', (event) => { event.stopPropagation() - for (let star of stars.children) { - ;(star as Star).highlighted = false + for (let star of stars.children as Star[]) { + star.highlighted = false } const star = child as Star @@ -108,15 +108,11 @@ async function init() { const distanceToPlane = camera.position.distanceTo(plane.children[0].position) - // update label positions in HTML space + // updating HTML space and the stars' color // Attention: This has to happen after the render call, to avoid flickering for (let star of stars.children as Star[]) { star.setLabelPos(camera, w, h) - if (camera.position.distanceTo(star.coords) > distanceToPlane) { - star.dimLabel() - } else { - star.undimLabel() - } + star.dimmed = camera.position.distanceTo(star.coords) > distanceToPlane } }) diff --git a/src/stars.ts b/src/stars.ts index a548366..404c62a 100644 --- a/src/stars.ts +++ b/src/stars.ts @@ -26,11 +26,10 @@ export class Star extends Group { public starData: StarData public labelEl = document.createElement('label') - private labelDimmed = false - public coords = new Vector3() private isHighlighted = false + private isDimmed = false private normalPointSize: number private highlightedPointSize: number @@ -39,9 +38,11 @@ export class Star extends Group { private pointGeometry = new BufferGeometry() private whiteColor = new Float32BufferAttribute([255, 255, 255], 3) + private grayColor = new Float32BufferAttribute([51, 51, 51], 3) private yellowColor = new Float32BufferAttribute([255, 255, 0], 3) private point: Points + private pole: Line constructor(starData: StarData, maxRadius: number) { super() @@ -59,9 +60,9 @@ export class Star extends Group { const tangentialCoords = new Vector3(x, 0, z) // distance indicator / pole - const poleLine = new Line(new BufferGeometry(), this.lineMaterial) - poleLine.geometry.setFromPoints([this.coords, tangentialCoords]) - this.add(poleLine) + this.pole = new Line(new BufferGeometry(), this.lineMaterial) + this.pole.geometry.setFromPoints([this.coords, tangentialCoords]) + this.add(this.pole) // the actual "star" const coords = [this.coords.x, this.coords.y, this.coords.z] @@ -79,13 +80,28 @@ export class Star extends Group { container.appendChild(this.labelEl) } - private setHighlight(isHighlight = true) { - const color = isHighlight ? this.yellowColor : this.whiteColor - this.pointGeometry.setAttribute('color', color) - this.pointMaterial.setValues({ - size: isHighlight ? this.highlightedPointSize : this.normalPointSize, - }) - this.labelEl.classList.toggle('highlighted', isHighlight) + private setAttributes() { + if (this.isDimmed && !this.isHighlighted) { + this.pointMaterial.setValues({ size: this.normalPointSize }) + this.pointGeometry.setAttribute('color', this.grayColor) + this.lineMaterial.setValues({ color: 0x333333 }) + this.labelEl.classList.remove('highlighted') + this.labelEl.classList.add('dimmed') + this.labelEl.style.zIndex = '0' // dimmed always in the back + } else if (this.isHighlighted) { + this.pointGeometry.setAttribute('color', this.yellowColor) + this.pointMaterial.setValues({ size: this.highlightedPointSize }) + this.lineMaterial.setValues({ color: 0xffff00 }) + this.labelEl.classList.remove('dimmed') + this.labelEl.classList.add('highlighted') + this.labelEl.style.zIndex = '10000' // highlights always on top + } else { + this.pointGeometry.setAttribute('color', this.whiteColor) + this.pointMaterial.setValues({ size: this.normalPointSize }) + this.lineMaterial.setValues({ color: 0xffffff }) + this.labelEl.classList.remove('highlighted') + this.labelEl.classList.remove('dimmed') + } } public get highlighted() { @@ -94,12 +110,16 @@ export class Star extends Group { public set highlighted(isHighlighted) { this.isHighlighted = isHighlighted - this.setHighlight(isHighlighted) + this.setAttributes() } - public toggleHighlight() { - this.isHighlighted = !this.isHighlighted - this.setHighlight(this.isHighlighted) + public get dimmed() { + return this.isDimmed + } + + public set dimmed(isDimmed) { + this.isDimmed = isDimmed + this.setAttributes() } public setLabelPos(camera: Camera, width: number, height: number) { @@ -112,24 +132,11 @@ export class Star extends Group { this.labelEl.style.transform = `translate(${pos.x}px, ${pos.y}px)` - if (this.labelDimmed) { - this.labelEl.style.zIndex = '0' - } else { + if (!this.isDimmed && !this.isHighlighted) { const zIndex = `${10000000 - Math.round(pos.z * 10000000)}` // ridiculous this.labelEl.style.zIndex = zIndex } } - - public dimLabel() { - this.labelDimmed = true - this.labelEl.style.opacity = '0.3' - this.labelEl.style.zIndex = '0' - } - - public undimLabel() { - this.labelEl.style.opacity = '1' - this.labelDimmed = false - } } export async function renderStars(maxRadius: number) {