Yeah :( To be honest, I think we got a bit overeager about this one, since none of us on the project are chemistry experts. At least for the front page, we should probably replace that with a different diagram from our registry.
I think this is actually a fairly deep issue with our approach where we try to express everything in terms of numerical optimization, pairwise energies on shapes, etc. Especially since Style is not a Turing-complete programming language and also doesn't support calling out to existing libraries written in, e.g., JavaScript, there isn't a way to do actually-correct layout of the caffeine molecule, so instead we do the "lazy" thing and just try to make the atoms not overlap. To anyone who actually knows what a caffeine molecule looks like, obviously this looks ridiculous.
In the same vein as the other HN comment about separation of substance and style, I think we could do a much better job on chemistry diagrams by actually placing the atoms where they should be in 3D space, then projecting onto a 2D SVG diagram. To illustrate what I mean, consider this other diagram in our registry, showing a methane combustion reaction: https://penrose.cs.cmu.edu/try/?examples=structural-formula/...
The combustion diagram does look nicer, since it doesn't contain complex overlaps of bonds. However, it's still physically inaccurate. The carbon dioxide molecule should be linear, for example. Molecules have atoms arranged following very specific rules arising from quantum mechanics and the theory of molecular orbitals, you can't solve this with a graph optimization algorithm.
Could you clarify what you mean when you say "it's still physically inaccurate" and "The carbon dioxide molecule should be linear"? In my post I was specifically contrasting the diagram in the Penrose registry (in which the carbon dioxide molecule is incorrect as you point out) with another version of that diagram which I generated using Python (in which the carbon dioxide molecule is correct). Did you only look at the one and not the other, perhaps?
I think this is actually a fairly deep issue with our approach where we try to express everything in terms of numerical optimization, pairwise energies on shapes, etc. Especially since Style is not a Turing-complete programming language and also doesn't support calling out to existing libraries written in, e.g., JavaScript, there isn't a way to do actually-correct layout of the caffeine molecule, so instead we do the "lazy" thing and just try to make the atoms not overlap. To anyone who actually knows what a caffeine molecule looks like, obviously this looks ridiculous.
In the same vein as the other HN comment about separation of substance and style, I think we could do a much better job on chemistry diagrams by actually placing the atoms where they should be in 3D space, then projecting onto a 2D SVG diagram. To illustrate what I mean, consider this other diagram in our registry, showing a methane combustion reaction: https://penrose.cs.cmu.edu/try/?examples=structural-formula/...
As you can see on that example, the methane molecule looks weird because all the bonds are drawn "below" the carbon atom, and the carbon dioxide molecule is all bent out of shape. In contrast, by just writing a bit of Python code, you can make the diagram both easier to specify https://github.com/samestep/diagrams/blob/3d7fe855b3a9634d17... (compared to the 70-line Penrose Substance file) and also more correct: https://raw.githubusercontent.com/samestep/diagrams/2c8fb334...
I think that a general-purpose text-based diagramming tool needs to support a variety of different layout engines.