decide on value for 'randomOffset' query parameter

[pixelzoom]

Molecules in game boxes are arranged in a grid. The 'randomOffset' query parameter controls how much the molecules are randomly offset from the center of cells in the grid. Higher values make the layout look less grid-like, but result in more overlap of molecules (a trade-off). The default value is 8. A value of zero will center every molecule in its cell. Value that are too high will result in undesirable behavior (overlapping molecules, molecules outside the boxes,...)

@ycarpenterphet please let me know if you're OK with the default value (8) or whether you want to change this to something else.

Once we've settled on a value for this, delete the query parameter and associated code. Put the default value in the options for RandomBox.js.

[ycarpenterphet]

@pixelzoom, is the default value (8) what is currently being used in dev13?

[pixelzoom]

Yes, 1.0.0-dev.13 uses randomOffset=8.

[ycarpenterphet]

This is fine to leave as is

[pixelzoom]

Query parameter deleted, default kept at 8, closing.

[ycarpenterphet]

Question - I hadn't seen this occur in any interviews (or in previous testing of the sim), but, is it common for molecule overlap occur with randomOffset=8, as shown below (dev 15)?

This was the first time I had seen that happen, so I wanted to check if that's something we can expect normally with randomOffset=8.

[pixelzoom]

Yes, you can expect some overlap with any non-zero value of randomOffset. In addition to the value of randomOffset, whether there's overlap depends on the reaction - specifically, how many products it has, and how how big the molecules are.

Each box has an invisible grid, used to place the molecules. The number of cells in the grid is computed such that there are enough cells for the maximum number of objects that could be in the box. The maximum quantity of each molecule type is 8. Here's the grid size for the various reaction types that we have: 2 reactants (2x8=16 molecules) -> 4x4 grid 1 product & 2 leftovers (3x8=24 molecules) -> 5x5 grid 2 products & 2 leftovers (4x8=32 molecules) -> 6x6 grid

The box dimensions are 330x240, but we need to subtract a 5-pixel margin, and an addition 8-pixel border for the randomOffset. So we have 304x214 of usable space. The size of the cells depends on the grid size. Here's that breakdown: 4x4 grid -> 76x53 cell size 5x5 grid -> 60x42 cell size 6x6 grid -> 50x35 cell size

The example you've shown is probably the "After" state of 1C₂H₄ + 3O₂ -> 2CO₂ + 2H₂O. That's a 6x6 grid, so 50x35 cell size. The sizes of the molecules in this equation are: C₂H₆ -> 41x32 O₂ -> 33x19 CO₂ -> 47x20 H₂O -> 32x20

You can see that if you offset these by 8 units (randomOffset value) within a 50x35 cell, it is quite likely that C₂H₄ and CO₂ will overlap, especially if adjacent cells are offset in opposite directions (which appears to be the case at the top center of your screenshot).

[ycarpenterphet]

That's a very helpful explanation, thank you.

[ycarpenterphet]

I don't think the occasional overlap is a dealbreaker, but let me think about that a bit more before I close this issue.

[pixelzoom]

Some more information to think about... The largest molecule is PCl₅, 46x48. Run the sim with "?dev&playAll", select level 1, and it's the first reaction in the Game. It occurs in a 5x5 grid, cell size 60x42. The molecule is taller than the cells, so it's going to (possibly) overlap even when randomOffset=0. If you want no overlap, then we need to scale down the molecules (which I don't think we want to do) or make the boxes significantly larger (which doesn't seem possible).

It also sounds like perhaps you didn't evaluate the 2-products cases, with 8 of each molecule. Run the sim with "?dev&playAll", then play level 3. If you set all spinners to 8, you'll see overlap in many cases. For example, see screenshot below. That's why I described this as a tradeoff - you'll either have overlap or something that looks like a very regular grid.

[pixelzoom]

@ycarpenterphet Btw... Let me know if you want the randomOffset query parameter restored so that you can experiment further.

[ycarpenterphet]

After further testing, I think that leaving it as randomOffset = 8 is fine.

Just for reference, I played around a bit more with the Java sim, and it looks like the overlap is often even more substantial (and the molecules more difficult to tell apart).

I also looked at some of the worst case scenarios (8 of each, 2 pdts, 2 leftovers), and even these don't often have so much overlap that it is difficult to tell the molecules apart.

Also, this 'worst case' scenario occurs very rarely, since students almost never (even the ones really struggling with the concept) max out all of the molecules at once.

As you mentioned, PCl5 is large enough to overlap regardless of the offset parameter, which can't be fixed except by substantially decreasing the molecule sizes, which I think is less than ideal.

So, I am ok with this tradeoff of occasional overlap (which is usually not obscuring key information) to get this slightly less regular looking grid, especially since the information is also represented in an alternate format (numbers) below the reaction box.

[pixelzoom]

Cool, thanks for the detailed comment.