Transition metal ions form complex ions with ligands.

The coordination number in a molecule is the number of atoms, molecules or ions bonded to it. The 3 relevant structures are listed below.

Coordination # = 4
Tetrahedral, Square Planar

Coordination # = 6
Octahedral

Denticity describes the number of interactions a ligand has with the transition metal ion. Monodentate refers to one bond, bidentate refers to two bonds.

Example: Ammonia based compounds [NH₃] is monodentate while oxalate [C₂O²⁻₄] and ethylenediamine [C₂H₄₂] based compounds are bidentate.

A coordination compound is a neutral compound that consists of a complex ion.

Optical isomerism occurs when a molecule is not superimposable with its mirror image.

Understanding other complex topics like cis-trans isomerism and octahedral propeller twist was not required and is omitted from this explanation.

Everything the script needs is found on runtime, tagged with an appropriate tag, and put into arrays.

// put the tagged models into arrays
arrayRoot = GameObject.FindGameObjectsWithTag("Root");
arrayInst = GameObject.FindGameObjectsWithTag("Instance");

Now that everything important are in arrays, initializing scripts can thus be done procedurally on the hierarchy. The touch control scripts are distributed to the root models and the instances are disabled.

// init root
foreach (GameObject goRoot in arrayRoot) {   
	if (goRoot.activeSelf) {
		goRoot.AddComponent<Lean.Touch.LeanDragTranslateEdited>();
		goRoot.AddComponent<Lean.Touch.LeanTwistRotateAxis>();
	}
}

// init instances
foreach (GameObject goInst in arrayInst) {
	if (goInst.activeSelf) {
		goInst.SetActive(false);
	}
}

Firstly we gather all the renderers and put it into an array. Finding the instance this way is preferred over using the existing array in case the instance array is not in the same order as the root array or missing a value.

// find the root's instance
GameObject goInst = goRoot.transform.parent.GetChild(1).gameObject;

// get the instance's renderers
Renderer[] rendComp = goRoot.GetComponentsInChildren(true);

A simple check can then be done on the array of renderers and as long as the first one returns true, we execute all the necessary scripts.

// look for rendered models
if (rendComp[0].enabled) {
	...
}

The active root and instance are repositioned using the two ResetPosRot methods.

// reset root and instance
ResetPosRot__Root(goRoot);
ResetPosRot__Inst(goInst);

The root is put in a list so that the toggle button will only affect the rendered elements. The list is handled using a separate method so that the check for rendered models will not run every time the button is pressed.

// put in list
listRend.Add(goRoot);

Nothing complicated here, just a zeroed out quaternion and a Vector3 with the intended height the model should be at.

// reset to defaults
go.transform.localPosition = new Vector3(0.0f, 0.35f, 0.0f);
go.transform.localRotation = new Quaternion(0.0f, 0.0f, 0.0f, 1.0f);

This also has a zeroed out quaternion and a slightly different Vector3 with the intended position the model should be at.

// reset to defaults
go.transform.localPosition = new Vector3(0.0f, 0.35f, -0.2f);
go.transform.localRotation = new Quaternion(0.0f, 0.0f, 0.0f, 1.0f);

The rendered models have been saved in a list previously, thus removing the need for a second check.

foreach (GameObject goRoot in listRend) {
	...
}

The state of the button describes the next action the app takes.

if (toggleMirrorImage.isOn) {
	...
}

If the button is set to its on state, the instance will be enabled, the root's position reset, and the touch control scripts will be transferred from the root to the instance.

// set instance to active
goInst.SetActive(true);

// reset root
ResetPosRot__Root(goRoot);

// remove scripts from root
if (goRoot.GetComponent<Lean.Touch.LeanDragTranslateEdited>() != null) {
	Destroy(goRoot.GetComponent<Lean.Touch.LeanDragTranslateEdited>());
}

if (goRoot.GetComponent<Lean.Touch.LeanTwistRotateAxis>() != null) {
	Destroy(goRoot.GetComponent<Lean.Touch.LeanTwistRotateAxis>());
}

// add scripts to instance
if (goInst.GetComponent<Lean.Touch.LeanDragTranslateEdited>() == null) {
	goInst.AddComponent<Lean.Touch.LeanDragTranslateEdited>();
}

if (goInst.GetComponent<Lean.Touch.LeanTwistRotateAxis>() == null) {
	goInst.AddComponent<Lean.Touch.LeanTwistRotateAxis>();
}

If the button is set to its off state, the instance will be disabled, the instance's position reset, and the touch control scripts will be transferred from the instance back to the root.

// set instance to inactive
goInst.SetActive(false);

// reset instance
ResetPosRot__Inst(goInst);

// remove scripts from instance
if (goInst.GetComponent<Lean.Touch.LeanDragTranslateEdited>() != null) {
	Destroy(goInst.GetComponent<Lean.Touch.LeanDragTranslateEdited>());
}

if (goInst.GetComponent<Lean.Touch.LeanTwistRotateAxis>() != null) {
	Destroy(goInst.GetComponent<Lean.Touch.LeanTwistRotateAxis>());
}

// add scripts to root
if (goRoot.GetComponent<Lean.Touch.LeanDragTranslateEdited>() == null) {
	goRoot.AddComponent<Lean.Touch.LeanDragTranslateEdited>();
}

if (goRoot.GetComponent<Lean.Touch.LeanTwistRotateAxis>() == null) {
	goRoot.AddComponent<Lean.Touch.LeanTwistRotateAxis>();
}

Hydrogen is usually depicted with smaller spheres, thus this portion of XPresso reduces the size of the sphere if hydrogen is selected as the element.

This portion of XPresso simply converts the numerical output from the dropdown list into names and textures for the elements. The elements can be set by selecting what CPK type it should be in the user data. The detail increases or decreases the number of polygons if lag is an issue.

The settings above produces a result that looks like this in the hierarchy. Note the element name and black texture, which were set using the dropdown list.

• Object Hierarchy
  • Oxygen
    • Hydrogen
      • Chemical Bond
    • Hydrogen
      • Chemical Bond

The position solver does some vector math to get the position between the two elements as shown in the image below. It takes two position inputs and returns a position between them.

v₁ and v₂ refers to the first and second element in the hierarchy respectively.
v₃ is depicted with two arrows, showing the addition of the halves of v₁ and v₂

The rotation solver is using a preset target node which points the chemical bond at a target. It takes two object inputs and returns a vector pointing the object at the target.

The length solver uses a preset distance node to calculate the distance between the two atoms. Removing both the atoms’ radii from the calculated distance will ensure that the chemical bond is tangent to the surface of both the atoms. It takes two object inputs and two radius inputs, and returns the length between the nearest points on two spheres.

The cutoff range prevents bonds from being visible if they are stretched past its limit. It also makes the bond look thinner when it is stretched out as a visual indication.

The detail solver sets the segments at a constant size so that the bond will always have the same level of detail no matter the length.

The adjustment solver accounts for the difference in size of the hydrogen atom as compared to the other elements. It is designed to work with any custom atom size if need be.

The adaptive size solver and alignment solver works in tandem to place the taper and bulge effects relative to the bond. This gives the bonds a little more detail instead of settling for a plain cylinder.

The rig uses a parallel camera to flatten the 3D models into a 2D image.

From left to right: parallel camera, template logo/icon, shaded icon border, image code randomizer, inner border, outer border.

The seeds are limited to 1 through 10000. This render shows seed 0, which is designated as a test/showcase code and is unobtainable unless the userdata or the XPresso code is edited.