SOF-7354: more experiment with colors

src/mixins/atoms.js

@@ -97,23 +97,35 @@ export const AtomsMixin = (superclass) =>
                 });
                 sphereMesh.name = `${element}-${atomicIndex}`;
                 sphereMesh.nameWithLabel = `${elementsWithLabelsArray[atomicIndex]}`;
-
                 // set glow according to the labels, currently only single digit
                 // numeric labels are allowed, in practice we expect only two
                 // different labels: 1 and 2 for up and down spin representations
+                const atomColor = this.getAtomColorByElement(element).toLowerCase();
+                const atomHSL = {};
+                new THREE.Color(atomColor).getHSL(atomHSL);
                 const label = parseInt(atomicLabelsArray[atomicIndex], 10) || 0;
                 let hue;
                 if (label !== 0) {
                     if (label % 2 === 0) {
                         // even labels
-                        hue = (label * 0.1) / 2; // [0.1, 0.4]
+                        hue = atomHSL.h + (label * 0.05) / 2;
                     } else {
                         // odd labels
-                        hue = 0.9 - ((label - 1) * 0.1) / 2; // [0.9, 0.5]
+                        hue = atomHSL.h - ((label + 1) * 0.05) / 2;
+                    }
+
+                    // hue is cyclic
+                    while (hue > 1) {
+                        hue -= 1;
                     }
-                    hue = Math.max(0, Math.min(1, hue)); // make sure bounds
+
+                    while (hue < 0) {
+                        hue += 1;
+                    }
+
+                    new THREE.Color(atomColor).setHSL(atomHSL);
                     sphereMesh.material.emissiveIntensity = 0.2;
-                    sphereMesh.material.emissive.setHSL(hue, 0.4, 0.5);
+                    sphereMesh.material.emissive.setHSL(hue, atomHSL.s, atomHSL.l);
                 }
                 atomsGroup.add(sphereMesh);
             });